Redesigning a school management platform for 7,000+ students

The brief

The platform served school principals, management boards, and trustees across 13 institutions, users who needed bird's-eye visibility into admissions, fees, student welfare, and staff operations at a glance. They weren't getting it.

By the time I was brought in, the product had accumulated five years of UI debt: five different shades of the company's own green used across modules, icon sets mixed from at least three different libraries, and font sizes that varied by 4–6px within the same page.

Not a UX problem: a visual consistency problem

The existing UI did a fair job of surfacing data. But it required users to scroll endlessly and click through multiple layers to reach basic information. There was no overview: everything lived in flat, undifferentiated pages. Charts used inconsistent colour coding across modules. Typography had no hierarchy.

Critically, this was not a UX problem. The underlying information architecture was sound. It was a visual consistency and navigation problem. The brief was clear: don't rebuild the UX, upgrade the visual layer and add an overview landing page.

Three rounds of iteration

I began with a thorough audit of the existing platform across all modules: Admissions, Fees, Students, Staff, Infirmary, Ticketing, and Boarding. The audit confirmed the core navigation model was sound. What failed users was the first-screen experience, landing on any page meant immediately scanning dense data with no hierarchy or wayfinding.

Stakeholder workshops with principals and product owners clarified scope: build an overview landing page, redesign the visual layer, and don't touch the underlying navigation or data model. This scoping decision required negotiation: stakeholders initially wanted a full UX overhaul. I made the case that a targeted visual redesign would deliver faster, with lower dev risk, and preserve the muscle memory users had already built.

Three major design rounds followed. Round 1 introduced category navigation and the module overview page, but stakeholders rejected an initial brand-purple palette as inconsistent with their marketing. Round 2 redrew the palette from the company logo (navy, teal, green) and won stakeholder approval. Round 3 delivered the final: dark navy header, teal active states, green CTAs, and stacked horizontal bars replacing pie charts for student demographic data, better for multi-institution comparison.

Overview Page

The centrepiece of the redesign. Principals and management boards described their daily routine: checking admission targets first thing in the morning, comparing fee collection across campuses, monitoring attendance trends. One page with those data points eliminates 8 clicks per morning session. The module navigation grid gives every user an at-a-glance health check of all seven platform modules before drilling in.

Admissions Dashboard

The admissions module tracks the full intake funnel across 13 institutions, from enquiry through enrolment. Grouped bar charts replaced the original flat tables to make per-institution comparison immediate. Funnel visualisation shows where prospective students drop off. Target tracking gives management boards visibility into enrolment pacing without requiring report exports.

Student Statistics

Student demographic data presented a specific constraint: the platform ran on Google Charts, ruling out custom chart types. Every visualisation decision had to work within that library while still improving on what existed. Stacked horizontal bar charts replaced pie charts for gender breakdown, better for multi-institution comparison, readable at a glance, and accessible to users who struggle with proportional arc judgements.

Design System

The full Figma component library delivered at handoff: a typography scale (Hero / Feature / Highlight / Body × Bold / SemiBold / Italic / Regular), colour tokens across Primary, Secondary, Success, Warning, and Error at 100–900 scale, spacing rules, and an iconography guide. Reusable components, including stat cards, data tables, chart wrappers, badge system, and nav components, with redlines, spacing specs, and interaction notes for every piece.

Selling the overview page

Convincing product owners that categorising information into a new overview page was worth the development investment, when the data already existed in flat pages, was the hardest sell. The argument that won: principals check the same five data points every morning. One page with those five points eliminates eight clicks per session. Framing it as user time saved, not design preference, closed the conversation.

The second challenge was data visualisation under constraint. The platform used Google Charts, so custom chart types weren't available. Every chart decision had to work within that library while still improving on what existed.

Scoping is a design skill

The impulse on a redesign is to fix everything. I had a list of 40 UX improvements I could have proposed. Shipping a tightly scoped visual upgrade in eight months delivered more value than an 18-month full UX rebuild would have. Sometimes the best design decision is knowing what not to change.

Iterative design under time pressure forces clarity: each round had to answer a specific question. Round 1: does the navigation model work? Round 2: does the colour system fit the brand? Round 3: are the charts readable? Separating those questions made stakeholder feedback actionable.