UI Guide Work
for Waters Corporation
Overview
Throughout my time working at Waters, there have been many times that I have been asked to research, explore, and create new items in support of the UI Guide. This Guide is a source for components that work together to create a consistent app experience across the Waters application brands. There are currently 16+ applications in development so this UI Guide is vitally important to the software development teams.
PROJECTS
Visual impairment guided scroll bar redesign
I received this message from one of my coworkers living in the UK that is visually impaired:
The scroll bar visibility is something that I had noticed being addressed in other research sessions. Many of our customer base is nearing older age, and therefore have a fair amount of visual impairment themselves. Having a coworker to work on this with was a great help to literally "see" what the issue was and how to address it.
We worked together on slight variations and came up with making the scroll bar wider and increasing the opacity of the unselected scroll bar in order to make it visible even when unselected. We demoed this change to the software teams, added this change to the UI Guide, and have adjusted all the software to fit this new guidance to help our customers see the scrollbars better. This is a small change that has a world of impact on our visually impaired customers.
Calibration curves
The calibration curves are one of the most important parts of the software because it helps the scientists analyze the data to see where the discrepancies lie in their product.
When I joined the company, they had no guidance on how to show overlapping text in a chromatogram. I came up with the idea of "flags" at the top of the peaks which show which chromatogram peak is selected. I added this element to the UI Guide and it has been consumed by all the teams that are using chromatograms. I also recommended they increase the contrast of the shaded area to accommodate visually impaired or colorblind people.
I then did research sessions with customers and internal SMEs to validate these design ideas since along with additional questions around the placement of the "flags."
Original chromatograms - overlapping text labels
Updated chromatogram UI Guidance
SME research
This was a quick A/B Test that I did over Microsoft Teams with internal SME Scientists. Due to the pandemic, we have all been working from home for over a year. I worked with the Research Center to create a Teams Channel with internal scientists that would be willing to give us quick feedback on designs.
.png)
Outcomes
We kept the flags on the peak tops and to the left in the UI Guide based on this research among other findings based on the specificity of the peak numbers.
Language selection
Waters is a multinational corporation with many of its customer's laboratories being in other countries. There were explorations done into the coded software to prove that language selection could be done, but nothing had been finalized in the UI Guide. I met with specialists from China as well as gathering information from research sessions and came to the conclusion that the scientists would potentially need to have easy access to language selection, but it would not need to be front & center in the application.
The solution was to have it be a dropdown option within the profile section in the navigation bar. This keeps the information from consuming too much space in the nav bar as well as keeping it available for the customers to change if they need it.
Language selection proof of concept 1
Language selection proof of concept 2
Finalized UI Guidance
Proof of concept 1 in action
Proof of concept 2 in action
Finalized UI Guidance in action
Other UI projects
One of the products that I work on has a unique dark background. There are many situations where I have had to research and finalize accessible color selections and elements for this application. I have also completed full UI Reviews of the coded software products providing guidance and links to help create consistency across the 16+ applications.
Screenshot of coded application, UI guidance screen, information on UI Gap, links to UI Guide for consistency and JIRA Tickets
Another UI Review example
