Headspace
What’s a Heuristic Evaluation?
According to Nielsen Norman Group a Heuristic evaluation (Nielsen and Molich, 1990; Nielsen 1994) is a usability engineering method for finding the usability problems in a user interface design so that they can be attended to as part of an iterative design process.
Heuristic evaluation involves having a small set of evaluators examine the interface and judge its compliance with recognized usability principles (the "heuristics").
Fig: The 10 heuristics according to Nielsen Norman Group
How the rating system works
Fig: Ratings scale for severity of issues
Why Headspace?
Our decision to evaluate headspace was largely due the negative reviews we saw from users about some of the issues they encountered.
Given how beloved Headspace is as a product, we felt obligated to try to solve some of the issues its users were facing.
What we discovered?
In our analysis of headspace, there were no catastrophic issues with the app; most issues we uncovered we more cosmetic in nature.
However, there were a few issues that could seriously impact the usability of the app in rare occasions. We recommended fixing those issues, as it will bring a better user experience overall.
Overall usability score
We gave Headspace an overall score of 2.09. This score was assigned after aggregating all 6 heuristics violations we uncovered.
The overall heuristics evaluation score of 2.09 boarders the scale of a major usability problem, and our recommendation is to fix these issues in order to improve the current user experience on headspace.
Areas we analyzed
For the purpose of the evaluation, we decided to focus our analysis primarily on one of Headspace’s main selling point; helping users fall asleep. In addition to evaluating the primary task flow of falling asleep; we also evaluated other navigational elements within the app.
I’ve gone into more details below highlighting the areas of usability violations we identified and the corresponding score for each of the violations, justification for assigned score, and our improvement recommendations with accompanying redesigned screens.
First violation
“Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform conventions.” - Nielsen Norman Group
Issue #1
Inconsistent verbiage and icons for “play” action across screens.
To the right, I’ve highlighted areas where my team saw different words and symbols for playing content which left us wondering whether different words and buttons meant the same thing.
Fig: Areas with inconsistent verbiage highlighted
Issue #2
More Inconsistent verbiage, colour, and font for same “start trial” action across screens.
Fig: Problem areas with inconsistent verbiage highlighted
Recommendation & re-design
Based on our average severity score of 1.25, these issues highlighted are cosmetic in nature and aren’t critical to usability, and should be fixed if time allows. Our recommendations were, to pick consistent verbiage for playing content and starting trials. We also recommended using the same symbols, colours and fonts for same actions across all screens.
Fig: Re-designed screens highlighted in green
Second violation
Even though it is better if the system can be used without documentation, it may be necessary to provide help and documentation. Any such information should be easy to search, focused on the user's task, list concrete steps to be carried out, and not be too large. - Nielsen Norman Group
Issue
Lack of documentation indicating continual audio when phone is locked.
Our analysis revealed that once a user started playing a sleep module, there’s no documentation as to whether or not they can close the app and have the audio still play.
Fig: Problem areas with a lack of documentation
Recommendation & re-design
The higher rating of this violation indicates that it’s more than a cosmetic issue and does affect usability. Our recommendation was to add a small sentence indicating a user can lock their phones and drift off to sleep while it plays.
Fig: Re-designed screens highlighted in green
Third violation
The system should speak the users' language, with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order. - Nielsen Norman Group
Issue
The word “move” and corresponding icon don’t match real-world conventions.
On this screen we see the word “move”, which seemed off in a meditation app. After tapping the icon, we realized it indicates a physical fitness screen. It wouldn’t be conventional to tell someone you’re going to “move” when you’re working out and the triangle/circle icon doesn’t logically seem to relate to fitness whatsoever.
Fig: The move icon didn’t match real-world conventions
Recommendation & re-design
A severity score of 1.80 doesn’t critically impede a user’s ability to use the app, but we do recommend making a cosmetic change by using something like a dumbbell or other symbol that’s more naturally associated with fitness and to use the word fitness instead of the word move.
Fig: Re-designed screens highlighted in green
Fourth violation
Accelerators — unseen by the novice user — may often speed up the interaction for the expert user such that the system can cater to both inexperienced and experienced users. Allow users to tailor frequent actions. - Nielsen Norman Group
Issue
Most visible CTA to free members is inaccessible.
If you’ve paid this would be considered a positive, but if you haven’t this then becomes a violation and significantly impacts usability.
Fig: Problem areas with a lack of flexibility highlighted
Recommendation & re-design
We rated this violation a 2 on the severity scale as it’s a minor usability problem that creates a fairly significant inconvenience with the potential to be an area where users drop off. Fully understanding the business incentive behind this, our recommendation here is to allow free users the flexibility to tailor their experience and hide unusable content, or to be able to see available content first.
Fig: Re-designed screens highlighted in green
Fifth violation
Dialogues should not contain information which is irrelevant or rarely needed. Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility. - Nielsen Norman Group
Issue
Extra and irrelevant content diminishes task visibility.
On the first screen to the right, we see an ad for commercial juice cleanse, which took prominence over task in the ap.
Another minimalist violation we noticed was during the task of falling asleep, we felt that some of the information being shown to the user worked against this purpose; and was more of a distraction in that regard.
Fig: Problem areas with too much content highlighted
Recommendation & re-design
We rated this violation a 2.80 due to the number of screens that had an abundance of irrelevant information at any given time.
This creates a significant usability issue, and we recommended that most of the content on the screens should be better compartmentalized to create a more minimal look and prevent information overload for users, also screen real-estate priority should be given to content relating to tasks within the app, rather than to ads.
Fig: Re-designed screen highlighted in green
Sixth violation
The system should always keep users informed about what is going on, through appropriate feedback within reasonable time. - Nielsen Norman Group
Issue
No visible status during and after the download process.
We found there’s no visible state change to indicate an ongoing system process when a user downloads a module.
Fig: Problem areas with no visible system status
Recommendation & re-design
We gave Headspace a rating of 2.98 in this category because we think this could be a huge issue for users, and could potentially create problems during use, for example: accidental data overages or incomplete downloads if the user intended to download content only over Wi-Fi. Our recommendation was to include a download indicator bar that would easily convey the download status to the user.
Fig: Re-designed screen highlighted in green
Design System
The last part of the project involved creating a clear and functional organized library of all user interface elements within our design file.