About Project
01
Strategy
02
Typography & Colour Palette
03
Concept
04
Designing a coding skill-building app that adapts to different user journeys
I structured the homepage around three progressive user types:
A design practice exploring a coding skill-building app that adapts to new, repeat, and advanced learners. It guides beginners with simple onboarding, motivates consistency for returning users, and empowers advanced users with stats, challenges, and personalized insights.
LEARNER-FIRST EXPERIENCE WITH CLEAR ONBOARDING
The app is designed around each learner’s journey, starting with simple onboarding that reduces friction and builds confidence. Clear calls to action and intuitive navigation help new users explore without feeling overwhelmed, creating a smooth entry point into coding.
New User
VISUAL PROGRESS TO DRIVE CONSISTENCY
Progress is central to the learning experience. Tools like streaks, progress bars, and module completion indicators celebrate small wins and encourage repeat users to stay engaged. This approach motivates consistency without overloading learners with too much data.
ADVANCED INSIGHTS FOR MOTIVATED USERS
Super users unlock richer features like weekly stats, coding challenges, and project tracking. These insights transform the app from a simple learning tool into a personalized growth platform, rewarding mastery and empowering advanced learners to keep pushing forward.
Main
ABC
INTER
abcdefghijklmnopqrstuvwxyz
Background
Secondary Colour
Main Colour
Text
FFFFFF
70FFA3
056427
000000
Repeat User
Super User
- A clear onboarding CTA: “Start your first lesson”.
- Trending coding paths with lessons and time estimates.
- Visual categories for quick exploration (Frontend, Backend, Data Science, Game Dev).
- A “Continue where you left off” card with progress bar + time left.
- Today’s plan: coding challenge + mini-quiz.
- Skill levels (Beginner, Intermediate, Advanced).
- Weekly stats: hours coded, challenges solved, projects completed.
- A bold daily challenge card (e.g., “Build a small game”).
- Practice drills: algorithm challenges, debugging exercises.
Conclusion
06
Designing, Learning, Improving
This project was a design exploration to practice progressive UX/UI and adapt interfaces to different user needs. By focusing on the coding education niche, I was able to simulate realistic user journeys and create a homepage that grows with the learner.
Back to Explorations
About Project
01
Strategy
02
Typography & Colour Palette
03
Concept
04
Designing a coding skill-building app that adapts to different user journeys
I structured the homepage around three progressive user types:
A design practice exploring a coding skill-building app that adapts to new, repeat, and advanced learners. It guides beginners with simple onboarding, motivates consistency for returning users, and empowers advanced users with stats, challenges, and personalized insights.
LEARNER-FIRST EXPERIENCE WITH CLEAR ONBOARDING
The app is designed around each learner’s journey, starting with simple onboarding that reduces friction and builds confidence. Clear calls to action and intuitive navigation help new users explore without feeling overwhelmed, creating a smooth entry point into coding.
New User
VISUAL PROGRESS TO DRIVE CONSISTENCY
Progress is central to the learning experience. Tools like streaks, progress bars, and module completion indicators celebrate small wins and encourage repeat users to stay engaged. This approach motivates consistency without overloading learners with too much data.
ADVANCED INSIGHTS FOR MOTIVATED USERS
Super users unlock richer features like weekly stats, coding challenges, and project tracking. These insights transform the app from a simple learning tool into a personalized growth platform, rewarding mastery and empowering advanced learners to keep pushing forward.
Main
ABC
INTER
abcdefghijklmnopqrstuvwxyz
Background
Secondary Colour
Main Colour
Text
FFFFFF
70FFA3
056427
000000
Repeat User
Super User
- A clear onboarding CTA: “Start your first lesson”.
- Trending coding paths with lessons and time estimates.
- Visual categories for quick exploration (Frontend, Backend, Data Science, Game Dev).
- A “Continue where you left off” card with progress bar + time left.
- Today’s plan: coding challenge + mini-quiz.
- Skill levels (Beginner, Intermediate, Advanced).
- Weekly stats: hours coded, challenges solved, projects completed.
- A bold daily challenge card (e.g., “Build a small game”).
- Practice drills: algorithm challenges, debugging exercises.
Conclusion
06
Designing, Learning, Improving
This project was a design exploration to practice progressive UX/UI and adapt interfaces to different user needs. By focusing on the coding education niche, I was able to simulate realistic user journeys and create a homepage that grows with the learner.
Back to Explorations
About Project
01
Strategy
02
Typography & Colour Palette
03
Concept
04
Designing a coding skill-building app that adapts to different user journeys
I structured the homepage around three progressive user types:
A design practice exploring a coding skill-building app that adapts to new, repeat, and advanced learners. It guides beginners with simple onboarding, motivates consistency for returning users, and empowers advanced users with stats, challenges, and personalized insights.
LEARNER-FIRST EXPERIENCE WITH CLEAR ONBOARDING
The app is designed around each learner’s journey, starting with simple onboarding that reduces friction and builds confidence. Clear calls to action and intuitive navigation help new users explore without feeling overwhelmed, creating a smooth entry point into coding.
New User
VISUAL PROGRESS TO DRIVE CONSISTENCY
Progress is central to the learning experience. Tools like streaks, progress bars, and module completion indicators celebrate small wins and encourage repeat users to stay engaged. This approach motivates consistency without overloading learners with too much data.
ADVANCED INSIGHTS FOR MOTIVATED USERS
Super users unlock richer features like weekly stats, coding challenges, and project tracking. These insights transform the app from a simple learning tool into a personalized growth platform, rewarding mastery and empowering advanced learners to keep pushing forward.
Main
ABC
INTER
abcdefghijklmnopqrstuvwxyz
Background
Secondary Colour
Main Colour
Text
FFFFFF
70FFA3
056427
000000
Repeat User
Super User
- A clear onboarding CTA: “Start your first lesson”.
- Trending coding paths with lessons and time estimates.
- Visual categories for quick exploration (Frontend, Backend, Data Science, Game Dev).
- A “Continue where you left off” card with progress bar + time left.
- Today’s plan: coding challenge + mini-quiz.
- Skill levels (Beginner, Intermediate, Advanced).
- Weekly stats: hours coded, challenges solved, projects completed.
- A bold daily challenge card (e.g., “Build a small game”).
- Practice drills: algorithm challenges, debugging exercises.
Conclusion
06
Designing, Learning, Improving
This project was a design exploration to practice progressive UX/UI and adapt interfaces to different user needs. By focusing on the coding education niche, I was able to simulate realistic user journeys and create a homepage that grows with the learner.
Back to Explorations
