Optimity's New User Experience

Guiding users to their first moments of delight.
11 MINUTE READ
100

Project Overview

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.

Role

UX Designer, UI Designer

Tools

Figma, Jira

Deliverables

Wireframes, Mockups, Prototypes, Development Specs

Year

2021

Business Objectives

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.

The Problem

New Optimity users need to know what to do when they arrive on the home screen so they can quickly discover its value.

How can we guide them through their first actions to shorten time to value, increase delight, and decrease drop-offs?

User Research

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:

1
7 participants found the home screen "overwhelming" or "confusing".
“You know, if it wasn't an interview, I probably would've just closed the app at this point. And then just kind of been left in confusion [...]”
2
All were uncertain what to do first, and only 5 took the first quiz.
“I kind of expect to have been led through a tutorial the moment I got into page [...] Because right now I don't even know, like, I think 'Welcome to Optimity' is probably the first thing I should click, but then like, what about the other stuff?”
3
The women who did take the first quiz were delighted by what they learned.
“Try to answer this one… sea salt is a healthier choice than regular table salt. True? False. Oh, I didn’t know! [...] Okay, so now I’m interested in this. Because I’m learning something.”
4
6 participants expressed disappointment in the rewards.
“At first I was really excited about the offers section and then once I went into it more, I was like, Okay, I dont want to pay attention to this.”

The Numbers

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.

Ideation

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.

Original Flow

Updated Flow

Then, I made some quick, lo-fi designs to flesh out my proposed changes.

Emphasize earning gems, rather than rewards.

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.

Users complete setting up their account. This can be a drag, so why not reward them for it?
Instead of going straight to home, we take a moment to celebrate, letting users know they've earned gems.
When they enter the home screen, their gem balance increases in the top right corner.

Guide users to the first quiz.

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 make the dashboard less overwhelming, I decided not to mention step streaks just yet—we could cover that at a later, more relevant time.
They're then introduced to quizzes with a coachmark that highlights their potential to both learn and earn gems.
Finally, users learn what kind of rewards they could redeem for a little extra incentive.
Once they've exited the tour, their first quiz's card begins to bounce, signalling they should tap it.

Iterations

To get a second pair of eyes, I walked our research consultant through these initial concepts and did some further brainstorming.

Animating the gem balance increasing.

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.

When new users reach the home screen, their gem balance is highlighted with a radar animation, while the gem bounces joyfully.

Removing the rewards coachmark.

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.

We replaced the Rewards coachmark with one for Challenges as it better served our acquisition goals.
The quizzes coachmark was moved to the end, priming users for the bouncing first quiz card at the end of the tour.

Design Review

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:

  • Adding a coachmark for gems.
    In order to highlight the delight of seeing your gem balance go up even more, we added a coachmark pointing out the gem balance at the beginning of the tour.
  • Adding a “Start Quiz” popup to the end of the home tour.
    To point users towards the first quiz even more forcefully, it was requested that we add a popup to the end of the tour that would take them directly there. This was a hot debate: some of us felt this was too aggressive and didn’t allow for users to discover how to begin quizzes from the home screen, while others argued this clearer path would lead to more users taking the first quiz. In the end, we opted for a compromise: users would get this popup, but when they returned to the home screen, the next quiz’s card would bounce, signalling for them to tap it to begin.
  • Switching the order of the quiz and challenges coachmarks.
    Since the "start your first quiz" popup was added to the end of the tour, we switched the order of these two coachmarks so that they would flow from the top to bottom of the screen.

Final Designs

After implementing these changes and polishing the UI, the final designs were ready to go.

After setting up their accounts, users are welcomed and rewarded their first gems.
They land on the home screen and see their gem balance increase. The gem bounces and a radar encircles it.
As the animations finish, the tour begins. Coach mark 1 points to their gem balance.
Coach mark 2 explains the daily goal. We'll educate users on streaks a little later in their journey to avoid overwhelm.
Coachmark 3 introduces quizzes, highlighting the healthy tips since they were so well liked by test participants.
The last coachmark points out the Challenges tab, as they encourage users to invite friends to the app.
After the tour, users see this popup, with the CTA button leading into the first quiz.
If a user closes the popup, the first quiz card bounces, prompting them to tap into it.

Prototype

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!

Designer-Developer Handoff

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!

Conclusions

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.

Retrospective

They say hindsight's 20/20, right? Looking back, here are a few things I would've done differently:

  • Measuring app abandonment rates after users' first sessions, both before and after updating the NUX.
    Although there are certainly uncontrolled factors influencing this metric, I would like to have known exactly how much of a decrease in churn after first use was seen once these changes were implemented.
  • Testing the home tour flow with and without the "Start Quiz" popup.
    Whether it's to meet leadership's requirements or adjusting for technical constraints, compromises happen. But if time and resources had allowed, I would have loved to have tested the home tour flow with and without the "Start Quiz" popup at the end before we even started building. This would have helped align the team—it's easier to rally behind data than opinions. Plus, running user tests with prototypes can be way cheaper in the long run than implementing an unvalidated solution.

Wanna chat?

Whether you're interested in working together or just want to chat about the art of the perfect handoff, feel free to get in touch.

OverviewResearchIdeationIterationsFinal DesignsHandoffConclusions