Take a nice, deep breath...
when you can


Overview


Happier, formally Ten Percent Happier approached Full Nelsen looking to support their upcoming redesign efforts with an equally beautiful updated app experience. The team had a single designer who had recently moved on to their next role so I took the lead on multiple design and marketing initiatives for multiple product owners and teams.

I provided the staff augmentation they needed at the right time to release a fresh coat of paint with meaningful UX upgrades.

Two screenshots of the Ten Percent Happier app, displaying the new logo and their tagline: 'Meditation that meets you where you are.'

The first project I took on was to explore a visual style that would match up cleanly with the new site they were going to release soon. The brand evolved from red and black to a myriad of colors including a bright yellow and every sort of mesh gradient in-between. They coupled this with both relatable and unexpected lifestyle photography.

Various explorations for meditation challenges and course cards personalized to the would-be or returning meditator.
Various explorations for meditation challenges and course cards personalized to the would-be or returning meditator.

This visual language, explored over roughly 5 rounds with the head of brand and marketing, eventually turned into a simple card deck system that would be the meditator's primary experience day-to-day in the app.

Another collection of course cards, this time with a more playful and colorful design.
The chosen approach to the cards included using the brands new mesh gradient identity and a mix of lifestyle images.

To improve and personalize the content (video, audio, reading, etc.) for the new mediators, we also completely revamped the onboarding flow with interesting questions and encouraging statements. Each screen flowed cleanly into the next and as part of this work, I built an end-to-end prototype complete with transitions and animations to present to the larger product team.

This work would later inform some of the designs for user-acquisition and their blog.

Four phones displaying the end sequence of the onboarding flow, each with a different stage of a box-breathing exercise.
At the end of the onboarding flow, I prototyped up with a box breathing exercise to allow for the background processing time.

Building onboarding came up fast. I found myself in in San Francisco for a conference but was able to help the lead programmer remotely build the mesh gradient system programmatically so we could reduce the app size (a stretch goal they wanted to explore). This created a experience that felt dynamic and encouraged moving to each next step.

Three phones displaying unique attributes to onboarding including: referral capture, a subscription gate and a notificfation prompt screen.
Additional screens added to onboarding for marketing, acquisition and engagement teams.

The Happier app is a paid membership with access to exclusive courses taught by leaders in meditation, stress management, depression, etc. We optimized the onboarding to help multiple teams hit their targets and/or goals in addition to get the meditator coming back to continue their practice.

Two phones displaying statistics and progress indicators for a meditator's practice. The left phone displays a graph of their practice over time, the right phone displays a list of their goals and their progress towards them.
When meditators complete a practice, we give them encouragement, remind them of their goals and share some stats.

My second major project was working with another product owner to present metrics and remind meditators to continue to update their intentions month to month as life changes. I explored a bunch of styles for progress indicators through sketches and example code.

I drew inspiration from video games that track quest progress and stats to illustrate the meditator's growth in their practice and have something to show for their efforts.

A phone displaying a list of podcasts, each with a thumbnail, title and description. On the right, there is a stack of UI elements including teachers, audio shorts and topics.
Built around topics, we added short form video clips and audio-only streams to existing podcasts and teacher collections

Another aspect of Happier that users interact with the most is podcasts. These are a combination of public and member-only feeds, but in addition to audio video was shot in more recent years. I took on the third project to transform their Podcast tab into a Catalog tab.

I continued to push their brand guide forward with this updated vertical video, audio, topic and teacher collections.

Three phones displaying a web-based quiz to identify what type of meditator you are and get you to sign-up.
We worked with more teams on user acquisition and conversion by adapting some of onboarding to a web-quiz. We shared what type of meditator they were and offers.

To tie everything together, I worked with another team to update the web-based acquisition flow used primarily on paid channels and social. I used the same approach as the onboarding to give a taste of the experience and worked on a fun off-shoot to identify what type of meditator you are (like your personality type).


Skills I acquired or improved

  • More advanced animation and implementation with Lottie

  • Async communication through Loom to get more reactions on work

  • Juggling multiple projects with multiple product owners and personalities

  • Visual development hand-off in layers to best represent the brand intentions


Challenges