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
WHAT'S RIGHTON?
RightOn! helps middle and high school students (ages 13–18) learn from mistakes without pressure of rushing to find the correct answer, building confidence to transform errors into valuable learning experiences. With this unique mechanic, teachers can spot common misconceptions, reinforce key concepts, and help students avoid repeating mistakes.
Students are shown the same quiz again, and are asked:
"which incorrect answer was chosen most often by your 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
Over 5 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
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
ideating
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.
When solving score clarity, illustrate percentages clearly to even 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 our users' mental model.
testing & refining
We wend on 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 🚧
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:
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.
continuous testing & refining
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
"Answer explanation screen" played a key role in building anticipation and excitement. Observing classroom sessions, I carefully timed animations where earned and total points are visually connected, helping user better make sense of the scoring system
2/ SETBACKS & EXPLORATION
An exploration of emphasizing progress is a design using a dial motif. However, classroom testing showed these moments were too time-consuming, often skipped by teachers.
New goal: creating brief, high-energy celebrations that acknowledge progress without disrupting classroom flow.
3/ great VISUAL brings up excitement
Students mentioned monster avatar brings excitement. Collaborating with a Visual Designer, we expanded their expressions to include Excited for Correct Answer and Thinking for Incorrect Answer.
4/ ACCOUNTING FOR USER UNCOMFORTABLENESS
45% of users felt uncomfortable showing their rankings publicly, yet still wanted to track their progress.
Leaderboard now displays the player's surrounding 5 rankings with progress animation for motivation, while hiding others' names.
This encourages engagement without feeling exposed or targeted, and fostering a less competitive environment.
This design is currently in use in RightOn! app.
LESSONS LEARNED
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
You've reached the end… how about another story?
ACTIVISION BLIZZARD / 2024
