SuperBetter Onboarding Redesign

TL;DR As a personal project, I did a simple and quick UI/UX project on a digital-meets-real-world game that helps players build resilience.

Description from SuperBetter.com

What you need to know about SuperBetter

SuperBetter was created from Jane McGonigal’s self-improvement book, which advocates for living ‘gamefully’ in everyday life. Jane is a game designer, who was struggling to recover from a concussion. She teamed up with her sister, a psychologist from Stanford, to create a game to help her heal.

SuperBetter has an online forum consisting 1000+ existing SuperBetter users. The game is available on SuperBetter.com and with limited functionality iOS and Android.

The goal of the game is to achieve an Epic Win, which falls under predetermined categories such as mood and physical health. To reach an Epic Win, users can team up with allies from the online forum or invite friends to support them in their journey. The path to an Epic Win consists of Power-ups, Quests, and Bad Guys, which are preloaded into the app based on a selected category or customized by the user.

About the project

My Role: UX designer (individual project)
Duration: September 2018, cumulative 1 day of User Research & 1 Day of Design
Tools: User Research & Testing, Redesign, Prototype, Invision, Sketch

I took on this project because of my interest in play and behavior change products. In the future I hope products like these will empower people to achieve beyond what their upbringing, biological traits, or socioeconomic status have afforded them by creating real world games to help ‘players’ think beyond their current state.

Below is an outline of my process and redesign. I conducted usability tests on the existing product, analyzed online forums to inform the redesign, and created and user tested paper mock ups. Finally, I built an interactive prototype of the redesigned screens and documented how I would measure the success of the redesign.

Research

Who are the users?

I reviewed the online forums and interviewed four users (see facilitation guide and interview notes here) to I create a persona for the ideal and most typical user.

‘Patient Patty’ has a few goals:

  • I am diagnosed with depression and want to stay on track with my healing
  • I have self-esteem challenges and want a different approach to ‘getting out of myself’ and looking in from the outside to evaluate the situation
  • I want daily check ins and support. SuperBetter fits my needs better than the alternative health and wellness platforms

and needs:

  • I need the ability to customize to fit my objectives and appeal to my style
  • I need to develop allies to stay accountable and on track on my own and give back to others
  • I need to integrate into my daily schedule

See Patty’s full persona here

During the user interviews I gathered which areas of the app were most and least utilized and sought to understand user motivations and behavior. One area stood out: allies.

Users joined the app or continued playing because of the connection to their allies.

Yet, many new players struggle to find allies or simply don’t seek allies and feel the game just ‘isn’t clicking’.

See more snapshots of community posts here

Key Design Issues

Based on the usability issues found during the tests and evaluation of the online community, I prioritized the feature with the most ‘stickiness’ and identified the best time and place in the app to influence the behavior.

How do I find an ally?

Presently, the app does not incorporate allies. Yet, as one user put stated,

I didn’t feel like coming back [to the app], but I knew she needed me. She is so lovely and needs to know I’m doing well and I’m here to help.

Behavior research, which has been used by Daniel Pink and spoken about at Google I/O, also supports this notion. Andrzej Marczewski’s intrinsic motivation RAMP framework identifies four core psychological needs that foster intrinsic motivation. It says that “intrinsic motivation is where longevity and true engagement will come from,” and a key factor in intrinsic motivation is relatedness. In this case, relating to others in the world of SuperBetter via allies.

Proposed Solutions

Based on what the research tells us about user behavior, there are two options to ask for a bit more from users — when they are first engaging with the app and when they have made an achievement. Given the time constraints of the project I defined the most effective times and places within the app to influence user behavior and conducted user interviews to narrow the selection down one area to redesign.

Option #1

Target users to become allies to others in the community once they have achieved a milestone, like an Epic Win.

Option #2

Ask users to find an ally during the sign up process.

When I thought of option number #2, I immediately balked at creating more steps in an already multistep sign up process. However, my research gave me a hunch that because SuperBetter users are generally already committed to SuperBetter in some way, reading the book or watching the talks and interviews, they might be okay with a more involved process.

I also noted that new users were willing to log onto the forum and ask about potential allies, which demonstrates the immediate pain point. In addition, Epic Wins and big achievements can take some time accomplish and there would likely not be enough veteran users to support new users as allies.

Winner — Option #2!

Prototype

Using Invision, I created a prototype to demonstrate finding an ally during the sign up process. The prototype begins on step #3 of the sign up, after the user understands the Quests, Power ups, and Bad Guys, and ends as they enter the app. These would take the place of a the current ally introduction.

Check out the prototype here.

Before the Redesign

The current design does not offer an immediate action. By clicking ‘I want to play’ users are immediately taken to a screen with no option to add an Ally.

Current Ally Introduction Screen

UX after the Redesign: Screen #1 — Topic Selection

Progress bar: to indicate step 3/5

Tags: derived from the pre-populated SuperBetter list

Language: I answered key questions that a user might have when entering the app. ‘Are these permanent?’ ‘What will they be used for?’

Colors and design: Users liked the simple, yet happy design. Since many users have diagnosed health conditions including stimuli issues, I kept simple colors and used the familiar iOS layouts and SF fonts with appropriate text versus display sizing.

One of my interviewees mentioned emojis in our conversation, which prompted me to uncover that SuperBetter users fit the demographics of emoji users. I used emojis to account for both the age group (22–35), gender (female) of most users, and inclusive design with both color and visual indicators because of frequent impairments and comorbidity of SuperBetter users.

Design questions to explore:

Impact of emojis on behavior — Before implementing the design, I would like to talk with stakeholders about emoji use. There are different schools of thought on labeling emotions. For example, the anxiety emoji 😰 could be either helpful in identifying an emotion and not labeling it as ‘bad’. Alternatively, it could be triggering in reinforcing a state that people are trying to alleviate. I would like to talk with the SuperBetter team to create the best possible experience for users.

Use of emojis —there are contradictory policies on the use of Apple’s emojis in app without being input by a user. I would clarify this policy before implementing the design.

Screen #2 — Ally Confirmation

Question: Ask for a users permission before prompting them with a long series of questions.

Subtext: Provide social proof

Buttons: Use positive and negative language to drive them to the desired action

Screen #3 — Ally Selection

Header: Answer their questions ‘How will we communicate?’ ‘What information will they receive?”

Profile:

  • Lead with their Epic Win, the first question users currently ask each other when finding an ally.
  • Allow them to show their avatar and name. Users want to relate to one another and like ‘showing off’ their avatars.
  • Use colored tags to match the areas selected previously

Invite an Ally: Allow users to bring in outside friends to grow the user base.

How to determine the results of my redesign?

I evaluated the designs through a second set of user interviews and usability tests. No issues arose with the design itself during the test and users ‘wished they had this feature when they joined’ and 4 out of 4 users would have completed the process. I also acknowledge that other issues could arise with relevant profiles and the overall matching process. For instance, there may be a shortage of allies in a certain category. However, I believe the user loyalty would outweigh other costs. I believe this simple redesign will have a long term impact. If the new designs were implemented I would track the following metrics to measure its efficacy and impact.

1. Feature utilization

How many people are using the ally feature during sign up? How many are matching with allies?

2. Conversion

Are users completing the sign up process? Where are they dropping off?

3. User retention

What is the user churn? Now that we have the ability to track ally matches, we can know quantitatively for all users whether or not allies improve retention.

4. Engagement

Is overall app engagement increasing? Where is most activity occurring? What actions surround that activity?

Reflection

Knowing that this was a quick, 2 day project I am happy with the outcome. However, there are both changes I would make to the existing process and other work I would consider if given additional resources.

1. Receive stakeholder input

I thought I would be able to do a quick redesign just for the sake of this project, but found it personally challenging to not understand business objectives. Maintaining scope when there is no true product direction is a challenge. If time and scheduling were not a constraint, I would have liked to conduct stakeholder interviews prior to the redesign.

2. Utilize existing data

I reached out to the forum’s admins but was unable to collect data on the user demographics. I quickly discovered that many users were Android users and that my redesign may have been more helpful if done on another platform.

3. Design for calendar and prioritization

If time were not a constraint, I would have implemented an integration between To Do’s and users’ calendaring. This would allow users to not fall out of the habit of playing, which was another top reason for user churn. I was surprised to find how many users were recording their daily To Do’s in a digital or physical planner. I would also allow users to reorder their To Do’s based on frequency (daily, weekly, monthly) and the time in which they regularly complete the task (morning, afternoon, evening). These features would help users build habits, resilience, and keep getting SuperBetter!


If you’d like to talk about design, health, or play you can find me on Linkedin or Twitter or follow me on Goodreads to swap behavior change books! You can find out more about my other projects in my portfolio.