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

Massive improvement, looks much better! I don’t have to scroll all the way back up to navigate when working on a document. It’s a 5/5 on ease of use.

——

User in life sciences manufacturing

Massive improvement, looks much better! I don’t have to scroll all the way back up to navigate when working on a document. It’s a 5/5 on ease of use.

——

User in life sciences manufacturing

Massive improvement, looks much better! I don’t have to scroll all the way back up to navigate when working on a document. It’s a 5/5 on ease of use.

——

User in life sciences manufacturing

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.

It’s nice to have contrast! The previous version was all white, the blue adds some nice contrast. It feels very easy to navigate, just like most softwares nowadays.

——

User in major Irish university

It’s nice to have contrast! The previous version was all white, the blue adds some nice contrast. It feels very easy to navigate, just like most softwares nowadays.

——

User in major Irish university

It’s nice to have contrast! The previous version was all white, the blue adds some nice contrast. It feels very easy to navigate, just like most softwares nowadays.

——

User in major Irish university

Refreshed navigation overview: user testing results indicated that 100% of participants preferred the contrasting dark mode over light mode, as it provided clear visual separation between the navigation and the rest of the UI.

Refreshed navigation overview: user testing results indicated that 100% of participants preferred the contrasting dark mode over light mode, as it provided clear visual separation between the navigation and the rest of the UI.

Interactions: clear and accessible feedback was achieved by using contrasting colors that distinctly indicate active, hover, and resting states.

Interactions: clear and accessible feedback was achieved by using contrasting colors that distinctly indicate active, hover, and resting states.

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.

Would you like to learn more about this project?

Would you like to learn more about this project?

© 2025 Laura Ungrad

Find me on

© 2025 Laura Ungrad

Find me on

© 2025 Laura Ungrad

Find me on