User Journey
Usability Testing
Lean UX
Mobile
Jul - Aug 2023

Enhancing engagement: Reviewing breakpoint to smooth the entire experience

Company
Teach Your Monster (TYM)
Role
UX Designer
Tools
Figma, Miro, Notion, Slack
Duration
1 month

Overview

1 | Background

As a non-profit, we're proud to offer our website game for free. Our challenge? Sustaining development. We focus on our paid app to support our mission.

2 | Responsibilities

  • Collaborate with PMs, UI designers and engineers
  • Focus on user research, UX design and usability testing

3 | Challenge

  • Encouraging customers to pay for the app version despite offering a free web version
  • Shared UI among three user types, leading to confusion and improper use

4 | Outcome

  • +12% download rate, compared to the same month last year
  • +4% revenue, compared to the same month last year

Goals

As a startup company, our company-level business goal is to increase annual revenue, specifically from our app.

How might we let users stay in the game app longer?

Overall feedback we received was very positive on the game experience but we found out 16.7% of users only downloaded and then gave up the game, we are curious to know more about that.

User Research

Quick unmoderated testing to identify current user flow issues

I set up a test at UserTesting platform and tested with 10 contributors too see their behaviours and understand their thought, below are the main questions I had asked:
  • Examine each button on the screen and describe its function, please.
  • Which button would you click first?
  • Now, please try starting the game and play until you complete the bumper car section
  • Afterward, return to the first screen and begin the practice mode. Choose 'Skill,' then 'Subitising,' and complete all the tasks, please.

Key insights

“Usually I would go to check how to play the game or rules then teach my boy, which button show me these information?”
“My dear asked me to help them start the game sometimes and I've noticed she was on the "Setting" page.”
“I can't see anything after I've clicked the "Practice" button, I am not sure what I should do next. Am I in the practice mode now?”

Problem

01 | 8 out of 10 users found difficult to start practice mode game

Most users spent unexpected time on the flow of practice mode, even one of them gave up eventually because they only saw the colour change after clicking the "Practice" button and didn't understand what that meant.

02| Kids got lost in game flow and not able to back to home screen

They were sometimes curious to explore the game and go far away from their main flow, then gave up eventually or asked for help from adults.

03| Adult tried to find out more information before starting the game

They prefer to play a bit before digging into the main game, they thought feeling the mini-game or understanding how to play first was very important.

Hypothesis

01 | Assuming separating each journey and enhancing the visual distinction between the game mode and practice mode can help improve usability

The change of clicking the "Practice" button was too subtle which made users confused, so we totally separated game mode and practice mode with clear visual distinction.

02| Assuming adding big play button and age gateway can help kids start the game straight to enhance play time

1. Changing the centre element from a user card to a big centre button:
Everyone familiar with the meaning of the play button, it can attract users to click it and start the game at first sight

2. Reduced the number of access flows for kids from 4 to 2 by implementing an age gateway, allowing them to focus on gameplay

03| Assuming adding an onboarding section can users how to use our product to increase user satisfaction

Adding an onboarding section to make new users understand the game in short is a great idea, however, our game structure is not that complicated, so we are still discussing the priority of it.

Usability testing

Separated the flow clearly can help

On average, they complete the new practice mode flow within 10s instead of over 20s before. What is the most important thing is they are able to play and learn more, to bring them value.
“It was super easy to understand, just like I am using Whatsapp with friends!”
“My kid loves to play the mini-game! It is handy for her to start a short game and play a bit!"
“I am thinking is it possible to bookmark the mini-game? Then kids can start that one faster."
💡 Insight
A teacher asked about the possibility of adding a bookmark function to the mini-game section for kids focus on different skills based on different curriculum

Contributors prefer to tag the big centre button

Most contributors said their first click button is the centre big play button since the size is the biggest one and they were curious about what will happen next.
“When I saw the big play button, I was curious if it was going to play a video or something, but I understood that after I tried once!"
“I have checked different buttons in the home screen but I can't find where to let me know how to play the game."
💡 Insight
Some contributors were looking for where they can find the "How to play" section although a big centre button at the centre because they would like to find out if the game is suitable for their kids or students in short.

Deliverable
Design

Consistent interaction gets much easier to learn for new users

Every tapping with a clear change afterwards:
Clicking the lower left "Practice" button leads the user to the next screen instead of only changing colour.

Big play button with micro-animation

In the final version, the play button is not just big but adds pulsing animation to enhance the attraction.

Adding simple new cross-promotion button

To expedite our progress toward the business goals, I introduced a new, straightforward UI button in the lower right corner and conducted a rapid test to assess user engagement. This approach provides cost-effective access to real data.

Outcome

+12%

Download rate

+28%

Clicking on "Practice" button

9%

Clicking on cross-promotional button

+4%

Revenue
💡 Insight
As more users play the practice mode successfully, there is an insight for us to understand what kind of skill they practice more, which is definitely a good value to us to develop different learning content.  
Overall, users stayed in our game longer, and more users clicked the new button to understand other's games.  Since more users kick-start the practice mode successfully, there is an insight for us to understand what kind of skill they practice more, which is definitely a good value to us to develop different learning content.  

Takeaway

Trade-off: One more step but make users complete the flow much easier

The first priority is always let user complete their flow and bring them value.

Applying psychological theories to the design to make it more human

Fitts's Law's primary implication is the importance of enlarging targets. It states that larger targets result in quicker clicks, taps, or hovers. In the final version, the play button not only increases in size but also features a breathing animation to enhance its appeal. And a result, a teacher's feedback that most kids tag the big play button without hesitation.

Let's connect!

👇 Get in touch for opportunities or just say 👋
OverviewGoalResearchProblemHypothesisTestingDeliverableOutcomeTakeaway