Restaurant Brands International

Design a food ordering and delivery experience for three RBI brands, across three digital touch points

The objective of the project is to

Reimagining a Cross-Brand, Cross-Touchpoint
Ordering Experience.

SCOPE

Designing a unified yet brand specific ordering experience across platforms 

  • Create a unified ordering framework across platforms: Web, Mobile Native, and Kiosk.
  • Deliver brand specific UI by applying each brand’s visual identity and adapting the framework for earned differences.
  • Equip the parent brand to make future changes by delivering a flexible design system.
  • Deliver CSS for each component in the form of an organized style guide across each brand,

Team

Kat Davis - Creative Director

Antonello Crimi - Principal Designer

Kristeen Loubek - Project Manager

Amar Chadgar - Interaction Designer

Ecliar Junchaya - Visula Desinger

Karl Carstensen - Desing Techonologist

Sneha Gokhale - Interaction Desinger

 

 

 

Tools

Sketch

Abstract

Zeplin

Invision

Hand sketches 

Duration

19 Weeks 

Key Skills

 Wireframing

Brainstorming Interaction Models

Competitive Analysis

Prototyping 

Documentation

 

Kick-Off Workshops

Identifying business needs, success criteria and product hero flows for each brand 

Kick-off workshops were conducted with internal stakeholders of each brand to identify their specific business needs and success criterias.

Hero flows across the three platforms were mapped out by brainstorming on an ideal user journey. 

 

Sucess Criterias

Brand specific requirements 

Best in class customization and delivery experience.​

A coupon experience that is integrated into the POS and store workflow.

Achieve up-sell objectives.

Implementing an engaging loyalty program .

Emphasis on Tim Rewards and TimCard experience.

 

Allows for quick orders, better and faster than the cashier

 

Find the right balance for the modifiers to represent the  customization experience.

Consistent and familiar user experience across touchpoint (web, app and kiosk).

A simplified menu and ordering experience.

User flow 

Identifying and mapping cohesive user flow

Existing app for all 3 brands was limited to displaying Menu items available, Nutritional values and Store locations. 

The deliverable expected at the end of the project was to evolve from the products being informative to being actionable.  

The scope was to design an end to end ordering and delivery flow. However, each brand was asked to identify the key user scenarios and user tasks they would like to focus on, for their specific app.

Below is a cohesive user experience that the team designed for. 

Competitive analysis 

Mapping existing products in the market to create a cohesive feature list 

A thorough competitive analysis was conducted by mapping out existing apps and websites of brands similar to our client as well as adjacent food delivery service providers. 

Loyalty and reward programs offered by various brands were studied to identify patterns around incentives offered. 

The analysis contributed to creating a cohesive feature list integral to the food ordering experience and identifying the offerings missing in our clients exiting products.  

Today’s Deals

Splash Screen

Preference Selection

Selecting Location

Menu Item & customization

Up sell

Menu Category

Menu Overview

Confirmation

Payment

Cart

Nutrition

Splash Screen

Today’s Deals

Selecting Location

Preference Selection

Menu Overview

Menu Category

Up sell

Menu Item & customization

Nutrition

Cart

Payment

Confirmation

Splash Screen

Preference Selection

Preference Selection

Today’s Deals

Menu Overview

Menu Category

Up sell

Menu Item & customization

Nutrition

Cart

Payment

Confirmation

Splash Screen

Selecting

Location

Preference Selection

Menu

Overview

Menu Category

Up sell

Menu Item & customization

Payment

Confirmation

Design Principles

Easy

Create experiences that minimize the mental load to make decisions.

Curated

Create curated experiences for customers. Don’t show all possible options at once. 

Personalized

Create personalized experiences, that show you know your customers. Take into account context such as time of day, previous order history, and other data to offer them the best possible experience.

Optimization

Create the fastest way to order. Optimize for smart presets and easy paths to ordering.

 

Initial Wireframes

Exploring multiple interaction models and signature moments

Based on the User Flow and Design Principles various interaction models were explored to highlight signature moments across the App, Website and Kiosk flow.  

Interaction model - Kiosk 

Within the kiosk experience, it was essential to provide direct access to the till/ cart to enable easy checkout. In addition since most users are new to interacting with kiosks, it was important to enable them to toggle between different menu item categories until they familiarise themselves with the overall menu category structure. 

Visual Design and Wires

Review Order 

Host details of items added to cart and propts user to proceed to place their order

Persistent Till 

Stuck to the botoom of the screen for easy acees. Display items added to cart and 'Checkout' primary call to action button 

Accessibility Bar

Host the Help, language, and Accessibility Mode tab
The bar is displayed in an expanded state on the welcome screen and then collapses once the user starts interacting with the kiosk

Main Menu 

Cards used to depict Menu categories offered by the brand

Recent Orders Cards Carousel

Enable users to scan through their most recent order quickly and reorder a recently ordered item.

Menu Category Carousel

Displays all Menu categories in a carousel menu format for users to quickly toggle between various pages.

It is placed below the header bar. Upon scrolling the Menu category Carouse remains stuck to the header bar

Interaction model - Desktop Web

Desktop web homepage was designed to provide access to all essential sections within the web flow including recent order, special offers, community engagement initiatives, etc. In addition, a Drawer was designed below the Header bar for Tim Hortons brand to add emphasis to  Tim's Rewards and Tim'sCard. 

Drawer (closed)

Host tabs that provide access to Tim Rewards and TimCard.

Community Cards

Indicate the various initiatives taken by the brand to engage and enrich the community around them

Special Offers

Displays messaging that prompts users to place an order.

Popular Order Cards

Drawer (Open)

Host details of Tim Rewards and TimCard like loyalty point status, card balance, etc. 

Displays messaging that prompts users to place an order.

Homepage Banner (Floating)

Displays messaging that prompts users to place an order.

TimCard sigh-up section

Displays messaging that prompts users to place an order.

Header Bar

Hosts tabs that provide access to various pages within the website.

Interaction model - Mobile Native

Restaurant  Locator (Modal)

Host the Restaurant Location Banner and Location cards. The cards represent various restaurants that the brand operates across different locations. The cards are used by users to select a particular restaurant location before placing an Order.

Restaurant Location Banner

displays the current location provided as a reference to the restaurant list the page displays.

Offers/rewards card

The card is used to indicate redeemable offers. Each card has tags that display the offer expiry date and medium to redeem them. 

Promo Offer Card

Bottom Nav Bar (Stuck to screen bottom)

Hosts the main menu option that is part of the header bar on the desktop. Tabs include - Home, Offers, Order, Recent Order, and Restaurant

Host details of  various seasonal or monthly promos offered by the brand 

Promo Offer Customization Page

Displays menu items included in the offer. Enables users to decided the medium in which they would prefer to redeem the offer.

All brands relied on offers, special promos, and mobile-only offers to increase adoption of the Mobile Native app. The main focus of the app was to emphasize these offerings and also be scalable to include new features as the adoption increased. 

Home Page Layout

Mapping out Homepage layout scaling across platforms and brands.

Menu Item Customization Page Layout

Mapping out Menu Item Customization page layout scaling across platforms and brands.

Best in class customization and delivery experience.​

A coupon experience that is integrated into the POS and store workflow.

Achieve up-sell objectives.

Implementing an engaging loyalty program .

Brand 1 : Popeyes

For brand Popeyes, the experience was centered around Menu Customization, Ordering, and Delivery flow. We also focused on detailing out the loyalty program and signature interactions for using rewards earned by registered members. 

The meal customization flow was designed to cater to the needs of users that like curating their Perfect Meal.

Mobile Native Flow 

Explore HomePage

Restauran

locator

Menu Item Customization

Order Checkout

P-MN.png

 Desktop Web Flow

Enter delivery address

Menu Item Customization

Order

Checkout

Track

Order

Track

Order

P-W.png

Kiosk Flow

Explore

Menu

Menu Item Customization

Review

Cart

Order Checkout

P-K.png

Brand 2 : Tim Hortons

For brand Tim Hortons, the experience was centered around detailing out the usage of Tims Rewards and TimCard. Special attention was also given to formulating the experience for a logged-in registered user vs a logged-out user as well as how 'quick order' can be placed by Efficient Users.

Mobile Native Flow 

TH-MN.png

 Web (Logged-In) Flow

TH-W.png

Kiosk Flow

TH-K.png

 Web  (Logged-Out) Flow

TH-Web logged -out.png

Review Coupons and Quick Orders

Review

Cart

Order

Checkout

Explore HomePage

Review

rewards offered

Menu Item Customization

Order Checkout

Sign-up to create account

Review

rewards offered

Select restaurant location

Explore catering Menu

Explore HomePage

Explore

Menu

Menu Item Customization

Brand 3 : Burger King

For Burger King, the experience was centered around using coupons offered to registered users, customizing the menu items and setting up and tagging a new delivery address. We also focused on a few edge cases like canceling a redeemed coupon order. The idea was to build a robust user experience. 

Mobile Native Flow

BK-MN.png

Web Flow

BK- Web.png
 

Explore HomePage

Review

Rewards Offered

Menu Item Customization

Place Delivery Order

Explore HomePage

Review

Rewards Offered

Menu Item Customization

Place Delivery Order

 

Documentation 

Tearsheets documenting the design system

The tearsheets are designed to enable RBI to develop the product with their in-house team for all 3 brands.

An exhaustive design system was created to equip RBI with all the components and composites used across the 3 brands and various platforms.    

Earned differences, component behavior and its responsive nature were documented and annotated for further reference. 

Brand 1 : Popeyes

RBI_components-10.png

Documentation 

Brand 2 : Tim Hortons

RBI_brand_Components-10.png

Documentation 

Brand 3 : Burger King

RBI_brand_Components-11.png
 

KEY LEARNINGS

Detailed responsive interaction design,

design for accessibility and documentation

  • Collaborated with the client and a cross-discipline team to detail out responsive wires for a mobile-first experience. 

  • Various accessibility factors like color contrast, typography, keyboard navigation, and controlled animation were incorporated in the final design to create an inclusive solution. 

  • Learned to create detailed documentation of components and composites following industry best practices. 

  • Advocated for innovative interaction models to highlight signature moments within the experience. 

Sneha Gokhale  2018