The agency set the brand baseline, the foundational grid and content pages such as the homepage. I owned UX throughout the engagement, focusing on selection experiences, and took over UI as well once the agency rolled off the project, carrying their foundations forward into the responsive patterns below.

Auditing the existing experience

Full information architecture map, from login to under-benefits navigation

Redesigning the experience

User flow: benefit selection, shopping cart and checkout, with one window open

User flow: one open window and one closed window (employee case)

Reducing the steps

Consolidating the selection, dependency and checkout logic into one flow cut the path from 34 steps to 23, removing the re-entry and confirmation loops the old one-benefit-at-a-time model forced on every dependent or cross-cutting choice.

Low-fidelity explorations, wireframes and responsive module mapping

I hand-sketched multiple options across breakpoints, including two competing progressive disclosure options early on: one moving through navigation tabs, the other through nested sub-panels, so trade-offs in how much structure to show at once could be discussed before committing to either. After cycles of reviews with stakeholders I then keyed each screen's modules (B through F) so the same benefit configuration page could be traced consistently from desktop through to mobile, showing which areas collapse, combine or drop away at each breakpoint.

Option 1: progressive disclosure through navigation tabs · Option 2: progressive disclosure through sub-panels

Wireframes: module and area key across desktop, tablet and mobile

High fidelity designs, component mapping and guidelines

I built responsive progressive disclosure patterns so the cart, dependency states and allocation screens collapse cleanly from desktop through tablet to mobile, then formalised those patterns into the components that became the project's Design System.

The cart itself moved with the breakpoint too: a compact popover from the nav on desktop and tablet, and a full-screen page on mobile, with the cost panel sitting beside the form on desktop, sliding over it on tablet, and settling fixed to the foot of the screen on mobile.

Beyond the cart

Component mapping

I mapped how single and multiple selection components needed to flex as interdependent levels and hierarchies grew, from up to five dependants to more than five, to set guidelines for when a screen takeover or modal was needed instead.

Component mapping and guidelines for interdependent selection hierarchies

I built a module asset canvas for the benefit cost component, tracing its old and new states across smartphone, tablet and desktop breakpoints and every variant needed for review overlays, floating summaries and alerts.

Module asset canvas: benefit cost component across breakpoints and states

CTA specification: types, hierarchy and states, and the widths and padding that flex across breakpoints

The foundational Design System built for Reward Centre focused on atomic design, breaking the interface down into base components and tokens that could flex across breakpoints. It later iterated during the wider redesign into a Design System family, spanning multiple products; read more in Leading the creation of a design system family.

Testing and delivery

I ran multiple rounds of review sessions with business experts to validate that the flow held up against real plan rules and edge cases, followed by moderated, task-based usability testing sessions with end users across desktop, tablet and mobile, recruited across different benefit engagement levels and geographies (UK, Romania and Singapore), to see whether the interdependency and cart logic actually made sense once someone was working through their own benefits, not just looking at a screen.