Abiola.Kalejaiye
Work / Education / Responsive Web + Portal
Case Study 02

Methodist Grammar School

A heritage school website and a student & staff records portal.

Methodist Grammar School

My role

Sole UX/UI Designer

Tools

Figma · AI-assisted workflow

Platform

Responsive Web + Portal

Year

2025–2026

Overview

The context

A complete website and student & staff records portal for a heritage secondary school. The public site builds trust with parents; the private portal gives staff a structured way to manage pupils, results, report cards, fees and attendance. Designing a warm marketing site and an efficient internal tool together was the heart of the project.

The problem

What needed solving
  • Parents lacked a source of truth. Admissions, programmes and contact details were hard to find online.
  • Administration was fragmented. Records lived across disconnected files, making routine tasks slow.

The solution

My approach
  • A calm, credible public site. Clear navigation and action-first pages help parents decide and apply.
  • A focused records portal. Predictable layouts and role-based access make daily admin fast and low-error.

Research & users

Who I designed for

I mapped two very different audiences — prospective parents and school administrators — and designed the information architecture around their distinct jobs. AI helped me structure the sitemap and proto-personas.

F

Folake

Prospective parent

Wants to judge credibility, understand admissions and enquire — on mobile.

M

Mr. Adeyemi

Administrator

Needs to record pupils, enter results and issue report cards without specialist software.

User journey

The path that matters most
Land on Home→Scan values & results→Open Admissions→Read the steps→Send enquiry / book tour

Key screens

From the interactive prototype
Methodist Grammar School
Methodist Grammar School
Methodist Grammar School
Methodist Grammar School

Design decisions

Why it works

Heritage, modernised

A dignified navy-and-cream system signals tradition while staying clean.

Separation of concerns

The public site stays welcoming; records sit behind a secure portal.

Action-first pages

Apply and enquire are always within reach.

Accessibility

Considered throughout
  • Strong contrast and clear hierarchy for readability across ages and devices.
  • Keyboard-navigable forms and clearly labelled fields in the portal.
  • Responsive layouts so parents can act comfortably on a phone.

Outcomes

What I delivered
  • A coherent multi-page site plus a records-system concept.
  • An information architecture that serves parents and staff without compromise.
Methodist Grammar School
INTERACTIVE PROTOTYPE

Try the interactive prototype

Click through the full experience right here on this site — with device, zoom and fullscreen controls.

Launch interactive prototype →

Challenges & lessons

Reflection

Switching between persuasion (public) and efficiency (portal) demanded two different design mindsets in one system.

“This project taught me to design for the job at hand, not just the look.”

Previous← FIT QUESTNext projectBAJ Royal Farm →