Wireframing the Headspace
“Be kind to your mind”
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.
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”.
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.
This prototype will help you to understand how the screens are linked together.
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.