This project focused on redesigning a healthcare device interface for a new screen format, while enhancing usability, aligning with Revvity’s product ecosystem, and implementing industry best practices.
I led the full design process—from market research and workflows to prototyping and user testing. Due to privacy constraints, specific product details have been redacted and some designs have been modified for confidentiality.
Role
Product Designer
Responsibilities
UX/UI Design
UX Research
User Testing
Team
1 UX Researcher
2 UX Managers
2 Product Managers
3 Developers
Timeline
1.5 months
Problem
The existing interface was misaligned with Revvity’s branding, overused modals, and overwhelmed users with unnecessary information, requiring a streamlined redesign for a smaller, portrait-oriented display.
The original UI was built for a laptop-based, web-style experience, making it poorly suited for the updated built-in display. To address this, I collaborated closely with the hardware team to understand physical constraints and with the software team to create a unified, device-specific experience.
The redesign focused on simplifying workflows, reducing reliance on modals, and aligning with Revvity’s brand standards. Updated touchscreen guidelines and components were developed and published to support this and future projects.
Previous screen
New screen
Constraints
1
Few touchscreen guidelines
The existing touchscreen guidelines were very limited as they were very few touchscreen products prior to this project.
2
Lack of prior user research
During the first launch of this product no user research was conducted, leading to a lack of knowledge on the consumers.
3
No previous Figma files
The previous UI of this device was made completely by developers, with no previous figma file to reference, forcing us to start from scratch.
To work around these constraints, we leaned on Revvity’s public design system documentation, studied other Revvity products, and consulted external best practices for touchscreen interface design.
Goal
Redesign the interface to fit a smaller, portrait-oriented touchscreen while aligning more closely with Revvity’s branding and design language.
Research
Starting with Workflows
The research process for this project started with mapping out the workflow to get a better understanding of the product and core jobs to be done. This was one of the most important parts of the design process as it allowed the team to focus on the design and research process later on, instead of going back and forth on user flows.
Two of the main workflows
Implementing Touchscreen Best Practices
The UX Researcher, Wendy, documented best practices for touchscreen interfaces, including minimum font sizes, recommended touch target dimensions, and appropriate spacing to prevent accidental taps.
These guidelines were added to Revvity’s public design system and served as a foundation for this project, helping ensure consistency across future touchscreen-based products.
During the design phase, I co-hosted meetings with all relevant stakeholders (PM, HW, design, development) twice a week to go over design updates and gather feedback. This constant feedback loop allowed me to improve my designs and iterate 5 times over the course of a month.
In the example below, you can see how this page featuring a progress indicator drastically changed based on feedback.
Design changes through several iterations
No More Modals
The previous UI overused modals for actions that could have been integrated into the main flow or displayed as inline warnings. In the redesign, we focused on minimizing modal usage, reserving them only for critical errors or important alerts and finding alternatives ways to present previous modal messages.
Modals on the old interface
Alternatives to modals
User Testing
After wrapping up designs, we ran an hour long user testing session with 5 internal proxy users. The goals of this session were:
1
Validate designs
2
Compare design options
3
Identify usability issues
With over 23 usability improvements, an overview of the key ones are below.
Key Improvements
Breaking Apart Screens
Due to the smaller screen size in the new design of the device, the content in select pages needed to be separated into their own dedicated pages.
Improved organization
Both actions shown in the previous screen were completely different, thus separating them improved usability.
Better space utilization
The new design uses the vertical space efficiently with a scrollable list instead of cramming everything onto the screen.
Previous step one
Separating step one into two steps
Previous table
Different tables based on use case
Consolidating the Table
The table was consolidated into a more compact design by interviewing proxy users to identify and remove less-used columns.
Less is more
Reduced column count to prioritize frequently used information, optimizing for smaller screen sizes.
Differentiating the screens
Transformed a repeated table into two specialized interfaces—an input form for data entry and a read-only results table—creating clearer user expectations at each step.
Alignment best practices
Applied proper alignment standards with left-aligned qualitative data and right-aligned quantitative values to improve readability and scanning efficiency.
Progress Ring Component
This project introduced a new progress ring component that allows users to easily track progress of ongoing runs. I researched, designed, and wrote out documentation for this component in the public revvity.design design system.
Enhanced visibility of progress
Progress ring makes the current state more visible, especially from a distance in lab environments.
Clear visual hierarchy
Logs were removed to focus attention on progress and key status updates.
Time tracking
Time is now shown using standard abbreviations (hrs, mins) and AM/PM formatting based on best practices.
Improved status indicator
Pause, complete, and stopped states are displayed with large icons and color cues at the center of the ring.
Early version of the running test workflow
Final version of the running test workflow
Results
Final Designs
The final designs deliver a simplified, brand-aligned interface optimized for a smaller, portrait-oriented touchscreen. By consolidating information, improving navigation, and introducing new components like the progress ring, the updated interfaces provide a clearer, more efficient user experience tailored for real lab environments.
Preparing a Test
Improved the ease of use in the step wizard by breaking apart multi-step pages and combining similar actions. The overall design was refined to align with Revvity’s branding, adhere to industry best practices, and enhance user experience.
Running a Test
Redesigned the entire screen to remove the status logs, which users found unnecessary, and replace them with a new progress ring component. This allows users to easily monitor progress from a distance in the lab environment.
View and Export Results
Export results onto a memory card or USB to easily view results on a different device. This removes the need to open results at the healthcare device itself.
Reflection
Results
23+
Usability improvements
2
New design guidelines
1.4x
Faster workflow completion
This project resulted in 23+ usability improvements, two new design guidelines, and 1.4x faster workflow completion times by streamlining screens to focus on key information, setting a strong foundation for future design practices at Revvity.
Learnings
This project was a huge growth opportunity for me as a designer. From collaborating closely with cross-functional teams to building new design system components, I gained valuable experience at every stage of the product design process.
Starting with workflows
Building a strong foundation with user workflows early on prevents major design pivots later and keeps the team aligned.
Power of user testing
Even internal proxy testing surfaced over 23 actionable improvements, proving the value of early and frequent validation.
Design systems are living documents
Expanding Revvity’s design system with touchscreen guidelines and new components showed how design systems must evolve with product needs.
Shout-Outs
It was an invaluable experience to work on the end-to-end design of this project, especially having the chance to lead meetings and perform user testing. With this, I’d like to give a shoutout to the team that made everything possible. Thanks to Wendy for co-leading this project with me, Vanessa for constant design reviews, Sharath and Maria for trusting me with this project, and finally everyone on the product team for their constant support and collaboration.
.png)
.png)
.png)
.png)
