Case Study · Education Website
Bright Future
A K-12 school site with clear information architecture.
- React
- Tailwind CSS
What it is
An education website organised for parents: programme overviews, campus information and an admissions enquiry route, with a layout that stays legible on mobile. Most visitors are looking for one of three things, so those three paths are made obvious.
The objective
School sites tend to bury admissions information under announcements. The objective was an information architecture where programmes, campus details and admissions are each one step away.
How it was solved
A React front end with a small set of composable content sections, a readable type scale and an admissions route surfaced from every page.
- Content sections built as reusable components with props for headings and copy.
- A single type scale applied across pages for consistent reading rhythm.
- Navigation kept flat so no information sits more than two clicks deep.
Key features
Programme information
Grade-wise programme and campus content in a consistent layout.
Admissions route
An enquiry path reachable from every page of the site.
Readable on mobile
Typography and spacing tuned for long-form reading on phones.
Technology
Frontend
- React
- Tailwind CSS
Development approach
- Content sections built as reusable components with props for headings and copy.
- A single type scale applied across pages for consistent reading rhythm.
- Navigation kept flat so no information sits more than two clicks deep.
Interface decisions
- Three primary paths — programmes, campus, admissions — visible without scrolling.
- Generous line height for parents reading on small screens.
- Accessible contrast across text and interactive elements.
Challenges & solutions
Programme content varied in length and broke card grids.
Cards use equal-height layout with truncation and a detail view.
