Project Brief
Headspace is a popular healthcare app focusing on meditation, available on both iOS and Android smartphones. It has a strong brand identity with its whimsical illustrations and colourful design.
This user interface analysis used the 10 Usability Heuristic principles developed by Jacob Nielsen to evaluate the usability of Headspace (late April, 2020) on the iPhone. The overall score my team gave Headspace was 2.09 (with a score of 0 being “no problems” and a 4 being “catastrophic”).
For this team project we discussed each screen as a group and averaged our individual scores. We also agreed on all recommendations as a group, then divided up the screens for redesigns (my specific screens are here and here). I also worked with Shraddha to consolidate all design elements, such as buttons, for consistency and the design guideline.
** All images and illustrations in this post are properties of Headspace except where noted. These images and illustrations are being used under the fair use doctrine.
Time Frame
April 2020
Role
UX
System
iOS
Tools
Usability Heuristics, Figma
Partners
Shraddha Gupta, Camille Naidoo, Shad Uadiale
Target Task Flow
Headspace was a fairly robust app with a lot of functions. For our analysis we focused on the task of trying to fall asleep with the help of the app.
Screenshots of the target task flow:
Heuristic Principles:
Out of the 10 principles, we found the following with violations:
- Consistency and Standards
- Help and Documentation
- Match Between System and the Real World
- Flexibility and Efficiency of Use
- Aesthetic and Minimalist Design
- Visibility of System Status
These Principles were scored from 0 to 4.
A 0 means that this is not a usability problem.
A 4 denotes a usability catastrophe that prevents a user from completing a task.
Consistency and Standards
User should not have to wonder whether different words, situations, or actions mean the same thing.
Problem:
Inconsistent verbiage for the same “play” action between screens. Using icon for “play” with actions that were related but had significant difference, making the visual language confusing.
Problem:
Inconsistent colour and font for similar button actions between screens. Using icon associated with one action (i.e. “unlock”) with other actions.
Score: 1.25
Mostly cosmetic issues; fix if there is time.
Recommendations
Consolidating graphical language (i.e. icons) usage for the same actions in different screens and clarifying / differentiate actions that are similar but with significant differences.
Clarified language.
Removed icon reserved for “Play”.
Removed icon reserved for “Play”.
Consolidated wording for the play action.
Removed icon not associated with the language and clarified language for the actions. Standardized button design.
Help and Documentation
When necessary, information should be easy to search, focused on the user’s task, list concrete steps to be carried out, and not be too large.
Problem:
No indication that the app and audio would continue when the phone was locked or minimized manually.
Score: 1.7
Minor usability problem; low priority.
Recommendation
Added a clarifying message.
Match Between System and the Real World
They system should speak the users’ language, with words, phrases and concepts familiar to the user. Follow real-world conventions.
Problem:
The word “move” and the corresponding icon did not match common expectation. Icon was hard to decipher.
Score: 1.8
Minor usability problem; low priority.
Recommendation
Updated wording and icon to be more in line with the common understanding of “exercise”.
Flexibility and Efficiency of Use
Accelerators – unseen by the novice user – may often speed up the interaction for the expert user. Allow users to tailor frequent actions.
Problem:
The most visible CTA was inaccessible. The accessible contents required several extra steps without a way to make shortcuts.
This was likely an example of “dark pattern” – purposeful inconvenience to promote sales. In this case it was to “nudge” users to pay for the subscription service.
We should generally discourage the undermining of usability for the purpose of marketing. There are more palatable ways to promote products to users.
Score: 2
Minor usability problem; low priority.
Recommendation
Rearranged the promotional prompt to the lower half of the screen.
Regrouped items based on if it’s accessible to the account type (for example, a free account).
Aesthetic and Minimalist Design
Dialogues should not contain information which is irrelevant or rarely needed. Extra information competes with the relevant information and diminishes their relative visibility.
Problem:
Extra and non-essential contents diminished task visibility.
Score: 2.8
Major usability problem and should be fixed.
Recommendations
Minimized promotional material on the opening screen by moving them further down.
Removed superfluous information and screens that were unrelated to the task (“falling asleep”) after the audio had finished playing.
Added shortcuts to continue the task in case the user was still awake.
Collapsed descriptive (but not substantive) write-up so the task CTAs are visible without the need for scrolling.
Visibility and System Status
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time.
Problem:
No feedback was given during and after the download process. Toggle button was an inappropriate choice to indicate download status.
Score: 2.98
Significant usability problem and should be fixed.
Recommendations
Changed the icon to indicate different states and actions for file download. Added progress bar and appropriate wording.
Executive Summary
