Celebrating students achievement in RightOn! result screen

Celebrating students achievement in RightOn! result screen

RIGHTON! EDUCATION
AT-A-GLANCE

While working at RightOn! Education, an interactive classroom activities Math app for middle and high school students, for a 6-month internship, I initiated this project to redesign the result and leaderboard screens that addresses users’ key pain points: lack of engagement, unclear scoring, lack of progress tracking, and adaptability for new question types.

🎉 This design is currently in use in the righton! beta app, available in app store
TEAM

Me! (solo UX Designer & Researcher)
1 Visual Designer
1 PM
3 Educator Advisors
1 Engineer

DELIVERABLES

Mobile design
Interactive prototype
Design system documentation 
Product strategy

TIMELINE

5 weeks
August 2023

TOOLS

Figma, Adobe Illustrator, Lottie

IMPACTS

🏅

87%

Increase in user engagement, enhancing anticipation and celebration for students

🌟

75%

Increase in score clarity for users, reducing confusion in how and why they got their points

😆

Created a positive learning experience

🧩

Surpassed all initial goals, with addition of Adaptability for future features

🏅

87%

Increase in user engagement, enhancing anticipation and celebration for students

🌟

75%

Increase in score clarity for users, reducing confusion in how and why they got their points

😆

Created a positive learning experience

🧩

Surpassed all initial goals, with addition of Adaptability for future features

WHAT'S RIGHTON?

RightOn helps students learn from their mistakes through a unique concept: Pick the most popular incorrect answer

RightOn helps students learn from their mistakes through a unique concept: Pick the most popular incorrect answer

RightOn! helps middle and high school students (ages 13–18) learn from their mistakes without the pressure of rushing to find the correct answer, building confidence to transform errors into valuable learning experiences. With the unique mechanic of identifying the most popular incorrect answer, teachers can spot common misconceptions, reinforce key concepts, and help students avoid repeating mistakes.

💡

Phase 1: students take the quiz

Phase 2: students are shown the same quiz, then asked to guess which incorrect answer was chosen most often by their classmates.

It was meant to be a motivator, but instead, students found themselves puzzled—why were they receiving these points on the results screen? And as I dug deeper, I realized this was just the tip of the iceberg.

USER INTERVIEWS

Together with the PM, we identified the main users pain points

Together with the PM, we identified the main users pain points

Over five months of observation, I worked with the PM to validate my assumptions and concerns through mixed-method research—surveys and 1:1 interviews with 60+ students. By mapping what they say, think, do, and feel, we identified three major pain points shaping the redesign focus.

🏅

pain point #1

Lack celebration for achievement

🤔❓

pain point #2

Confusing scoring system in Phase 2

📈

pain point #3

Lack of student’s progress tracking

HMW create an engaging, clear and trackable results experience that builds anticipation, celebrates achievements, and helps students understand their progress and scores?

HMW create an engaging, clear and trackable results experience that builds anticipation, celebrates achievements, and helps students understand their progress and scores?

THE HIGH LEVEL GOALS THAT DEFINE MY DESIGN

  1. Create an overall positive learning experience 

  2. Reduce scoring confusion 

  3. Generate anticipation and celebration

  4. Help users see their progress to motivate learning

COMPETITIVE ANALYSIS

Decontextualize the problem and look to finance apps for solutions on number clarity

Decontextualize the problem and look to finance apps for solutions on number clarity

Before designing, I scoped out 5 edtech apps' results pages and leaderboards, noting their ranking displays and frequency. I also looked to other industries, like finance, to see how they present clear numbers and percentages. These insights became inspirations as I worked on my redesign of RightOn. 

ideating

Jumping to high-fidelity mockups for visual young users

Jumping to high-fidelity mockups for visual young users

I sketched 20 concepts exploring ways to visualize correct and incorrect answers with clear scoring and engaging animations. At this stage, I prioritized problem-solving over visual consistency between Phase 1 and 2. After feedback from our senior designer, PM, and Educator Advisor, I narrowed them down to 4 ideas and built hifi wireframes for testing with our visual users.

Turning tricky data into familiar visuals

Turning tricky data into familiar visuals

To illustrate percentages clearly for the youngest users (6th graders), I reviewed their curriculum and chose pie charts and bar graphs, which the Educator Advisor confirmed as familiar and easy-to-understand formats that align with the users' mental model.

testing & refining

In-person demo sessions with 80+ students at a local highschool

In-person demo sessions with 80+ students at a local highschool

We connected with a local high school for a field study to observe user behavior, understand their needs and preferences, and test my design in a real-world setting. To gather well-rounded insights, I used a mixed-method approach:

  • Surveys (80+ responses) to gather quantitative data on common patterns and pain points.

  • Interviews (5 sessions) to gain in-depth qualitative insights into students' thought processes and challenges.

  • Open group discussions to foster collaborative feedback, uncover concerns, and gather suggestions for improving the app.


Using the pain points as a guide, I focused my questions on design engagement, clarity, motivational messages, and how comfortable students felt seeing their own or others’ rankings on the leaderboard.

Takeaways were translated into actionable items. But before iteration could happen, an obstacle came in the way.

ROADBLOCK 🚧

Another UX team introduced a new feature of higher priority, making my design effort obsolete

Another UX team introduced a new feature of higher priority, making my design effort obsolete

A new feature called “type-answer questions” was introduced alongside the traditional multiple-choice format. After discussing with the team, we agreed it was a higher priority for the app’s expansion, so I quickly drafted how my current design could adapt to this new feature.
MY PROPOSED SOLUTION

We discuss 2 adaptive design directions and their impact on future design, research efforts, the six-week beta launch timeline, and development. Here are my proposed solutions:

We decided on solution B: Create 1 standardized result screen

We decided on solution B: Create 1 standardized result screen

This solution would reduce redundant time and effort spent creating a new result screen for each future question type. This approach also ensures scalability and aligns with long-term business goals and efficiency. I then worked with PM to reorganize our timeline and made sure to leverage previous research as I know user behavior won't change

continuous testing & refining

Major improvements through 6 iterations

Major improvements through 6 iterations

Product and design decisions are embedded in every element of my final design. Amidst the numerous iterations, these are 4 most meaningful explorations and improvements.

1/ SOLVING SCORE CLARITY

Enhancing score clarity through celebration micro-interactions

Enhancing score clarity through celebration micro-interactions

Reviewing user journey, I noticed the answer explanation screen played a key role in building anticipation and excitement. Observing classroom sessions, I carefully timed animations to enhance this experience.

Visually connect earned and total points helps user better make sense of the scoring system

2/ SETBACKS & EXPLORATION

Balancing celebration within classroom pacing

Balancing celebration within classroom pacing

With goal of displaying rankings and total points, I wanted to emphasize progress. One of my out-of-the-box ideas was using a dial motif. However, student feedback and classroom observations showed it was too time-consuming, as teachers often skip ahead before it ends. 

New goal: to create brief yet exciting celebratory moments.

3/ great VISUAL brings up excitement

Enhancing engagement with avatar expressions

Enhancing engagement with avatar expressions

Students mentioned how the monster avatar brings excitement, so with the help of the Visual Designer, we expanded its expressions to include Excited, Encouraging, and Thinking for the Correct Answer, Incorrect Answer, and Answer Explanation screens.

4/ ACCOUNTING FOR USER UNCOMFORTABLENESS

Prioritizing user comfort when showing leaderboard

Prioritizing user comfort when showing leaderboard

Earlier research shows: 

45% of users felt uncomfortable showing their rankings publicly, yet still wanted to track their progress.

Solution: display the player's surrounding 5 rankings with progress animation for motivation, while hiding others' names, encouraging engagement without feeling exposed or targeted, and fostering a less competitive environment.

The Final Design

The Final Design

This design is currently in use in RightOn! app.

After 5 weeks of ongoing ideation, feedback, and iteration, I successfully completed the redesign of the result screen and leaderboard, achieving:

🏅

87%

Increase in user engagement, enhancing anticipation and celebration for students

🌟

75%

Increase in score clarity for users, reducing confusion

😆

Created a positive learning experience

🧩

Surpassed all initial goals, with addition of Adaptability for future features

🏅

87%

Increase in user engagement, enhancing anticipation and celebration for students

🌟

75%

Increase in score clarity for users, reducing confusion in how and why they got their points

😆

Created a positive learning experience

🧩

Surpassed all initial goals, with addition of Adaptability for future features

LESSONS LEARNED

Takeways and future plans

Takeways and future plans

🧠

Maintain a flexible mindset

When a conflicting feature disrupted our plans, I have to unhesitatingly adapt and find a new solution while making the most of my efforts

🤍

Empathy and communication skills in user interviews

Communication and active listening skills are crucial, allowing me to empathize and identify user needs and pain points

🏞️

Consider the bigger picture before diving deeply into 1

Focused on showcasing progress, I overlooked the result screen’s ranking dials similarity with the leaderboard until reviewing the complete sequence

🧠

Maintain a flexible mindset

When a conflicting feature disrupted our plans, I have to unhesitatingly adapt and find a new solution while making the most of my efforts

🧠

Maintain a flexible mindset

When a conflicting feature disrupted our plans, I have to unhesitatingly adapt and find a new solution while making the most of my efforts

🤍

Empathy and communication skills in user interviews

Communication and active listening skills are crucial, allowing me to empathize and identify user needs and pain points

🤍

Empathy and communication skills in user interviews

Communication and active listening skills are crucial, allowing me to empathize and identify user needs and pain points

🏞️

Look at bigger picture before diving deeply into 1

Focused on showcasing progress, I overlooked the result screen’s ranking dials similarity with the leaderboard until reviewing the complete sequence

For future considerations, I'd:

  • Explore personalized experience with Monster study buddy

  • Self-study mode where falling behind students can get guidance on the topic in their own times

After 5 weeks of ongoing ideation, feedback, and iteration, I successfully completed the redesign of the result screen and leaderboard, achieving:

🏅

87%

Increase in user engagement, enhancing anticipation and celebration for students

🌟

75%

Increase in score clarity for users, reducing confusion

😆

Created a positive learning experience

🧩

Surpassed all initial goals, with addition of Adaptability for future features

You've reached the end… how about another story?

Designing for navigation and accessibility for Call of Duty players

ACTIVISION BLIZZARD / 2024