Progress Visualization
Progress Visualization
Levels and progress charts provide clear qualitative goals and allow users to track their achievements through incentives.
Levels and progress charts provide clear qualitative goals and allow users to track their achievements through incentives.
[Knit-Space] 0→1 Gamified Learning
Role
Role
UI/UX Design Lead
UI/UX Design Lead
Team
Team
1 Mentor/Founder
1 UI/UX Design Lead
1 Mentor/Founder
1 UI/UX Design Lead
Timeline
Timeline
1 month
(Aug - Sept 2024)
1 month
(Aug - Sept 2024)
Tools/Skills
Tools/Skills
UX Research, UI Design, Testing, Figma, Miro
UX Research, UI Design, Testing, Figma, Miro
The Challenge
The Challenge
Secondary school students spend their time doomscrolling and playing mobile games but are unmotivated to learn.
Secondary school students spend their time doomscrolling and playing mobile games but are unmotivated to learn.
Smart 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.
Smart 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.
What did i do?
I designed a mobile app from 0→1 to gamify learning behavior.
In a freelance contract for Knit Space, the founder of this startup tasked me with designing the MVP of a gamified learning platform that syncs with school. The goal is to encourage better use of screen time to enrich learning for middle and high school students using a reward system.
LAYOUT
LAYOUT
Information Architecture
Information Architecture
Information Architecture
There are various paths to earning points and coins, which is shown in the information architecture below. The yellow boxes represent the stage where the student earns a reward.
There are various paths to earning points and coins, which is shown in the information architecture below. The yellow boxes represent the stage where the student earns a reward.
There are various paths to earning points and coins, which is shown in the information architecture below. The yellow boxes represent the stage where the student earns a reward.
The Power of Feedback & Iteration
The Power of Feedback & Iteration
Constructive criticism wasn’t easy to hear for the first time, but my mentor’s push for rapid growth taught me to embrace mistakes as learning opportunities and refine my work into stronger outcomes.
Constructive criticism wasn’t easy to hear for the first time, but my mentor’s push for rapid growth taught me to embrace mistakes as learning opportunities and refine my work into stronger outcomes.
Always Remember the Scope
Always Remember the Scope
My early iterations included excessive features and pages that could be added later. I learned how important it is to focus on the MVP scope and ensure that every decision supports it without going off track.
My early iterations included excessive features and pages that could be added later. I learned how important it is to focus on the MVP scope and ensure that every decision supports it without going off track.
Reflection
Reflection
Market RESEARCH
Market RESEARCH
Competitive Analysis: Gamified Educational Products
Competitive Analysis: Gamified Educational Products
Competitive Analysis: Gamified Educational Products
user research
user research
User Persona: Who are our users?
User Persona: Who are our users?
User Persona: Who are our users?
Max, Age 17
A bright student who wants to do well in school but struggles to complete his work
Addicted to Tiktok and Clash Royale
Hours wasted on short-form content
Schoolwork feels like a chore compared to the instant gratification of other apps
Feels guilty after doomscrolling
Pain Points
Pain Points
Driven by competition and rewards
Responds well to enjoyable visuals
Encouraged by visual indicators of achievement
Driven by competition and rewards
Responds well to enjoyable visuals
Encouraged by visual indicators of achievement
Motivations
Motivations
Goals
Goals
Stay focused while studying or doing schoolwork
Get better grades
Spend more time outside playing basketball
Stay focused while studying or doing schoolwork
Get better grades
Spend more time outside playing basketball
USER FEEDBACK
USER FEEDBACK
Focus Group Testing and iterations
Focus Group Testing and iterations
Focus Group Testing and iterations
I had three users from the target group test my prototype and share what felt frustrating or confusing. Based on their feedback, I made these changes:
I had three users from the target group test my prototype and share what felt frustrating or confusing. Based on their feedback, I made these changes:
I had three users from the target group test my prototype and share what felt frustrating or confusing. Based on their feedback, I made these changes:
Typography
Typography
Assets
Assets
Colors
Colors
Design System
Design System
Design System
Could be improved
Categories and numbers do not stand out
"Join a class" button feels more important than actual class buttons
Fixed
To join a class, click + button, not a huge CTA button
Categories and numbers are clear
Could be improved
Fixed
Completed assignments can take up space
Red "late" button is discouraging
"Extra Credit: and "Challenges" are confusing because there is a separate "Challenges" page
Late assignments are labeled "Catch up!" for to encourage
All completed assignments can be viewed on another page
Instead of unnecessary sections, a section to study for exams is added
Could be improved
Fixed
There is no community involvement, it's just a list of other people's achievements
Celebration buttons allows the user to acknowledge their peers' achievements, and vice versa
Could be improved
Fixed
Seeing a countdown feels anxiety-inducing
Lots of different numbers without visual guidance
Better emphasis on rank
No countdown
Could be improved
Could be improved
Categories and numbers do not stand out
Categories and numbers do not stand out
"Join a class" button feels more important than actual class buttons
"Join a class" button feels more important than actual class buttons
Fixed
Fixed
Categories and numbers are clear
Categories and numbers are clear
To join a class, click + button, not a huge CTA button
To join a class, click + button, not a huge CTA button
Could be improved
Could be improved
Completed assignments can take up space
Completed assignments can take up space
Red "late" button is discouraging
Red "late" button is discouraging
"Extra Credit: and "Challenges" are confusing because there is a separate "Challenges" page
"Extra Credit: and "Challenges" are confusing because there is a separate "Challenges" page
Fixed
Fixed
All completed assignments can be viewed on another page
All completed assignments can be viewed on another page
Late assignments are labeled "Catch up!" for to encourage
Late assignments are labeled "Catch up!" for to encourage
Instead of unnecessary sections, a section to study for exams is added
Instead of unnecessary sections, a section to study for exams is added
Could be improved
Could be improved
There is no community involvement, it's just a list of other people's achievements
There is no community involvement, it's just a list of other people's achievements
Fixed
Fixed
Celebration buttons allows the user to acknowledge their peers' achievements, and vice versa
Celebration buttons allows the user to acknowledge their peers' achievements, and vice versa
Could be improved
Could be improved
Seeing a countdown feels anxiety-inducing
Seeing a countdown feels anxiety-inducing
Lots of different numbers without visual guidance
Lots of different numbers without visual guidance
Fixed
Fixed
Better emphasis on rank
Better emphasis on rank
Visual representation of progress
Visual representation of progress
No countdown
No countdown
Leaderboards and shared achievements motivate users by tracking progress along peers, inspiring greater effort and participation.
Leaderboards and shared achievements motivate users by tracking progress along peers, inspiring greater effort and participation.
Community and Competiton
Community and Competiton
Digestible assignments make learning less overwhelming and more approachable.
Challenges keep users interested, so they're not simply doing schoolwork on the app. These extra tasks encourage users to learn more, reduce their recreational screen time, and more.
Digestible assignments make learning less overwhelming and more approachable.
Challenges keep users interested, so they're not simply doing schoolwork on the app. These extra tasks encourage users to learn more, reduce their recreational screen time, and more.
Bite-Sized Tasks
Bite-Sized Tasks
Rewards and Celebration
Rewards and Celebration
Rewards and Internal Currency give users an incentive to perform well (speed, accuracy, and punctuality). Celebrating the user's achievements makes them feel good. Seeing a celebratory screen pop up every time a reward is earned releases dopamine.
Rewards and Internal Currency give users an incentive to perform well (speed, accuracy, and punctuality). Celebrating the user's achievements makes them feel good. Seeing a celebratory screen pop up every time a reward is earned releases dopamine.
Final Design
Final Design
Role
Role
UI/UX Design Lead
Timeline
Timeline
1 month
(Aug - Sept 2024)
Tools/Skills
Tools/Skills
UX Research, UI Design, Testing, Figma, Miro
Team
1 Mentor/Founder
1 UI/UX Design Lead
The Solution
wHAT DID I DO?
Reward and gamify learning behavior on mobile screens.
I designed a mobile app from 0→1 to gamify learning behavior.
In a freelance contract for Knit Space @theofflinenyc, the founder of this startup tasked me with designing the MVP of a gamified learning platform that syncs with school. The goal is to encourage better use of screen time to enrich learning for middle and high school students using a reward system.
Typography
Colors
Assets
Pain Points
Hours wasted on short-form content
Schoolwork feels like a chore compared to the instant gratification of other apps
Feels guilty after doomscrolling
Max, Age 17
Bright student who wants to do well in school but struggles
Addicted to Tiktok and Clash Royale
Motivations
Goals
Driven by competition and rewards
Responds well to enjoyable visuals
Encouraged by visual indicators of achievement
Stay focused while studying or doing schoolwork
Get better grades
Spend more time outside playing basketball
Driven by competition and rewards
Responds well to enjoyable visuals
Encouraged by visual indicators of achievement
Stay focused while studying or doing schoolwork
Get better grades
Spend more time outside playing basketball
The Power of Feedback & Iteration
Constructive criticism wasn’t easy to hear for the first time, but my mentor’s push for rapid growth taught me to embrace mistakes as learning opportunities and refine my work into stronger outcomes.
Reflection
Always Remember the Scope
My early iterations included excessive features and pages that could be added later. I learned how important it is to focus on the MVP scope and ensure that every decision supports it without going off track.
The Power of Feedback & Iteration
The Power of Feedback & Iteration
Constructive criticism wasn’t easy to hear for the first time, but my mentor’s push for rapid growth taught me to embrace mistakes as learning opportunities and refine my work into stronger outcomes.
Constructive criticism wasn’t easy to hear for the first time, but my mentor’s push for rapid growth taught me to embrace mistakes as learning opportunities and refine my work into stronger outcomes.
Reflection
Always Remember the Scope
Always Remember the Scope
My early iterations included excessive features and pages that could be added later. I learned how important it is to focus on the MVP scope and ensure that every decision supports it without going off track.
My early iterations included excessive features and pages that could be added later. I learned how important it is to focus on the MVP scope and ensure that every decision supports it without going off track.
[Knit-Space] Gamified Learning
Market RESEARCH
Competitive Analysis: Gamified Educational Products
Max, Age 17
Bright student who wants to do well in school but struggles
Addicted to Tiktok and Clash Royale
Hours wasted on short-form content
Schoolwork feels like a chore compared to the instant gratification of other apps
Feels guilty after doomscrolling
Pain Points
Max, Age 17
Bright student who wants to do well in school but struggles
Addicted to Tiktok and Clash Royale
Hours wasted on short-form content
Schoolwork feels like a chore compared to the instant gratification of other apps
Feels guilty after doomscrolling
Pain Points
Driven by competition and rewards
Responds well to enjoyable visuals
Encouraged by visual indicators of achievement
Motivations
Goals
Stay focused while studying or doing schoolwork
Get better grades
Spend more time outside playing basketball
Driven by competition and rewards
Responds well to enjoyable visuals
Encouraged by visual indicators of achievement
Motivations
Goals
Stay focused while studying or doing schoolwork
Get better grades
Spend more time outside playing basketball
LAYOUT
Information Architecture
There are various paths to earning points and coins, which is shown in the information architecture below. The yellow boxes represent the stage where the student earns a reward.
USER FEEDBACK
Focus Group Testing and iterations
I had three users from the target group test my prototype and share what felt frustrating or confusing. Based on their feedback, I made these changes:
Visual representation of progress
Made with 🩷, ☕️
Made with 🩷, ☕️
user research
User Persona: Who are our users?
Community and Competiton
Leaderboards and shared achievements motivate users by tracking progress along peers, inspiring greater effort and participation.
Progress Visualization
Levels and progress charts provide clear qualitative goals and allow users to track their achievements through incentives.
Bite-Sized Tasks Community and Competiton
Digestible assignments make learning less overwhelming and more approachable.
Challenges keep users interested, so they're not simply doing schoolwork on the app. These extra tasks encourage users to learn more, reduce their recreational screen time, and more.
Rewards and Celebration
Rewards and Internal Currency give users an incentive to perform well (speed, accuracy, and punctuality). Celebrating the user's achievements makes them feel good. Seeing a celebratory screen pop up every time a reward is earned releases dopamine.
Final Design
Could be improved
Completed assignments can take up space
Red "late" button is discouraging
"Extra Credit: and "Challenges" are confusing because there is a separate "Challenges" page
Fixed
All completed assignments can be viewed on another page
Late assignments are labeled "Catch up!" for to encourage
Instead of unnecessary sections, a section to study for exams is added
Could be improved
Categories and numbers do not stand out
"Join a class" button feels more important than actual class buttons
Fixed
Categories and numbers are clear
To join a class, click + button, not a huge CTA button
Could be improved
Seeing a countdown feels anxiety-inducing
Lots of different numbers without visual guidance
Fixed
Better emphasis on rank
Visual representation of progress
No countdown
Could be improved
There is no community involvement, it's just a list of other people's achievements
Fixed
Celebration buttons allows the user to acknowledge their peers' achievements, and vice versa
Role
UI/UX Design Lead
Team
1 Mentor/Founder
1 UI/UX Design Lead
Timeline
1 month
(Aug - Sept 2024)
Tools/Skills
UX Research, UI Design, Testing, Figma, Miro
[Knit-Space] Gamified Learning
Leaderboards and shared achievements motivate users by tracking progress along peers, inspiring greater effort and participation.
Community and Competiton
Digestible assignments make learning less overwhelming and more approachable.
Challenges keep users interested, so they're not simply doing schoolwork on the app. These extra tasks encourage users to learn more, reduce their recreational screen time, and more.
Bite-Sized Tasks
Rewards and Celebration
Rewards and Internal Currency give users an incentive to perform well (speed, accuracy, and punctuality). Celebrating the user's achievements makes them feel good. Seeing a celebratory screen pop up every time a reward is earned releases dopamine.
Rewards and Celebration
Rewards and Internal Currency give users an incentive to perform well (speed, accuracy, and punctuality). Celebrating the user's achievements makes them feel good. Seeing a celebratory screen pop up every time a reward is earned releases dopamine.