A school that had outgrown its website.

The utility bar puts the calendar, announcements, giving, and search in one place, along with a Current Parents menu for portal logins, the lunch menu, and forms.

None of it is buried in a submenu, because a parent standing in a school pickup line at 2:45 shouldn't have to navigate an admissions funnel to find out whether there's after-care tomorrow.

The school year used to be a downloadable PDF that went stale the moment anything moved.

It is now close to 200 events across 5 categories, all filterable, browsable, and subscribable, so a parent's calendar app updates when the school changes something. The school maintains it directly, which was the measure of success set at the start: staff updating the calendar and menu independently, without technical frustration.

Before a parent wonders about tuition or traditions, they want to know one concrete fact: what grade would my child even be in?

So that's the first interaction on the homepage. Enter a date of birth, get a placement — a child's path through St. John's, K2 to sixth grade, mapped in one click. It costs the parent nothing, requires no email address, and turns an abstract “someday” into a specific year.

Before we designed anything, we studied how 5 independent schools in the South organized information, moved families toward enrollment, and separated daily tools from storytelling.

The review confirmed several useful patterns: a homepage that summarizes the whole site, 3 clear calls to action instead of a menu of a dozen, numbered enrollment steps that make the process easier to understand, and photography of students doing the things the school describes. It also showed the value of keeping daily tools apart from the storytelling, which became the basis of the 2-tier navigation.

Those patterns gave the board and our shop a shared reference before we made design decisions.

The site captured one moment in time. The more durable work was documenting the voice St. John's already had. Without that reference, thirteen years of small decisions had slowly pulled the old site in different directions.

So alongside the copy we delivered a voice and tone guide: the school's four voice attributes, separate tonal guidance for prospective families, current parents, and staff, a preferred-word list, and a before-and-after set showing the same sentence written badly and written well.

Before: “St. John's Day School's comprehensive early childhood education program utilizes developmentally appropriate practices to facilitate optimal learning outcomes for students aged 3-5.”

After: “Our preschool program is designed around how young children naturally learn — through play, exploration, and plenty of hands-on activities.”

It also says what not to say: no “pedagogical,” no “leverage,” no “rigorous,” and — for a school — no “excellence,” “premier,” or “award-winning.” The guiding line was that St. John’s should sound like “a conversation with a trusted friend who happens to be an experienced educator.”

Alongside the site we tightened up the school's identity, starting with the logo. The green in the codebase is called --color-may-day-green — named for the school's oldest and most important day.

Only developers see the name, but it keeps the school's institutional memory inside the system that future developers will change.

The goal was blunt: when somebody in the Pine Belt asks about private schools in Laurel, St. John's should be the answer.

We modeled the school as 1 connected entity, made the site available to major search and answer-engine crawlers, and gave those systems the same facts a parent sees when asking about private schools in Laurel.

We ran this in phases with named deliverables at each one, because a school board needs to approve things and a small office needs to know what’s being asked of it and when.

Inspiration & insights — 5 independent school websites in the South, read closely for mechanisms rather than looks.

Discovery — stakeholder interviews, a content audit, a requirements document, a prioritized feature list, and a project timeline.

Design & planning — a navigation prototype, visual designs, a content organization map, a technical foundation plan, and a content migration roadmap.

Build & launch.

Success was defined before design started, per audience: staff updating the calendar and menu independently; parents using the website instead of social media; prospective families getting a clear path from interest to application.