<aside> 📌

Order brought back to a system that drifted as the product grew. Rebuilt into 270+ documented variants in one format, which the design team then adopted across its other products.

An accessibility problem that needed solving. The 200 percent text scaling recommendation doesn't say what it scales from. I built a proportional ramp so every tier reaches a readable size and the type hierarchy survives.

A live product problem I pushed into a development gap. Client styling could produce text that couldn't be read. I had the fix designed months before capacity existed, then argued for it when a slot opened.

</aside>

<aside> 🧭

</aside>

Context

A design system that fell behind its own product

The kiosk has been live in restaurants for years, on a hospitality platform running across 8,000+ outlets in 40+ countries, with 49,000+ transactions a day going through it. A design system for it existed from the day it launched, and it hadn't matched the product for a long time. Operators run the kiosk under their own brand, and every client's kiosk is configured separately, styling included.

• Why it drifted - each feature was designed against its own requirements, and the library was only updated when a feature needed it
• My part in it - I designed most of those features myself, so I contributed to the drift too
• Result - the same element existed in several versions across feature files

A second problem sat in Control, the internal tool where each kiosk's colours are set. Styling configurations kept producing text guests couldn't read, and neither problem broke anything outright, so both were easy to postpone.

My role

Sole designer on the kiosk, inside a 3-product initiative

The documentation work ran as a design team initiative across 3 products, each with its own design system. I had the kiosk. Another designer took Order and Pay, which covers Online Ordering, the mobile app, Open Check and Pay at Table, and 2 more designers had the operator dashboard. My manager set which component each of us documented that week and gave directional feedback while the format was still moving.

I was the only designer on the kiosk throughout. I ran the component audit and set the documentation structure. The accessibility rules and the colour redesign in Control were mine as well.

The problem

The library had no reliable reference point

Inside the design files there was no record of which version of an element was correct, or how it was meant to behave. Nobody had written down what happens when a product name runs longer than the space allows, or how text should scale for accessibility. States existed, designed feature by feature as the product grew, and they had never been collected into one structure.

Initial design system, before the work started