<aside> 📌

A system where there had been a patchwork. 5 loyalty features had shipped independently and stopped working together. I mapped every combination an operator could enable and designed a modular structure the UI adapts to.

A decision I can defend. Operators wanted every loyalty feature visible at checkout. I prioritised the entry point instead, keeping the last screen before payment clear and the rest one tap away.

Handoff developers could build from. 6 variables and 90+ copy states resolved before the build started rather than discovered during it.

</aside>

<aside> 🧭

</aside>

Context

A banner that grew into 5 loyalty features

When I started working on the kiosk, loyalty was simple. It was just a banner on the basket screen where guests could scan or type a discount code. One code per order. That was it.

Over the next few years, the loyalty offering expanded substantially:

• Authentication evolved from basic user ID to phone number, email, and at one point even face scanning. A dedicated loyalty screen was added where operators could upload custom branding.
• Discount management grew from single-use codes to multiple vouchers active at once. I created a discount hub to help guests manage them.
• Redemption methods multiplied. Guests could enter a code on an alphanumeric keyboard or a keypad, or pick a reward from a list.
• Automation arrived with a wallet that applied proactive rewards on its own, and stamp cards were planned next.

The original loyalty flow. A single banner with one manually entered code per order. Every feature that followed was added on top of this.

Each of these had been designed and shipped more or less independently. By the time there were enough of them, the basket screen was difficult to manage. Every new feature made it harder. The underlying problem was that there was no system for how loyalty features should coexist. Each addition had been treated as a separate solution rather than part of a larger architecture.

<aside> 🔒

The business cost was real. Every new loyalty integration required design work from scratch and weeks adapting the existing system to fit it in. What should have been straightforward feature additions became extended projects, with scope, timelines and costs growing each time.

</aside>

My role

I led the design from scoping to handoff

I led the design on this project from initial scoping through to development handoff, owning decisions on UX structure, component architecture, and visual direction. Another designer supported me with preparing flows and documentation given the scope of scenarios to map out. Direction was shaped in close collaboration with my manager.

The work involved:

• Mapping every possible feature combination and its resulting UI states