Case study

Why BloomOS exists

A learning dashboard that turns invisible progress into a living garden — designed to help people keep going, gently.

Take the tour Open my garden

The problem

Online learners start strong, then quietly drift away.

It's rarely a lack of motivation on day one. Progress is invisible, a missed day feels like failure, and most learning dashboards look like spreadsheets. So people stop opening them.

~3%

of learners who enrolled in MIT and Harvard courses on edX in 2017–18 went on to complete them.

Reich & Ruipérez-Valiente, “The MOOC pivot”, Science, 2019.

Who it's for

A

Ada, 20 — second-year computer science student Illustrative persona

Takes online courses alongside her degree to learn Python and design. Has six half-finished courses.

• Wants to see that 20 minutes a day is actually adding up to something.
• Struggles with guilt after missing a few days, which makes it harder to come back.
• Needs one clear next step, not a wall of options, and a little encouragement from people like her.

Design principles

Make progress visible

Every skill is a plant. Each lesson visibly grows it — from seed, to sprout, to full bloom — so effort never disappears into a percentage.

Gentle, not guilt

Neglected skills get “thirsty”, not red error states. Your streak survives until the day actually ends. Coming back is always one tap away.

One small step

“Continue” always opens exactly one lesson: a tip, a three-item checklist and an optional 10-minute focus timer.

You're in control

Pick your own daily goal, track goals automatically or by hand, and export or reset your data whenever you like.

Calm by default

A soft light theme, a dark theme for night owls, and motion that can be turned off entirely.

Grow together

The Greenhouse community gives weekly prompts, cheers and a friendly leaderboard — accountability without pressure.

The core flow

1. PlantOnboarding asks only three things: your name, what to grow, and a daily goal.
2. OrientHome shows today's watering goal and exactly one next lesson.
3. LearnA focused lesson card with a checklist and optional focus timer.
4. GrowThe plant grows, the streak ticks up, and petals fall when you hit your goal.
5. ReflectGoals, badges and the community turn progress into momentum.

Accessibility & inclusion

• Light, dark & system themes, each with its own contrast-checked text colours.
• Text size control — the whole UI is rem-based, so it also respects browser font settings.
• Reduce motion toggle, and the OS “reduce motion” preference is honoured automatically.
• Fully keyboard-operable: skip link, / to search, arrow keys in results and option groups, focus kept inside dialogs.
• Never colour alone: plant health, goal status and badges always pair colour with an icon and a label.
• Screen-reader friendly: labelled landmarks, progress bars with values, live regions for notifications.
• No surprise destruction: deletes and resets confirm inline, right where you clicked.
• Works everywhere: from small phones (bottom navigation dock) to wide desktops, plus Windows high-contrast mode.

How it's built

Zero frameworks

Hand-written HTML, CSS and JavaScript. No build step — open index.html and it runs.

Private by design

Everything is stored in your own browser. Nothing is sent to a server; export a backup any time.

One token system

Every colour is a design token, so themes and accent colours change the whole product consistently.