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.
Collaboration Tools (Slack, Google Docs, FigJam)
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.
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.
The main and only task flow of this app is checking-in to a LifeLabs. This main task consists of subtasks including:
Here are 4 examples of the Heuristic Evaluation:
The app allows users to make false or unwanted decisions. Without proofreading, users can check-in with the wrong information with no warnings.
To add an error message when users enter an invalid phone number and to grey out the ‘Check In’ button when invalid entries exist.
There are no "emergency exits" to leave the unwanted state. This may result to users pulling a "no-show" and affecting wait time accuracy.
Add a secondary button that allows users to cancel their booking.
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.
Place the secondary button, 'Cancel', on the left and 'Done' on the right.
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.
Maintain the LifeLabs lab location name on the pin and make the check-in location visually significant.
Design Prioritization Matrix
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.
Created smaller map pins for both check-in and appointment-based LifeLabs for the zoomed out map state
Added an autocomplete feature with suggestions based on the shared GPS location
Redesigned map pins to ensure consistency and relevancy of information.
Added a filter feature to only show locations that have a check-in option, as well as locations open now and appointment only.
Hid the location hours in a toggle list & used icons to balance negative space
Organized each section to look consistent
Added an error message and visual indicator when users enter invalid information& button to check-in is greyed out
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.
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.
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.
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.
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.
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.