Studies have shown that it takes less than a few seconds for visitors to form an important first impression of an app. One study found that 94% of visitors would reject a website or app, or even mistrust a company based on its design-related aspects like clutter, poor error prevention, and inconsistency, which affect user engagement long-term. Source

I used Jakob Nielsen's 10 Usability Heuristics to examine the interface and judge the app's compliance with the recognized usability principles. Then, we rated each defiance on a scale from 0 (no usability problem) to 4 (usability catastrophe). We used the design prioritization matrix to identify which issues should be redesigned first.

Visibility of System Status

Match Between System & Real World

User Control & Freedom

Consistency & Standards

Error Prevention

Recognition Rather than Recall

Flexibility & Efficiency of Use

Aesthetic & Minimalist Design

Help Users Recognize, Diagnose & Recover from Errors

Help & Documentation

The main and only task flow of this app is checking-in to a LifeLabs. This main task consists of subtasks including:

• Searching a neighborhood
• Selecting a location
• Entering personal information
• Confirming the reservation

Here are 4 examples of the Heuristic Evaluation:

Error Prevention

Problem

The app allows users to make false or unwanted decisions. Without proofreading, users can check-in with the wrong information with no warnings.

Solution

To add an error message when users enter an invalid phone number and to grey out the ‘Check In’ button when invalid entries exist.

Severity Scale

User Control & Freedom

Problem

There are no "emergency exits" to leave the unwanted state. This may result to users pulling a "no-show" and affecting wait time accuracy.

Solution

Add a secondary button that allows users to cancel their booking.

Severity Scale

Consistency & Standards

Problem

For small screens, the primary button is usually located on the right side while the secondary is on the left. Users may accidentally cancel their check-in as their thumbs naturally tap the right.

Solution

Place the secondary button, 'Cancel', on the left and 'Done' on the right.

Severity Scale

Recognition Rather than Recall

Problem

There is no address in the pin after the confirmation. Therefore, users must rely on recall when they see the map to see the address of their check-in location.

Solution

Maintain the LifeLabs lab location name on the pin and make the check-in location visually significant.

Severity Scale

Since I did not have access to LifeLab's official UI library, I built my own with existing elements, components, and branding within the app. I used screenshots of the app and Figma to trace UI components and used various plugins, such as Redlines, to build a functional UI library.

For elements and components that LifeLabs did not already have, I took inspiration from the the LifeLabs website and everyday apps such as Google Maps. This allowed me to work off of existing mental models to make the features understandable.

Zoomed Out Map

Solution

Created smaller map pins for both check-in and appointment-based LifeLabs for the zoomed out map state

Before

After

Search Bar

Solution

Added an autocomplete feature with suggestions based on the shared GPS location

Before

After

Zoomed In Map

Solution

Redesigned map pins to ensure consistency and relevancy of information.

Before

After

Filtering In Map

Solution

Added a filter feature to only show locations that have a check-in option, as well as locations open now and appointment only.

Before

After

Lab Information

Solution

Hid the location hours in a toggle list & used icons to balance negative space

Organized each section to look consistent

Before

After

Check-In Process

Solution

Added an error message and visual indicator when users enter invalid information& button to check-in is greyed out

Before

After

Confirmation Screen

Solution

Added a cancel button to allow users to cancel their booking in the event of a mistake, providing an exit.

Added a clear visual indicator of checked-in confirmation and simplified instructions.

Before

After

After Check-In

Solution

Added a confirmation card at the top of the map to provide a visual cue of checked-in status and location.

Added a clear visual indicator of checked-in status and simplified instructions when lab location is tapped.

Before

After