Burger King logo with red text and an orange semi-circle representing a bun.

2026 Update:

🚀 AI-Augmented Double Diamond

I recently revisited this foundational architecture to demonstrate a modern, high speed workflow. Jump directly to the retrospective to see how I utilized AI tools to expand the problem space, force divergent thinking, and stress test the UI layout.

Burger King Singapore Pickup Display Revamp

Designing a pickup display that makes order handoff fast and calm. I led UX for Burger King’s in store pickup display. We focused on clear queues, fewer repeated calls, and smoother peaks.

Responsive
Configurable
HTML/CSS
My Role
Senior UI/UX Designer · Researcher · HTML & CSS Developer · Liaison with HK Engineering & Product and the Singapore PM · Technical Support
Team
PM · Developers · Designers · Product Lead
Timeline
May 2023
Deliverables
Wireframes · Mockups · Prototypes · CMS Configuration · Responsive HTML/CSS · Live Web Pickup Display

The Challenge: One Truth For Guests And Staff

Burger King stores needed a revamp so guests and staff could see the same truth at a glance. Other brands and food courts also needed a pickup display. Burger King was closest to the deadline, but at that time we did not have one product that could fit them all.

Why a revamp

  • The previous version looked rough and was not complete.
  • It was not responsive for different devices and store layouts.
  • It was not flexible in a CMS.
  • No control over showing “Ready only” vs “Preparing + Ready.
  • It also missed the need for a driver pickup mode.

How it looked before

Key Insight: People Scan In Chunks, Not Lines

From store visits and video reviews we learned:

  • Guests scan screens in blocks and colour, not line by line.
  • Staff wanted a single place in the CMS to change order states.
  • We also needed a standardized design and code base that can flex for other brands through configuration rather than new builds.

The Solution: Chunked Layout, Clear States, Simple Controls

We designed a modular, responsive display that stays readable from far away and adapts per store and per brand.

Core decisions

  • Large order codes with generous spacing for distance reading.
  • Two clear states with color and icon.
  • Auto promote newest Ready orders to the top.
  • Simple staff controls from POS or tablet.
  • Responsive layouts for TV, tablet, and phone.
  • Support for both regular pickup and driver pickup.
  • CMS settings per store for columns, font scale, language, dwell timing, theme color, logo on or off, timer on or off, and Ready only versus Preparing and Ready.
  • Brand differentiation through theme packs and slots for color, logo, and type scale so each brand keeps its look and feel on a shared base.

Why different sizes and not one size for all

  • Viewing distance, hardware, and budgets vary across stores.
  • Some small restaurants have no space or budget for an overhead TV and only use a tablet.
  • Some stores prefer landscape screens and others prefer portrait.
  • We also prepared a mobile-phone layout to suit future devices.
  • Five scale presets keep text legible and prevent overflow while keeping setup simple.

Why not fully customizable

  • Full customization would let every store change layouts, fonts, and spacing, which quickly leads to broken, unreadable screens and a heavy support burden.
  • Targeted controls (theme, logo, timer, order states, scale presets) give stores the freedom they actually use day to day, without touching layout or code.
  • Standardised layout and typography protect legibility and accessibility for guests, even as brands adjust colours and order states.
  • A focused set of options keeps build cost, QA effort, and rollout time under control, so new brands can launch faster on the same product.

Impact and Reflection: Faster Handoffs, Easier Peaks

The new display is live in stores. Guests find orders without asking staff. Staff mark states in one place and focus on handoff.

How it looks now

Business impact

  • Fewer repeated order calls by staff.
  • Smoother peaks from clearer Ready visibility.
  • Reusable layout scales to new stores and screen sizes.
  • Reusable display foundation shortens time to market for campaigns and brands.
  • 15+ configurable elements reduce communication loops, fixes, and redesign work.

On site launch note I: Resolution aligned

The picture looked different from the mock on day one. The store used a 4K TV. I supported the regional PM remotely to set the TV output to 1920 by 1080, which aligned the layout and spacing with our design.

On site launch note II: Color calibrated

The TV colors were slightly brighter than our themeThe on site color profile pushed red. After the PM spoke with the Burger King manager, the store kept operating that day and planned to tune the TV color profile themselves.

Other Applications

The same display patterns adapt to Food Junction in Singapore and other stores with different screens and layouts.

What I learned

Preparation pays off. Research, technical reviews, and clear requirements with the PM created a product that balances reuse for the company and meaningful configuration for each client. Build the system once and let stores tune what matters without a redesign.

LATEST 2026 UPDATE

The AI-Augmented Double Diamond

Expanding the problem space and accelerating the "idea to prompt to prototype" workflow.

The original 10-day sprint was a profound success, delivering a flexible and structurally scalable digital pickup display. However, extreme time constraints meant the foundational process was largely informal.
Designers who use AI well will absolutely replace those who do not.

In this 2026 update, I revisited my foundational architecture to demonstrate a modern, AI-Augmented Double Diamond methodology. Rather than shrinking the problem space, I utilized generative AI to drastically expand discovery, align business stakeholders, and drive a rapid 'idea to prompt to prototype' cycle. By integrating tools like Gemini and Figma AI, I optimized requirements gathering and completely automated developer handoffs without sacrificing scalability. This is how I bridge deep operational knowledge with high-speed, enterprise-ready execution.

Discover: Aligning Stakeholders & Expanding Research

During the rapid original sprint, I relied on indirect requirement gathering by speaking with Project Managers and Sales. While valuable, second hand information often misses the granular nuances of real world user friction. To formalize this phase, I utilized Gemini as a synthetic research partner to fill the informational gaps.

The biggest mistake in modern design is shrinking the first diamond to rush into solutions for a problem that might not exist. In this phase, I refused to skip primary research. Instead, I used AI to leverage my position. I leveraged generative AI to draft strategic communications for business stakeholders, securing a seat at the discovery table early. Furthermore, I utilized AI to craft a robust primary user interview plan and generate sharper recruiting emails and interview questions before ever touching a design file.

Email and meeting invite drafted with AI
Output:
Subject: Project Kickoff & Early Discovery: Burger King SG Digital Pickup Display

Email Body:
Hi Team,

As we prepare to kick off the new Burger King Singapore digital pickup display project, I would like to bring us all together for an early discovery session before the formal PRD is finalized.

By aligning early, we can combine our perspectives, expand our understanding of the problem space, and ensure we are solving the right problem for our users. It is critical that we capture both the business goals and the engineering realities on day one to avoid potential development risks later in the timeline.

I have scheduled a 45-minute kickoff meeting for later this week. Please come prepared to share your initial ideas, concerns, and constraints regarding the pickup display architecture.

Meeting Agenda:
- Business Analyst: What are the primary business objectives and expected transactional flows for this new display?
- Project Manager: What is our target timeline, and what are the immediate scope boundaries?
- Frontend Developers: What technical constraints or cross-platform framework requirements should design be aware of from the start?
- Product Design (Will): Discussing primary user interview plans and hardware display constraints.

Looking forward to collaborating with you all and building a strong foundation for this project.

Best regards,
Will Chan
Senior UX/UI Designer
Show Prompt  ⏷Hide
Act as a Lead Product Designer initiating the discovery phase for the new Burger King Singapore digital pickup display. I need to get involved before the Project Manager finalizes the Product Requirements Document (PRD). Draft a professional meeting invite and email to all relevant stakeholders, including the Project Manager, Frontend Developers, and Business Analysts, before the exact problem is even defined. The goal is to host a kickoff meeting where everyone shares their ideas and technical constraints so the team is aligned from the very beginning.
Synthetic Personas

Define: Crafting the AI-Assisted PRD

A design brief focused solely on the user perspective leaves a massive business gap, making projects feel unrealistic. To ensure this architecture solved real commercial kitchen constraints, I translated my synthetic primary research and informal stakeholder chats into Gemini. By instructing the AI to act as a Lead Business Analyst, I generated a comprehensive Product Requirements Document (PRD). This formalized my operational intuition into concrete, trackable metrics, defining exact business objectives, hardware limitations, and potential risks.

Business Objective & Success Metrics

  • Goal: Streamline the Burger King Singapore in-store pickup process to reduce customer anxiety and manage foot traffic.
  • KPIs: Decrease average wait times, reduce customer inquiries to staff, and ensure on-time Phase 1 delivery.

Scope & Key Requirements

  • Real-time Status: Clear categorization of orders into "Preparing" and "Ready for Pickup".
  • Responsive Architecture: UI must adapt seamlessly across various large-format digital display screens.
  • CMS Controllable UI: Defining specific UI elements to be controllable via CMS, ensuring an optimal balance between business flexibility and engineering effort.

Constraints & Technical Risks

  • Dependencies: Must integrate seamlessly with the existing Burger King version 4 ordering and loyalty infrastructure, ensuring a smooth transition.
  • Design System: Strict adherence to brand guidelines and global design token variables.
  • Risk Mitigation: Proactive communication with Project Managers and Frontend Developers to mitigate potential backend latency issues.

Design Challenge: One Truth for Guests and Staff

  • Strategic Divergence: I deliberately generated multiple layout versions across different AI models to intentionally create a divergent phase and avoid emotional attachment to early concepts.
  • Rapid Functional Prototyping: I utilized Figma Make to generate interactive prototypes for complex features, such as sortable table columns, in minutes. My strategy was to hit a solid 7 or 8 out of 10 structural baseline to test layout logic at maximum speed.
  • Realistic Stress Testing: I completely avoided using placeholder text like Lorem Ipsum. Instead, I deployed a Figma AI agent to populate the designs with extreme but realistic edge case order data. This allowed me to rigorously stress test the UI architecture and ensure complete structural integrity before developer handoff.

Strategic Divergence: Rapid AI-Generated Layout Explorations

Show prompt used
Collapse prompt
This is the prompt prompt prompt. This is the prompt prompt prompt.
Figma Make
Show Prompt  ⏷Hide
Act as a Senior Product Designer creating a digital pickup display for a fast-paced restaurant. Design a 1920x1080 landscape interface intended for a non-touch digital screen. Provide two layout variants (Walk-in Customer vs. Delivery Driver). You must ensure a minimum 4.5 to 1 contrast ratio and use a minimum 32px sans-serif font size for AODA compliance. Attached are the specific structural requirements:

GLOBAL LOGIC & ACCESSIBILITY (Applies to both variants)
* Orientation: 16:9 Landscape
* Overflow Auto-Switch Timing: 7 seconds per page
* Overflow Pagination Indicator: Carousel dots (solid/hollow)
* Empty States: Display "No current orders"
* AODA Accessibility: Minimum 4.5:1 contrast ratio (WCAG AAA / Level AA); Typography hierarchy must use a large bold sans-serif font (minimum 32px)

VARIANT 01: WALK-IN CUSTOMER (Complexity: Simple)
* Header: Show logo and reminder text. Hide time.
* Preparing Section: Show display (configurable). Show section heading text and icon. Grid Layout is 6x2. Show order numbers. Hide aggregator icons and locker numbers.
* Ready For Collection Section: Show display. Show section heading text and icon. Grid Layout is 6x2. Show order numbers. Hide aggregator icons and locker numbers.
* Footer: Hidden.

VARIANT 02: DELIVERY DRIVER (Complexity: Complicated)
* Header: Show logo, reminder text, and time.
* Preparing Section: Show display (configurable). Show section heading text and icon. Grid Layout is 6x5. Show order numbers, aggregator icons, and locker numbers.
* Ready For Collection Section: Show display. Show section heading text and icon. Grid Layout is 6x5. Show order numbers, aggregator icons, and locker numbers.
* Footer: Show "Powered by XXX".

Alternative Layout Variations

Show Prompt  ⏷Hide
Act as a Senior Product Designer creating a digital pickup display for a fast-paced restaurant. Design a 1920x1080 landscape interface intended for a non-touch digital screen. Provide two layout variants (Walk-in Customer vs. Delivery Driver). You must ensure a minimum 4.5 to 1 contrast ratio and use a minimum 32px sans-serif font size for AODA compliance. Attached are the specific structural requirements.

Analyze the attached reference images. You must strictly lock and maintain the exact structural layout, grid, component placement, and text hierarchy. Do not move or resize the core containers.

Your task is to completely elevate the visual aesthetic of the UI elements while keeping the structure intact. Generate six distinct, premium visual variations that match the provided references:

1. Neobrutalism / Retro Flat: Apply a high-contrast aesthetic with thick, stark borders, solid flat drop shadows, and vibrant, highly saturated accent colors (orange, cyan, bright green).
2. Cyberpunk / Neon Dark Mode: Utilize a deep, dark canvas with a subtle geometric background grid, paired with glowing, high-intensity neon typography in cyan, magenta, and yellow.
3. Soft Editorial Light Mode: Apply a refined, high-end editorial look using a warm, muted beige background, elegant typography, and low-contrast dividing lines for an organic and approachable feel.
4. Glassmorphism & Depth: Introduce subtle background blurs, semi-transparent frosted glass card surfaces, and soft, diffused colorful ambient lighting behind the main containers to create a sense of physical depth.
5. Clean Modern / High-Key Light: Create a pristine, minimalist light theme featuring stark white cards with very soft, diffused drop shadows and subtle, pastel-tinted typography.
6. Ultra-Accessible Terminal Dark Mode: Apply a pure pitch-black background with strict 1px borders and intensely vibrant, high-contrast neon green and orange text to maximize AODA readability.

AI Driven Divergence & Discovery

I used AI to generate rapid design variations. While current AI outputs are rarely flawless, they are highly effective for divergent brainstorming before converging on a final solution. These AI explorations helped me uncover blind spots in my initial layout, leading to two major operational upgrades:

  • Aggregator Grouping: I grouped active orders by delivery platform. This visually simplifies the screen, allowing drivers to spot their pickups instantly during a rush.
  • Operational Accuracy: I removed locker numbers from the "Preparing" section. My professional line cook experience taught me that lockers are only assigned once a meal is fully ready. Showing locker assignments prematurely causes unnecessary confusion for front of house staff.

Deliver: Multi-Brand Scaling and AI-Automated Handoff

The original architecture was scalable, but the delivery mechanism required modernization. The foundation of this delivery relies on advanced Figma Variables and Design Tokens, enabling the entire interface to pivot brand identities seamlessly. To elevate this delivery for enterprise engineering teams, I utilized AI to automate the translation of design into development. AI tools analyzed the Figma Variables to instantly generate comprehensive documentation, annotated component states, and export-ready CSS token structures.

‍Moving fast often results in horrible design documentation, which always backfires when a new stakeholder asks to see past explorations. I maintain pristine file hygiene: keeping one major iteration per page with the latest version at the top. To save time and avoid repetitive strain, I used Granola for meeting summaries and talked to ChatGPT to generate clear, point-form annotations detailing exactly what changed in each version, why the change was made, and who provided the feedback.

Bridging Intuition with AI Execution / Staying Deeply Human

The new display is live in stores. Guests find orders without asking staff. Staff mark states in one place and focus on handoff.

This retrospective validates my original strategic intuition. The MVP I built was inherently scalable, but by running it through an AI-augmented Double Diamond process, I elevated it from a solid design file to a fully documented, enterprise-ready product ecosystem. This workflow proves that when deep foundational architecture skills are combined with the analytical and generative power of modern AI, designers can solve complex business problems with unprecedented speed, precision, and alignment with engineering teams.

AI can amplify the speed and technical precision we bring to the table, but it cannot replace empathy, patience, or how we make cross-functional teams feel during a tense sprint. By offloading documentation, content generation, and rapid prototyping to my AI stack, I reserve my core energy for human connection, user empathy, and strategic leadership.