Gamifying E-Learning App
Gamifying E-Learning App
Gamifying E-Learning App
where learning meets psychology, consistency becomes a habit
where learning meets psychology, consistency becomes a habit
where learning meets psychology, consistency becomes a habit
Gamifying E-Learning App
where learning meets psychology, consistency becomes a habit
Project
Project
UX/UI | Redesign
UX/UI |
Redesign
Industry
Industry
E-Learning
E-Learning
Date
Date
April - 2025
April - 2025
Duration
Duration
2 weeks
Overview.
Overview.
Overview.
Behavioral design isn’t about play; it’s about persistence.
Behavioral design isn’t about play; it’s about persistence.
Behavioral design isn’t about play; it’s about persistence.
My role
My role
Led end-to-end UX and UI design, conducted secondary research on motivation psychology and user retention, mapped existing learning journeys, and built a gamified interface system using six behavioral triggers
Led end-to-end UX and UI design, conducted secondary research on motivation psychology and user retention, mapped existing learning journeys, and built a gamified interface system using six behavioral triggers
Team
Team
Solo Project — 1-Man Army
Handled UX research, UI design, motion, and interaction system independently.
Solo Project — 1-Man Army
Handled UX research, UI design, motion, and interaction system independently.
Duration
Duration
2 Weeks
Gamification sprint + usability iteration
2 Weeks
Gamification sprint + usability iteration
2 Weeks
Gamification sprint + usability iteration
01. Context / Problem
01. Context / Problem
01. Context / Problem
Stepik, a self-paced learning platform, offers solid academic content but fails to keep learners coming back.
Stepik, a self-paced learning platform, offers solid academic content but fails to keep learners coming back.
Stepik, a self-paced learning platform, offers solid academic content but fails to keep learners coming back.
Stepik, a self-paced learning platform, offers solid academic content but fails to keep learners coming back.
There’s no sense of accomplishment, no dopamine loop, and no clear goal beyond “finish the course.”
There’s no sense of accomplishment, no dopamine loop, and no clear goal beyond “finish the course.”
There’s no sense of accomplishment, no dopamine loop, and no clear goal beyond “finish the course.”
Sessions drop after a few days because learning feels like progress bars, not progress stories
Sessions drop after a few days because learning feels like progress bars, not progress stories
Sessions drop after a few days because learning feels like progress bars, not progress stories
There’s no sense of accomplishment, no dopamine loop, and no clear goal beyond “finish the course.”
We realize.d the problem wasn’t the lessons. It was motivation decay.
We realized the problem wasn’t the lessons. It was motivation decay.
We realized the problem wasn’t the lessons. It was motivation decay.
We realized the problem wasn’t the lessons. It was motivation decay.
View Actual Case study
View Actual Case study
View Actual Case study
Our challenge
Our challenge
Rebuild Stepik’s motivation model through gamification that feels purposeful, not gimmicky improving engagement, return frequency, and retention without harming learning flow.
Rebuild Stepik’s motivation model through gamification that feels purposeful, not gimmicky improving engagement, return frequency, and retention without harming learning flow.
Rebuild Stepik’s motivation model through gamification that feels purposeful, not gimmicky improving engagement, return frequency, and retention without harming learning flow.
Rebuild Stepik’s motivation model through gamification that feels purposeful, not gimmicky improving engagement, return frequency, and retention without harming learning flow.
02. Research & Insights
02. Research & Insights
02. Research & Insights
Before designing mechanics, I needed to understand what keeps learners engaged long-term.
Before designing mechanics, I needed to understand what keeps learners engaged long-term.
Before designing mechanics, I needed to understand what keeps learners engaged long-term.
While research we came across STEM-focused learners (science, tech, engineering, math) as your core research demographic and their learning patterns directly influence your design logic: they’re goal-driven but easily lose engagement when progress feels abstract or repetitive.
While research we came across STEM-focused learners (science, tech, engineering, math) as your core research demographic and their learning patterns directly influence your design logic: they’re goal-driven but easily lose engagement when progress feels abstract or repetitive.
While research we came across STEM-focused learners (science, tech, engineering, math) as your core research demographic and their learning patterns directly influence your design logic: they’re goal-driven but easily lose engagement when progress feels abstract or repetitive.
While research we came across STEM-focused learners (science, tech, engineering, math) as your core research demographic and their learning patterns directly influence your design logic: they’re goal-driven but easily lose engagement when progress feels abstract or repetitive.
Primary focus group
Primary focus group
STEM learners - students and young professionals in science, tech, and engineering courses.
They showed high motivation at the start but low retention after 3–5 days of inactivity.
Most described learning as “productive but lonely,” or “too structured to feel rewarding.”
STEM learners - students and young professionals in science, tech, and engineering courses.
They showed high motivation at the start but low retention after 3–5 days of inactivity.
Most described learning as “productive but lonely,” or “too structured to feel rewarding.”
STEM learners - students and young professionals in science, tech, and engineering courses.
They showed high motivation at the start but low retention after 3–5 days of inactivity.
Most described learning as “productive but lonely,” or “too structured to feel rewarding.”
Primary focus group
Secondary Research:
Secondary Research:
Secondary Research:
(Duolingo, Coursera, and Hooked Model studies) confirmed that engagement issues stem from the same roots: lack of emotional feedback and no progressive identity building.
Progress must feel visible and recoverable.
Challenge must feel chosen, not forced.
Rewards must link to real learning value.
(Duolingo, Coursera, and Hooked Model studies) confirmed that engagement issues stem from the same roots: lack of emotional feedback and no progressive identity building.
Progress must feel visible and recoverable.
Challenge must feel chosen, not forced.
Rewards must link to real learning value.
(Duolingo, Coursera, and Hooked Model studies) confirmed that engagement issues stem from the same roots: lack of emotional feedback and no progressive identity building.
Progress must feel visible and recoverable.
Challenge must feel chosen, not forced.
Rewards must link to real learning value.
STEM learners don’t just need better lessons; they need a reason to return.
STEM learners don’t just need better lessons; they need a reason to return.
STEM learners don’t just need better lessons; they need a reason to return.
That realization became the design foundation:
Gamification isn’t decoration. It’s behavioral design for motivation.
That realization became the design foundation:
Gamification isn’t decoration. It’s behavioral design for motivation.
That realization became the design foundation:
Gamification isn’t decoration. It’s behavioral design for motivation.
That realization became the design foundation:
Gamification isn’t decoration. It’s behavioral design for motivation.
03. Finding the Friction
03. Finding the Friction
03. Finding the Friction
When I mapped the existing learning flow, friction points appeared everywhere
When I mapped the existing learning flow, friction points appeared everywhere
When I mapped the existing learning flow, friction points appeared everywhere
Static Progress Bars – no emotional payoff.
No Challenge Spectrum – learners felt stuck on fixed difficulty.
No Feedback Loop – completion felt empty.
No Reward Memory – users couldn’t see what effort unlocked.
Static Progress Bars – no emotional payoff.
No Challenge Spectrum – learners felt stuck on fixed difficulty.
No Feedback Loop – completion felt empty.
No Reward Memory – users couldn’t see what effort unlocked.
Static Progress Bars – no emotional payoff.
No Challenge Spectrum – learners felt stuck on fixed difficulty.
No Feedback Loop – completion felt empty.
No Reward Memory – users couldn’t see what effort unlocked.
Even “Continue Learning” screens failed to create cues nothing nudged users to come back tomorrow.
Even “Continue Learning” screens failed to create cues nothing nudged users to come back tomorrow.
Even “Continue Learning” screens failed to create cues nothing nudged users to come back tomorrow.
Even “Continue Learning” screens failed to create cues nothing nudged users to come back tomorrow.
This realization redefined the problem
This realization redefined the problem
This realization redefined the problem
Stepik didn’t need more features; it needed motivation architecture.
Stepik didn’t need more features; it needed motivation architecture.
Stepik didn’t need more features; it needed motivation architecture.
Stepik didn’t need more features; it needed motivation architecture.
04. Ideation & Concept Development
04. Ideation & Concept Development
04. Ideation & Concept Development
I grounded the redesign in six pillars of engagement, aligning each with psychological triggers
I grounded the redesign in six pillars of engagement, aligning each with psychological triggers
I grounded the redesign in six pillars of engagement, aligning each with psychological triggers
Bolt Streak System (Cue + Routine)
Visualizes consistency through an electric Bolt meter that charges with daily study. Missing a day depletes the charge a gentle loss aversion cue that drives return.
XP & Level System (Progress + Reward)
Each task grants XP and levels up the learner. Mastery becomes visible turning invisible effort into measurable success.
Difficulty Choice (Autonomy)
Learners pick Easy, Medium, or Hard (10/20/30 XP). This sense of control increases persistence and ownership.
Swipe Q&A Interactions (Action)
Micro-interactions keep tasks quick, tactile, and satisfying reinforcing flow.
Leaderboard (Social Proof)
Ranking visuals create soft competition and communal momentum.
Reward Redemption (Variable Reward)
Earned XP converts to redeemable credits for premium paid classes, transforming digital points into real value.
Bolt Streak System (Cue + Routine)
Visualizes consistency through an electric Bolt meter that charges with daily study. Missing a day depletes the charge a gentle loss aversion cue that drives return.
XP & Level System (Progress + Reward)
Each task grants XP and levels up the learner. Mastery becomes visible turning invisible effort into measurable success.
Difficulty Choice (Autonomy)
Learners pick Easy, Medium, or Hard (10/20/30 XP). This sense of control increases persistence and ownership.
Swipe Q&A Interactions (Action)
Micro-interactions keep tasks quick, tactile, and satisfying reinforcing flow.
Leaderboard (Social Proof)
Ranking visuals create soft competition and communal momentum.
Reward Redemption (Variable Reward)
Earned XP converts to redeemable credits for premium paid classes, transforming digital points into real value.
Bolt Streak System (Cue + Routine)
Visualizes consistency through an electric Bolt meter that charges with daily study. Missing a day depletes the charge a gentle loss aversion cue that drives return.
XP & Level System (Progress + Reward)
Each task grants XP and levels up the learner. Mastery becomes visible turning invisible effort into measurable success.
Difficulty Choice (Autonomy)
Learners pick Easy, Medium, or Hard (10/20/30 XP). This sense of control increases persistence and ownership.
Swipe Q&A Interactions (Action)
Micro-interactions keep tasks quick, tactile, and satisfying reinforcing flow.
Leaderboard (Social Proof)
Ranking visuals create soft competition and communal momentum.
Reward Redemption (Variable Reward)
Earned XP converts to redeemable credits for premium paid classes, transforming digital points into real value.
05. Final Design & Experience
05. Final Design & Experience
05. Final Design & Experience
The final UI embodies calm focus with playful energy.
The final UI embodies calm focus with playful energy.
The final UI embodies calm focus with playful energy.
Design language uses bold gradients, light neumorphism, rounded modules, and animated micro-feedback to make effort feel alive.
Design language uses bold gradients, light neumorphism, rounded modules, and animated micro-feedback to make effort feel alive.
Design language uses bold gradients, light neumorphism, rounded modules, and animated micro-feedback to make effort feel alive.
Every screen reinforces the Hook cycle:
Cue/Trigger (Bolt Streak) → Action (Learn/Swipe) → Reward (XP/Badge) → Investment (Redeem/Return Tomorrow).
Every screen reinforces the Hook cycle:
Cue/Trigger (Bolt Streak) → Action (Learn/Swipe) → Reward (XP/Badge) → Investment (Redeem/Return Tomorrow).
Every screen reinforces the Hook cycle:
Cue/Trigger (Bolt Streak) → Action (Learn/Swipe) → Reward (XP/Badge) → Investment (Redeem/Return Tomorrow).
06. Results & Reflection
06. Results & Reflection
06. Results & Reflection
This 2-week sprint showed how emotional design creates measurable behavioral change.
This 2-week sprint showed how emotional design creates measurable behavioral change.
This 2-week sprint showed how emotional design creates measurable behavioral change.
Through secondary validation and prototype feedback, I saw the potential of connecting human psychology with learning UX.
Through secondary validation and prototype feedback, I saw the potential of connecting human psychology with learning UX.
Through secondary validation and prototype feedback, I saw the potential of connecting human psychology with learning UX.
The redesigned Stepik isn’t about gamifying study.
It’s about teaching consistency through design making learners return not because they must, but because they want to see what happens next.
The redesigned Stepik isn’t about gamifying study.
It’s about teaching consistency through design making learners return not because they must, but because they want to see what happens next.
The redesigned Stepik isn’t about gamifying study.
It’s about teaching consistency through design making learners return not because they must, but because they want to see what happens next.
