Optimity is a mobile app that rewards users with gems for completing healthy activities, which they can then use to redeem real-life rewards.
After Optimity acquired Carrot Rewards, I redesigned the Optimity app to include Carrot’s core features: quizzes, step tracking, step streaks, step challenges, and rewards. We launched it in Canada first, then the US.
While the newly designed app had outstanding retention rates in Canada—mainly due to the majority of the population being former Carrot users—we soon learned that wouldn’t be the case in the US. An alarming amount of American users were dropping off after their first use.
Without the previous affinity for Carrot that most of our Canadian users had, we needed to improve our new user experience (NUX) if we hoped to reach similar retention metrics in the US.
UX Designer, UI Designer
Wireframes, Mockups, Prototypes, Development Specs
Having just launched our consumer experience in the US, Optimity's main business objective was rapidly growing our American user base.
But before designing a handful of new features to promote growth, we first decided to address drop-offs—because what's the point of pouring water into a leaky bucket?
I had a hunch that it came down to two things: a lack of guidance upon reaching the home screen for new users (especially those who weren't familiar with the previous Carrot Rewards app), and our lacklustre rewards. At this point, we hadn't prioritized adding an onboarding tour because the majority of our user base was returning Carrot users. Adding rewards to the US instance was also a work in progress.
To find out why so many users were abandoning the app after their first session, our research consultant conducted user tests with 10 participants: 5 women and 5 men from the US.
From his report, I pulled these key findings:
These findings validated some of our assumptions: that new users need more guidance once they reach the home screen and that they weren't happy with the current rewards. At this point, only raffles were available to American users, so this was no surprise.
But what I found most exciting was that for some of the women participants, taking the first quiz was their first Aha! moment. Since Optimity's user base heavily skews female, this could be the case for many.
I wanted to make sure the numbers told the same story, so we checked Amplitude to see what percentage of users completed not only their first quiz, but multiple quizzes during their first session within the past week.
What we found was super promising! While only 53.29% of users took the first quiz, 78.2% of those users took the second quiz afterwards. In fact, 61.42% of users who took the first quiz took 4 quizzes during their first session.
In other words, it was a safe bet that users who took their first quiz were more likely to stick around. The percentage of users who took their first quiz during their first session would become our KPI for this project.
Ok, so here’s what we know: users are disoriented when they land on the home screen, and need some direction on what to do. At the same time, users clearly weren't impressed with the rewards—but, they did find value in the knowledge they gained from taking quizzes.
With these learnings in mind, I started by rethinking the user journey with a simple flowcart.
Then, I made some quick, lo-fi designs to flesh out my proposed changes.
First, I wanted to make earning gems feel more delightful. Emphasizing this positive feedback could help soften the blow of having less-than-exciting rewards to spend them on.
I looked at where in the journey users could experience their first “You earned gems!” moment, but all of the existing options required them to complete something first.
Instead, what if we rewarded users for simply setting up their accounts? That way, they’d have their first moment of delight and be introduced to gems before they even get to the home screen.
With the intent of helping users to 1) get their bearings and 2) take their first quiz, I then began crafting the home tour.
First, I added coachmarks to quickly introduce users to the steps dashboard, quizzes, and rewards. I felt iffy about ending the tour on rewards since they weren't appealing, but I also knew there was a possibility of better rewards having been added by the time this feature would be launched.
Second, I added a microinteraction to let users know they should take their first quiz. Once users exit the tour, their first quiz's card begins to bounce, urging them to tap it.
To get a second pair of eyes, I walked our research consultant through these initial concepts and did some further brainstorming.
To draw users' attention to the gem balance increasing when they first land on the home screen, we decided to add a quick radar animation around it.
We also decided to animate the gem, so that it would joyfully bounce and sparkle every time a user's balance increases, making it feel more celebratory.
And finally, after some deliberation, we removed the rewards coachmark. Rewards are a big part of Optimity’s appeal, but the offers at the time were simply not satisfying users. We decided to delay the mention of rewards until after users had completed their third quiz, so that they’d (hopefully!) have already experienced some delight and discovered value outside of the rewards.
We added a coachmark for Challenges instead, since they help bring in free user acquisition which aligned with Optimity’s most pressing business objective.
With the happy path mapped out and mocked up, it was time to get some buy-in from other key stakeholders. Before sharing with the wider team, I ran the designs by one of our front-end developers to ensure there would be no technical constraints.
Then, I presented the new features and gathered feedback. After some input from the Head of Growth, three updates were made:
After implementing these changes and polishing the UI, the final designs were ready to go.
In order to capture the full experience with animations and all, I built a prototype in Figma.
I also find this to be especially helpful to include with my specs when it's time for handoff.
Feel free to click through the prototype yourself!
Finally, I was ready to hand the designs off to the devs. Handoff might not be the sexiest part of product design, but it's arguably the most crucial for ensuring projects are implemented accurately and efficiently.
First, I like to write out my specs directly in Figma, so that they're read in context with the mocks. I've found that instead of creating a flow chart separate from mocks, it's easier to get the full picture if the two are combined as wire flows. That way, devs can see components' design specs while knowing exactly where they lead.
Next, I write out a ticket in Jira that includes what the project's goals are, the scope, and acceptance criteria.
I then add the link to my designs and specs in Figma. I also add a link to the prototype so devs can see the animations in action for themselves.
After the project's devs have reviewed the specs, it's time for the final step: a quick meeting to field any questions they may have. Dev time is precious, but I find booking some time to review up front saves everyone from a tooon of back-and-forth Slack messages in the long run!
With the original NUX, 53.29% users took their first quiz during their first use. Once we identified this as the project's KPI, we set ourselves a goal of achieving 75% or higher.
After implementing the home tour, 79.61% new users took their first quiz during their first use.
They say hindsight's 20/20, right? Looking back, here are a few things I would've done differently: