Roche QMS

How might we design an intuitive, seamless and collaborative quality management experience for Roche users?

About the project

At Roche, management performs quality reviews periodically to ensure all processes, products, and services meet the defined standards. However, the tool that they used, wasn’t permitting them to conduct the reviews seamlessly and intuitively, affecting the team’s work hours as a result. I led the discovery and design phases, and designed a new experience for the users.

Role

Lead designer

Duration

Nov 2024 - present

Impact

-Led a successful discovery and conception phase which paved the way for the project to get approval from key stakeholders

-Contributed to defining milestones for project implementation for MVP

Discovery sessions

The first step in this project was to engage with the internal stakeholders and users of the product. I worked to understand their business objectives and any pain points they have.

To facilitate this, I grouped them based on different user segments and roles.

Event manager

Event SME

Event admin

Metrics admin

During these sessions, I conducted contextual interviews with 7 users, representing their user roles. Our goal was to understand how users perform their tasks with the current product and explore the reasons behind their behavior. As a result of these sessions, I gathered valuable insights into processes that were perceived as too long and complicated, as well as identified interfaces that users found difficult to navigate.

Usability findings

1. Underutilized and un-intuitive homepage

2. Inconsistent positions and unclear information hierarchy

3. Functionality gaps, Inefficient scrolls, and excessive white space

4. Cluttered and unstructured page increases cognitive load

  • The homepage feels less intuitive with just one button that directs users to another home page.

  • The management review CTA is misleading. Clicking on it brings users to other lists of CTAs.

  • The underutilized space, occupied by a blurred image, doesn’t add significant value.

  • Inconsistent placements of CTA buttons throughout the interface.

  • Unclear sense of information hierarchy, making it difficult for users to prioritize key actions.

  • Lack of clarity regarding the open task list.

  • The content editor doesn’t expand vertically as users add more information, forcing them to scroll inefficiently.

  • The excessive white space makes the interface appear incomplete and feel underwhelming.

  • The content editor lacks page border indicators and pagination, forcing users to repeatedly adjust their content and switching to slideshow view.

  • The overview page feels cluttered as the elements are unorganized consistently.

  • This lack of structure could increase cognitive load.

  • Insufficient information on this page to summarize the overall management review step.

Design decisions

Through insights gathered during discovery sessions and usability assessments, I summarize that users require a product that not only supports them in completing their tasks efficiently but also offers an intuitive and easy-to-understand interface. By prioritizing clarity, streamlined workflows, and simplicity in the design, I wanted to ensure that the product addresses the user pain points while enhancing overall usability.

1. Make key information and important CTAs more accessible

3. Make assessment clearer and easier

4. Enhance clarity by introducing preview layout

Users struggled with the old interface due to key information being scattered across multiple pages.

I analyzed users' most frequent tasks and reorganized the information into a clear hierarchy, with a high-level overview followed by detailed views.

Now, users can easily see the number of outstanding activities at a glance and click on each menu to access detailed information.

2. Establish simplicity and flexibility in setup

Users found the setup process overly complicated, often having to recreate similar events repeatedly.

To address this, I streamlined the process with a more standardized and user-friendly design.

Now, users can easily create events by copying from existing templates, making the process much easier and more efficient.

Users found the old assessment interface confusing and lacking a comprehensive view of the overall ratings.

To resolve this, I introduced a tabular layout that consolidates all metric ratings into a single, easily accessible view.

This update allows users to quickly grasp the full picture of the ratings at a glance.

Users felt that the overview page was unorganized and failed to provide valuable insights.

To address this, I redesigned the page with a more structured layout, improving readability and reducing cognitive load.

This redesign helps users to absorb key information, whilst minimizing the time spent navigating this page.

Design system

This project uses the Outsystems design library, with customized graphical elements tailored to align with the client's unique branding guidelines. By adapting the library’s components, I ensured a cohesive design system that not only reflects the brand’s identity but also maintains a consistent experience across the platform.