Heading

Reframe Sleep Onboarding

Mobile App / Customer-facing

With our leading neuroscience-based coaching program, Reframe has been rapidly building an ecosystem that has helped one million people build a healthier lifestyle. Reframe Sleep app is the long-awaited last piece of this ecosystem, especially for our investors. Many longtime users have expressed the need for a tailed coaching program to help them sleep better as well.

This is my story of designing Reframe Sleep - a mobile app that helps one million Reframe users to sleep better.

My Role

As the sole product designer, I worked directly with two co-founders of Reframe and I was responsible for the research, interacton design , and visual design. I designed the entire onboarding experience from scratch and successfully brought a 38% conversion rate.

Reframe Sleep was launched in the Appstore in April 2022 and helped the company secure 10 million funding in series A.

Team

Ziyi Gao and Vedant Pradeep, Co-Founders

Maia Rocklin, Content Designer

Background

Reframe Sleep is a subscription-based coaching program that provides personalized support and guidance tailored to users' specific sleep needs and preferences. The onboarding process is a user's first impression of our app, and when a user launches your app for the first time, the onboarding is a unique opportunity to show users how the app can help people develop better sleeping habits and also to help us get a deeper understanding of users’ sleep patterns for future in-app usage.

Design Goals

User Goal

● Help users experience the value of Reframe sleep and coaching features.
● Understand users' specific needs and preferences on coaching and match them with our top coaches.

Business Goal

● High-converting customer experiences hence high app subscriptions and revenue.

Opportunities

The earliest challenge for me was to align user goals and business goals. How can we learn more about the users, show users our values, and resonate with them at the same time? So I broke the challenge down into pieces, and asked myself 4 questions:

● What are some of the preferences users may have when it comes to coaching?

● How might we convey the sleeping app idea subtly and build trust along the way?

● How might we ask questions without overwhelming users?

● How might we engage with users and reduce drop-offs?

Responsibilities

UI/UX, Strategy, Research

Team

Ziyi Gao and Vedant (Founders)

Maia Rocklin (Content Strategist)

Category

B2C

Challenge

Engaging users with educational guidance, coaching preference, and coaching incentives.

One of the biggest challenges in this project was that I was given one week to deliver the onboarding design, so it was impossible for me to conduct research with actual users. However, I believe users' insights are fundamental components to creating meaningful, user-centric experiences, especially when we.  

As I was thinking about how I could get a deeper understanding of people's sleep issues and habits, I realized we have experts familiar with these issues in our team already. Our certified sleep coach, Kevin, who has over 20 years of experience helping people sleep better, is the most qualified person I could talk to.

After talking with Kevin, I had a much clearer understanding of what questions we would ask in the onboarding and how we could convince users our program would solve their sleeping problems. In order to engage with users and show users our value, we were going to cover the below three aspects.

Educational Guidance

Helping user discover the values of a steady sleep routine by funneling users through our key features and capabilities.

Coaching Preference

• Personality
• coaching styles.

Coaching Incentives

• To maximize work performance.
• To control weight.
• To improve physical and emotional health and wellness.

Competitive Analysis

Establish customer bonding and trust through real data.

Knowing there were about 6 questions necessary to ask users and I needed to avoid drop-off as much as possible, I encountered the next challenge - how to keep users engaged through these questions?
‍
As a designer, I always kept myself updated with the latest great designs , and I knew there are some well-designed high-converting (30%+) onboarding experiences, which I could definitely learn from. I looked beyond the scope of sleeping applications and focused on health and wellness applications in general. I went through over 10 well-designed onboarding with our Content designer Maia to brainstorm questions and structure of our onboarding along the way. Here are some of the insights I gathered from the best 4 of them.

Insights

After the meeting with the coach and taking a competitive analysis , we had a clear understanding of what questions to ask and how we ask.

● Building a bond with users after one another questions through echo screens along the journey.
‍
● Using data/graphs to prove that our program works.

● Utilizing visual design to convey the sleep app idea and build trust.

Ideation

Put the Pieces Together

As I was on an extremely tight deadline, I started to convert the insights into high-fidelity design so that I could align the progress with engineers as early as possible and get more realistic feedback through testing.

Knowing the goal and the approach we were going to engage with users, I wanted to provide users with a visual experience of night and peace. The team reached positively to my design but felt like it would be better if we could excite users more.

GIF or Lottie?

I proposed to include animations in the onboarding as it worked great with our two other products in terms of cutting drop-offs. While I was trying to impress our first-time users with cool animations, I faced another challenge. The GIF file I exported was too big and it slowed down our application as well. It needed more than 2 seconds to load, especially on older devices.
‍
As a designer, I always aim for a frictionless experience for users, so I tried reducing frames, shrinking the file size, and converting the file to every possible format. After numerous attempts, I successfully solved the problem by installing a plugin in After Effects and exporting Lottie files which works as good as GIF but much smaller.

The Refinement

Testing With Users

Like most startups, Reframe’s plan was to launch quickly, with the best possible version at the time, and to learn and iterate on the product going forward. Even though the time's very tight, we still conducted usability test with 8 users to reveal the users' reaction to each screen and the elements that trigger user activation.

Simple and Engaging

Participants revealed overwhelming information would irritate the user rather than educate them, especially on the first screen. Including the most necessary information in an onboarding tutorial is key to grabbing the full attention of the users.

To boost engagement, we decided to approach users with a short and encouraging copy in a more affirmative tone.

From Generalization to Specialization

We observed some potential opportunities for us to increase conversion. Even though scientifically the recommended hours of sleep per day for adults between 25 to 64 is about 7-8 hr, such a wide range might make users feel being generalized. We changed the age question from selection to a form and based on the answers, we will have personalized content that satisfies the user goals.

● The first page should serve as a "selling page", but it's a little underwhelming.

● Even though scientifically the recommended hours of sleep per day for adults between 25 to 64 is about 7-8 hr, but such a wide range might make users feel neglected.

● It would be much mutter if the breaking/echo pages between the questions flow more naturally.

Final Design

Animated
Landing Screen

I removed extensive copy on the first screen and included cloud and moon animation instead to convey the sleep app idea and get users' attention right after the app first launched. I managed to get a 0% drop-off rate on the first screen.

Personalized
Coaching Experience

I visualized the coaching experience we offer, including a sleep tracker, advice from a personal coach, and a conversational interface, to show users the touch and feel of our sleep app.

Engaging
Echo Screen

In between questions, I included echo screens to introduce the features and engage with users. Echo screens are like having a conversation with users, instead of keeping asking for information, we show users what we can offer to help them sleep better.

Validation

The onboarding I designed received positively from users, and it has a 38% conversion rate, 8% higher than the goal. With the launch of Reframe Sleep, Reframe has an ecosystem of improving people's mental and physical health and acquired another 10 Million funding.

Pain & Gain

The biggest challenge for me is to create a successful onboarding experience from scratch within one week without conducting any research with end users. But as a designer in an agile team, I don't always get to talk to the users, I sometimes need to articulate the problems through secondary research and apply my design principles to the process.

It’s still early days for the app, yet the results have exceeded our expectations. Here are some feedbacks we got from users.

TOP

←Snapbrillia AI

Diversity Recruiting Web App Redesign

The Grand Budapest Hotel→

Film Trailer Redesign

© Crafted with ♥ by Han Li