A modern approach to sobriety

How we designed an online school to help people build a life free from alcohol.

Expertise
Design, Interaction and Development
Platforms
iOS and Web
Deliverables
UI, UX, Strategy, Concept and Development
Interested?

Paving a new road to recovery

In 2012, Holly Whitaker hit rock bottom. Alcohol and drugs were running her life, and she was ready to recover. The problem was that out of the two options available to her, rehab was too costly and the traditional 12-step program didn't fit her needs. So she set out to create the option she wished she had.

What started as a blog, podcast, and Instagram account documenting her own personal journey through unconventional recovery grew into a community of thousands. Eventually, it became Tempest, an online recovery school pioneering a refreshing and modern way to get sober.

Instagram
Podcast list
Video page

One mission, many perspectives

Unlike alternative recovery platforms that draw attention to what alcohol takes from your life, Tempest focuses on what people stand to gain from a life without drinking.

When the Tempest team approached us for our design expertise, they had a clear vision in mind: honor the solid course curriculum by reducing its fragmentation across too many touchpoints. To design a unified experience that meets people where they're at in their individual recovery journeys, we spent hours with past, existing, and future students getting to know their unique perspectives and needs. This way, our journey map reflected the empathy and nuance required to adequately support students' needs.

Holly
“Change is not made through extreme, painful, white-knuckle approaches. Change is made over time, through bite-sized steps that you actually enjoy. This program is about meeting you exactly where you are at, and giving you the right tools to help you get to where you want to go, one step at a time.”
Holly Whitaker
Tempest Founder
Badges
Badges

Designing for a mindset

Recovery is challenging and non-linear, with vulnerability and discomfort as the gatekeepers of progress. So how do you design an educational product for people in this mindset? To encourage momentum and minimize overwhelm, we kept tasks simple and straightforward. We designed a color palette and interface to feel warm, welcoming, and intuitive. Above all, we kept returning to our core students to guide and ground our design decisions.

Evolution
Evolution

Make every step count

Based on what we’d learned in research, it was important to help students feel less overwhelmed by the challenges they’re facing. That’s why we designed the program experience to only present students with one task at a time, making progress feel attainable at every turn. Pacing each task into bite-sized chunks — and celebrating each completion along the way — helps empower students to progress forward with confidence. When the inevitable frustration sets in, we made sure to create an omnipresent help section, available at all times for a breather or 1-1 support.

Addiction and the brain
“Accepting that addiction has deep emotional complexity was important for us to understand. Respecting that state of mind and designing for it is crucial in order to empower people to build confidence and momentum.”
Ben Powell
Lead Design
Hands
Hands
Support
Breathe
Hands
Support
Breathe
ILLUSTRATIONS BY RACHEL LEVIT RUIZ

Parallel pathing towards positive change

Research and design are critical to creating a calming, frictionless product, but the development process has to follow suit to ensure the experience's overall success. Our engineers worked as an extension of our design team from the start, enabling them to weigh in on feasibility, technical implications, and desired experience throughout.

Styleguide
Styleguide
Styleguide
TIGHTLY DEFINED COMPONENT KIT FOR DEVELOPMENT

Set up for future success

Tempest was a new product, so the team wanted to both launch it quickly while allowing for future growth. This meant our development team had to build lean, and build smart.

Illustration

Using Ruby on Rails, they created a back-end server to secure student sign-ups and facilitate onboarding to the course. They were able to build quickly in a language the Tempest team could easily adopt post-launch. For the front-end development, our team opted to use React so that they could build out designed components in a modular, agile manner.

Illustration
ILLUSTRATIONS BY RACHEL LEVIT RUIZ
Scholarship
School
Posts
Orientation
Bird
Mantra
Scribble
Line

              This new sobriety school will change the way you think
              about drinking

Redesigned to imagine what's possible

When students begin with Tempest, the course asks them, "What if, in a year from now, drinking alcohol was just something you used to do?" We are deeply inspired by the students we met during this project and are honoured to have been part of helping them imagine futures free from dependency. Since launching in early 2019, Tempest has been featured in such notable publications as Bustle & Vogue, and we're excited to witness its continued success.

Scribbles
Quotes
Quotes

MetaLab did such an incredible job translating really difficult emotional experiences into a beautiful user experience. Their ability to take our feedback and make adjustments that got to the heart of what we were looking for was uncanny.

Adi Hanash
Adi Hanash
VP Product, Tempest
Quotes

MetaLab’s the best investment I can make for my portfolio of companies.

Dave Morin
Dave Morin
Venture Capital & Entrepreneur
Have a project for us?
We make
interfaces.