How a screenshot and a simple question led to a complete visual overhaul of our school holiday planner.
When Good Enough Isn't Good Enough
The app worked. Functionally, everything did what it was supposed to. You could add school dates, pencil in who's helping, spot the days with nobody lined up. Job done.
But something felt off.
The calendar page had so much going on that finding a specific day meant scanning through visual noise. The filters looked different on every screen. Some buttons were blue, others purple, with no clear reason why. And the "coverage gaps" section (arguably the most important part) didn't stand out nearly enough.
It was the kind of thing you don't notice until you step back and really look.
"Can You Just Have a Look at This?"
Here's how the redesign started: I took a few screenshots of the app and asked AI to review them. Not for bugs or features, just to look at them with fresh eyes.
The brief was simple:
- Is this accessible? Would someone with colour blindness struggle?
- Is there too much clutter?
- Does the important stuff stand out?
The feedback was eye-opening. Colours that looked fine to me had poor contrast ratios. Important information competed with decorative elements. The visual hierarchy (what your eye should see first, second, third) was all over the place.
So we built a design system from scratch.
What Actually Changed
Consistent Colours That Mean Something
Every colour now has a purpose:
- Holidays get a warm amber
- Half terms get a soft purple
- INSET days get a distinct teal
- Bank holidays get their own colour too
When you see a colour, you instantly know what type of day it is. No more squinting at tiny labels.
The same goes for events. Activities, clubs, play dates, appointments. Each has its own colour that stays consistent everywhere in the app.
Tags That Actually Help
We added small coloured dots to filter buttons and tags. Sounds minor, but it makes a surprising difference. Instead of reading every label, your eye picks up the colour first. Filtering the calendar to show just half terms? The purple dot tells you it's selected before you've read the word.
The "Days We Still Need to Sort" Panel
The coverage gaps section got a complete redesign. It now has:
- A clear header with a warning icon (you can't miss it)
- A red badge showing exactly how many days need attention
- Each day listed with its date and the holiday period it falls in
- One button: "Assign Coverage"
No more hunting for problem days. They're right there, staring at you.
Better Contrast, Easier Reading
We went through every text and background combination. Grey text on light grey backgrounds? Gone. Thin fonts on busy backgrounds? Fixed. Everything now meets accessibility standards, which means it's easier for everyone to read, not just people with visual impairments.
The Login Screen Gets a Makeover
Even the login page got attention. The old gradient background stayed (it looked nice), but the card itself is now cleaner:
- Clear, readable labels
- Input fields that don't blend into the background
- A simple text logo instead of trying to cram an image in
- The flip animation when switching between sign in and sign up? That stayed. It's just more polished now
Why This Matters
A prettier app isn't the point. The point is that when you open the calendar at 9pm trying to figure out who's got the kids next Wednesday, you shouldn't have to work hard to find the answer.
Good design gets out of the way. It lets you focus on the actual problem (sorting childcare) instead of fighting the interface.
What's Coming Next
With the design system in place, new features will automatically look and feel consistent. No more one-off styling decisions that gradually make the app messier.
The foundation is solid. Now we can build on it properly.
This is an update to our original article about building the school holiday planner. Got feedback? Get in touch