E-LEARNING WEB & MOBILE-RESPONSIVE APP
E-LEARNING WEB & MOBILE-RESPONSIVE APP
MockPrep – A Gamified Learning Platform for K-12 Students
MockPrep – A Gamified Learning Platform for K-12 Students
From student stress to student success — I designed MockPrep, a 0→1 product that makes exam prep less daunting and more engaging through personalized dashboards, interactive mock tests, and a reward-driven ecosystem.
The result? A 60% boost in engagement and 45% higher test completion rates.
From student stress to student success — I designed MockPrep, a 0→1 product that makes exam prep less daunting and more engaging through personalized dashboards, interactive mock tests, and a reward-driven ecosystem.
The result? A 60% boost in engagement and 45% higher test completion rates.
Industry
Industry
Edtech
Edtech
Category
Category
Web App, Mobile-Responsive Design
Web App, Mobile-Responsive Design
Timeline
Timeline
16 weeks
16 weeks
My Role
My Role
Solo Product Designer
Solo Product Designer
My Team
My Team
1 Product Designer (Me), 1 Product Manager, 2 Front-end Developers
1 Product Designer (Me), 1 Product Manager, 2 Front-end Developers
45%
45%
Task Completion Improvement
Task Completion Improvement
60%
60%
Increase in Session Time
Increase in Session Time
1000+
1000+
Students onboarded in the first month
Students onboarded in the first month
🌟 The Challenge
🌟 The Challenge
“Studying for exams shouldn’t feel like a punishment.” But for many students, it does.
Mock tests were often seen as repetitive, stressful, and lacking feedback. The client wanted to build a product from scratch that could:
“Studying for exams shouldn’t feel like a punishment.” But for many students, it does.
Mock tests were often seen as repetitive, stressful, and lacking feedback. The client wanted to build a product from scratch that could:
Make learning fun yet effective
Make learning fun yet effective
Help students stay consistent with practice
Help students stay consistent with practice
Provide actionable insights to teachers and parents
Provide actionable insights to teachers and parents
Stand out from traditional exam prep platforms
Stand out from traditional exam prep platforms
🔍 Research & Insights
🔍 Research & Insights
I kicked things off by speaking with students, parents, and educators to uncover pain points.
What I heard from students:
I kicked things off by speaking with students, parents, and educators to uncover pain points.
What I heard from students:
“Mock tests feel boring and never-ending.”
“Mock tests feel boring and never-ending.”
“I wish there were rewards or something fun for completing them.”
“I wish there were rewards or something fun for completing them.”
“Sometimes I don’t even know where I went wrong.”
“Sometimes I don’t even know where I went wrong.”
From parents & teachers:
From parents & teachers:
“We need to track progress, not just scores.”
“We need to track progress, not just scores.”
“Students give up midway — we need better engagement tools.”
“Students give up midway — we need better engagement tools.”
Key Findings
Key Findings
Cognitive Overload
Cognitive Overload
No Personalization
No Personalization
Engagement Gap
Engagement Gap
I also analyzed competitors like Byju’s, Toppr, and Vedantu. While they had solid content, their user experience often felt overwhelming or rigid. This opened the door for MockPrep to be simpler, friendlier, and more rewarding.
I also analyzed competitors like Byju’s, Toppr, and Vedantu. While they had solid content, their user experience often felt overwhelming or rigid. This opened the door for MockPrep to be simpler, friendlier, and more rewarding.
🎯 Design Goals
🎯 Design Goals
For students → Create a gamified experience that makes practice enjoyable and consistent
For parents & teachers → Build visibility into student performance and progress
For the business → Launch a competitive product that could scale with features like leaderboards, streaks, and adaptive testing
For students → Create a gamified experience that makes practice enjoyable and consistent
For parents & teachers → Build visibility into student performance and progress
For the business → Launch a competitive product that could scale with features like leaderboards, streaks, and adaptive testing
🛠️ The Design Process
🛠️ The Design Process
1. Defining the Experience
I mapped out the student journey: from signing up → selecting tests → taking a mock exam → getting instant insights, → earning rewards.
• Dashboard → Personalized progress & quick actions
• Test flow → Clean, distraction-free layout with timer and hints
• Rewards → Streak tracking, badges, and feedback after tests
2. Information Architecture
Structured by grade, subject, and topic for easy discovery
Simple flows: Onboard → Pick a test → Attempt → Review → Track progress
3. Wireframing & Prototyping
Early sketches and low-fidelity wireframes helped validate ideas quickly with stakeholders and student groups.
4. Gamification Layer
To reduce anxiety and increase retention, I designed features like:
XP points & rewards for completing tests
Leaderboards & streaks to encourage consistency
Personalized dashboards with progress tracking
Immediate, student-friendly feedback
Smart recommendations for “what to do next”
5. Visual Identity & Design System
I opted for a playful yet focused design system:
Bright, youthful colors balanced with clean, rounded, and approachable typography
Iconography designed to feel playful yet credible
Intuitive layouts which is playful but structured for younger audiences
Mobile-first approach (since most students access via phone)
Scalable design components for future features
1. Defining the Experience
I mapped out the student journey: from signing up → selecting tests → taking a mock exam → getting instant insights, → earning rewards.
• Dashboard → Personalized progress & quick actions
• Test flow → Clean, distraction-free layout with timer and hints
• Rewards → Streak tracking, badges, and feedback after tests
2. Information Architecture
Structured by grade, subject, and topic for easy discovery
Simple flows: Onboard → Pick a test → Attempt → Review → Track progress
3. Wireframing & Prototyping
Early sketches and low-fidelity wireframes helped validate ideas quickly with stakeholders and student groups.
4. Gamification Layer
To reduce anxiety and increase retention, I designed features like:
XP points & rewards for completing tests
Leaderboards & streaks to encourage consistency
Personalized dashboards with progress tracking
Immediate, student-friendly feedback
Smart recommendations for “what to do next”
5. Visual Identity & Design System
I opted for a playful yet focused design system:
Bright, youthful colors balanced with clean, rounded, and approachable typography
Iconography designed to feel playful yet credible
Intuitive layouts which is playful but structured for younger audiences
Mobile-first approach (since most students access via phone)
Scalable design components for future features
📱 Final Design Solution
📱 Final Design Solution
1. Interactive Dashboard
Personalized dashboard showcasing performance stats
Summary of their progress, upcoming tests, and recommended study materials
Leaderboard to create healthy competition
2. Gamified Mock Tests
Simple navigation with interactive timed tests, hints, and instant feedback
Gamification features like leaderboards and rewards like badges, streaks, and XP points for consistency
Micro-rewards to keep students invested after every test
Results Page with detailed insights with recommendations for improvement
3. Rich Content Repository
Rich content repository featuring video lectures, study materials, and interactive simulations
Students allowed to explore subjects in depth and gain a holistic understanding
3. Parent and Teacher Portals
Separate portals for parents and teachers
Enabling tracking a student’s progress and offer support and guidance
3. Responsive Design
Students could practice seamlessly on desktop and mobile
Mobile UI was optimized for quick test-taking on the go
1. Interactive Dashboard
Personalized dashboard showcasing performance stats
Summary of their progress, upcoming tests, and recommended study materials
Leaderboard to create healthy competition
2. Gamified Mock Tests
Simple navigation with interactive timed tests, hints, and instant feedback
Gamification features like leaderboards and rewards like badges, streaks, and XP points for consistency
Micro-rewards to keep students invested after every test
Results Page with detailed insights with recommendations for improvement
3. Rich Content Repository
Rich content repository featuring video lectures, study materials, and interactive simulations
Students allowed to explore subjects in depth and gain a holistic understanding
4. Parent and Teacher Portals
Separate portals for parents and teachers
Enabling tracking a student’s progress and offer support and guidance
5. Responsive Design
Students could practice seamlessly on desktop and mobile
Mobile UI was optimized for quick test-taking on the go
📈 The Impact
📈 The Impact
The results after pilot testing with a small group of users were promising:
The results after pilot testing with a small group of users were promising:
Engagement: +65% more time spent per session
Engagement: +65% more time spent per session
Completion: +45% increase in finished mock tests
Completion: +45% increase in finished mock tests
Adoption: 1,000+ students onboarded in the first month
Adoption: 1,000+ students onboarded in the first month
Client Win: A differentiated edtech product ready for scale
Client Win: A differentiated edtech product ready for scale
💡 Key Learnings & Reflections
💡 Key Learnings & Reflections
Designing MockPrep was about balancing fun with functionality. The biggest learning was how even small gamification tweaks (like a badge or progress streak) can significantly impact motivation and completion rates.
Designing MockPrep was about balancing fun with functionality. The biggest learning was how even small gamification tweaks (like a badge or progress streak) can significantly impact motivation and completion rates.
Gamification, when done thoughtfully, is more than just points and badges — it’s about motivating behavior
Gamification, when done thoughtfully, is more than just points and badges — it’s about motivating behavior
Building for both students and parents/teachers required balancing fun with credibility
Building for both students and parents/teachers required balancing fun with credibility
Building from 0–1 means balancing client expectations, user psychology, and clean execution
Building from 0–1 means balancing client expectations, user psychology, and clean execution
User testing early with students gave raw, unfiltered feedback that shaped the final product
User testing early with students gave raw, unfiltered feedback that shaped the final product
🚀 What Next?
🚀 What Next?
MockPrep went from an idea to a gamified learning platform students actually enjoy using. This project reminded me how design can transform “have to” tasks into “want to” experiences.
MockPrep went from an idea to a gamified learning platform students actually enjoy using. This project reminded me how design can transform “have to” tasks into “want to” experiences.
Future Opportunities:
AI-driven adaptive tests that evolve with performance
AI-driven adaptive tests that evolve with performance
Teacher & parent dashboards for holistic learning support
Mobile-first experience for on-the-go practice
Peer challenges to encourage social motivation
Teacher & parent dashboards for holistic learning support
Mobile-first experience for on-the-go practice
Peer challenges to encourage social motivation
MockPrep proves that exam prep doesn’t have to be stressful—when you design with empathy and add a layer of play, learning transforms into something kids actually look forward to.
MockPrep proves that exam prep doesn’t have to be stressful—when you design with empathy and add a layer of play, learning transforms into something kids actually look forward to.
Ready to build something amazing?
Ready to build something amazing?
I'd love to connect with you!
I'd love to connect with you!