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
Desktop Web Flow
Enter delivery address
Menu Item Customization
Order
Checkout
Track
Order
Track
Order
Kiosk Flow
Explore
Menu
Menu Item Customization
Review
Cart
Order Checkout
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
Web (Logged-In) Flow
Kiosk Flow
Web (Logged-Out) Flow
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
Web Flow
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
Documentation
Brand 2 : Tim Hortons
Documentation
Brand 3 : Burger King
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.