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").

Click on image to expand

Fig: The 10 heuristics according to Nielsen Norman Group

 

How the rating system works

 
 

Click on image to expand

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.

 
Screen+Shot+2020-07-27+at+9.36.28+PM.png

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.

 
headspace asset - Overall heuristic.png
 

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

 
1.png
 

“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.

Click on image to expand

Fig: Areas with inconsistent verbiage highlighted

Issue #2

 

More Inconsistent verbiage, colour, and font for same “start trial” action across screens.

Click on image to expand

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.

Click on image to expand

Fig: Re-designed screens highlighted in green

 Second violation

 
2.png
 

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.

Click on image to expand

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.

Click on image to expand

Fig: Re-designed screens highlighted in green

  Third violation

 
3.png
 

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.

Click on image to expand

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.

Click on image to expand

Fig: Re-designed screens highlighted in green

  Fourth violation

 
4.png
 

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.

Click on image to expand

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.

Click on image to expand

Fig: Re-designed screens highlighted in green

  Fifth violation

 
5.png
 

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.

Click on image to expand

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.

Click on image to expand

Fig: Re-designed screen highlighted in green

  Sixth violation

 
6.png
 

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.

Click on image to expand

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.

Click on image to expand

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.

 

Check it out here!