Enhancing Usability in Molarray Medical Device

Molarray is a biotech company specializing in liquid handling systems for diagnostic testing and research. As the sole designer, I led the design of a healthcare application interface for molecular diagnosis products and digital screens, designed an operational dashboard to simplify user flow, and conducted user research through collaboration with stakeholders.

Molarray is a biotech company specializing in liquid handling systems for diagnostic testing and research. As the sole designer, I led the design of a healthcare application interface for molecular diagnosis products and digital screens, designed an operational dashboard to simplify user flow, and conducted user research through collaboration with stakeholders.

Molarray is a biotech company specializing in liquid handling systems for diagnostic testing and research. As the sole designer, I led the design of a healthcare application interface for molecular diagnosis products and digital screens, designed an operational dashboard to simplify user flow, and conducted user research through collaboration with stakeholders.

Image of an iPhone lying on a table
Image of an iPhone lying on a table
Image of an iPhone lying on a table

Industry

Industry

Healthcare, IoT

Timeline

Timeline

2022

Team

Team

1 PM, 1 Designer, 10+ Developer

Challenge

Challenge

Challenge

Molarray is a biotech company specializing in liquid handling systems for diagnostic testing and research. As the sole designer, I led the design of a healthcare application interface for molecular diagnosis products and digital screens, designed an operational dashboard to simplify user flow, and conducted user research through collaboration with stakeholders.

Results

Results

Results

The redesigned app features a clean, clutter-free interface, making it easier for users to navigate and access essential features.

The improved onboarding process resulted in a 35% increase in new user adoption rates.

The addition of personalization and customization options enhanced user engagement, leading to a 25% increase in user retention rates.

Problem Statement

Early in the project, through in-depth interviews with team members and founders, we discovered a major issue: the onboarding experience was poor. The existing process was lengthy, redundant, and the information was not conveyed intuitively, causing confusion during liquid handling experiments. To address this, we decided to fundamentally rework the workflow, simplify the steps, and enhance the self-service onboarding experience. Within four months of launching the redesigned product and onboarding process, we achieved a +45% increase in our user base and session count.

Stakeholder Interviews and Team Feedback

As the sole designer, I began by gathering insights through interviews with internal team members, founders, and key customers. The consensus was clear:

  • The current onboarding process was cumbersome and prone to errors.

  • The experimental setup phase was redundant and distracting.

  • The diverse needs of different user groups (large institutions vs. individual labs) were not being met.

Key Insights

Aligning Expectations and Needs:

Listening to Stakeholders: Clearly define the expectations of laboratory technicians, researchers, and management regarding system functionality.

  • Prioritization: Focus on optimizing the onboarding process, experimental setup, and data management.

User Research and Persona Development:

  • Primary Users: Laboratories and diagnostic centers.

  • Primary Clients : Laboratory technicians (over 70%), who need to set up and run experiments quickly, safely, and efficiently.

  • User Pain Points:

    • Lengthy, error-prone processes.

    • Complex pre-experiment preparations.

    • Occasional mid-experiment stoppages forcing a complete restart.

User Journey and Process Analysis:

Through user journey mapping and process analysis, we identified that technicians encountered the most errors during the experimental setup and operation phases. In contrast, login and sample disposal stages were relatively smooth, indicating that the core issues were concentrated in the setup and data handling stages.

Prioritize the Work

Rebuilding the workflow to optimize efficiency

Revamping the setup instructions to ensure ease of useImproving the customer's experimental setup experience by publishing a user guide and providing intuitive templates

Adding a machine operation monitoring screen to enhance system performanceRefining the data dashboard and presenting clear results for easy interpretation.

Design Goal

After the interview with all the stakeholders, we determined that the main design goal for us is to improve the usability of use of the liquid handling system and increase the efficiency of the system by reducing the time it takes for users to complete tasks. Below are few matrix we used to measure our design success matrix.

Usability

task completion time, error rate, user satisfaction scores

Efficiency

Measure the efficiency of the system by tracking the time it takes for users to complete tasks

Design Process

Re-Build Workflow

To enhance the design, my initial step involved gaining a comprehensive understanding of the current system's workflow.We restructured the Information Architecture, reorganizing the presentation of information on the sidebar and floating bars. The previous sitemap primarily showcased the machine's usage, whereas the updated sitemap places greater emphasis on ensuring the successful execution of the workflow.

Furthermore, I made significant improvements to the workflow. In the previous version, the machine was divided into three sections, necessitating the technician to set it up 3 separate times. However, by aligning with the mindset of the biological technician and their experimental approach, I consolidated the workflow into a single streamlined process for setting up the protocol.The chart below illustrates the simplification of the process, transitioning from 3 separate set-up processes to a unified and integrated approach guided by step wizards. This visual representation helps to clearly demonstrate the enhanced efficiency and user-friendliness of the new system.

Furthermore, I made significant improvements to the workflow. In the previous version, the machine was divided into three sections, necessitating the technician to set it up 3 separate times. However, by aligning with the mindset of the biological technician and their experimental approach, I consolidated the workflow into a single streamlined process for setting up the protocol.The chart below illustrates the simplification of the process, transitioning from 3 separate set-up processes to a unified and integrated approach guided by step wizards. This visual representation helps to clearly demonstrate the enhanced efficiency and user-friendliness of the new system.

Furthermore, I made significant improvements to the workflow. In the previous version, the machine was divided into three sections, necessitating the technician to set it up 3 separate times. However, by aligning with the mindset of the biological technician and their experimental approach, I consolidated the workflow into a single streamlined process for setting up the protocol.The chart below illustrates the simplification of the process, transitioning from 3 separate set-up processes to a unified and integrated approach guided by step wizards. This visual representation helps to clearly demonstrate the enhanced efficiency and user-friendliness of the new system.

Wireframe

To improve the user flow of the liquid handling system, I collaborated with the software development team to adopt a step-by-step approach for experiment setup. This approach minimized the impact on the development team and maximized adaptability for the UX team. The wireframe includes solutions such as:

A clear and simple step-by-step wizard to guide the user through the experiment setup process

Prominent "Next Step" button to inform the user of the next required action

Obvious instructions that guide the technologist to properly place the sample

Confirmation page double-checks all input information before starting the experiment.

Use of simple language and visual cues to make the setup process accessible for users

To improve the user flow of the liquid handling system, I collaborated with the software development team to adopt a step-by-step approach for experiment setup. This approach minimized the impact on the development team and maximized adaptability for the UX team. The wireframe includes solutions such as:

A clear and simple step-by-step wizard to guide the user through the experiment setup process

Prominent "Next Step" button to inform the user of the next required action

Obvious instructions that guide the technologist to properly place the sample

Confirmation page double-checks all input information before starting the experiment.

Use of simple language and visual cues to make the setup process accessible for users

To improve the user flow of the liquid handling system, I collaborated with the software development team to adopt a step-by-step approach for experiment setup. This approach minimized the impact on the development team and maximized adaptability for the UX team. The wireframe includes solutions such as:

A clear and simple step-by-step wizard to guide the user through the experiment setup process

Prominent "Next Step" button to inform the user of the next required action

Obvious instructions that guide the technologist to properly place the sample

Confirmation page double-checks all input information before starting the experiment.

Use of simple language and visual cues to make the setup process accessible for users

Design Result

Step 1 - 4

Experiment Set-up

Protocol Set-up

Sample & Tip Placement

Confirmation

Step 1 - 4

Experiment Set-up

Protocol Set-up

Sample & Tip Placement

Confirmation

Step 1 - 4

Experiment Set-up

Protocol Set-up

Sample & Tip Placement

Confirmation

Workflow

Step 5 - 6

Monitor

Result

Step 5 - 6

Monitor

Result

Step 5 - 6

Monitor

Result

Re-Build Workflow

Experiment Set-up

Protocol Setting

Sample Placement

Confirmation

Monitor Screen

Experiment Result

Prototype

Discover multiple solutions and deliver the final version that fits the developer habit and coding convention. The final version integrated the updated style guide and improve the accessbility.

Discover multiple solutions and deliver the final version that fits the developer habit and coding convention. The final version integrated the updated style guide and improve the accessbility.

Discover multiple solutions and deliver the final version that fits the developer habit and coding convention. The final version integrated the updated style guide and improve the accessbility.

Key Take-away

Improve the UX maturity

Discover multiple solutions and deliver the final version that fits the developer habit and coding convention. The final version integrated the updated style guide and improve the accessbility.

Improve in future

Validate the design with more user

Collect and analysis quant and quali data to support the dashboard display

Refine the design system

Build a design culture across departments

Have a coffee with me

Schedule a call with Raina

Upgrade your Web presence with Framer

Schedule a call with Raina

Have a coffee with me

Schedule a call with Raina