Wireframing the Headspace

Source: https://www.headspace.com/fr/headspace-meditation-app

About Headspace

The story of Headspace begins with Andy Puddicombe. In his early twenties, he decided to end up with his Sports Science degree to become a Buddhist monk. After long 10 years of meditation, he returned to the UK to teach other people what he has learned.

Headspace was launched in 2010 as an events company, but then quickly became an app built to makes meditation easier.

The user is guided through a 10-day beginner’s course to learn the essentials of meditation and mindfulness. Many other materials are unlocked after subscription. They cover different issues like insomnia, anxiety, grief and general improvement of mental wellbeing.

Headspace screenshots and wireframes

Why wireframing Headspace?

Let’s start by asking the even larger question first — Why wireframing at all?

Wireframes are the simple visual representations of the structure of the app or website you are building. They allow us to concentrate on actual functionality, content hierarchy, and user behaviour without any visual disruption. A good user experience starts with a clear and intuitive structure. If yours is easy to understand and use, it will be already a good experience on its own. Design is great, but even perfect design won’t be enough to help you if your information is poorly organised.

I am a very visual person who quite easily get disturbed by visual content. I can see myself starting to create something from and image or colour palette. This is why I must do wireframes. So I can put all these ideas on a nicely functioning structure, and not drown in images et colours.

So why Headspace?

Because Headspace is a perfect example of an app that is great from the inside and outside. I have always enjoyed its colours and illustrations but, before doing this exercise, I have never even thought about the quality of its structure.

And as Radia Perlman said: “If I do my job right, you never see it”.

Headspace screenshots

I decided to make five wireframes of five screens that I personally visit the most on this app, so I can finally understand why I actually like it so much.

Headspace wireframes

This prototype will help you to understand how the screens are linked together.

Headspace low-fidelity prototype

What did I found?

It came as no surprise that Headspace has a nice and clear structure. It is intuitive and easy to navigate.

But now as I look at its skeleton I also ask myself — could it be even simpler? And I think the answer is yes. The first page of the app is also the longest one. Maybe it is quite a lot of information, to begin with. Especially for an anxious user…

What did I learn?

Wireframes are definitely useful. They allow you to look into the deeper structure of an app or a website. They enable you to see what is actually valuable and what can be sacrificed for the sake of better user experience.

It is also extremely helpful to make wireframes of apps that you like so you can learn from it.

Thank you and namasté!




Hi! I’m a UX/UI Designer based in Paris.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Storytelling — User Experience Edition

Why competition is good for designers: Readymag award winner shares trade secrets

From strengthening neural networks to easing user flow.

MMT3:2 Casting the internal space of a vessel

Challenge 2: Wireframing

How to Choose a Site Design or Theme for Your Website

Louis Vuitton Neverfull Real Vs Fake Bag Comparison Guide

Why is this Digital Design Studio breaking the Corporate Culture?

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Kulikova Anna

Kulikova Anna

Hi! I’m a UX/UI Designer based in Paris.

More from Medium

Why Architecture to UX Design?

“Briciole” of UX — Why the real world

Introduction to UI Design — University of Minnesota (Coursera)