Redesigning onboarding for an alcohol reduction mobile app

Role

UX Designer, UX Writer

Tools

Figma, Ilustrator

Company

Reframe

Timeline

2 days

The Challenge

With over 2 million users, Reframe is a Series A, YC-backed mobile habit-tracking app for alcohol reduction and sobriety.

The design challenge was to redesign their onboarding process within 48 hours, with a focus on how to increase conversions from the younger user demographic. So let’s get right to it!

tl;dr The current state has asks the user to put in too much effort (ie. cognitive load), feels like an ad-like experience, and doesn’t show product-market fit.

The Approach

Former State

The app originally had an introduction, a sign up/login portal, and a a how did you hear about us section that you were required to fill out before proceeding.

You then proceed to a summary of your personalized plan that is text-heavy, filled with reviews and news features. After reviewing, you finally get to a payment plan with no product preview or description of what exactly you are paying for.

User Interviews

Time was of the essence, and the goal was to understand user pain points with the current onboarding process. I completed usability testing with five potential users from ages 20-35. Here are some key insights that I discovered :

  1. Users don’t really know what they are signing up for.

    “In general, it’s a bit unclear what the plan is before I pay for it. Is it going to be about limiting drinks per week? Providing motivational stories? Connecting with others?”

  2. Users find current infographics to be too text-heavy and confusing.

    “There is so much text, even within the diagrams and graphs, that I feel overwhelmed. I would love to have some breaks from just reading and filling out things.”

  3. Users feel like their experience feels ad-like and less like a personalized plan.

    “By the time I got to the actual pricing, I felt like I was taking a survey for the company, not a product that was trying to help me achieve my goals.”

tl;dr This was an issue of clarity and product-market fit.

The Solution

Given the time crunch of a 2 day design challenge, my approach was apply lean UX design and quick iterations for a viable prototype. Here is what I came up with:

Simplified Pricing Page

Task achievement should be effortless, especially for an onboarding user.
Extraneous icons were removed and replaced with clear descriptions of what each plan provides. Users are also recommended the 30-day trial to decrease cognitive load and incentivize higher retention rates.

Reflection

Reframe is a unique consumer app because it (1) focuses on the vulnerable and sensitive topic of alcohol use, (2) seeks to reach a large user base (from the social once a week drinker to a person experience alcoholism), and (3) relies on science-backed research as the foundation for product-market fit and building trust.

some challenges

  • Meeting the 48-hour deadline demanded an agile and lean design approach, centered solely on addressing and exceeding user expectations through design thinking.

  • Prioritizing cognitive load became crucial, considering the abundance of information that needed simplification for seamless user task completion.

  • Time constraints significantly limited our UX research scope, prompting us to swiftly engage in diverse user interviews. This approach enabled us to quickly gather data, identify existing user pain points, and understand their needs.

…and learnings!

This was followed by a thorough questionnaire (30 wireframes worth!) with dense visuals. At the end, every user — no matter how they answer — is given the response that the product is a great fit.

  • Embracing empathy in our approach was a valuable learning experience, allowing us to understand and cater to users' specific needs effectively.

  • Establishing trust through strategic design frameworks, concise microcopy, and guidance significantly enhanced the user onboarding process, making it more user-friendly.

  • Employing an impact-driven design approach was particularly rewarding, especially when dealing with a product used by over 2M users. Every element was meticulously crafted with consideration for diverse user needs, goals & personalities.

Product Preview

By providing a quick preview of the user’s potential dashboard, the redesign provides transparency on what the user is paying for and increases interest in the product.

Clearer Illustrations

The redesign replaced clunky illustrations with actual features on the app, and included clear text labels to help users quickly understand what they are looking at.

Less Ads, More Connection

Fostering an empathetic and personal connection was key. The redesign included more motivational and supportive microcopy to build trust and user affinity.