The Product Catalogue and the Inventory List were intricately linked and contained a significant amount of content. Balancing their display on the screen without overwhelming the user was a challenge.
To tackle this, I designed the Product Catalogue as interactive cards, leveraging their different states to maximise screen space utilisation. The Inventory List, a secondary component, remains hidden ("Nested") behind the card and is revealed when the user hovers over it. This approach not only created a cleaner hierarchy but also provided a seamless user experience.
Nesting technique - Interactive Card
Final Design
The Taxonomy Mapping uncovered an important insight. It became evident that there was a discrepancy between the technical terms used by the development team and the more user-friendly terms used by the customer servicing team. This internal inconsistency led to miscommunication and later more confusion, as users encountered different names for the same function across various screens.
My information architecture, developed after the mapping process, successfully resolved the confusion and brought alignment to the team. By visualising a clearer hierarchy, we were able to enhance the design of the panel and ensure that information is properly organised and easily understandable.
To address the naming inconsistency and establish a clear information hierarchy, I conducted an extensive Taxonomy Mapping exercise for the backend system.
*Taxonomy Mapping is a valuable UX design technique used to categorise and label content, enabling the organisation of information into logical groups.
Clarifying the Taxonomy for better navigation
Taxonomy Mapping
I sketched out low-fidelity wireframes to visualise and gather feedback on my design concept. These rough design representations proved to be effective in user testing. Not only did the CEO at Rentrax and the product lead approve the design, but they also provided valuable insights regarding potential technical challenges to consider. This validation process played a crucial role in establishing a strong foundation for my final design.
Sketching out the design decision for low-fidelity user testing
The next step was redesigning the screen layout to reflect the established hierarchy. Instead of scattering the entire screen with every bit of information, I implemented a proper "Nesting" approach that involved placing interface elements within each other to create a clear hierarchy.
By displaying only the primary functions, content, and features on the surface level, and hosting or hiding secondary elements on the second level, the screen became cleaner and more streamlined. Users were able to navigate through a simplified and guided experience, focusing only on the necessary functions they needed at any given time.
Leverage “Nesting” to create a hierarchy
Design Concept & Testing
TOOLS
Figma, Miro
DURATION
6 Months
MY ROLE
UX Design, UI Design,
Taxonomy mapping
Rentrax - SaaS Platform UX Design
Rentrax is a leading rental management company in Vancouver. They offer cloud-based software that improves sales, inventory management and more. Despite its strengths, the complex structure makes navigation difficult. A redesign for simplicity is required.
CLICKS PER TASK (Reduced)
58%
ERROR RATE (Decreased)
62%
In half-year time, my robust UX design work mainly accomplished two things:
-
I created a comprehensive Taxonomy Mapping which helped re-organise extensive backend information into a hierarchical structure, facilitating seamless navigation;
-
I re-designed the dashboard leveraging the clearer hierarchy and massively reduced the “Clicks-per-Task”.
A 10-second summary in case you're in a hurry
The Problem: It's challenging to present a large amount of information on screen without making the navigation overwhelming.
Design Brief - The Challenge
Problem Statement
See other projects
Shoot me a message on LinkedIn or Email me at info@hello-chen.com
Q: What are the findings from the UX Audit?
-
There was an inconsistency regarding the naming of functions at different stages of the user flow, which caused confusion;
-
Every piece of information, primary or secondary, was displayed at the surface level, resulting in an overwhelming screen experience.
I initiated the UX research by conducting a comprehensive UX audit of the client's existing operational panel. The objective was to assess the usability, accessibility, and overall effectiveness of the previous design. The audit spanned two weeks, as it presented complexities and lacked clear navigation, resulting in user confusion.
UX Audit of the old dashboard
UX Research
The other challenge was to link Products with their Attributes (similar to tags). Each product can have up to 40 tags and sub-tags, making it impossible to display them all on the same screen.
My solution was designing a sliding drawer extending from the right side of the screen to host all the Attributes of any selected Product. The design successfully reduced the cognitive load on the user by allowing them to easily call out and retract the drawer only as needed.
This solution was one of the most well-received by the team and was believed to greatly enhance the user experience.