I followed a structured, repeatable workflow for every WLWO client project:

1. Brand Alignment
I began by reviewing each client’s brand guidelines — colours, fonts, imagery, and tone — to understand how best to translate their identity into the ordering experience.

2. High-Fidelity UI Design
Using Adobe XD, I created fully interactive, high-fidelity mockups covering the entire customer journey:

• - Venue selection
• - Seating/location choice
• - Menu browsing
• - Basket and checkout
• - Voucher/reward flows
• - Order confirmation

Each screen was carefully designed to feel native to the client brand while remaining intuitive and familiar to users.

3. UX Consistency
Although visually customised, I ensured:

• - Navigation patterns stayed consistent
• - CTAs were clearly prioritised
• - Ordering steps were logical and friction-free
• - Accessibility and readability were maintained across screen sizes

This helped reduce customer drop-off and supported faster onboarding for new venues.

4. Developer Handoff
Once designs were approved:

• - I customised the (theme.scss) WLWO styling file (brand colours, fonts, spacing rules)
• - Packaged all assets
• - Delivered everything to developers with clear UI references

This streamlined implementation and reduced back-and-forth during build.

The final designs delivered:

• - Fully branded WLWO experiences for multiple hospitality clients
• - A smooth, responsive ordering journey across desktop, tablet, and mobile
• - Faster development cycles thanks to clear styling packages
• - Improved visual consistency across client deployments
• - Scalable UI patterns that could be reused across future projects

The process allowed Zonal to rapidly launch customised ordering solutions while maintaining product stability and design quality.