Visual Redesign for Quality Management Training Module

Quality Management System

My Role

Principal Product Designer

Team Composition

1 Principal Product Designer, 1 Product Manager

Skills and Tools

InVision, Sketch, Notion, Miro, Facilitation, User testing, Card sorting, Prototyping, Interaction Design, Accessibility

Example of the legacy dashboard

Example of the legacy dashboard

Visual Redesign for Quality Management Training Module

Project Brief

This client was in the quality management space for pharmaceuticals and life sciences. The primary module I was to work on was their training module which was designed for employees to periodically train on items to prove proficiency.  They wanted to adapt their product to fit the way that training managers actually create training plans and to revamp their UI visually.

The Problem

The problem was that with their current system, people who created training plans would first have to create groups and then add trainee items to the group. This was an exhaustive way of planning the training plans. Ideally, trainees would be assigned to a category which would already contain the necessary training items for a particular profile of people.

The Goals

  1. Restructure to process of creating trainings to be more efficient and improve usability based on user’s mental model

  2. Develop a style guide and modernize components based on company brand and principles

  3. Improve overall usability and enhance interaction design

  4. Create a user research plan and assess usability through qualitative research


Design strategy, user journey mapping, wireframing, cross functional collaboration, user research, usability testing


InVision, Sketch, Notion, Miro


Team Alignment

I worked with the project manager to align on how we would work together which included identifying a design process, planning lean onboarding and planning a meeting cadence.

Prior research collected from how customers utilized the app suggested that typically companies create groups for trainees and then add items for the trainees to train on. Due to this, the decision was made to reconstruct the current information architecture to include the creation of profiles for trainees. These profiles would then be added to categories which contain a pre-developed training plan. Categories would be the parent of profiles and trainees would belong to profiles. Our hypothesis was that this pre-configuration would make it easier to add trainees to a plan and reduce the effort required to manage groups.

Understanding the Core of the Product

This was the user journey we created to help do the following:

1) Understand the journey for admins who are responsible for creating training plans

2) Identify epics and features

We then created feature level stories to organize our design discussions.


In order to effectively understand user goals, we mapped out the different types of user’s and their motivations. This is more accurately referred to as user archetypes, because we chose to focus more on user behaviors vs demographic information.

Positive quotes from users during testing

Quotes from users

Usability Test

Our goal was to validate our assumptions on the new information architecture. We wanted to interview customers to understand their current training management process and test the usability of our designs using a clickable prototype. In order to do this, we first asked the following behavioral questions: 

We then created a script where we walked them through a series of scenarios and tasks which they were to complete. We spoke with 12 users across 8 companies in a total of 3 sessions. I decided to utilize this spreadsheet to capture our findings. 

 Our findings concluded that customers found the new workflows to be much more comprehensive and aligned with the way that they develop training plans.  We were also able to validate the information that training managers wanted to see. Some of our key findings that we decided to take action on were: 

  1. Users wanted to ability to duplicate profiles and categories due to the fact that some of them may need to apply to more than one subset of users

  2. Users wanted the ability to set retraining automatically since most trainings occur for a set interval 

  3. Users wanted the ability to collect historical compliance on the profiles and categories to assess performance and metrics



The client desired to utilize their prior theme colors and some components from a previous design style guide. Their primary design principle was simplicity and ease.

Category Mockups

Profile mockups

Dashboards mockups

Tests and Events mockups

Outcomes and Successes

  • Introduced new Agile design process and reduced time to market my 30%

  • Established research plan which included identifying customers, managing communications, creating usability script questions, tracking findings and synthesizing results

  • Spearheaded the adoption of a new accessible, well-organized, and regularly updated design style guide which reflected the latest design standards

Final Design Artifacts and Deliverables

  • Groomed 39 user stories

  • Produced 294 wireframes

  • Created 3 prototypes

  • Spoke to 12 users across 8 companies

  • Facilitated 17 user tests sessions externally

  • 60% of observations were actionable

Project Learnings

I was reminded of the importance of being able to articulate design decisions in an effort to advocate for improved usability. I also had to learn how to navigate keeping the project going during unexpected periods of absence from the client.