Role
Product Designer
Client
Hooop, an online Montessori school
Type
Website redesign
Scope
UX audit, accessibility, design system, desktop and mobile
HOOOP, AS DESIGNED
CHAPTERS
01 — WHAT IT IS
Hooop is an online Montessori school for children aged 2.5 to 6. Its website has two jobs at once: feel warm and playful to parents, and carry a lot of serious information — curriculum, teachers, fees, admissions and FAQs — on one long page.
I redesigned that page without changing its personality. The purple-and-pink palette, Poppins, the rounded pills, the clouds and the cut-out children all stayed. What changed was the structure under them: a token-based design system, a real type scale, reusable components, accessible colour, and a mobile layout the site never had.
Everything was built in Figma as components, so the desktop and mobile pages are assembled from the same parts rather than drawn twice.
02 — THE PROBLEM
A page that looked finished, but wasn’t built to change.
The original was a single 1440 × 14,726px canvas of loose layers — “Group 33”, “Rectangle 5” — with no auto-layout, no components and no mobile version. It looked complete in a screenshot and fell apart the moment anything had to change.
Underneath the charm, the details disagreed with each other: 24 different text sizes, eyebrows set almost as large as the headings they introduced, three button shapes, and accent colours chosen one section at a time.
Much of the text wasn’t readable. White type on the light-pink hero measured 2.4:1 against a 4.5:1 minimum; pink, orange and yellow titles on white sat between 1.4:1 and 2.1:1; the disclaimer under every price was bright red. There were content bugs too — the afternoon batch ended at “03:00 am”.
THE DESIGN TENSION
Parents trusted the playful look. Everything underneath it had to change without the page feeling any different.
03 — THE DESIGN
The full homepage, top to bottom — hero, program overview, curriculum, Montessori materials, parent stories, gallery, teachers, fees, admissions, FAQs and footer.
FULL PAGE
Desktop 1440
DESKTOP 1440
Hero
04 — WHAT I DESIGNED
Three rules decided every change, in this order.
Keep the look, fix the structure
Every colour, font, shape and illustration parents recognise stayed. Underneath, loose layers became named, auto-layout sections built from components.
Readable by everyone
All text meets WCAG AA. Accent colours gained darker text shades, backgrounds behind white type got deeper, and every tap target is at least 44px.
One system, two screen sizes
Desktop and mobile share the same tokens and text styles. Where a desktop component didn’t fit a phone, it got a compact counterpart instead of being squeezed.
05 — THE DESIGN SYSTEM
29 colour tokens bound to Figma variables, 23 text styles, four shadow styles, a spacing and radius scale, and 20 components with 26 variants. Every section of the page is assembled from them, so a change to a button or a heading lands everywhere at once.
Components expose text properties instead of loose text layers — changing “Learn More” happens in the properties panel, not by digging into a frame.
COLOUR · 29 TOKENS · CONTRAST VS WHITE
PURPLE · 6
purple/50
#FAF5FF · 1.1:1 —
purple/100
#F3E8FF · 1.2:1 —
purple/200
#E4D2F7 · 1.4:1 —
purple/500
#A460ED · 3.8:1 AA large
purple/600
#8A3FD9 · 5.5:1 AA
purple/800
#4A0E9E · 11.4:1 AA
PINK · 5
pink/100
#FFF0FD · 1.1:1 —
pink/200
#FECCFB · 1.4:1 —
pink/300
#F485E4 · 2.3:1 —
pink/400
#FF74B1 · 2.5:1 —
pink/600
#D6337F · 4.5:1 AA
BERRY · 3
berry/500
#E12C7C · 4.3:1 AA large
berry/600
#C0267A · 5.5:1 AA
berry/700
#A90578 · 7.0:1 AA
ORCHID · 1
orchid/600
#BE3C9E · 4.9:1 AA
BLUE · 2
blue/500
#2C7FE1 · 4.0:1 AA large
blue/600
#1A66C7 · 5.6:1 AA
GREEN · 2
green/500
#48967E · 3.5:1 AA large
green/600
#2F7A64 · 5.1:1 AA
ORANGE · 2
orange/500
#FF9900 · 2.1:1 —
orange/700
#B35900 · 4.8:1 AA
YELLOW · 2
yellow/400
#DEE12C · 1.4:1 —
yellow/700
#737300 · 5.0:1 AA
NEUTRAL · 2
ink
#16101F · 18.6:1 AA
border
#ECE6F3 · 1.2:1 —
TEXT · 2
text/secondary
#555555 · 7.5:1 AA
text/muted
#696969 · 5.5:1 AA
SURFACE · 2
surface/white
#FFFFFF · 1.0:1 —
surface/subtle
#FAF7FD · 1.1:1 —
TYPE SCALE · POPPINS · 16 STYLES + 7 MOBILE
Display
Bold · 88/100
Heading/H1
SemiBold · 56/68
Heading/H2
SemiBold · 40/52
Heading/H3
SemiBold · 28/38
The foundation of future
Heading/H4
SemiBold · 22/32
For the most formative years of brain development
Eyebrow
SemiBold · 24/32
For the most formative years of brain development
Quote
Regular · 32/46
The foundation of future
Body/Lead
Regular · 20/32
For the most formative years of brain development
Body/Lead Medium
Medium · 20/32
For the most formative years of brain development
Body/Regular
Regular · 16/26
For the most formative years of brain development
Body/Strong
SemiBold · 16/26
For the most formative years of brain development
Label
Medium · 16/24
For the most formative years of brain development
Button/Large
SemiBold · 20/28
For the most formative years of brain development
Button/Medium
SemiBold · 18/24
For the most formative years of brain development
Caption
Regular · 14/20
For the most formative years of brain development
Caption/Strong
SemiBold · 14/20
For the most formative years of brain development
SPACING · 8PT GRID · RADIUS · ELEVATION
space-4
space-8
space-12
space-16
space-24
space-32
space-40
space-48
space-64
space-80
space-96
space-120
sm · 12
md · 20
lg · 28
pill · 999
Subtle
Card
Brand
Blob
COMPONENTS · LIVE SPECIMENS
BUTTONS · 5 VARIANTS × 2 SIZES
Primary
Gradient
White
Outline
Soft
TAB CHIPS · CAROUSEL ARROWS
Language
Math
Sensorial
FORM CONTROLS
Student’s first name
e.g. Tia
Package
Select a package
Schedule a meeting
FULL INVENTORY · 20 COMPONENTS · 39 VARIANTS
Button
10
Carousel Arrow
4
Section Heading
4
Tab Chip
2
Tab Chip / Compact
2
Input Field
2
FAQ Item
2
Checkbox
1
Feature Item
1
Feature Item / Compact
1
Activity Card
1
Activity Row
1
Material Card
1
Material Card / Compact
1
Teacher Card
1
Teacher Card / Compact
1
Video Testimonial
1
Video Testimonial / Compact
1
Nav Bar
1
Nav Bar / Mobile
1
06 — THE MOBILE VERSION
The original had no mobile layout at all. The 390px version keeps the section order and the brand, but stacks everything into one column, turns the six activities into a scannable list, and puts materials, testimonials and the gallery into swipe rows — one full card, the edge of the next peeking in, and page dots underneath.
MOBILE
390px
COLOUR TOKENS
TEXT STYLES
COMPONENTS
VARIANTS
SECTIONS
BREAKPOINTS
MIN TAP TARGET
WCAG CONTRAST
07 — SELECTED DECISIONS
D01
Deepen the background, don’t dim the brand
The hero’s white headline sat on light pink at 2.4:1. The obvious fixes — dark text, or a darker pink everywhere — would have changed what the brand felt like.
Instead the hero gradient now starts in purple behind the words and still ends in the original pink behind the photo. The same move fixed the materials, stories, fees and FAQ sections: the background under white text got deeper, and the text stayed white.
2.4:1
white on the original hero pink
4.9:1
white on the new hero purple
0
text colours left below WCAG AA
D02
Accent text gets its own shades
Colour-coded titles are part of Hooop’s charm — pink Reading, orange Grammar, green Word Study. At their original values most of them failed on white. Every accent now has a 500 shade for shapes and large display text and a 600/700 shade for anything people read, so the rainbow survived and became legible.
D03
Mobile gets its own components
My first mobile pass scaled the desktop components down. It produced a 19,700px page with photos spilling out of cards and a heading running into a play button. I threw it away and built six compact components at their real phone size — activity rows, swipeable material and testimonial cards, two-up teacher cards — which brought the page to 11,051px with nothing overlapping.
08 — WHAT I WOULD TAKE TO THE NEXT ONE
Build the mobile components on day one.
Designing desktop first and deriving mobile afterwards cost me a full rebuild; the compact set should have been drawn alongside the desktop set, not after it.
Check contrast as colours are chosen, not at the end.
Nearly every accessibility fix here was a background or a shade — cheap to decide early, expensive to retrofit across eleven sections.
And keep the personality.
The fastest way to “fix” this site would have been to make it generic. The more useful work was proving that a playful brand and a strict system can be the same thing.
Behance
Copyright @2026 Manish Durgude