metalab logo
arrow icon

Mindfulness for your everyday life

Start your journey
Mockup of the Headspace app on a mobile device

Explore the mind

How we helped Headspace move beyond meditation
UX / UI Design, User Testing, Motion & Interaction Design
Responsive web
Marketing Site, Design System

Find a comfortable seat, and breathe

Chances are you’ve tried Headspace in a woke moment of panic or maybe because you value self-care.

If you’re not one of the 62 million people that have tried it, Headspace is the leading meditation app on the market today. What you might not have known is they can also help you Sleep, Move, and Focus. That’s where we came in.

Headspace’s ask was to elevate from a simple product marketing site to an educational hub on all things mindfulness.
illustration of geometric shapes with text that says Mindful Meditation
a part of the Headspace app interface
“I’m consistently amazed at the quality of work MetaLab produces. From day one MetaLab just got our brand, created some stunning designs, and ensured the whole process ran smoothly.”
David Wilson
Director of Web (Headspace)

Our approach

Any good approach considers both the requirements to build what’s designed and how the end user will experience the product.

We used a modular design framework that would ease implementation for the Headspace engineering team and empower our designers to be really creative.
A video thumbnail containing a woman holding a tennis racket and a play button in the center
testimonial element for the headspace websiteHeadspace app interfaceimage of 4 button styles
orange play button in front of an image of a sleeping person
Facebook logotwitter logoinstagram logoYouTube logoLinkedIn logoarrow icons
Image of a smiling woman with an article title next to her that says "Sleep better with these top 10 sleep hacks"Image of a man holding a baby and smilinground, orange play and pause buttonsbuttons labelled "yes", "no", and "See how it works"
Design components of an app
A modular design framework means reduced code overhead.

The solution

We know people visit Headspace with particular questions in mind. Why can’t I focus at work? How do I find more energy? Our job is to get more people to stick around and discover mindful solutions to those big thoughts that keep you up at night.

We brought the “Move, Focus, and Wake Up” categories to the forefront. These new routes invite users to dive further into mindful living and create opportunities to highlight what Headspace has to offer.
How to Improve Self-Esteem
arrow pointing right
Some hacks to help you to fall back asleep
arrow pointing right
How exercise can help you to be more present
white arrow icon in a dark gray circle
What is mindful cooking and how to practice it
dark gray arrow icon in a white circle
How to be more empathetic
arrow pointing right
How snoozing can help improve your sleep
arrow pointing right
“Andy says you really start to scratch the surface of the benefits of meditation when you 'let go'. Our ethos was to provide exploration routes and let visitors find their own way through the content.”
Chris Dammeyer
Product Designer (MetaLab)

Brand expression

To prepare Headspace for new markets, we struck a balance between the playfulness they’re known and loved for, and the polish needed to appeal to the masses.

We wove the updated brand into the experience with playful colors, engaging illustrations, and micro-interactions that help draw in visitors. The new site feels multi-dimensional—much like the mind.
Mockup of an app on a mobile device
“Dot” acts as your best pal—guiding you through the homepage as you explore Headspace.
Mockup of an app on a mobile device
Mockup of an app on a mobile device
Mockup of an app on a mobile device
“Dot” acts as your best pal—guiding you through the homepage as you explore Headspace.

A call to mindfulness

With education comes trust. Once visitors are sold on the benefits of mindful living, they are likely to see Headspace as the tool to help them on their journey. From there, it’s just a matter of highlighting app visuals throughout to encourage people to take the leap from education to action by installing Headspace.
Mockup of the Headspace website on a tablet
Headspace website mockup
Screens of an app for mobile, desktop, and tablet

Mindfulness may not be about measuring results, but we couldn’t help ourselves