End-to-end product design

END-TO-END PRODUCT DESIGN FOR A NEW WEB APPLICATION

Overview

Overview

Executive Summary

Executive Summary

When Vault aimed to become an even bigger player in the clinical trial space, the industry was moving towards "decentralization" by putting the participants in the center. Given the novelty of this concept, it became a learning journey for the entire company.

Armed with extensive industry and user research, we defined a new product concept and won a critical business partnership with an industry leader. Our end users commented on the product as easy to use, modern, and user-friendly. The product was acquired by Science 37.

• Timeline: January 2022 - June 2022
• Role: Product Designer
• Multidisciplinary Team: 4 Product Managers, 1 UX researcher, 14 Engineer Teams (120 engineers)
• Other Main Stakeholders: Senior Managers of Product, Clinical Trial Medical Teams

When Vault aimed to become an even bigger player in the clinical trial space, the industry was moving towards "decentralization" by putting the participants in the center. Given the novelty of this concept, it became a learning journey for the entire company.

Armed with extensive industry and user research, we defined a new product concept and won a critical business partnership with an industry leader. Our end users commented on the product as easy to use, modern, and user-friendly. 

• Timeline: January 2022 - June 2022
• Role: Product Designer
• Multidisciplinary Team: 4 Product Managers, 1 UX researcher, 14 Engineer Teams (120 engineers)
• Other Main Stakeholders: Senior Managers of Product, Clinical Trial Medical Teams

Prototype

Prototype

My Role

My Role

As the first product designer of the project, I led the product design process from ideation to production for this brand new platform:

• Introduced a user-centric design process to a multidisciplinary team
• Defined a user-friendly product and visual direction
• Created a prototype for initial product ideas, which helped win a business partnership with an industry leader
• Led another designer and created a 0-1 Design System and Design Pattern Library for engineer and design teams

As the first product designer of the project, I led the product design process from ideation to production for this brand new platform:

Introduced a user-centric design process to a multidisciplinary team
Defined a user-friendly product and visual direction
Created a prototype for initial product ideas, which helped win a business partnership with an industry leader
Led another designer and created a 0-1 Design System and Design Pattern Library for engineer and design teams

Since the pandemic, the old “site-centered” mode was being challenged as participants wouldn’t be able to travel to the site. Instead, bringing the “site” to the participant (e.g. telehealth, in-home diagnostics) was gaining popularity industrial-wide.

The company had worked on several trials in the past, but decentralization was new. The product team was tasked with creating a product to support our internal Clinical Trial Team for the new “decentralized” mode.

In the past, our Clinical Trial Team relied on multiple applications to complete the job. Each role had different takes and requirements.

On top of that, each clinical trial was different, and the business's role might also be different.

Since the pandemic, the old “site-centered” mode was being challenged as participants wouldn’t be able to travel to the site. Instead, bringing the “site” to the participant (e.g. telehealth, in-home diagnostics) was gaining popularity industrial-wide.

The company had worked on several trials in the past, but decentralization was new. The product team was tasked with creating a product to support our internal Clinical Trial Team for the new “decentralized” mode.

In the past, our Clinical Trial Team relied on multiple applications to complete the job. Each role had different takes and requirements.

On top of that, each clinical trial was different, and the business's role might also be different.

Chapter 1: Gathering Insights About the Business Model, Product, and End Users to Identify Product Goals and Opportunities

Chapter 1: Gathering Insights About the Business Model, Product, and End Users to Identify Product Goals and Opportunities

1. Why Did The Industry Put Participants In The Center

1. Why Did The Industry Put Participants In The Center

We learned that clinical trials were a highly regulated industry. A trial typically took about 6 years to complete and included 3 required phases.

Recruiting and retention was the biggest challenge, given the general public often feared the safety of the trial and was unaware of the benefits (e.g. all medicines/vaccines must go through a trial to test their safety before releasing to the market).

By putting the participants in the center, the hybrid/decentralized model made the trials more accessible and increased the recruiting and retention rate. (research source: McKinsey)

We learned that clinical trials were a highly regulated industry. A trial typically took about 6 years to complete and included 3 required phases.

Recruiting and retention was the biggest challenge, given the general public often feared the safety of the trial and was unaware of the benefits (e.g. all medicines/vaccines must go through a trial to test their safety before releasing to the market).

By putting the participants in the center, the hybrid/decentralized model made the trials more accessible and increased the recruiting and retention rate. (research source: McKinsey)

2. What The End-users Need And Want

2. What The End-users Need And Want

To create a user-friendly product, we conducted user interviews with the internal clinical team to better understand our end users' needs. Through this, we identified 3 major user groups. (UX Researcher: Laraine Tumblin)

To create a user-friendly product, we conducted user interviews with the internal clinical team to better understand our end users' needs. Through this, we identified 3 major user groups. (UX Researcher: Laraine Tumblin)

1. Clinical Project Manager(CPM)

a

The Clinical Project Manager oversaw a trial's entire health and process. Their primary responsibility was ensuring things were running smoothly and meeting deadlines.

In the past, the CPMs used multiple tools to meet their needs and found it challenging to be on top of things.

Clinical Project Manager(CPM)

The Clinical Project Manager oversaw a trial's entire health and process. Their primary responsibility was ensuring things were running smoothly and meeting deadlines.

In the past, the CPMs used multiple tools to meet their needs and found it challenging to be on top of things.

2. Clinical Research Coordinator(CRC)

Clinical Research Coordinator(CRC)

The Clinical Research Coordinators served as an intermediator between participants and providers. They helped with participant recruitment, scheduling appointments, and ensuring the providers had the medical equipment handy before in-home visits.

The need to juggle multiple tools and manual data tracking had been a significant pain point.

The Clinical Research Coordinators served as an intermediator between participants and providers. They helped with participant recruitment, scheduling appointments, and ensuring the providers had the medical equipment handy before in-home visits.

The need to juggle multiple tools and manual data tracking had been a significant pain point.

3. Provider

Provider

Providers were Nurse Practitioners who performed the in-home visits. They helped to collect and ship samples (e.g. blood & stool) to labs. Another main task was documenting the visit in an Electronic Health Record System (EHR).

The EHR's unresponsiveness and other usability issues had made their work challenging.

Providers were Nurse Practitioners who performed the in-home visits. They helped to collect and ship samples (e.g. blood & stool) to labs. Another main task was documenting the visit in an Electronic Health Record System (EHR).

The EHR's unresponsiveness and other usability issues had made their work challenging.

3. How Existing Products Were Solving The Problem

3. How Existing Products Were Solving The Problem

To learn design patterns and, most importantly, to help identify product opportunities, I conducted design research on several traditional products our clinical trial teams used in previous companies. I looked at industry-leading traditional Clinical Trial Management Systems(CTMS) and new products. 

To learn design patterns and, most importantly, to help identify product opportunities, I conducted design research on several traditional products our clinical trial teams used in previous companies. I looked at industry-leading traditional Clinical Trial Management Systems(CTMS) and new products. 
 

1. Traditional companies had built multiple products, with each product focusing on a single part of the trial. 
2. Small companies mainly focused on providing general, super flexible tools at a much lower cost. 

The final approach aligned with the Design Strategy: Strengthen Brand Consistency and Clearer Visual Communication. While for users, the redesign is not too dramatic to embrace.  

1. Efficiency is the top priority for the product. 
2. The product would follow the protocol. 
3. There were a lot of common design patterns. 

The final approach aligned with the Design Strategy: Strengthen Brand Consistency and Clearer Visual Communication. While for users, the redesign is not too dramatic to embrace.  

4. Define The Product Goal

4. Define The Product Goal

Considering the company's resources and strength, we decided to leverage the power of the existing internal EHR for providers and focus on building a user-friendly clinical trial platform for Project Managers and Coordinators. Based on their needs and taking what we learned from research, we distilled the product vision for the MVP. 

Considering the company's resources and strength, we decided to leverage the power of the existing internal EHR for providers and focus on building a user-friendly clinical trial platform for Project Managers and Coordinators. Based on their needs and taking what we learned from research, we distilled the product vision for the MVP. 

1. Scheduling
2. Diagnostics fulfillment (lab ordering)
3. Protocol

1. Scheduling
2. Diagnostics fulfillment (lab ordering)
3. Protocol

Chapter 2: Validate Product Direction Through A Business Winning Prototype

Chapter 2: Validate Product Direction Through A Business Winning Prototype

1. Help Product Managers to Wireframe

1. Help Product Managers to Wireframe

2. Leverage The Power Of a New Design System

2. Leverage The Power Of a New Design System

1. I needed to rework the wireframes a bit as Product Managers were unfamiliar with design patterns.
   
2. I was on a one-woman design team at that point and only had 1 week to create 3 high-fidelity prototypes.
   
3. We recently made a new design system based on our current branding, which we hadn’t used yet.

Considering the constraints, I decided to put the new design system into use right at the beginning of the project and aimed to iterate the design system based on actual product needs. By doing that, I could put more time into rethinking the wireframes, speed up the process for high-fi design, and create prototypes within the time frame.

1. I needed to rework the wireframes a bit as Product Managers were unfamiliar with design patterns.
2. I was on a one-woman design team at that point and only had 1 week to create 3 high-fidelity prototypes.
3. We recently made a new design system based on our current branding (another case study work in progress), which we hadn’t used yet.

Considering the constraints, I decided to put the new design system into use right at the beginning of the project and aimed to iterate the design system based on actual product needs. By doing that, I could put more time into rethinking the wireframes, speed up the process for high-fi design, and create prototypes within the time frame.

3. Combined Familiarity with Innovative Ideas

3. Combined Familiarity with Innovative Ideas

Chapter 3: Creating a User-Approved MVP

Chapter 3: Creating a User-Approved MVP

1. Iterate the Prototype with End-users

1. Iterate the Prototype with End-users

Based on the positive feedback, we immediately moved to the production phase. As a startup company, speed is everything. But the demo ideas hadn’t been validated by end-users yet. We convinced the product team to go back to the end-users and validate assumptions before handing off the designs to engineers.

Based on the positive feedback, we immediately moved to the production phase. As a startup company, speed is everything. But the demo ideas hadn’t been validated by end-users yet. We convinced the product team to go back to the end-users and validate assumptions before handing off the designs to engineers.

The overall feedbacks were positive on product directions and primary functions. We learned that part of the functions could be more intuitive. I made a round of iterations based on users’ feedback, then presented the latest design to the product team to align the Product Managers on the same page.

At the same time, our UX Researcher was conducting usability tests to ensure there were no major usability issues. Then I made a final round iteration before finalizing the design.

The overall feedbacks were positive on product directions and primary functions. We learned that part of the functions could be more intuitive. I made a round of iterations based on users’ feedback, then presented the latest design to the product team to align the Product Managers on the same page.

At the same time, our UX Researcher was conducting usability tests to ensure there were no major usability issues. Then I made a final round iteration before finalizing the design.

2. Facilitating Design and Engineer Communication 

2. Facilitating Design and Engineer Communication

Considering multiple engineer teams were working on the product and utilizing the new design system simultaneously, I pointed out all the existing components from the design system and unique design patterns I created within each engineer handoff page. I also initiated a #design-system-react slack channel to facilitate communication across teams.

Considering multiple engineer teams were working on the product and utilizing the new design system simultaneously, I pointed out all the existing components from the design system and unique design patterns I created within each engineer handoff page. I also initiated a #design-system-react slack channel to facilitate communication across teams.

3. Users Love The Product

3. Users Love The Product

The general feedback from our end users was quite positive. Most of them could understand the product right away. Some mentioned it reminded them of the traditional clinical trial management tools but looks more modern and intuitive.

The general feedback from our end users was quite positive. Most of them could understand the product right away. Some mentioned it reminded them of the traditional clinical trial management tools but looks more modern and intuitive.

Next Steps

Next Steps

There are several steps I envision the team could focus on: 

There are several steps I envision the team could focus on:

1. From Design System to provide flexible SaaS service 

1. From Design System to provide flexible SaaS service 

One crucial reason for advocating and creating a design system from scratch was the vision of creating a library of components that could be easily assembled and create a user interface for a particular trial. To achieve this would require consistent creation and maintenance from designers and engineers.

One crucial reason for advocating and creating a design system from scratch was the vision of creating a library of components that could be easily assembled and create a user interface for a particular trial. To achieve this would require consistent creation and maintenance from designers and engineers.

2. Demo ideas to external users to figure out Product Market Fit

2. Demo ideas to external users to figure out Product Market Fit

Given that the company's role in a trial varies, it imposed significant challenges on the product to determine the essential functions to build first. We could rely on past strengths and consistently demo new ideas to test the market.

Given that the company's role in a trial varies, it imposed significant challenges on the product to determine the essential functions to build first. We could rely on past strengths and consistently demo new ideas to test the market.

3. Data tracking for participant page

3. Data tracking for participant page

I had the idea to create a “quick action bar” for the participant page. The current participant page gathered all the information related to a participant. A potential downside was that it would take longer for the users to find the information as data accumulates.

By tracking data at the backend, we could figure out what were the most used functions and create a quick entry point for these functions.

I had the idea to create a “quick action bar” for the participant page. The current participant page gathered all the information related to a participant. A potential downside was that it would take longer for the users to find the information as data accumulates.

By tracking data at the backend, we could figure out what were the most used functions and create a quick entry point for these functions.

Learnings

Learnings

1. Built trust through transparency and brought everyone into the design process

1. Built trust through transparency and brought everyone into the design process

Product design was a team sport. I saw myself as a product and all the stakeholders as my end-users. My design file was open to anyone who wanted to have a peek. Through consistently seeking feedback and regarding every communication as a brainstorming session, I could help my coworkers understand the rationals behind the design and level them up on design methodology.

Product design was a team sport. I saw myself as a product and all the stakeholders as my end-users. My design file was open to anyone who wanted to have a peek. Through consistently seeking feedback and regarding every communication as a brainstorming session, I could help my coworkers understand the rationals behind the design and level them up on design methodology.

2. Show instead of tell

2. Show instead of tell

Half of a product designer’s job was to help people understand the value of UX and design. Instead of telling people the benefits of it, I found it particularly helpful to show the work. For example, when I first joined the company, I showed my UX research to the SVP, and she immediately realized the value of it and hired the company’s first UX Researcher.

Half of a product designer’s job was to help people understand the value of UX and design. Instead of telling people the benefits of it, I found it particularly helpful to show the work. For example, when I first joined the company, I showed my UX research to the SVP, and she immediately realized the value of it and hired the company’s first UX Researcher.

3. Iteration over perfection

3. Iteration over perfection

Since I genuinely care about the end quality of the product, I needed to consistently battle with my inner perfectionist, and I learned to look at the outcome from a business angle. It’s crucial to balance the business and users’ needs. Ultimately, the goal was to create a polished, user-friendly product that could help the company generate income.

Since I genuinely care about the end quality of the product, I needed to consistently battle with my inner perfectionist, and I learned to look at the outcome from a business angle. It’s crucial to balance the business and users’ needs. Ultimately, the goal was to create a polished, user-friendly product that could help the company generate income.

Browse More Projects

Browse More Projects