New users generally find the onboarding process informative, but it can be lengthy and time-consuming.
Despite its status as a top-ranked app for cutting down on drinking, Reframe's onboarding process has faced some hurdles in the onboarding experience due to the following reasons :
Craft a concise and welcoming onboarding experience that efficiently guides users through the necessary steps while providing them with essential information.
Reframe is a habit change program focused on helping people in changing their drinking habits - whether it is cutting back or complete abstinence from alcohol.
Onboarding Design Goal: Time to Value
To signup for the Reframe free trial with minimum amount of friction.
Target users
People who have fair understanding of a smart phone and wanting to change their drinking habits.
OVERVIEW
What is the standard Onboarding process?
Onboarding is the process of getting user's familiar with a new interface using dedicated flows and UI elements that are not part of the regular app interface. In mobile onboarding flows there are three components encounterd :
1. Feature Promotion
To educate the users about how the app can help them cut down their drinking habts.
Standard practices:
Users usually download an app with intention so avoid lengthy promotional onboarding.
Talk about how the app would benefit the user to drive the flow.
2. Customization
We request user data in order to customize user's experience
Standard practices:
Keeping it as simple as possible.
Explain why we collect the data and how that data will be used
Maintaining transparency about the process and the data usage.
3. Instructions
To help the user understand how to use the app, which in this case study is not covered.
Standard practices:
Providing tooltips and cards to help them understand the app.
DESIGN PROCESS
Ok, what was my approach to this challenge?
My initial appraoch involved research through reviewing the application reviews on Appstore and conducting competitor analysis. In the second approach, I gained more insights by conducting Contextual Enquiry with five partcipants.
The first stage involved research from the existing customer but the community on reframe is anonymous so I went through the app store reviews to see if I could gain any insights from the success stories of reframers.
Objective :
To help understand the user perspective of the app and their experiences.
Takeaway:
Reframe impresses with its positive impact on users.
Prospective users benefit from hearing existing Reframers' experiences.
Testimonials enhance credibility and build trust with new users.
2
INITIAL RESEARCH
User Research
Self efficacy model of Behaviour Change
This theory proposes that two types of expectancies significantly impact behavior: outcome expectancy, which is the belief that specific actions result in particular outcomes, and self-efficacy expectancy, which is the belief in one's ability to successfully perform the necessary actions to achieve those outcomes (Salazar, 1991).
Objective :
In order to provide a smooth onboarding experience, it's important to gain a better understanding of the user group and identify factors that can aid them.
Takeaway:
The onboarding experience should accomplish the following:
Boost users' confidence in their ability to reduce drinking habits through necessary actions.
Establish trust and reinforce that the app can assist them in achieving their goals.
Include necessary questions to help users understand that the app is designed to aid them.
3
MARKET RESEARCH
Competitor Analysis
An assessment of the strengths and weaknesses of current and potential competitors. This analysis provides both an offensive and defensive strategic context to identify opportunities and threats.
Objective :
Reddit considers Reframe and Sunny side (a.k.a Cutback coach) as the two main apps helping to cut back on drinking.
One deviation: tracks drinks on each day of the week instead of just the whole week
Helps in tracking drinks and estimating expenses more intuitively
4
USER RESEARCH
Contextual Inquiry
It is a method in where we, the researcher observes users in their natural environment and engages in discussion to gain insights into their needs and preferences.
Objective :
To observe users during their onboarding process to evaluate the ease of interaction and their understanding of the Application objective.
Participants Selection :
Recruited total of 5 participants.
Selected user groups consume alcohol & can help understand onboarding problems/frustrations.
Non-alcohol dependent users provide insights for onboarding.
The content of the screens are focused too much on promoting the brand and as a result, 4 out of 5 users ended up skipping these screens. "We are transforming lives, it should sound more personal because it is."
SPLASH SCREENS
Current Onboarding scrrens
“Feels like they are marketing the product more”
“I usually skip these screens unless there's something interesting”
“.....too many technical terms”
User Testimonials in between the flow
“..too much of text to read in the Testimonials”
“Why are the reviews between the flow?”
Recommended Information Architecture :
1. Reframe's mission is to make a personal impact by transforming lives, and this should be reflected in the way we communicate our message.
2. “Get started” can be changed to “Become a Reframer” to make it more personal
UX INSIGHT
1. Serial Position Effect - A user best remembers the first and last items in a series.
2. Krug's 1st law of Usability - Don't make the user think more.
User focussed onboarding
The microcopy and onboarding content aim to educate the user on how the app can help them modify their habits using this flow: welcome-assurance-validation
User Testimonial Redesign :
Quotes are presented in a concise manner, emphasizing key points to inform the user about what other users feel about the application.
Takeaway 2
Information Architecture
The user experience was impacted by disruptive splash screens and excessive information about the application, resulting in annoyance and a perceived lengthy process.
Current User Flow
Proposed User Flow
System Status
Users are uncertain of the outcome after completing each module.
“I like the relevant questions but, how much longer is this?”
Interruption between modules
“too many interruptions”
“....this is of no significance to me at this point”
“unnecessary at least at this point”
Loading screen between modules
Useful info for users, suggest moving to beginning of onboarding.
“too many screens with the same info is repeating”
Recommended Information Architecture :
Provide clarity for users by specifying modules clearly a. Profile b. Goals c. Personalization d. Plan
Be transparent with the user about the purpose and estimated duration of the survey.
Screens Architecture: a. Splash Screens - Welcome screen b. Walkthrough Screens - about application c. Transition Screens - between modules d. Support Screens - reviews, affirmations
Moving "How did you hear about us" as final Survey Question
UX Insight
"System Status Visibility" (Usability Heuristic #1): Refers to clear communication of system status to users through timely and relevant feedback. Similarly clear communication of future expectations to users through timely and relevant feedback.
Indicating the modules
Modules outline user expectations.
Transparent - Time and expectations are clearly stated.
Transition screen between modules
A transitional screen between modules aids in tracking user progress.
Support screen, end of each module
The app prioritizes user needs through positive reinforcement.
Positive AA quotes in support screens promotes a positive mindset.
Takeaway 3
UI Interface and elements
The user experience was impacted by disruptive splash screens and excessive information about the application, resulting in annoyance and a perceived lengthy process.
Confusing Progress bar
The progress bar displaying midway for the first question (1/4) in the section contradicts the visual information and is confusing to the user.
“Progress bar is pretty confusing”
Misleading Select Options
Similarities between single select and multi-select options led to users missing choices.
“Oh! I did not notice that until you pointed it out”
Recommended Information Architecture :
1. Multiselect buttons can differ in style to make it evident to the user. This is also easily scalable for future option for the development team.
2. Progress bar can be split into modules with accompanying icons, and avoid pagination as the 7 personalization questions may become overwhelming for the user.
UX INSIGHT
1. Miller's Law - Humans can't hold much information in their short term memory. The average person can only keep 7 (plus or minus 2) items in their working memory at one time.
Simple and clear progress bar
Each module completion and beginning is shown by a simple microinteraction
Microinteractions are used to minimize interaction costs and reduce the need for user input.
The progress is linear increase in the level so the user is not overwhelmed by the number of questions.
Distinguishable multiselect button
Difference in UI button and the check mark makes it easier for the user to distinguish from single select
Takeaway 4
Additional Recommendations- Personalization Data and Signup screen
Current Design
Proposed Redesign
Approximation on Weekly Drink Count
Approximation results in inaccurate data for the weekly drink count for the user.
The slider does not give an accurate measure always.
Weekend option requested by most users for drink count.
“I usually drink during the weekends, there can be an option for social drinkers”
Recommendations
Gathering daily data ensures more accurate tracking of drink intake, as it prompts users to carefully consider their daily consumption habits, instead of relying on rough weekly estimates.
This facilitates the calculation of weekly sober days, utilizing a similar structure as the Sunny Side interface.
Signup screen with no feedback
Password requirements not shown
User is alerted after they have entered password
To protect their privacy, users may be wary of disclosing personal information about their habits.
Recommendations
Password checker to meet the criteria in real time as the user types in the information
The name field specifies that the information is only used to personalization purpose only, and the user can click to know more about how the information is used and shall not be published anywhere.
Using closed card sorting UX method can further help identify the most pressing issues for users, allowing the development team to prioritize their work and focus on what matters most when they receive the project.
Design Change Priority list:
1. Multiselect button : Implementing a multiselect button will prevent the loss of valuable information about the user's actions.
2. Progress bar : Adding a progress bar can help eliminate user frustration about their progress.
3. Streamlined Flow: Reordering the flow to start with walkthrough and info screens can improve user experience and reduce frustration.
4. Walkthrough screens : Redesigning walkthrough screens with the user in mind can help build trust.
5. Microcopy : Incorporating effective microcopy can enhance the user's experience and promote a friendly interaction.
2
STRATEGY
Product Strategy
Product strategy in design is a plan for developing a product, including goals, to meet user needs and achieve business goals.
Time to value (TTV)
The "Time to Value" measures the duration it takes for users to progress from the start of onboarding to the app's home screen, in terms of minutes, clicks, and screens. TTV for a new user to get onboarded, excluding signup: Current Design ~ 3.09 min Proposed Redesign ~ 2.1 min
Task Performance Indicator (TPI)
To measure a user's ability to perform a specific task within an application during the onboarding process. It helps to identify areas where users are struggling and provides insight into how to improve the overall onboarding experience.
Completion rate
The completion rate is the percentage of users who actually finish the onboarding which would ideally be completed.
3
STRATEGY
Future Work
I focused on improving the first three modules of the onboarding process in this challenge. Fixing these modules automatically boosts user trust and subscription to the plan. My areas of interest for future work include:
1. Conduct a Competitive study of multiple design solutions for the progress bar and the design elements
2. I am intrigued by the persuasive design techniques used in the subscription plan's microcopy.
3. The micro interactions and the infographics can be made more visually appealing
4. Instructions after onboarding for how to use the application
RETROSPECTION
Challenges
1. The research could make use of a broader set of participants : Even though I had enough themes and aspects to tackle, the research could address a lot more problems faced by real reframers by interviewing them.
2. Testing : I gained more insights during after creating the prototype when I started testing it with users. I wish to conduct a competitive study with different solutions to test the onboarding process
3. Stakeholder Interviews : Conducting stakeholder interviews would have provided valuable insights into the business needs for the onboarding process. I appreciated the use of loading screens as an effective strategy for ensuring users read the content."
Reflection
This exercise taught me the significance of being a thoughtful designer when making changes to the UI. Prior to this, I had never specifically redesigned the onboarding experience. It emphasized the need to keep the user, development, and business goals in mind for every design decision, no matter how small. For instance, small elements such as copy wording, placement, and widget selection can significantly influence the user experience. This experience has heightened my empathy towards the user's perspective and has transformed me into a purpose-driven designer. I am grateful for this enlightening opportunity to understand my role as a designer.
Let us build meaningful designs that can impact positive changes in humankind :)
