Product Design & Branding
Reimagining Qualio’s product navigation
From cluttered chaos to intuitive design — the enhanced and modernised product navigation that boosted efficiency by 40% within a quarter
Project overview
Role
Product Design & Branding
Timeline
August-October 2024
Status
Fully deployed
Qualio, a quality management system for life science companies, faced significant usability challenges with its product navigation as the platform expanded and evolved. Prior to the redesign, the navigation was horizontally positioned at the top of the page, leading to a crowded interface as new features and modules were integrated.
The project goal was to reimagine the navigation system by creating a clear visual distinction between the navigation and content areas. This aimed to enhance search efficiency and reduce clutter. The new design improved the information hierarchy, boosted usability efficiency by 40%, and facilitated future product expansion. The results were both effective and immediately noticeable:
40%
increase in efficiency, reducing content search time
90%
of user satisfaction upon adoption
100%
opt-in rate within just three months of launch
The process
Gathering customer feedback
The first step involved gathering user feedback on the current version of the application. Many users reported spending excessive time searching for content and navigating through various modules.
Some of the key challenges were:
Difficulty navigating through settings since they were not centralised. User and organisation settings were separated.
The constant need to open menus to navigate through modules was daunting. Users expressed a desire for dropdown items to be visible at all times.
Notifications were located under the settings, while product updates were buried within the help menu, making harder to locate user actions and updates.
View of the old navigation: this project was part of an UI refresh undertaken simultaneously by other members of the product team.
The solution
Design, test, reiterate, repeat… and deliver!
Working in two-week sprints was essential for achieving fast and effective results. Involving customers from the early stages of discovery was crucial for validating concepts and reducing turnaround time.
The product team conducted user testing sessions with a closed beta group of approximately 10 customers to gather feedback and inform product design decisions. This approach facilitated faster design iterations and helped mitigate potential implementation issues, ultimately reducing engineering efforts during the delivery stage.
New navigation main takeaways:
Users love the contrasting colours between navigation elements and the rest of the UI, enjoying the overall modern look and feel.
Users believe that the addition of icons to the navigation is a significant visual enhancement, making it easier to identify items with minimal effort.
Users value the collapse and expand feature, as it maximizes workspace for content while ensuring that all menu items are visible at all times.
Collapsed view: users can collapse the navigation for a more minimal interface, allowing for additional screen space to work within the app.
Flyout menu: this menu is applied when the main navigation is collapsed and is triggered by a click to prevent interference with the user experience.
Settings menu: the flyout menu, primarily used when the navigation is collapsed, is also applied to settings to intentionally create a visual separation from the main navigation.