Revvity - Harmony plate wizard

Project Context

What is Revvity?

Revvity aims to improve health outcomes by empowering scientific discovery and diagnostics, offering leading solutions in diagnostics, life sciences, and analytical lab technologies. Their products include reagents, instruments, and software for disease research, drug development, and clinical testing.

What is Harmony?

Harmony empowers scientists with intuitive high-content imaging and analysis software with a product suite that streamlines phenotypic screening, live-cell and 3D model imaging, and rare-cell detection for life‑science research.

First, let's define our problem

PROBLEM DEFINITION

Current Workflow

Currently, Harmony is an outdated desktop app full of old legacy design that no longer aligns with Revvity's current branding or any design best practices. All of Harmony's plate workflows are popups that overlay the workspace. The first issue team Harmony wanted me to address was redesigning the UX of the plate workflows.

Recently, Revvity has been slowly transitioning its many instrument softwares from desktop apps to web apps for improved accessibility and syncing. Aside from redesigning certain plate workflows (like plate creation), my main goal was to help transition all the desktop functionalities to web app.

How might we reimagine legacy desktop workflows for web, starting with a plate creation wizard, in a way that feels modern yet familiar to existing users?

Next, let's conduct some research

PRIMARY RESEARCH

User Pain Points

Working with a UX Researcher who joined the team prior to me joining helped a lot in the gathering research phases of our design. Together, we spoke to our team and gathered all the pain points our users have reached out about. Due to the tight timelines, we weren't able to conduct a round of formal user interviews.

What were some common pain points?

Lacks discoverability → many users couldn't find where to log new plates to their database
Progress indicator is not intuitive → it wasn't until the users started clicking ahead in the flow that they realized their progress was being logged
In certain parts of the flow users are redirected to a separate popup to scan contents → many popups on top of each other tends to cause confusion and leaves the screen seeming cluttered
When editing plates, it's best practice to make a copy and then make changes → current workflow requires users to recreate a new plate and copy and paste which is cumbersome

SECONDARY RESEARCH

Competitive Analysis

We also conducted competitive analysis to see how other existing platforms designed their plate workflows. Interestingly, our major competitors all seemed to have these outdated desktop workflows. So instead of looking at the UI, we focused on the UX of these experiences.

As for the UI, we took a look at another Revvity instrument software, KIRA, that had previously undergone a redesign to transition from desktop to web app. One of our goals for this redesign was to ensure our web app remained consistent with other new Revvity products that were already designed.

What did we learn from competitive analysis?

Desktop applications often house much more functionalities than web apps do due to a lack of accessibility requirements → our challenge: design with web content accessibility without losing any desktop functionality

Now, let's get to ideating!

IDEATE

User Flow Diagrams

In the beginning of this project, our PM had given us an initial workflow that encompasses how users generally use our existing desktop application.

Then, along with the UX Researcher, we began refining this workflow by grouping steps (for navigation through the flow), and combining steps (to simplify the flow).

IDEATE

Mid-Fidelity Wireframes

Because of time constraints, we did not get the chance to do many low-fidelity design explorations, so instead we went straight into mid-fidelity designs and asked each other for design feedback as we worked.

Next, it's time to get some feedback & iterate

FEEDBACK

Design Critique!

Team Harmony has weekly 3-in-a-box meetings. A "3-in-a-box" is a specific team meeting where only the lead PM, lead engineers, and lead designers sync on new ideas and concepts. Hence, the 3 (design, product, and engineering) in one box.

With each iteration, I leveraged these weekly meetings to get design critiques from the product and engineering functions of my team.

What did we learn from design critique?

Showing all plate configurations at once overwhelmed users → a progressive disclosure method should be adopted, only showing our users the information they need to complete their current task
Something Revvity's design system believes in is using modals and other pop ups (like side panels) as sparingly as possible → to be used only for show stopping actions
Users are frequently losing track of where they were in the workflow due to modal stacking → more of an emphasis placed on maintaining context throughout the entire flow
Early iterations skipped edge cases such as the many errors the instrument itself could have

ITERATE

Design Decisions

Design decision: horizontal vs. vertical progress stepper

The biggest design decision was switching from a horizontal progress stepper to a vertical progress stepper. The primary reason for this was because we wanted to conserve vertical space, especially as we continue to add more constraints for the plates.

Horizontal stepper

Final version: vertical stepper

Switching to a vertical progress stepper also allowed us to later on add more steps to the stepper by splitting large steps into smaller sub steps. This reduced some of the information overload in our previous designs, and ensured that users only saw actions relevant to their current step in the flow.

Design decision: side panel vs. embedded tables

As previously mentioned, we wanted to use popups and overlays as sparingly as possible because we did not want to interrupt the flow. For the steps where a side panel overlay was previously used, we switched to embedded components.

With side panel

Final version: embedded components

Finally, it's time to present final designs!

PROTOTYPE

Final Designs!

Click through the prototype below to see the final designs:

FINAL DESIGNS

Polishing for Handoff

Revvity doesn't have any formal dev handoff process, so after refining all my designs to be pixel-perfect, I dumped them onto a separate Figma page. I organized the flow in sections, based on each of the steps in the creation flow. I also annotated development notes to indicate states, interactions, etc.

The final part of our handover was an email written by both the UX Researcher and I, where we indicated all the major design decisions that led to the final design, as well as any research to back it up. Finally, we also added a few comments on post-MVP recommendations the team could explore in future sprints.

Reflecting on this project...

REFLECTIONS

Lessons Learned

Importance of domain-specific design

Designing for scientists means designing for multitasking and precision. Scientists frequently jump between tasks, instruments, and data so the UI must support context retention, error recovery, and clear visual feedback at all times.

Simplification isn't about removing steps, it's about reducing friction

In some cases, splitting steps or grouping them more intuitively actually made the process feel simpler. Even though we increased the number of clicks to complete the flow, the total time spent was reduced!

Flow structure must adapt to real-world use, not just ideal paths

Users didn’t always follow linear patterns. Error or unintended use is to be expected especially when humans are involved. Accounting for edge cases and recovery paths made the UX more robust and trustworthy in real scientific settings.

REFLECTIONS

Next Steps

Conduct formal usability testing

Due to tight project timelines, we relied on internal feedback and ad hoc observations rather than formal usability testing. However, Revvity does believe in involving users as frequently as possible. Moving forward the plan is to conduct moderated usability tests with actual scientists to validate design assumptions. Testing will focus on task completion rates, discoverability, error recovery, and user confidence.

Explore accessibility

When transitioning to web one of the biggest considerations is web accessibility, since there is a lot more guidance for web accessibility compared to desktop accessibility. Revvity's library of accessibility documentation from our design system lacked some guidance on specific features found more traditionally on desktop applications. With more time, more research should be conducted to create a proper guide for desktop accessibility.