School Website
Redesign

Redesigning my own high school's website — last updated in 2013.

Sir Winston Churchill Secondary School's website had not seen a meaningful update since November 5, 2013. As an alumnus, this felt like a worthwhile self-directed project — applying a full UX process to a real institution with a real problem.

The existing site relied on a sprawling Super Menu System that presented users with seemingly endless dropdown options. The result was a platform that discouraged the very people it was built to serve — students, parents, and faculty — from using it at all.

The goal was to redesign the site into a streamlined digital platform that made it easier to find information, stay informed, and feel connected to the institution, across mobile, tablet, and web.

An overwhelming navigation system was isolating users from the information they needed.

Three core problems defined the redesign scope.

Following the Stanford d.school design process end to end.

Design Process

The project followed the Hasso Plattner Institute of Design methodology at Stanford University — a research-driven approach that kept usability values at the centre of every decision throughout the process.

Target Market & Personas

Research identified two primary demographics: parents aged 35 to 55, college or university educated with an average household income of $60,000 to $80,000; and students aged 13 to 17. User personas were created for both, capturing distinct goals, behaviours, and pain points to guide every design decision.

User Flow

Mapping the primary user flow revealed one of the biggest early wins — minimizing navigation options was the clearest path to improving the overall experience. Reducing the number of choices simplified how users moved through the site without removing access to any content.

Paper Prototyping

Two low-fidelity paper prototypes established the initial homepage layout and surfaced the first round of necessary changes. A high-fidelity paper version followed, giving a clearer visualization of the potential final product before moving into digital tools.

From low-fidelity wireframes to a high-fidelity Adobe XD prototype.

Low-fidelity digital wireframes tested structure and interaction patterns before moving into the high-fidelity prototype in Adobe XD — built across both mobile and web to ensure a fully responsive experience.

Both the mobile and web prototypes are embedded directly below. These are the actual Adobe XD prototype files — fully interactive and navigable. Click through the screens to explore the redesigned experience across both breakpoints.

Mobile Prototype

Web Prototype

Taking the redesign from prototype to production.

Following the Adobe XD prototype, the redesigned website was developed from scratch using HTML and CSS in Visual Studio Code. The developed version brings the design to life as a fully functional, responsive website — extending the project beyond the typical design handoff stage.

A more modern, navigable, community-connected institution.

The redesign produced a platform that surfaces the most important information first, streamlines navigation to reduce cognitive load, and gives faculty a clearer path to publishing and maintaining content. The measurable goals were increased user engagement, improved event and news discovery, and a stronger sense of community for students and parents.

Working on a real institution with a real history made this project feel meaningfully different from a theoretical exercise. Sir Winston Churchill Secondary School shaped a significant part of growing up, and that personal connection drove a higher standard of care throughout every phase of the process.

The project also reinforced how much impact navigation architecture has on perceived usability. The content was always there — it just needed a structure that let people find it.