Gamified Education Support
Helping students develop better digital habits in school.
Role
Lead UI/UX Designer
UX Researcher
Team
Founder
UI/UX Designer
Tools
Figma
Mobbin
Duration
1 month
(Aug - Sept 2024)
The Problem
Phones are becoming increasingly addictive for younger generations, leading to excessive doomscrolling and unproductive screen time. This distraction hampers students' ability to focus and engage effectively in their education.
The Solution
In a one-month contract as a freelance project, the founder of a startup company tasked me with designing the MVP (Minimum Viable Product) of a mobile app for gamified education support — from scratch. The goal is to encourage digital literacy and better use of screen time to enrich in-school learning for middle and high school students using a reward system.
I can not put company identifiers in this case study because it is still in the workings, but I am proud to say that I was a crucial part in jumpstarting the foundation of the mobile app aimed to create a better digital world for youth.
Click Around the Final Prototype! ⤵️
How might we help middle school and high school students develop better digital habits in school?
Creating a game-like space
by utilizing bright colors and an amusing font that looks blocky
Levels, Points, and Mystery Prizes
Levels provide clear qualitative goals and allow users to track their achievements through incentives. It is also a visual representation of the user's progress.
Points in this app are a metric based on speed, accuracy, and punctuality. This motivates the user to perform better at tasks, so they can level up faster.
Achievements, Feedback, and Celebrating EVERY achievement
Highlighting the user's achievements celebrates the user and makes them feel good. Seeing a celebratory screen pop up every time a reward is earned releases dopamine.
Coins (internal currency)
Earning coins by leveling up gives an incentive that will allow users to buy real-world products and donate to good causes.
Challenges
Challenges keep users interested, so they're not doing the same thing every time. In this app, the challenges and extra tasks
Rewards
Rewards like these coupons motivate users.
Avatars
Avatars provide a sense of familiarity within the game and motivate users with positive dialogue and motivating presence.
Progress
Avatars provide a sense of familiarity within the game and motivate users with positive dialogue and motivating presence.
Competition and Leaderboards
Competition and leaderboards allow users to track their progress relative to others, which leads to increased effort and participation.
Bite-Sized Lessons
These screens show a user flow of how short and quick a task can be in this app.
Other Necessary Screens
Influence / Competitor Analysis #1
Duolingo is a popular learning app that successfully keeps users engaged. Why does this platform work?
Bite-sized lessons.
Lessons are simple, quick, and easy to understand. This keeps the user going and motivated.
-
Levels
-
Points
-
Progress
-
Challenges
-
Rewards
-
Leaderboard
-
Competition
-
Achievement
-
Avatars
-
Coins (internal currency)
+ Fun and bright UI!
Influence #2
Brawl Stars, a game with over 376 million people in 2024, it's definitely doing something right. My friends and I have ALL had addicted phases. But what makes it so addictive?
Visual representation of the user's progress
This trophy road gets users excited to achieve their next goal. The moving road allows users to see how much it takes to get to the next prize.
Mystery Prizes
Humans like mysteries because it's like solving a puzzle when they are revealed. A hidden prize is always intriguing.
Celebrating EVERY achievement
Humans love to feel congratulated and celebrated, even if it's for the smallest things. Brawl Stars definitely gets users motivated by constantly bringing up screens that highlight the user's reward.
Key Takeaways
Importance of Preparation
Performing research and creating high-fidelity designs in one month was challenging. I learned that prior research and iterations is super important in making designs that simultaneously think about the user, the company, and the goal.
Always Remember the Scope
There were many iterations of these screens that included too many different features and pages that did not focus on the scope. I learned how important it is to make sure each decision is supporting the main goals and not going off track.