Spectrophotometer APP UI & UX SAAS

Information Architecture, Navigation and Hierarchy are the Key Components of UX

The first step of this project was to engage with stakeholders and users through a series of interviews and surveys to identify existing pain points and opportunities to improve user experience. The initial research stage enabled us to develop a deep understanding of both the business goals and the needs of users. As a result, we were able to streamline the existing information architecture to create a consistent navigation, hierarchy and overall look and feel. Not only did this provide a better user experience, it also served the most pertinent needs of the users. The new AI is optimized for the most common tasks, ensuring technicians employ best practices through minimized user errors.

UI Design That Drives Efficiencies

We designed a new UI that prioritizes simplicity and clarity throughout all visual elements. By employing a hierarchical visual language that appeals to the primary processes of users, we were able to improve the speed and ease of use of the spectrophotometer. By removing non-functional decorative elements, we achieved a minimal, data-focused UI that provides users with increased accuracy when measuring lab samples. Another positive outcome of the new UI design is that it is so simple to use that it has reduced technician training time.

Data Visualization for Faster, More Accurate Decisions

At-a-glance data visualization is critical for the efficacy of any measuring device. This is particularly crucial in a fast-paced, high-stakes lab environment where technicians rely on the speed and accuracy of these instruments to derive precise sample results. Using the input provided to us by the project stakeholders, we redesigned all charts to present data in a way that can be immediately processed and understood by users.

By employing both static and interactive data visualization techniques, we were able to emphasize the most critical information relevant to a specific test, allowing users to efficiently and more accurately decide upon the next course of action for any given patient.

Custom Designed Icons
for Better UX

An icon refers to a small graphic element that encompasses large functional implications. Any icon employed within the design of an interface must have an obvious purpose that is immediately understood by the user. When designing the icons for the project, we focused on simplifying the client’s existing iconography in order to optimize functionality, recognizability, and memorability.

Using the foundational grid and the client’s existing guides for icon treatment, we eliminated unnecessary ornamentation that could short circuit the user’s mental model, subsequently optimizing user efficiency through minimized cognitive load and user errors.