Understanding the Problem
Whirring from a multitude of machines and the clinking from various vials of samples is loud. But the real spectacle is the harried lab technicians running between PCs running multiple outdated software and the analysis machines, trying not to make a mistake amidst all the chaos. The software itself is clunky, inefficient and fragmented. This was the state of our client’s gas chromatography analysis lab. The stakes were high: errors in analysis could lead to wasted resources, incorrect results, and delayed decisions. Something had to change. That’s where we came in.
Service
UX design, WebApp Design, Design system
Sector
MedTech
Duration
12 months (Design and Development)
A Glimpse into the Solution
After analyzing user pain points, we envisioned a streamlined, intelligent web application that would work on tablet devices that would revolutionize gas chromatography and related analysis. Our solution focused on two core improvements:
Adaptive Layout:
The foremost gadget identified was a tablet, thereby engaging our thoughts on its operation in both vertical and horizontal alignments. Moreover, we considered the application's function on a desktop display as it is a laboratory setting. However, mobile adaptability is deferred to the subsequent stage.
Real-Time Monitoring:
A dashboard that provides a comprehensive overview of all machines, using intuitive icons to indicate the status of various components. It offers real-time updates on ongoing analyses, making it easier to detect abnormalities instantly and take immediate action when necessary.
Live Chromatograms:
Users can view real-time chromatograms, zoom into peaks, and overlay multiple data sets for deeper analysis, ensuring precise monitoring of chemical separations.
This solution is in the future, but first we embarked on a journey to transform the way lab professionals interact with chromatography data.
Stepping into the user’s shoes
As a Senior UX designer I was tasked with designing a web application that would work on a tablet and can be used to monitor these various devices in real-time and help analyse samples. As a UX designer, my goal was clear—understand the pain points, design an intuitive solution, and ensure seamless integration with existing workflows. Collaborating with software developers, data scientists, and a product manager, we set out to create a web application that would transform how chromatography data was monitored and analyzed.
To begin, we needed insights straight from the source. We kicked off research with contextual inquiries and interviews. We asked lab technicians and lab managers a few questions and tried to understand their pain points.
Their answers were illuminating. We discovered that most users struggled with complex interfaces, lacked real-time monitoring capabilities, and had difficulty extracting meaningful insights from cluttered reports. It was time to reimagine the experience.
Understanding Our Competitors
To ensure our web app stood out, we conducted a competitor analysis of existing gas chromatography software.
Key insights included:
Industry Standard Software
Many labs relied on legacy systems with outdated interfaces, making user navigation cumbersome.
Limited Real-Time Capabilities
Many labs relied on legacy systems with outdated interfaces, making user navigation cumbersome.
Data Overload Without Insights
Other platforms provided extensive raw data but lacked AI-driven insights, requiring users to spend significant time interpreting results.
Collaboration Gaps
Few solutions offered built-in reporting and commenting tools, making data sharing inefficient.
These gaps informed our design decisions, helping us create a more intuitive, real-time, and collaborative experience.
To ensure our design was deeply user-centric, we developed detailed user personas and empathy maps. These helped us step into the shoes of our primary users—lab technicians, researchers, and quality control specialists.
Through extensive research, interviews, and observations, we crafted personas that reflected real users' challenges, needs, and goals. By mapping their thoughts, emotions, and pain points, we gained deeper insights into their workflow struggles and frustrations.
Key Insights from Empathy Mapping
Technicians wanted efficiency
They were overwhelmed by manual data handling and long processing times.
Researchers needed precision
Interpreting chromatograms accurately was crucial, yet existing tools lacked clarity and customization.
Collaboration was difficult
Many users struggled to share findings seamlessly due to inconsistent report formats.
Card Sorting Exercise
To ensure an intuitive navigation structure, we conducted a card sorting exercise with key stakeholders. Participants were given a set of labeled cards representing different features and functionalities of the web app, and they were asked to categorize them in a way that made the most sense to them. Here's a small preview of the card sorting exercise. Project sensitive information has been taken out.
Key Takeaways from Card Sorting
Users grouped features by workflow stages
Instead of categorizing based on technical functions, most users sorted elements into 'Monitoring,' and 'Analysis' stages.
Navigation needed simplification
Some users placed multiple features under a single broad category, revealing a need for clearer subcategories.
Common terminology is essential
Participants occasionally renamed cards to match industry jargon, emphasizing the importance of using familiar terms in our UI.
These insights guided our information architecture, ensuring a seamless and logical experience for our users.
Sketching Out a Solution
We started with wireframes—basic blueprints that laid out the app’s structure.
Dashboard View: Users can monitor all devices at once, with color-coded indicators for machine status (e.g., green for running, red for issues).
Sample Queue: A centralized area where pending samples could be easily queued for analysis.
Real-time Data: Each sample's analysis data was displayed in real-time, eliminating the need for manual entry. The data can also be viewed as chromatograms, so the user can see how the analysis is going
Through three iterations, we refined the design, making sure it was intuitive yet powerful. The most exciting part? Incorporating user feedback at every step. Lab technicians tested our early prototypes, pointing out areas that needed improvement.
Designing for Real Impact
We made several key design decisions:
The software is divided into two key areas - monitor and analyse, each of which have their own separate dashboard and processes associated with them.
The Monitor path is where the different parts of the machines, like the injectors and detectors are monitored and controlled. Not all lab technicians have access to the control part of the app as it is important that the devices are managed to a high degree of precision.
The Analyse path is one which even the junior lab technicians can access and use to run samples.
If the lab technician doesn’t have much experience, they can run the pre-saved sequences and use methods that are readily available.
If the lab technician is more experienced, they can create their own sequences and modify pre-existing sequencing to better suit the samples.
There are interactive chromatograms which allow users to zoom in, detect peaks, and overlay multiple data sets for deeper analysis.
With Figma, we built high-fidelity prototypes, bringing our vision to life. The dashboard now displayed live chromatograms, the sample management tool allowed seamless tracking, and the reports section became a hub of insights rather than a confusing maze.
To ensure consistency across our application and future applications for our client, we developed a robust design system that streamlined UI components, interactions, and visual language.
Testing and Refining
We conducted different types of testing the most important of which was the usability testing we conducted with lab professions. Here's what we heard
Some key insights and action items we obtained from the testing were
The colour indicators on the dashboard were a success and we would implement the same colour system to prioritize the queue
Design for growth
Make reporting more flexible
Make live chromatograms support multiple graphs.
A Problem Arises
One day during testing, our user, Emily faced a challenge. She had a high-priority sample that required immediate analysis, but with 10 devices running simultaneously, she struggled to find which machine was available for use. The application’s design showed all devices in real-time but lacked a prioritization feature for high-importance tasks. Emily wasted valuable time manually checking each device, which disrupted her workflow.
This was a turning point. To solve this, we returned to the drawing board and iterated on the design. We introduced:
A Solution That Transformed Workflow
After months of research, design, and iteration, the final design was rolled out to the labs, and the response was overwhelmingly positive. Lab technicians praised the ability to monitor multiple devices in real-time, manage samples more efficiently, and prioritize tasks with ease.
Retrospective: Lessons Learned
No project is without its challenges, and this one was no exception. Looking back, a few key takeaways stood out:
Balancing Simplicity and Functionality
Initially, we overloaded the dashboard with too many features, assuming more control meant better usability. However, feedback revealed that users preferred a cleaner, more guided experience. Simplifying the interface improved efficiency without sacrificing functionality.
Iterate Sooner, Test More
Early designs leaned heavily on assumptions. If we had involved users even earlier in the wireframing phase, we could have caught some usability pain points sooner and reduced the number of revisions.
Prioritization Is Critical
Users need intuitive ways to prioritize tasks, especially in fast-paced environments where timing is crucial. Adding features like flagging and notifications ensured we met this need.
Technical Constraints Matter
While we envisioned AI-powered anomaly detection from the start, implementing it was more complex than anticipated due to data processing limitations and this initiative had to be scrapped.
Adoption Takes Time
Even though the new app significantly improved workflows, some teams were hesitant to transition from their legacy systems. Additional onboarding support and tutorials were needed to ease the transition
Final Thoughts
Despite these challenges, this project was a success. Seeing lab professionals embrace a tool that made their work easier and more accurate was incredibly rewarding. With each iteration, we refined not just the product, but our own understanding of what makes a truly effective design.
Looking ahead, I’ll take these lessons into future projects—always advocating for early user involvement, prioritizing simplicity, and staying mindful of real-world constraints. After all, great design isn’t just about what looks good; it’s about what truly works.
MORE PROJECTS
