Headspace App Wearable Device Integration

Add A Feature — UX/UI Case Study

“As a UI/UX Designer joining a team, you’ll often have to rapidly come up to speed on the product and users, and quickly iterate on proposed solutions under tight timelines.”

Headspace Logo

During my bootcamp at Ironhack Berlin, one of the challenges I completed was to add a feature to an existing app. The objective of the challenge was to demonstrate a situation where I would be joining a team working with an existing digital product. And as a rule, a randomly member of my cohort made a feature proposal for me to realize in 4 days.

The project brief was: Integrate a wearable device to Headspace App.

Well, in the year 2019 there are tons of different wearable devices available for the consumers and I find “UX design for emerging technologies” to be a very interesting subject. However, I decided to focus with my project on smartwatches due to the short project duration.

At the very beginning, I analyzed Headspace app in order to incorporate this new feature into their existing product.

What is exactly Headspace?

Headspace is a habit building mindfulness app that provides guided meditation resources online, accessible to users through the company’s website and via a mobile app on the iPhone and Android platforms.

How It Works:

● Once you sign up, you can start learning to meditate right away with Headspace’s free basics pack and other bite sized minis.

● The limited free content has theme and length variations.

● To unlock additional content, paid subscription options are available which offer hundreds of meditations for everything from stress to sleep.

In terms of user experience, consistency is clearly a key for Headspace. When it comes to the flow and timing of the videos, a clean and unified feel prevails. The cadence of the application matches the animations and the audio. Thus, that empowers use of senses.

Smartwatches and the technology behind heart rate monitoring

Knowing about the product only would not be enough for this kind of a project. In this case, learning about how smart watches measure heart rate of their users is required. So, I made a research about the technology used.

Most of the wearable devices including Apple Watch uses a method called PPG (photoplethysmography).

PPG sensors use a light-based technology to sense the rate of blood flow as controlled by the heart’s pumping action. It’s essentially testing how much red or green light it can see when looking at the skin on your wrist by flashing LED lights hundreds. Blood is red because it reflects red light and absorbs green light. Between heart beats, there’s less absorption of green light. These changes help the measurement to be done.

The research also showed me that PPG method can be applied to smartphones using their cameras too. All the user needs to do is to put their finger on the flash light of the phone camera and wait for the measurement. This was good news because at that point I knew that no one was going to be excluded if every user of the product is able to try out this new feature.

“Every design starts with the research.”

After learning about the product and available technologies, I started my exploration for possible solutions to the problem using design thinking methods.

I interviewed some users of the Headspace App and various smart watches. These interviews provided me beneficial insights to use while shaping ideas for the new feature. As a result, my empathy map for this project looked like this:

The user:

Says: “I like to invest in my well being to feel better and motivated but I have to believe that it is the right thing for me.” Thinks: Sometimes they don’t know how meaningful and useful the data they get using smart watches. Does: Keeps the track of their progress via various apps. Feels: Overwhelmed by the number of apps they have to use for wellness and healthcare.

Considering the given project brief and the user statements, I defined the problem I will be trying to solve as following:

Problem Statement

How might we offer engaging and more relevant content for users to promote stronger brand loyalty and efficiency?

Competitive analysis is a must

Making observations is one of the most important things to do while ideating. So, as my next step, I downloaded various apps which are relatable to Headspace or to the concept of the project.

This analysis helped me to understand the strengths and weaknesses of the competitors as well the value this feature might add to the product.

Competitive analysis diagram.

My first impression is that the apps can be distinguished as being reporting only or habit building. Headspace is clearly more habit building than any of its competitors. On the other hand, Welltory draws the attention by its heart rate measurement feature via phone camera. Google and Apple health apps, however, seem to serve more of monitoring purposes and that makes them feel relatively reporting and traditional. At this stage, I also understood that pure heart rate monitoring will not be sufficient to create accurate and qualitative data, hence hindering personalized experience for the user. Through MosCoW method, I prioritized features amongst the products I analyzed as follows:

Heart Rate Monitoring Quick Questions Tag Cloud

Next: Materializing the design

User flow is the path a user follows through a digital interface to complete a task. Moreover, it is a valuable step while creating wireframes in the design process. I created a user flow showing the happy path for the new feature.

Notice that smart watch synchronization has became optional after the research.

User flow showing the new feature happy path.

After that I came up with a quick lo-fi prototype in order to get feedback from the users. The most valuable comment during the testing was about adding state screens. This is a common situation related to mental models while designing in emerging technologies. Users have sets of experiences built up, and they take those experience into new products. They expect things to work based on their previous expectations.

User testing on lo-fi prototype.

However when it comes down to a situation that the users cannot relate to past experiences, they tend to get lost figuring out what is happening on the screen.

After testing with the lo-fi prototype, using the user feedback I gathered, I started designing the screens on Sketch.

Screen design on Sketch for the new feature.

Headspace has a unique interface with very well drawn illustrations and a very consistent design as mentioned before. In order to keep it the same way, I carefully created similar illustrations as well as the UI elements and atomic design.

And the winner is…

Finally, after an intensive 4 day design challenge, I’ve created an interactive hi-fi prototype in Invision Studio. A video of the prototype can be viewed demonstrating our brand new feature: Listen to your heart.

Hi-fi prototype video.

This challenge helped me gain a lot of experience in creating features for an existing product and I am proud of the final outcome. So my takeaway from this project is:

Trust the process and follow the steps during a project.

It is ok to start with assumptions but always validate through users.

through users. Working in design projects for new technologies might be challenging but it’s definitely fun!

The next steps for this project would be: