Heuristic Evaluation
Save My Spot!
iOS App

As a project at BrainStation, I conducted a heuristic evaluation and created improved designs of the Save My Spot! mobile app (iOS version 2.3.5) by LifeLabs to improve the usability for British Columbians within existing design constraints.

Role

UX/UI Designer

Duration

10 Days

Tools

Figma
Collaboration Tools (Slack, Google Docs, FigJam)

Problem Space

LifeLabs is a Canadian-owned company that has been providing laboratory tests to over a million Canadians every year for more than 50 years. Save My Spot! is an app by LifeLabs created to reduce wait times for customers without an appointment. However, usability issues within the app add difficulty for users in the booking process.

Significance

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

Methodology

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

Task Selection

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

Heuristic Evaluation

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

Design Prioritization Matrix

Design Constraints

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.

UI Inspiration

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.

Redesign

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

Key Learnings

Working with an existing UI library

It was important to refer back to the existing UI library when building new screens to create consistency within the app. I often had to remind myself that this exercise is about usability and not branding so all efforts should go towards improving the usability of the app.

Communicating with other designers

Working in a partnership required constant communication and organization. Before starting the project, it was helpful to outline expectations and standards (such as naming systems) to set us off on the right foot.

Next Steps

Usability Test

I would like to conduct usability test with LifeLabs patients to ensure that the new UI changes did not negatively affect usability or raise new concerns.

'What's New' Modal

Since the Save My Spot! app has a wide range of users and level of technology fluency, I would like to create a 'What's New' modal or onboarding tutorial for new and returning users. This way, the new features can be smoothly be adopted by LifeLabs patients.

Next Project
CoLab