All-in-One Platform for Bio-Rad Systems

GROWTH STAGE

STRATEGY

RESEARCH

UI/UX

DESIGN SYSTEM

3D

Overview

At the start of the pandemic, I led a project with Bio-Rad, merging three ddpcr systems into one unified interface for the QX One and QX200 instruments. User feedback shaped the restructuring of workflows, new features, and 3D animations, defining the UI style for future Bio-Rad instruments.

Role

Solo Designer Leading UI/UX, Research & Project Management

Duration

6 months

Platforms

Desktop

Embedded

Touchscreen

Industries

B2B

Medtech

Biopharma

Academia

Clinical Diagnosics

Context

Client

Bio-Rad Laboratories
Life science research & diagnostics

Bio-Rad is a global leader in life science research and diagnostics, delivering solutions that empower researchers and clinicians, advancing healthcare and scientific discovery worldwide.

Client

Bio-Rad Laboratories
Life science research & diagnostics

Bio-Rad is a global leader in life science research and diagnostics, delivering solutions that empower researchers and clinicians, advancing healthcare and scientific discovery worldwide.

Client

Bio-Rad Laboratories
Life science research & diagnostics

Bio-Rad is a global leader in life science research and diagnostics, delivering solutions that empower researchers and clinicians, advancing healthcare and scientific discovery worldwide.

Team

Team

Team

Process

Process

Process

Challenges

Challenges

Challenges

Problem

Start

QX One: The 24" touchscreen software on the instrument controls plate setup and data, though rarely used for analysis.

QX Manager: Newer desktop software for data analysis and controlling the QX200 when connected to a computer.

Quantasoft: Older desktop software, preferred by many due to its simplicity.

QX One

QX Manager

Quantasoft

Start

QX One: The 24" touchscreen software on the instrument controls plate setup and data, though rarely used for analysis.

QX Manager: Newer desktop software for data analysis and controlling the QX200 when connected to a computer.

Quantasoft: Older desktop software, preferred by many due to its simplicity.

QX One

QX Manager

Quantasoft

Start

QX One: The 24" touchscreen software on the instrument controls plate setup and data, though rarely used for analysis.

QX Manager: Newer desktop software for data analysis and controlling the QX200 when connected to a computer.

Quantasoft: Older desktop software, preferred by many due to its simplicity.

QX One

QX Manager

Quantasoft

People

Stakeholders

“You can’t see any information in the wells. There are view issues.  The analysis data is too small and hard to use.

"The current interface is clunky, and could use some streamlining and modernization."

Customers

The QX Manager is clunky and bare bones.”

It takes a while to train people on this software. When well data has errors it’s not clear why. The interface isn't easy to use.

Users

Printing graphs is too difficult on QX Manager. I am not able to customize what data I want to show for my presentations.”

"When configuring a plate on QX Manager, the apply button doesn't always work."

People

Stakeholders

“You can’t see any information in the wells. There are view issues.  The analysis data is too small and hard to use.

"The current interface is clunky, and could use some streamlining and modernization."

Customers

The QX Manager is clunky and bare bones.”

It takes a while to train people on this software. When well data has errors it’s not clear why. The interface isn't easy to use.

Users

Printing graphs is too difficult on QX Manager. I am not able to customize what data I want to show for my presentations.”

"When configuring a plate on QX Manager, the apply button doesn't always work."

People

Stakeholders

“You can’t see any information in the wells. There are view issues.  The analysis data is too small and hard to use.

"The current interface is clunky, and could use some streamlining and modernization."

Customers

The QX Manager is clunky and bare bones.”

It takes a while to train people on this software. When well data has errors it’s not clear why. The interface isn't easy to use.

Users

Printing graphs is too difficult on QX Manager. I am not able to customize what data I want to show for my presentations.”

"When configuring a plate on QX Manager, the apply button doesn't always work."

Setting

Interface differences: QX ONE has an embedded touchscreen, while QX200 relies on a monitor, influencing how users interact with each device.

Lab vs desk usage: While the QX ONE and QX200 operate in the lab, detailed analysis and template creation are typically done at desks for greater precision and control.

Line of Sight Considerations

Location Considerations

Setting

Interface differences: QX ONE has an embedded touchscreen, while QX200 relies on a monitor, influencing how users interact with each device.

Lab vs desk usage: While the QX ONE and QX200 operate in the lab, detailed analysis and template creation are typically done at desks for greater precision and control.

Line of Sight Considerations

Location Considerations

Setting

Interface differences: QX ONE has an embedded touchscreen, while QX200 relies on a monitor, influencing how users interact with each device.

Lab vs desk usage: While the QX ONE and QX200 operate in the lab, detailed analysis and template creation are typically done at desks for greater precision and control.

Line of Sight Considerations

Location Considerations

Technology

QX One vs QX200 functionality: The QX One supports Droplet Generation, Thermal Cycling and Droplet Reading, while the QX200 handles only Droplet Reading.

5 vs 1 plates: The QX One supports up to five plates; the QX200 only supports one.

Plate scanning Issues: Unclear RFID scan placement on the QX One causes confusion and leads to new user frustration.

Technology

QX One vs QX200 functionality: The QX One supports Droplet Generation, Thermal Cycling and Droplet Reading, while the QX200 handles only Droplet Reading.

5 vs 1 plates: The QX One supports up to five plates; the QX200 only supports one.

Plate scanning Issues: Unclear RFID scan placement on the QX One causes confusion and leads to new user frustration.

Technology

QX One vs QX200 functionality: The QX One supports Droplet Generation, Thermal Cycling and Droplet Reading, while the QX200 handles only Droplet Reading.

5 vs 1 plates: The QX One supports up to five plates; the QX200 only supports one.

Plate scanning Issues: Unclear RFID scan placement on the QX One causes confusion and leads to new user frustration.

Define

Merging software systems

How might we combine the three legacy systems into a unified platform that works seamlessly across both QX One and QX200?

Plate setup flow

How might we improve plate set up flows so that they support the unique features of both the QX One and QX200 instruments?

Analysis flow

How might we provide analysis features that cater to diverse industry needs, like clinical diagnostics, biopharma and academia?

Define

Merging software systems

How might we combine the three legacy systems into a unified platform that works seamlessly across both QX One and QX200?

Plate setup flow

How might we improve plate set up flows so that they support the unique features of both the QX One and QX200 instruments?

Analysis flow

How might we provide analysis features that cater to diverse industry needs, like clinical diagnostics, biopharma and academia?

Define

Merging software systems

How might we combine the three legacy systems into a unified platform that works seamlessly across both QX One and QX200?

Plate setup flow

How might we improve plate set up flows so that they support the unique features of both the QX One and QX200 instruments?

Analysis flow

How might we provide analysis features that cater to diverse industry needs, like clinical diagnostics, biopharma and academia?

Discovery

Research

I led three sessions per week with the product owner, engineers and SMEs exploring workflows, pain points and improvements.

Pain points:
Unclear icons led to failed runs.
Wells showed limited or irrelevant data.
Complex graphs were difficult to read.

Opportunities:
Provide clear consumable level visuals.
Add well data visibility and color controls.
Include font size and full-screen controls.

Unclear Consumable Icons

Limited Well Data Visible

Unreadable Complex Graphs

Research

I led three sessions per week with the product owner, engineers and SMEs exploring workflows, pain points and improvements.

Pain points:
Unclear icons led to failed runs.
Wells showed limited or irrelevant data.
Complex graphs were difficult to read.

Opportunities:
Provide clear consumable level visuals.
Add well data visibility and color controls.
Include font size and full-screen controls.

Unclear Consumable Icons

Limited Well Data Visible

Unreadable Complex Graphs

Research

I led three sessions per week with the product owner, engineers and SMEs exploring workflows, pain points and improvements.

Pain points:
Unclear icons led to failed runs.
Wells showed limited or irrelevant data.
Complex graphs were difficult to read.

Opportunities:
Provide clear consumable level visuals.
Add well data visibility and color controls.
Include font size and full-screen controls.

Unclear Consumable Icons

Limited Well Data Visible

Unreadable Complex Graphs

Personas

Developing personas revealed varying user needs. Some required uniform well details, while others needed full plate customizability, highlighting the need for flexible Ul workflows.

Personas

Developing personas revealed varying user needs. Some required uniform well details, while others needed full plate customizability, highlighting the need for flexible Ul workflows.

Personas

Developing personas revealed varying user needs. Some required uniform well details, while others needed full plate customizability, highlighting the need for flexible Ul workflows.

Journeys

Journey mapping revealed issues like unsaved inputs and challenging horizontal scrolling on touchscreens, forcing users to complete complex tasks at their desks.

Journeys

Journey mapping revealed issues like unsaved inputs and challenging horizontal scrolling on touchscreens, forcing users to complete complex tasks at their desks.

Journeys

Journey mapping revealed issues like unsaved inputs and challenging horizontal scrolling on touchscreens, forcing users to complete complex tasks at their desks.

Avenues

How can we simplify plate setup?

Clear scanning prompts and plate loading verification would reduce set up errors and avoid incomplete or aborted runs.

How can we improve well selection?

Selectable well data and visually different data types would provide users relevant, useful data and improve analysis accuracy.

How can we maximize data visibility?

Allowing expandable plate and graph views and enabling toggling on/off well selection would improve usability of analysis flows.

Avenues

How can we simplify plate setup?

Clear scanning prompts and plate loading verification would reduce set up errors and avoid incomplete or aborted runs.

How can we improve well selection?

Selectable well data and visually different data types would provide users relevant, useful data and improve analysis accuracy.

How can we maximize data visibility?

Allowing expandable plate and graph views and enabling toggling on/off well selection would improve usability of analysis flows.

Avenues

How can we simplify plate setup?

Clear scanning prompts and plate loading verification would reduce set up errors and avoid incomplete or aborted runs.

How can we improve well selection?

Selectable well data and visually different data types would provide users relevant, useful data and improve analysis accuracy.

How can we maximize data visibility?

Allowing expandable plate and graph views and enabling toggling on/off well selection would improve usability of analysis flows.

Solution

Information Architecture

Using user research and feedback, I designed an IA that prioritized frequent tasks and integrated key features, with automatic detection of QX200 or QX One instruments.

Information Architecture

Using user research and feedback, I designed an IA that prioritized frequent tasks and integrated key features, with automatic detection of QX200 or QX One instruments.

Information Architecture

Using user research and feedback, I designed an IA that prioritized frequent tasks and integrated key features, with automatic detection of QX200 or QX One instruments.

Wireframes

Starting with wireframes, I explored 3D visuals to guide users, aligning the clean, minimalist design with QuantaSoft's simplicity and the team's vision for a clear, intuitive interface.

Wireframes

Starting with wireframes, I explored 3D visuals to guide users, aligning the clean, minimalist design with QuantaSoft's simplicity and the team's vision for a clear, intuitive interface.

Wireframes

Starting with wireframes, I explored 3D visuals to guide users, aligning the clean, minimalist design with QuantaSoft's simplicity and the team's vision for a clear, intuitive interface.

Design System

I created a design system for both desktop and touchscreen, defining colors, typography, and components. It was refined through prototyping, user testing, and feedback.

Design System

I created a design system for both desktop and touchscreen, defining colors, typography, and components. It was refined through prototyping, user testing, and feedback.

Design System

I created a design system for both desktop and touchscreen, defining colors, typography, and components. It was refined through prototyping, user testing, and feedback.

Prototypes

Prototyping potential user flows to test and refine concepts before finalizing designs.

QX One: Plate set up flow, used on the 24" touchscreen.

QX One: Plate data analysis, used on a monitor nearby.

QX 200: Sign in and add plate flow, on a connected monitor.

QXOne rendering with cut out for video

Prototypes

Prototyping potential user flows to test and refine concepts before finalizing designs.

QX One: Plate set up flow, used on the 24" touchscreen.

QX One: Plate data analysis, used on a monitor nearby.

QX 200: Sign in and add plate flow, on a connected monitor.

QXOne rendering with cut out for video

Prototypes

Prototyping potential user flows to test and refine concepts before finalizing designs.

QX One: Plate set up flow, used on the 24" touchscreen.

QX One: Plate data analysis, used on a monitor nearby.

QX 200: Sign in and add plate flow, on a connected monitor.

QXOne rendering with cut out for video

Final Designs

We prioritized key workflows like plate setup and analysis. Collaborating closely with the product owner, dev team, and SMEs, I refined designs based on their feedback.

QXOne rendering with cut out for video

Final Designs

We prioritized key workflows like plate setup and analysis. Collaborating closely with the product owner, dev team, and SMEs, I refined designs based on their feedback.

QXOne rendering with cut out for video

Final Designs

We prioritized key workflows like plate setup and analysis. Collaborating closely with the product owner, dev team, and SMEs, I refined designs based on their feedback.

QXOne rendering with cut out for video

Testing

Methods

Methods

Methods

Task 1: Plate Set Up

Task 1: Plate Set Up

Task 1: Plate Set Up

Task 2: Data Analysis

Task 2: Data Analysis

Task 2: Data Analysis

Outcomes

Results

Results

Results

Impact

Impact

Impact

Self-Reflection

Self-Reflection

Self-Reflection

More case studies

Truvian Blood Test Analyzer Interface

STRATEGY

UI/UX

ILLUSTRATION

Truvian Blood Test Analyzer Interface

UI/UX

More case studies

Truvian Blood Test Analyzer Interface

STRATEGY

UI/UX

ILLUSTRATION

Truvian Blood Test Analyzer Interface

UI/UX

More case studies

Truvian Blood Test Analyzer Interface

STRATEGY

RESEARCH

UI/UX

DESIGN SYSTEM

3D

Truvian Blood Test Analyzer Interface

STRATEGY

UI/UX

ILLUSTRATION

Truvian Blood Test Analyzer Interface

UI/UX

Truvian Blood Test Analyzer Interface

STRATEGY

UI/UX

ILLUSTRATION

Truvian Blood Test Analyzer Interface

UI/UX