Burger King Singapore Pickup Display Revamp

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

Revamped for Burger King Singapore as the first client, this responsive, CMS configurable pickup display is built for reuse with flexible settings and rider-locker support.

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 Problem

Burger King Singapore stores needed a reliable pickup display for launch. Without a screen, staff shouted orders, customers misheard in noisy spaces, and mistakes hurt operations and brand trust.

User pain points

  • Hard to hear voice calls in crowded stores.
  • Collected the wrong order more easily
  • Unclear status for Ready vs. Preparing

Business pain points

  • No pickup display at launch, so staff relied on voice calls with no on-screen status.
  • High handoff overhead during peak hours.
  • Mix-ups and remakes increased cost, waste, and time loss.
  • Chaotic handoffs hurt perceived quality and brand trust.
  • No configurable, scalable display to roll out across stores/brands without heavy support.

Research

Requirements varied widely across restaurants and food courts. I reviewed market patterns and client requests to design a configurable, extensible display. A rider locker pickup variant was explored in parallel.

Core insight

  • Collected requirements from Burger King Singapore and other prospective brands.
  • Audited existing pickup displays for functionality, information design, and aesthetics.
  • Mapped differences between customer pickup and rider locker pickup with the Product Lead.
  • Documented required variations and configuration options for future brands.

Insight

Every store wanted its own layout and style. Flexibility and extensibility were key to adoption and reuse.

Key insights

  • One size does not fit all. Configuration must be first class.
  • Layouts must switch quickly between single and dual column.
  • Rider-locker displays require extra data such as the aggregator logo and locker number.

Ideation

I designed a configuration-driven display that could be set in CMS without redeploys and previewed across devices and orientations.

Concepts explored

  • CMS controls: time on/off, store name show/hide, header text, background color, background logo color.
  • Column mode switch (single or dual) to show Ready and Preparing.
  • Mockup coverage: landscape and portrait, one or two columns.
  • Rider locker specifics: aggregator logo, order number, locker number.
  • Edge-case handling: very long order numbers and long names.

Early Concepts

I created wireframes and mockups, then validated breakpoints and configuration coverage with the PM and Product Lead before development.

How we iterated

  • Wireframes for core states: Ready vs. Preparing.
  • Breakpoint review across five defaults: desktop, iPad Pro 11", iPad Pro 12.9", iPad mini, iPhone X.
  • Configuration checklist walkthrough with the PM and Product Lead.
  • Prototype reviews to confirm CMS mapping.
Mockups for pickup display layouts in Single (Ready only) and Dual (Preparing + Ready) modes, designed across five breakpoints to support mainstream devices in both portrait and landscape orientations.

The Big Idea

A responsive, configuration-first pickup display that scales from QSR counters to food courts and adapts to rider lockers without code changes after launch.

Build & CMS Configuration

  • Implemented responsive HTML/CSS with five default breakpoints (desktop, iPad Pro 11", iPad Pro 12.9", iPad mini, iPhone X).
  • Layout modes: single column and two-column (Ready vs. Preparing).
  • Default elements: restaurant logo, time, notice header, Aigens credit line, pickup columns and chips, background color, background logo.
  • CMS controls: time on/off; store name show/hide; configurable header text; column mode (single/dual); background color and background-logo color.
  • No redeployment needed for post-launch changes via the CMS.

Launch Support & Flexible Variants

  • Coordinated live data integration with the developer for testing.
  • Provided remote support with the Singapore PM about three hours before launch to resolve CSS issues.
  • Diagnosed a 4K TV scaling issue and guided a switch to 1920 × 1080 to restore layout fidelity.
  • Delivered a rider-locker variant supporting the aggregator logo, order number, and locker number.
Burger King order number board with two sections: Preparing numbers on a brown background and Ready for collection numbers on an orange background, with text in English and Chinese.
Landscape mockup of the dual mode pickup display for Burger King Singapore, showing Preparing and Ready columns with bilingual labels.
Screenshot of a code configuration snippet with key-value pairs and color-coded labels for UI display settings.
CMS-based pickup display settings with my left side notes to explain each control for PM and dev teams.

Outcomes

The display launched successfully in Singapore. The configuration model worked as intended, creating a reusable base for other brands.

What shipped

  • Live pickup display for Burger King Singapore.
  • All planned configuration options working in production.
  • Reusable design ready for Food Junction and other brands.

Qualitative results

  • Staff no longer rely on voice calls in busy stores.
  • Fewer handoff mistakes and a clearer Ready vs. Preparing signal.
  • Cleaner in-store presentation that supports the brand.
Customers waiting in line and ordering at a Burger King fast-food counter with illuminated 'Order Here' and 'Pick Up Here' signs.
Launch day at Burger King SG: display running smoothly, guiding guests.
Digital display at Burger King showing order numbers preparing (7179, 7178, 7177, 7173) and ready for collection (7176, 7175, 7174, 7172, 7171).
Burger King Singapore pickup display, dual columns with bilingual labels

Reflection

Short timelines demand a realistic MVP, clear ownership, and precise communication across teams and on-site stakeholders.

What I learned

  • Plan contact points early and maintain a tight launch checklist.
  • Configuration is the fastest path to flexibility and fewer redeployments.
  • Careful CSS and device setup reduce last-minute surprises.
  • Clear handoffs between design, engineering, PM, and on-site teams prevent churn.

Future Improvement

  • Optional sound or subtle animation when new orders arrive.
  • Highlight orders from the last 30 seconds to draw attention.