Adding a Feature

Headspace

*This is a speculative project, with no affiliation to Headspace

Mock Up Group 2.0.png
 

Project Overview

 
 

Challenge

Help users set personal goals

Headspace is a wellness app geared towards improving mental health through mindfulness and meditation.

Studies have shown that users who use wellness apps tend to disengage use after a certain point. It suggests that apps do not provide users with actionable recommendations towards reaching their goals.

Creating a feature that provides guidance through each user’s unique journey could potentially keep them motivated and more likely to continue using the app.

Objectives

Add new feature to existing brand

  • Identify a problem within the wellness industry that has not been solved

  • Integrate a new feature into the Headspace app to improve this problem

 

Scope

Mobile design, Branding

Role

Sole UX Designer (Research, Visual Design, Interaction Design, User Testing)

Tools

Figma, Procreate, Headspace iOS app as reference, Whimsical

Duration

2 weeks (80 Hours)

 
 
 
 
HS image.png
 
 

Design Process

 
 

Empathize

Research Goals

Methodologies

Heuristics Evaluation

Empathy Map

User Persona

Define

POV Statements + HMW Questions

Brainstorming

Business + User Goals

Ideate

Product Roadmap

Site Map

UI Requirements

Task + User Flows

Low Fidelity Sketches

Branding

High Fidelity Wireframes

Prototype

High Fidelity Prototype (mobile)

Test

Usability Testing

Affinity Map

Priority Revisions

 
 
 
 

Empathize

What do users need from a Mindfulness App?

Improving health, especially mental health, can be difficult to nurture. It’s a concept that many dismiss or feel is not important enough to prioritize.

The interest in managing mental health and the conversation around it has grown in recent years

And rightfully so. There are many that deal with some kind of mental malady in one form or another but rarely vocalize it or seek help around it. Apps like Headspace and others have made it easier for users to tackle that issue in private.

I wanted to find out exactly what drives users to engage with an app like Headspace, their behaviors around its use and if anything further could be added to improve its service.


Research Goals

  • Gather information about the app and other wellness apps similar to it 

  • Learn what engages and disengages user interaction

  • Identify strengths and weaknesses of wellness competitors

  • Determine the target audience 

  • Understand what user’s want out of a wellness app


Methodologies

  • Secondary Research (Market Research & Competitive Analysis)

  • Primary Research (Personal 1:1 Interviews)

 

Mindfulness in the Market

Headspace applies mindfulness in a very approachable and digestible way, even for the newest of practitioners. Some benefits of mindfulness are shown below.

Since 2020, the company has had user counts in the following areas:

  • Paid subscribed users: 

    • 2 million

  • Users that have downloaded the app:

    • 65 million

  • Presently being used in:

    • 190 countries

    • Over 600 businesses

Demographics

  • 61.9% of headspace's followers are female

  • 38.1% are male

  • 18- 75 years old

 

Wellness Market & Impact of COVID on Mental Health

A lot can be said of how a global crisis affects mental health. Below states some findings on how the wellness market has been thriving and how COVID has impacted digital services around mental health.

 

A Battle of the Minds

Exploring competitor strengths and weaknesses provided insights into what other wellness apps offered and how they measured up against Headspace’s model.

Calm, being the largest competitor, had many similarities, but was shown to have an abundance of options, which became overwhelming for users. My Possible Self and some of the others were free to use and offered tracking abilities of a user’s progress and mood.

 
 

Let’s talk about Mental Health

After conducting about 20 minute 1:1 interviews with 6 participants, I was able to obtain insights into users experience with the app and their own mental health struggles.

This proved to be quite challenging as it was difficult to find users specific to the app

Each user had unique ways of arriving at the app and eventually leaving it after a time.

Number of Interviews: 6

Participants: Those who have used Headspace

Age: 18-75

Summary

  • Users love its aesthetic and playful charm

  • The app lacks personalization

  • Frustration with limited options, especially with the free trial

  • Yearly subscription is higher than most, deterring continued use

  • Users pair counseling with their meditative practice

  • Users have trouble prioritizing their mental health

  • Users rarely invest in their mental health long term

  • Overall users have a positive experience with the app

 

Finding Patterns in User Experiences

In order to synthesize all qualitative data collected from the research phase, an empathy map was constructed to show all observations made from each participant that was interviewed. After clustering similar themes, 2 main patterns emerged that specified insights and needs that needed to be taken into consideration when adding a new feature.

 
 
 

Analyzing the Foundation

After gathering insights, I performed a heuristic evaluation. I began analyzing the existing Headspace iOS app to assess its usability in its current state through Nielsen's 10 heuristic principles. Below are some noteworthy concerns that came up during this evaluation.

 

Welcome, Jane!

Based on all prior research conducted, a persona could then be reached to define who the main audience for Headspace is, and the specifications the new feature would need to cater to based on their goals and needs. This helped me to focus on addressing the major needs of the most important user group.

 
 
Banner.png
 
 

Define

How might we help Jane?

Now that all information has been collected in the research empathy phase, translating insights and posing HMW (How Might We…) questions bring about more actionable statements for further ideation.

 

Meeting of the Minds

Brainstorming helps to hypothesize solutions for the persona. Mapping out ideas quickly generates new ways to improve the persona’s experience with the app. I first sat down and compiled ideas on my own and then worked with a group to further expand on ideas. A full individual brainstorming map can be viewed here.

Individual Mindmapping

Group Discussion

 
 
 
 

Ideate

Prioritizing Features

To begin the Ideate process, a features roadmap or a product roadmap was constructed which ranked most important to least important features needed for the app - Must-Haves [P1], Nice to Have [P2], Surprising and Delightful [P3], and Can Come Later [P4]. This helped to gain a clearer sense of what the priorities of the project were. A comprehensive list can be seen here.

 

Creating a Site Map

A site map could then be constructed, which helped to sort the information architecture and define the navigational hierarchy of all pages and features the app would offer.

 
 
Banner.png
 

Drafting the Details

A user interface requirements document details the high-level requirements needed for each of the pages to be built. Based on features identified in the products roadmap and site map, specific flows could be crafted that the persona will navigate to interact with the new features added. The full document can be read in full here.

User Tasks

  • Jane wants to view her goal accomplishments

  • Jane wants to set exercise as a new goal for herself

  • Jane wants to seek counseling advice from the Headspace community

Screens to be designed:

  • Home (Today screen)

  • Profile / Buddies

  • Stats

  • View Goals

  • Journey

  • Set Goals

  • Set Goal Completion

  • Chat Room

 

Jane on a Mission

To make better sense of what was to be designed, task flows were created to show how Jane would navigate from each screen. Setting a new goal is one of Jane’s main missions, which can be seen below. 2 other task flows were created and can be viewed here.

 
 

The Full Journey

Building on the task flow, the user flow shows how all tasks connect and what decisions the persona would make through those specified scenarios. These flows would then be implemented and tested in the prototype.

 
 

Sketching Headspace

Low fidelity wireframe sketches were then drawn up to help visualize even further where the new features would exist within the app. These are the sketches for each screen that has the potential for the final layout with the new features integrated.

 

Understanding the Brand

Becoming familiar with Headspace’s visual voice was important to study. All design choices going into the new features need to mimic what already exists within the brand.

An array of colors and moods represent different aspects of the app. The most notable feature of the brand is the use of its charming and playful character imagery. A mood board helped me see those elements more clearly.

The following attributes were then identified for the brand:

  • Charming

  • Comforting

  • Uplifting

  • Playful

  • Simplistic

  • Informative

Logo Design

Headspace has a very simplistic, yet recognizable logo: an abstract, orange sphere. Pulling from the existing design, I utilized a high-resolution version of the logo as in the end, it was not needed in the screens that were built out for the prototype. It is not displayed anywhere other than when the app is first opened.

It was interesting to discover that the app responds to light and dark mode adjustments in iOS devices. This design will center around dark mode.

Style Guide

The style guide now shows the elements of Headspace more clearly represented. It details the typography, imagery, the main color palette, and logo variations in both light and dark modes.

 
 

Stepping into High Fidelity

With the style guide as a reference, high-fidelity wireframes could then be constructed to tell the full story of how the persona Jane would view and interact with the app with the new features included.

 
 
Banner.png
 
 

Prototype

Making Connections

Using the high fidelity wireframes, interactions were then mapped out in Figma to provide a functioning mockup of the app for users to interact with during usability testing. Users can now move through the flows that the persona would also take.

 
 
 
 
 
 
 

Testing

Putting it to the Test

Usability Testing helps to understand how the test will be conducted, by outlining the objectives, methods, participants, and tasks to be completed. A plan is drafted and participants are recruited.

Results from each session were recorded with the participant’s consent. Each participant is given scenarios and asked to complete the previously developed task flows. Below is an overview of the results of the test. A full outline of the plan can be viewed here.

 

Participants

  • 5 participants

  • Ages 18-75

  • Mobile App Users

Methodology

  • Evaluative Research

Method

  • Think Aloud Testing

Overall

  • Completion rate average: 97.6%

  • Total errors average: 2.4 mistakes per test

Tasks

  • Task 1 - View goal accomplishments

    • 3/5 Participants were able to locate where to view their accomplishments in. the Stats tab under their Profile

    • 3% Error-rate

  • Task 2 - Add exercise as a new goal

    • 3/5 Participants struggled to find where they could set a goal

    • 6% Error-rate

  • Task 3 - Seek advice on counseling in the chat

    • 4/5 Participants understood found the chat, but were a bit confused by it

    • 1% Error-rate

 

Gathering Insights & Solutions

From the usability testing, an affinity map could be comprised. The affinity map serves to document all observations from user testing and identify specific insights to improve usability. By compiling observations from user testing, patterns of user experiences are able to be identified and placed into a priority matrix to gauge the level of effort needed to complete suggested updates.

Below are details of the main insights gathered and suggestions to resolve user frustrations.

*** NOTE:

Since the objective is to add a feature to an existing app rather than an app redesign, these recommendations do not fit within the scope of the project and will not move forward in revisions.

 

Prioritizing Improvements

The priority matrix then determines the importance of suggestions made according to the impact and overall effort that would be needed to complete the proposed updates in the allotted time.

 
 
 

Priority Revisions

Using the recommendations from the priority matrix, revisions were made based on insights acquired from user observations and then implemented into the final high fidelity prototype to improve usability.

A small addition to the Set Goals screen was also added to ensure users can edit their goal and further add more goals if they choose.

 
Banner.png
 
 

Reflections

This project challenged me far more than I anticipated. Working within an existing app showed me what kind of limitations I had and what structure needed to be followed throughout my design process. The overarching problem was difficult to pinpoint as it required a little pre-research before identifying the true problem I needed to solve.

Most issues existing within the wellness industry are not easily solvable within an app - accountability for taking charge of mental health, prioritizing, and investing in it are hurdles that most deal with. I learned how to pivot very quickly around what to design that felt reasonable within the scope of the project and the ability of the business.

The only feature that may be brought into question is the chat feature. Monitoring this particular feature would be a challenge, but if given more time, I would reconsider how this idea could be implemented.

Next Steps

Now that the design has been tested and revised, it’s time to enter the development phase. In order to effectively communicate the design to developers, I made sure to organize my design deliverables using Figma for handoff. This will allow developers and product managers to actively collaborate and view the deliverable in one space.

Based on the findings during usability testing, design recommendations may be brought up to a representative of Headspace regarding the usability of their iOS mobile app. A presentation would be made documenting the research and testing phases of this project to present a possible improvement for Headspace’s usability in its navigation.

 
 
 
 
 

View Other Projects