Celebrating students achievements in RightOn! app result screen
RIGHTON! EDUCATION INTERNSHIP
AT-A-GLANCE
While working at RightOn! Education 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 now in use.
RightOn! Education is an interactive classroom activities Math app for middle and high school students.
DELIVERABLES
Mobile UI design and interactive prototype
Design system documentation
Product strategy
​COLLABORATIONS
Solo designer, with guidance from a Lead designer, 1 Visual Designer, 1 Product Manager, 1 Educator advisor and 1 Engineer
ROLE
UX Researcher, UX Designer, UI Designer
TIMELINE
5 weeks
TOOLS
Figma, Adobe Illustrator, Lottie
IMPACTS
BACKGROUND - WHAT'S RIGHTON?
RightOn! app's goal is to help middle and high school students learn from their mistakes without the pressure of rushing to find the correct answer, building confidence to transform errors into valuable learning experiences.
Our target users are students (13-18 year old) and educators
Identify existing pain points
After observing the users for 5 months, I had some assumptions and concerns that I then shared with the PM, and together we evaluated them through mixed-method surveys and 1:1 interview to validate the issues with our users. After gathering feedback from 60+ students, I compiled what they say, think, do, and feel about their experience to identify the 3 major pain points:​​
How might we create a more engaging and clear result screen and leaderboard that enhances the celebratory moment, helping middle and high school students enjoy learning and stay motivated?
THE HIGH LEVEL GOALS THAT DEFINE MY DESIGN
-
Create an overall positive learning experience
-
Reduce scoring confusion
-
Generate anticipation and celebration
-
Help users see their progress to motivate learning
COMPETITIVE ANALYSIS
Before designing, I scoped out 5 edtech apps' results pages and leaderboards, noting their ranking displays and frequency. I also decontexualize the problem and look to other industries, like finance apps, to see how they present clear numbers and percentages. These insights became inspirations as I worked on my redesign of RightOn.
Ideate
​SKETCH
To focus on the critical pain points of engagement and score clarity, I sketched 20 ideas exploring various ways to convey "Correct/Incorrect Answer" and the associated scoring mechanism, while incorporating engaging animations. At this stage, I prioritized problem-solving over visual consistency between Phase 1 and Phase 2.
I sought feedback from our senior UX designer, PM and Educator Advisor to narrow down to 4 best ideas (2 ideas from each phase). As our users are students who are more engaged by visuals, I brought these ideas to life with high fidelity wireframes, preparing for real user feedback.
EXPLORE DATA VISUALIZATION
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.
Prototype ⇆ Test
TESTING AND REFINING
With the PM’s help, I 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.
Key takeaways:
Theme 1: Engagement
-
Students love the monster avatar and want the result screen more fun and engaging
Theme 2: Clarity
-
The pie chart is the most easily understood
Theme 3: Copy text message
“Phase 2 is next! You can earn more points there!”
“You can do it! Stay tuned for Phase 2!”
-
Students love to see encouraging messages that there’s still chance motivate students to try harder.
Theme 4: Rankings display
-
55% want to see class’ points and rankings to motivate progress, 45% don't want to feel targeted
Takeaways were translated into actionable items. But before iteration could happen, an obstacle came in the way.
ROADBLOCK 🚧 - CONFLICTING FEATURE!
Another UX team introduced a new feature of higher priority, making my design effort obsolete
A new feature called "type-answer questions" being introduced, in addition to our traditional "multiple-choice questions."After discussing with the team, we agree that this new feature is of higher priority, and is instrumental to the app expansion. ​
I created a quick draft to see how my current solution would work on this new feature:
This new feature raised concerns about its impact on my redesign of the result screen:
-
How can we effectively display pie charts when open-ended answers are as long as paragraphs?
-
How can we accommodate different answer types on the result screen in the future (e.g., fill-in-the-blank, scenario-based)
​Most importantly, this makes my design effort obsolete.
MY PROPOSED SOLUTIONS TO THE TEAM
To quickly adapt and pivot, I facilitated a session with the PM and engineer to 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:
Ultimately, we decided on Solution B: Revise user task flow + Create 1 standardized result screen.
​
The reasoning: it'd 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.
After finalizing the solution, I collaborated with the PM to reorganize our timeline and made sure to leverage previous research as I know user behavior won't change.
REVISE CONTENT MAPPING OF 2 CORE SCREENS
Stepping back, I realized that content design could be optimized across these 2 screens. By revising with purposeful content mapping, I ensured that when students first see their answer revealed, they also immediately view the points they earned, improving clarity. The result screen would then focus on displaying rankings and total points, which enhances engagement.
CONTINUOUS TESTING AND REFINING
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.
MAJOR IMPROVEMENTS #1
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.
Solution: Displaying points and class percentage next to the selected answer, then animating them merging into the total score, helped users visually connect their choices to the scoring system.
MAJOR IMPROVEMENTS #2 - SETBACKS & EXPLORATION
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.
​
My revised goal: to create brief yet exciting celebratory moments.
MAJOR IMPROVEMENTS #3
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.
MAJOR IMPROVEMENTS #4
Prioritizing User Comfort with Leaderboard Display
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.
Final Design
After 5 weeks of ongoing ideation, feedback, and iteration, I successfully completed the redesign of the result screen and leaderboard, achieving:
Execution
​DEVELOPMENT HANDOFF
Additionally, to effectively deliver my vision, I crafted an animation prototype in Figma, which I later exported as JSON using Lottie for seamless development implementation. Understanding that timing and engagement go hand in hand, I learned how to write clear and descriptive guidance for the engineering handoff, ensuring optimal device-user interaction.
​
This design is currently in use.
FUTURE CONSIDERATIONS
1. Explore personalized experience with Monster study buddy
2. Study mode where falling behind students can get guidance on the topic
3. Consider responsive design in laptop and tablet
LEARNINGS
& WHAT I'D DO DIFFERENTLY
