Building a Design System

I led the foundations of a design system for Oxford Premium as part of a wider platform redesign and rebranding initiative.

Design System Rebranding Developer Handoff Accessibility

At a glance

One system for a complex platform

Oxford Premium had grown without a shared design language. Different areas of the product had started to drift apart, while the platform also needed to move closer to Oxford's UK platform, HUB.

As the sole UX/UI Designer, I connected platform research, interaction design, visual direction, component foundations and implementation support.

Role: Sole UX/UI Designer
Timeline: 11 months
Scope: Research to implementation support

Oxford Premium interface in a laptop mock-up, with left navigation, title tabs, search and a resource list. — The system in context: navigation, content tabs and resource controls.

The decisions

Three choices that shaped the system

Start with the ecosystem

I mapped the platform, its flows and its relationship with HUB before defining shared patterns.

Build patterns, not one-off screens

I defined foundations for typography, colour, spacing, components, states and responsive behaviour.

Design with implementation

I documented behaviour and worked with development so the system could be introduced progressively.

Evidence

From shared foundations to real product flows

The work was not just a component library. It connected visual alignment, interaction patterns and implementation decisions across the platform.

Side-by-side comparison of Oxford Premium and HUB showing related navigation and resource layouts. — Aligning Oxford Premium with HUB while keeping the local product's needs visible.

Component-state specification sheet showing interface controls across multiple interaction states. — Documenting states so components behaved consistently across the interface.

Two Oxford Premium resource views using the same navigation, content structure and component styling. — Applying the same system across different product views and resource flows.

Live evidence · 01

Entry point

The login flow uses the same visual foundations and interaction conventions as the rest of the platform.

Live evidence · 02

Account settings

The component library helped replace patterns that had drifted apart across different areas of the product.

Business constraint · 03

Adapting a commercial request

The Commercial team requested a pop-up with a very specific design and format. Working within that constraint, I adapted the UI as far as possible to the existing system so it remained coherent with the rest of Oxford Premium.

Outcome

A shared source of truth

Design system foundations covering typography, colour, spacing, components and states.
Redesigned interaction flows with closer alignment to Oxford's UK platform, HUB.
Clearer documentation and handoff for progressive implementation with development.
Responsive behaviour and accessibility considered as part of the system.

🔒 About the examples

The clips show Oxford Premium's demo account. No real school or customer data is included. Internal process material is kept in the Deep Dive case study in adapted form.