Banana
Competitive analysis
I ran a SWOT analysis on four platforms to find the gap between passive video courses and trivial games.
Coursera
Academic credibility and certificates, but passive video learning, little interactivity and high cost.
Udemy
A huge, affordable catalogue, but no engagement features, no clear path and uneven quality.
Duolingo
Highly gamified and great at daily habits, but limited to languages and can feel repetitive.
edX
Top university partners and quality courses, but expensive certificates and minimal motivation tools.
Paper first
I started divergent, sketching as many layouts and game mechanics as I could on paper, then went convergent and kept the most practical ideas. The site map followed: courses, learning paths, library, Sword of Knowledge, leaderboard and news, all one step from home.
- Courses1 screen
- Course page
- Learning paths2 screens
- Path page
- Course page
- Path page
- Library1 screen
- Book page
- Sword of Knowledge
- Leaderboard
- News
- Log in & registration
Design and principles
- Jakob’s law: familiar course cards, side navigation and quiz flows, so people can start without learning anything new.
- Hick’s law: each page focuses on its core actions only.
- Fitts’s law: large, reachable buttons for quizzes and navigation.
- Proximity: XP, progress and rank are grouped so performance reads at a glance.
Accessibility was built in: high-contrast colours and legible sizes, plain language and consistent layouts. Colour variables with Day and Night modes switch the whole platform to dark mode in one step; text-size and contrast settings were part of the brief but are not designed as screens yet.
From Figma Built with Figma variables (design tokens). Read from the Banana Figma file: 10 colour variables with Day and Night modes, 40 foundation colours, 23 text styles, 8 spacing and 3 radius variables.
The system in use
Colour variables: Day and Night
| Variable | Day | Night |
|---|---|---|
| Primary CTA | #FFD400 | #FFD400 |
| Secondary CTA | #FFF4C2 | #FFAE00 |
| Text | #000000 | #FFFFFF |
| Background | #F8F8F8 | #181818 |
| Cards | #FFFFFF | #1E1E1E |
| Note badge | #FFE082 | #FFC947 |
| Input stroke | #D1D1D1 | #454545 |
| Stars | #FFDF13 | #FFDF13 |
Colour
Contrast is calculated against white or the darkest ink, whichever is higher. Click a swatch to copy its hex.
Foundation green
Typefaces
- PoppinsLight, Regular, Medium and SemiBold
Type scale
- XXLarge · 64 · 600Design people understand
- XLarge · 40 · 600Design people understand
- Large · 32 · 500Design people understand
- Body · 24 · 400Design people understand
- Medium · 20 · 500Design people understand
- Small · 16 · 400Design people understand
- XSmall · 12 · 400Design people understand
Line height 110% across the scale.
Spacing
- 4
- 8
- 12
- 16
- 20
- 24
- 32
- 64
Corner radius
- 12
- 20
- 32
Prototype: exploring the platform
Click through the main desktop pages from the Figma prototype.
1 / 5 Landing page
Tap the screen, swipe, or use ← → to move through the flow.
Reflection
The hardest part was making progress feel rewarding without becoming childish. Next I would test the quiz loop with school and university students.
