Positive Affirmations Game,
Total Brain, a Sonder Mind Company
Reinforcing positivity with little steps, everyday.
Overview
Total Brain is a platform that enables users to understand, measure and track their mental health overtime. The platform is composed of an assessment, games, and meditations for them to keep growing and move towards their goals.
The Positive Affirmations Game enables users to repeat affirmations, and write examples from their days that reaffirm them.
Role
Lead Designer
Team
1 Product manager, 2 engineers
Contribution
Product Design, User Testing, User Flows, Wireframes, Iconography
Type
Mobile, tablet, web app
Tools
Sketch, Usertesting.com
// BY THE NUMBERS
2
USER TESTS
2
HIGH-FIDELITY
ITERATIONS
4
LOW-FIDELITY
ITERATIONS
% est.*
HIGHER
ENGAGEMENT
11%
750,000
ACTIVE TOTAL BRAIN USERS
The Problem
The Solution
The game, as it was originally designed, had low completion rates and engagement. The original design was over simplistic and unwelcoming. We wanted to delight users with this experience, creating a feeling of progress, and actually feeling reaffirmed. We were going to assess the completion of these goals with user testing and feedback.
With testing, team work, and user feedback, I created a design that felt more impactful to users and was easier to use. We saw a 11% uptick in engagement with users that played the game, and a 5% rise in retention.
// THE PROCESS
// SYNC & GATHER
At the project kickoff, the team came together to discuss timelines, expectations and scope.
I looked at any existing research we had around what worked well in this specific game, as well as what was challenging for users.
The research showed that users:
-
were missing a feeling of achievement and completion
-
a lack of understanding around what purpose the game served and how it was helpful
-
were confused about how to interact with the game entirely
Here's what the game, as it was previously designed, looked:
Personas
We had established personas that applied to our entire platform. I worked to personalize them for this game. I specified motivations, pain points, background, and goals. Doing this helped us to take a user-centric approach in our designs. They served as reference point for the rest of the design process as well.
// USER-TESTING
After brainstorming, we decided to do some testing around what users were looking for. Our objectives for testing was to discover (1) what would be most impactful for users when it came to the architecture of the game, and (2) if they felt benefit in it being a personalized experience (vs. being curated). We ran a quick concept test on 10 users just to get an idea.
Because the design would be vastly different from what they were used to, we decided to release in phases to avoid confusion. Here are samples of some questions we asked in our testing below.
Insights
While a testing environment is not always the most accurate measurement, it's great for getting a sense of direction when it comes to the basics. In our research, we found that users would be feel most excited reminders, encouragement, rewards, and positive results. Because we saw an even split around personalization, I chose a middle path: affirmations they could personalize . This research, combined with previous research (described above) gave me a good idea of how to move forward with the design.
User Journey Mapping
Given the research, I put together journeys for this exercise that was built around user goals. I streamlined for ease, efficiency, and providing users with a sense of completion of the exercise.
// SKETCHES
I sketched a few different ideas in order to brainstorm based on the existing user feedback we had (pain points, wins). The main differences were how the user received a confirmation of completion (game dialog, progress bar), and what fulfilled conditions to receive it (providing written examples). We also wanted to consider a carousel design for affirmations, as well as a menu that enabled users to edit or delete affirmations.
// LOW-FIDELITY
I first started with low fidelity wireframes. I used Sketch. We didn't test the wireframes because of time constraints, but we felt confident with our initial research.
These initial wireframes, while crowded, gave me a good idea of how to move forward. I worked to solve this problem in the next iteration of high-fidelity designs.
// HIGH FIDELITY
Once we decided on a direction based on the low-fidelity mockups, I closely aligned design components with our design system while also considering the differences for those components across web, tablet, mobile, and native (iOS / Android). The final designs reflected past research, current research, our design system, and the goals of our personas. I designed for both phase I and phase II. , I decided on a mobile-first approach because 1) it was the most challenging for this feature (and I knew once I designed this the other devices would be easier to design for, and 2) because I knew most of Total Brain's users are mobile users.
Phase I
This phase included just a clean-up of the UI, addition of the instructions, and re-designing the existing functionality to be more easily usable (edit and save).
Phase II
This phase included a capability for adding their own affirmations, and most notably, the addition of examples from their day that would help reinforce the affirmation (instead of just saying it aloud). Simultaneously, this flow would create a sense of completion and accomplishment which was missing initially.
// PROTOTYPING
I created a prototype using Figma to showcase interactions for developers and stakeholders.
// DEV HANDOFF
Example of Responsiveness notation for feature background
Handoff
I notated the flows which explained behaviors. I walked our engineering team through the specs as well to make sure everything was clear in the prototype.
We talked about:
-
error message handling
-
functionalities (if the user pauses, decides to go back, exit)
-
the differences between the variants of flows for different populations the assessment would cater to
-
Accessibility
-
differences between Android and iOS
-
responsiveness for different screen sizes (shown above)
-
Differences between functionality on web / mobile / tablet
-
Field usability
// LAUNCH + CONTINUOUS ITERATION
We launched the changes to the exercise in phases (1, 2) across mobile, tablet, and web. All changes were initialized and maintained successfully, and we were all hands on deck for any needs / iterations. Iterations were continuous as we received feedback from our users, and we took suggestions into account no matter how far out from launch we were. We were on a mission to build the best product we could for our users, and that is a never ending process!
Impact
Since we were releasing the project in phases, it was hard to nail down the exact % increase over time. However, post-release, engagement was up 8% after phase I, and est. 11% after phase II (with 5% higher retention, all measured on Amplitude). Within the game, we addressed the concerns we found in research for encouragement. While users shared they would also be motivated by rewards and positive results, addressing the rewards component would have been a platform-wide upgrade, and positive results would be something the user would (hopefully) experience on their own over time with other features on the app (mood tracker, stress management, etc).
Reflections
While the design got a huge upgrade when considering accessibility, usability, education, and user feedback during testing - we didn't truly get to address the real barriers to higher engagement.
Using Total Brain is often incentivized by a user's employer, and it wasn't within the project scope to address other factors that could have truly been more impactful like: reminders, more hand-holding throughout the instructions for the game(s), as well as education for more context (i.e. the answers to "why should I do this?").
Explore Other Projects
