Responsive Redesign

Improving responsive ux in an existing app

Background

This company is a global leader in medical diagnostics. They have advanced technology that is used across the world in pathology labs, and needed help to realign their app with pathologist’s changing workflows. 

 

My Involvement

  • Lead UX Designer

Tools Used

  • Figma

Timeline

  • Four Months (2021-22)

Problem

The proprietary app was originally built by a vendor for a much larger desktop screen as the intended use. As pathologists began to adapt their workflow to smaller screens like laptops and tablets, the app was not responding accordingly making it incredibly difficult and frustrating for users. 

Question

As pathologists begin to adapt their workflow away from desktops, how might we reformat the app to be responsive and create a better experience for smaller screens?

Research & Planning

Our team kicked off this project by doing a usability audit with UX designers and our development team. This allowed us to not only see on-screen issues, but also look into some of the coding challenges we’d be facing.

UX Methods

  • Wireframes
  • High fidelity mockups
  • Prototyping
  • User Feedback Sessions

Solution

We reworked the existing app to be responsive across all screens down to a tablet size. This required significant efforts to redesign some onscreen menus and tool panels, allowing for better screen real estate and an overall better user experience. The code and changes were approved and included in the next app version, and released on time.

Headers

We implemented responsive global headers across the app that allowed icons to be fully visible on a second row. This allowed for uses to still maintain a memorized workflow with little interruption.

Real Estate

We prioritized giving the user as much screen real estate as possible. In order to do this, we found ways to store content off screen using solutions like accordion menus, and collapsible tool panels.

Tablet

Our ultimate goal was to prioritize the tablet experience. Our solution gave tablet users maximum screen real estate and implemented familiar concepts like mobile menus, and better show/hide functionality for tool panels.