01 · Context & Problem
Two experiences, one brand
Debonairs had a website and an ordering platform, and they didn’t match. Customers moved from one to the other and landed somewhere that looked like a different company.
The website said too much, wasn’t built for mobile, and had no consistent style. Without a consistent style, there was nothing that could carry across to the ordering platform. The brief was to bring the two together and make the site properly mobile friendly.
02 · The Insight
It wasn’t a pages problem. It was a system problem.
Redesigning page by page would have produced a nicer website that still didn’t match anything else. The fix had to sit underneath the pages: a design system that the website and the ordering platform could both draw from.
And because Debonairs trades across Africa, every decision would ripple far beyond one site. It had to be right, and it had to be easy to change later.
03 · Choosing a Foundation
Relume as the base
On a tight timeline, building a system from scratch wasn’t an option. I used Relume as the base for our design system: a proven component foundation we could shape to the Debonairs brand rather than invent from zero.
This came before the token-first workflow we use today. Debonairs is where I saw first-hand how much a system speeds up the work, a lesson that carried into the brand infrastructure approach behind the TEFL RFP.
04 · The Breakthrough
One system for the whole ecosystem
With the system in place, a platform as big as this became a set of reusable components, designed mobile first. Fix a component once, and the change lands everywhere it’s used, on the website, on the ordering platform and in every market.
One system · the whole ecosystem
Colours, type and tone, locked down to the letter
A proven component foundation to build fast on
Rebuilt mobile first from reusable components
Finally speaks the same visual language as the site
One change, carried everywhere Debonairs trades
05 · Delivering at Scale
A massive project, broken into sprints
The real risk was size. So before designing a single screen, I organised the whole file, and the whole project with it.
Map
Started from the sitemap and listed every page the redesign had to cover, so nothing could surprise us late.
Chunk
Broke the work into workable chunks and set what we were committing to in each sprint. The deadline stopped being one big cliff and became a series of small, visible wins.
Build
Designed every page mobile first from the system’s components, which also gave our developer a clear structure to build from.
Guard the brand
Worked closely with the team to hold the brand guide exactly: colours, typography and tone, locked down to the letter. On a brand this size, small drift multiplies across a continent.
QA
Because the work was organised from day one, we finished on time with room for proper QA, rather than cutting it.
06 · The Outcome
Live, consistent and easy to change
The redesign has been live since January 2026, and the response has been positive. Two results matter most to me.
First, changes are now easy to make across the entire ecosystem: update the system, and the website and ordering platform move together. Second, our developer had a clear structure to build from, instead of interpreting one-off designs.
07 · Growing as a Designer
Where my confidence came from
Debonairs was also where I grew into the designer I am now. Beyond the design work, I guided the team through UX principles and the thinking behind each design decision, and held the line on brand standards with them.
Leading that conversation on a brand this big gave me the confidence I bring to every project since.
08 · Takeaway
Design the system, and the pages follow
A design system turned a sprawling, inconsistent website into one language shared with the ordering platform. Good organisation turned a tight deadline into on-time delivery with QA intact.