Improving the navigation of a Scientific Instruments App

Role

UX Designer

Period

Q4 2020 - Q1 2021

Activities

Problem analysis, review analytics, ideation, design screens.

Disclaimer

This case study is for a Thermo Fisher Product that I worked on. I will not mention the product name, either the names of the people that were involved.

The challenge

The Product Manager received feedback from end-customer users; some of their feedback was:

  • It is hard to find the information about their devices on the table view.
  • The user needs to navigate through different pages to see and find the information they are looking for.
  • It takes some time to load all the data.
  • The sort/filters on the tables reset after the user navigates to a different page and returns to the table.
  • There is a lot of information in the table, and the user needs to scroll vertically and horizontally.

With this feedback, the Product Manager decided to redesign the App's navigation. The goal was to allow the user to have their information at first sight and not let them navigate through different pages.

Process and solution

First, I analyzed the application's information architecture; I wanted to identify areas of opportunity to improve the navigation. After the analysis, we noticed that the App's structure was simple; there are three levels in the App.

A diagram showing the structure of the application. There are three levels. The first level is the home page. The second level is the service list, instrument list and group of instrument list. The third level is the service detail, instrument detail and group of instrument detail. All the levels are connected.

Structure of the Application.

Then, I went back to the challenges that we had:

Sketches of the first explorations I did in my notebook.

Main challenges that we had of the application.

After thinking about the problems that we had, I came up with two problem statements:

Sign-in page, where the user captures their username/email.

From all the challenges we came up with two problem statements.

Discussing with the PdM and the PO, I decided to do a "Problem Framing activity" activity to understand deeper the problem we are facing.
‍
We did an "Abstraction Laddering" exercise. The exercise provides a template for considering a statement at different levels of focus; it can also help to step back and look at the issue more broadly.

Abstraction ladder exercise for the challenge: "In what ways might we let the user see the information without taking them to the deepest level?"
Abstraction ladder exercise for the challenge: "How might we present the information to the user in a different way, not using tables?"

Abstraction laddering exercise.

The results of the Abstraction laddering were fantastic. We identified challenges that gave us a more broad vision of the "navigation problem."

Sign-in page, where the user captures their username/email.

Problem statements that were result of the Abstraction laddering exercise.

We distinguished that the problem was not the navigation; it was how we show the information to the user. We are displaying the data in tables with an average of 13 columns (+/- 5 columns).

We also identify that we are displaying almost the same information in the table and the "details" page; if the user goes to the detail screen, it means that they can't find the information on the table. Also, it was hard to scan and find the information right away.

Sign-in page, where the user captures their username/email.

Table view of the application.

I decided to explore how we can display the data in a different way a decided to do
a list view.
‍
By doing a list view with expandable rows (instead of a table), we can have the data with hierarchy and show the most relevant information without making the user scroll between columns. Also, having filters and be able to sort the information, the user will have the flexibility to search and narrow down all the data.

I enlisted the table columns and the data displayed on the details screen; I did a first draft of the list view by choosing what I thought was the most relevant information to show.

Sign-in page, where the user captures their username/email.

List view draft.

I reviewed this solution with the PdM and PO, and we decided to check the metrics of columns configuration for all the users (what are the columns that the majority of the users use).
‍
By checking these numbers, we could decide what is more relevant to the user and do a better list view.

Another significant change of the screen was the filters. The layout was to use on the left side of the screen a filter section, and on the right have the list view. The reason was to allow the user to focus on the data and filter it without pushing down all the data. This type of layout is commonly used on e-commerce, and the application is not an e-commerce site, but the information that we are showing is the catalog of what the user has available.

Sign-in page, where the user captures their username/email.

New List view screen.

Outcomes and lessons learned

In October 2020, I worked closely with the Thermo Fisher UX Research team and the Product Manager to plan and run a user testing session. I created an InVision prototype, participated in sessions to define tasks and the script, and was a fly-in-the-wall during some sessions. Our goal of the study was:

  • Validate that the information was easier to read and easier to navigate compared to the table view.
  • Validate if the user was more willing to use the application with the new design.
  • Measure how easy it was to use the application (with the new design).

The study ended around March 2021. The test results were positive, and we received great feedback from the participants. The Product Manager prioritized the application redesign, and I designed and delivered the screens to the development team. I paired with the developers in the grooming sessions to answer questions or concerns about the design and reviewed the work after each task they completed.