Progress Visualization
Levels and progress charts provide clear qualitative goals and allow users to track their achievements through incentives.
Knit Space @theofflinenyc
Knit Space @theofflinenyc
Helping secondary school students develop better screen habits through gamified learning and rewarded screen regulation.
Helping secondary school students develop better screen habits through gamified learning and rewarded screen regulation.
Role
Team
Timeline
Tools/Skills
1 month
(Aug - Sept 2024)
UI/UX Design Lead
1 Mentor/Founder
1 UI/UX Design Lead
UX Research, UI Design, Testing, Figma, Miro
The Challenge
Mobile screens have become distractions, not tools.
Mobile screens have become distractions, not tools.
Mobile screens have become distractions, not tools.
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.
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.
The Solution
Reward and gamify learning behavior on mobile screens.
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.
LAYOUT
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.
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.
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.
Reflection
Market RESEARCH
Competitive Analysis: Gamified Educational Products
Competitive Analysis: Gamified Educational Products
user research
User Persona: Who are our users?
User Persona: Who are our users?
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
USER FEEDBACK
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:
Typography
Assets
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
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
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
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
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
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.
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
Reward and gamify learning behavior on mobile screens.
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.
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.
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
Role
UI/UX Design Lead
Timeline
1 month
(Aug - Sept 2024)
Tools/Skills
UX Research, UI Design, Testing, Figma, Miro
Team
1 Mentor/Founder
1 UI/UX Design Lead
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 @theofflinenyc
Helping secondary school students develop better screen habits through gamified learning and rewarded screen regulation.
user research
User Persona: Who are our users?
Market RESEARCH
Competitive Analysis: Gamified Educational Products
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:
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
Visual representation of progress
No countdown
Visual representation of progress