Waters Corporation: Chromatography Data System
Client
Waters Corporation
Role
Digital Product Designer
Timeframe
6 months
Tools
Figma
Project Overview
An analytical laboratory instrument and software company, Waters Corporation, needed to create an updated Chromatography Data System (CDS) for chemists and analysts to process, review, and troubleshoot data results from testing pharmaceuticals for impurities. This system needed to be an ideal user experience for viewing and navigating through a lot of data.
Research
User Interviews
I met with clients from Pfizer, Eli Lilly, and Lundbeck for a workshop to identify problems with the current software and discover what data is most important to view in order to complete their tasks.
Interview Synthesis
Ideate
Wireframe Designs
Using the information from the user interviews, I was able to create wireframe designs of the Chromatography Data System. My goal with the wireframes was to create separate pages for Results, Check Inputs, Calibration, and Result Summary. This helped declutter and organize the data as a whole on one screen.
Mid-Fidelity Designs
Upon finishing the wireframes, I met with the onsite chemists and analysts at Waters Corporation to get their feedback on the layout of each page. They approved my wireframes. Before moving on to the mid-fidelity designs, I met with the development team to make sure that these layouts along with the information needed on each page is feasible. After approval from the development team, I created the mid-fidelity designs.
Prototype & Test
Prototype
I used the mid-fidelity designs to create a prototype to show how each page connects with one another and how each card on the page functions. Once this was solidified, I met with clients from Pfizer, Eli Lilly, and Lundbeck for user testing.
Prototype Feedback and Design Solutions
Overall, the user testing sessions went very well. Users expressed that they liked having separate pages for Results, Check Inputs, Calibration, and Result Summary. However, three major areas for improvement were highlighted.
1.) Double Tab Navigation
83% of users had difficulty with the scrolling tab navigation within the Processing Method card. Users did not like that some tabs were hidden from them within the scrolling navigation. In order for users to see all data viewing options within the Processing Method card, I listed them in a dropdown format. This also allows more room for more information to be added to the Processing Method card, if necessary.
2.) Instrument Method Placement
66% of users expressed that they wanted an easier way to access the Instrument Method. Instead of it being a separate tab within the Processing Method card, I made a separate button for it and placed it above the data cards on each page. When users press the Instrument Method button, the information will pop-up on the page with the options to read, exit, or print the Instrument Method.
3.) Side Panel Navigation
Though the Side Panel Navigation can be collapsed to allow more space on the page to view the data, 50% of users did not like that they had to take an extra step to do this. Instead of having a collapsable navigation panel on the side of the screen, I changed it to a tab format for each page at the top of the screen.
Final Designs
After figuring out design solutions for the user pain points that were highlighted during the user testing sessions, I met with the development team again to discuss feasibility of the design solutions. Once approved, I created the final designs and a final prototype to handoff to the development team for implementation.
Results Page
Check Inputs Page
Calibration Page
Result Summary Page
Conclusion
The first rollout of the updated Chromatography Data System was successful. Next steps are to gather feedback on Version 1 and iterate for possible solutions and improvements for Version 2.