Medical Vendor App

Improving the usability of the SEC3URE mobile app by refining the navigation, integrating Bluetooth pairing to e-badge, and modernizing the interface.

How can we improve the usability of this app while maintaining functional parity?

Sneak Peek

Audit of existing app

The goal of the project was to re-design the app with feature parity. To ensure that all features were covered, I created a sitemap of screenshots in Lucid Chart. In doing this, I found these areas for improvement:

• The navigation was hidden in a hamburger menu and contained 21 items, which is triple the amount of information a person can process at a time according to Miller’s Law.

• The user had to dig through several screens before engaging with the app’s core functions, preventing them from quickly and easily completing their desired task.

• Scheduling screens were not implemented, so users saw a blank, unresponsive screen after selecting any page in the schedule section. This lack of information was frustrating and confusing.

Ideation

Once we had a grasp on all of the existing app’s features, the UX team got together and brainstormed ways to make small but impactful improvements to the user experience.

The largest hinderance to usability of the original app was the way that the navigation was organized. By hiding all navigation behind a hamburger menu, users are forced to recall instead of recognize, which is warned against in Jakob Nielsen’s 6th Usability Heuristic.

Creating the Design System

To maintain visual and functional consistency across the app, we customized elements from the Material Design 2 component library. This creates a better user experience because the app will not only look more polished, but will give the user an expectation of what might be on any given page. This is also a better experience for the development team because re-using components saves the time and energy of coding bespoke components.

Final Designs

After countless meetings and iterations based on internal feedback from the Product Owner and Development teams, the final designs were complete. I created a functional prototype of the final designs of the app in Figma.

Click to see the interactive prototype

Reflection

Design QA

Prior to this project, there wasn’t a system in place to ensure that a product’s implementation accurately reflected the designs. To be proactive about this issue, I reviewed the pre-released implementations for inconsistencies, big or small. I created a Design QA document with quick blurbs and images explaining discrepancies I noticed between the intended design and what was developed. I shared this living, breathing document with the Product Owner, who used it as a reference point when creating JIRA stories. Later, I was told that this document was instrumental in creating small stories that could easily fill sprint gaps.

SIMPLICITY IS KEY

The objective of this project was to modernize the legacy app and increase usability, so I spent a lot of time pruning the navigation and designing a framework that would work across several different functions. Despite these cosmetic upgrades, reviews continue to echo the same message: The app is glitchy, slow, and unreliable. In hindsight, I wish I had advocated for a simplified version of this app that allowed users to perform two key functions: checking in and out of hospitals and transmitting information to their e-badge. This approach would have freed up resources to ensure that the app is fast and reliable for users, all of whom require access to the app in order to do their jobs.

Next Case Study

Form Automation

INTELLICENTRICS, FEBRUARY - APRIL 2023

Designing the interface that will allow AI to perform data-entry for doctors.