From Experts to Algorithms

HyperDesign: Empowering personalized probe design with AI-Driven automation

imagem

Company / Segment

Roche Diagnostics - Biotechnology

HyperDesign - Custom DNA Panel

Product Type

Web based Tool

My Role

UX Design Lead

Senior UX Designer

External links

Roche Pharmaceutical HyperDesign

Overview

HyperDesign is a web-based application empowering researchers to create personalized probe designs with Roche's proprietary algorithm. Users can specify regions of interest using gene names, commonly recognized sequence identifiers, or genomic coordinates. HyperDesign also offers expert assistance during the design creation process, effectively providing two pathways to design panels: automated algorithms and consultation with Roche's in-house experts.


Problem Space

Roche's Expert Designers account for 65% of revenue, thereby facing a substantial workload. With experts operating at full capacity, the design process has decelerated, adversely affecting customer experience.



Objective

  • Lighten the workload for Roche Expert Designers
  • Encourage use of the algorithmic, automated pathway
  • Accelerate the delivery of new design panels to end-users

Metrics and KPIs:

As a key metric, the team will track the rate of new design panels revenue, comparing the contribution from Expert Designers versus the Algorithm (automated path). Currently, 65% of the revenue is generated by expert designers, while 35% comes from the automated pathway. This metric will be closely monitored to observe the impact of the new features and improvements on revenue distribution.



My Role

Lead UX designer, Senior UX designer responsible for all UX initiatives in the HyperDesign team


Team
  • 1 Lead UX Designer
  • 1 Product Manager
  • Development Team

Responsibilities
  • Concept validation
  • High fidelity prototypes
  • Product follow up

Challenges

Joining as a new member, I faced the immediate challenge of diving into a complex project that had seen no UX attention for six months. The intricate scientific subject matter added an extra layer of complexity.

To hit the ground running and meet our deadlines, I pivoted from traditional Design Thinking to a Lean UX approach. This enabled us to utilize existing resources and knowledge, fast-tracking the project while focusing on identified pain points, UX objectives, and business goals. Employing Lean UX principles, we aimed to simplify the design process, relieve expert designers, promote the automated pathway, and quicken the delivery of new design panels.

This strategy promoted effective collaboration across the team, including stakeholders, project managers, scientists, and engineers, ensuring alignment and technical feasibility.

Solution

  • Advanced Options Feature: This newly introduced feature empowers users to clone an approved design panel and, optionally, enhance the probes in the selected region—all without requiring collaboration from expert designers. Previously, both of these capabilities (clone and boost) were only accessible through specialized expert collaboration.

Expected Results (Post-Implementation):

  • Algorithmic Pathway Utilization: The expectation is to see a rise from the current 35% to approximately 50% within three months of launch.
  • Expert Designer Workload: With the changes, we project a 20% reduction in requests that necessitate collaboration with expert designers.
  • User Satisfaction: We'll be conducting post-implementation surveys.
  • Revenue: Although expert designers currently drive a significant portion of revenue, we expect their contribution to reduce to around 60% of total revenue post-redesign. This shft aims to balance revenue streams and alleviate bottlenecks..

Clone and Boost were launched in September 2023 and the new design system will be implemented in early 2024. We look forward to confirming these expected outcomes with real data. Updates will be provided as the numbers come in.

imagem

Strategy and Research

Strategic apporach

We adopted a two-fold strategic approach to enhance both the user experience and operational efficiency:

  • Simplify the User Interface: To cater to a diverse user base with varying levels of expertise, we integrated Roche's Navify Design System. This system is well-tested and meets AA accessibility standards, ensuring a more inclusive and user-friendly interface.
  • Promote Algorithmic Pathway: We added new features—formerly only available through expert consultations—that empower users to create new design panels by cloning via probes and primers and applying boosting to specified segments. Through in-app guides and tooltips, we actively encouraged the use of these automated algorithmic pathways, emphasizing their speed and reliability.

This strategy aims to alleviate the burden on expert designers while simultaneously offering users a more straightforward and efficient way to fulfill their needs.


Lean UX

To streamline the design process, a Lean UX approach was adopted, leveraging existing knowledge and previous research. We moved research to the rollout phase, conducting interviews with stakeholders, engineers, and internal staff from Roche.



Iterative process

We employed a weekly iterative design cycle, allowing us to continually refine our product based on diverse inputs.

Each Weekly Iteration Included:

  • A presentation summarizing design progress and key takeaways from the previous week
  • Design critique sessions involving the UX team, where we evaluated current designs and discussed potential improvements
  • Reviews conducted by subject-matter experts, specifically scientists, to ensure technical accuracy and feasibility

The iterative nature of this process ensured ongoing opportunities for feedback and improvement. It also enabled us to rapidly integrate user insights and expert advice into our evolving designs.


UX goals

  • Streamline the design creation process
  • Enhance algorithmic design options

User Pain Points

After consultations and interviews with the business and commercial teams, we identified the following critical pain points:

  • Dependency on Roche Expert Designers: A heavy reliance on expert designers for probe design creation has resulted in bottlenecks, slowing down the overall process.
  • Extended Design Timelines: The lengthy time required to create designs has negatively impacted the pace at which research projects can progress.
  • Complexity in Specifying Regions of Interest: The intricate nature of specifying regions of interest has led to user errors and inefficiencies, hindering the seamless execution of tasks.
  • Limited Algorithmic Options: Users find the automated design options to be restrictive in variety and flexibility, diminishing the appeal of this more efficient pathway.

Job to Be Done Statement

When I need to design specialized probes for my research,
I want an intuitive, efficient platform that enables me to specify regions of interest, quickly generate designs, and easily boost the segments of probes.
So, This will allow me to expedite my research and obtain more accurate results without having to rely on the availability and timelines of expert designers.

Userflow


imagem

Design and Solution

Advanced Options (Clone and Boost)

For two months, I designed alternative solutions, which were then meticulously evaluated through UX critique sessions, technical assessments, and business validations. These evaluations involved collaborative discussions with the Product Manager, developers, and designers from other squads, ensuring that we achieved a harmonious alignment in business, technology, and design perspectives.


Integration of One Design Kit into HyperDesign

One Design is Roche's Design system for web applications

To ensure a seamless integration of the One Design Kit into HyperDesign, I adapted the components and design patterns from the Design System to suit the specific user interface requirements and functionality of the application. This involved mapping the design elements provided by the Design System to the different sections and features of HyperDesign, ensuring a consistent and cohesive user experience throughout the application.


Basic Elements

Below, I've listed a few basic elements for easy observation.




Interactions on Figma (samples)

Examples of interactiveness in high-fidelity mockups created for this feature.

_Modal: add, remove file

_Feedback and confirmation

_Filters

_Hover state

_Filter, selection

_Tool tips

Learnings

Learnings

Empowering users: Enabling researchers to independently create designs reduces their reliance on expert designers and speeds up the design generation process.

Streamlining processes: Simplifying complex tasks and eliminating unnecessary steps improves user satisfaction and efficiency.

Flexibility and choice: Expanding algorithmic design options provides researchers with a broader range of possibilities, enhancing their research capabilities.