McDonald’s is the world’s largest and best-known QSR, serving more than 69 million customers each day. When we began our partnership, the organization had dozens of apps in the market, no unified experience across their digital and physical consumer touchpoints, and no ability to work quickly to create and launch new experiences locally or globally. We worked with the global digital and innovation teams and market leads across the world to create a new global customer experience. Taking into account the unique technical and operational needs of a franchise business, restaurant operations and employee experience, we defined the roles of each touchpoint in food delivery, and helped unify the experience across touchpoints. Today, McDonald’s is considered the gold standard by which all QSRs benchmark their digital experience delivery.
Project Objectives | Establish a new global, omnichannel experience for 69 million customers and define an omnichannel strategy for the world’s largest QSR.
Project components | Global mobile app design, Kiosk experience design, Omnichannel strategy, Cross-channel check-in and order fulfillment innovation, Consumer engagement, Capability building.
Role | UX Lead
Duration | 10 months (multi-year program)
This system map is used as an illustration of how databases affect digital touchpoints. It is shared with internal teams and for the Method team to onboard MCD leadership to the digital organization.
While working on the McDonald’s account, my role was to own and lead two tracks of work. The first, the current mobile solution and it’s global feature considerations. The second, the mobile check-in experience across fulfillment channels that is focused on research and user testing, prototyping, implementation of new technologies including layers of location-dependent services (eg. geo, wifi, BLE beacons) and design for development.
Over 10 months I continued to work on global strategy and design for in-store kiosks, proposals for McDonald’s digital presence at the 2016 Olympic Games in Rio, and developed internal tools for the Method design team and for the client product & innovation teams. I served as one of four cross-channel information resources on this large account, ensuring consistency of experience and accurate understanding of tech capabilities across all digital touchpoints.
Building an Omnichannel Ecosystem
The technology ecosystem of a McDonald’s restaurant is complex. As we explore how digital and non-digital touchpoints connect, the IA of the restaurant itself is an essential piece to both understand and communicate effectively both internally and for our client.
McDonald’s Global Mobile Solution
I was responsible for the localization-by-market and feature-building for all mobile app work for the current and future releases projected over the next 1-2 years.
This required collaborative work with client teams around the world to comply with local legal requirements, unique cultural norms, and variety of products available across markets.
Research & Innovation: Check-In
Working with the Innovation Team at McDonald’s, our team was challenged with looking at the next-generation check-in experience for McDonald’s restaurants. Our focus was on integrating the mobile experience with an on-site layered location-dependent technology framework that includes geofence detection, wifi, and BLE beacons. We created an advanced prototype, and used it in usability testing and technology-testing scenarios. Under my lead, the project completed two rounds of user & technology testing, and will be moving to the next phase of additional hardware considerations, as well as expanded market designs.
Designing the System
I collaborated with our technical team to design the user-facing experience and the tech system flow, prototype, and assist the client in outlining testing scenarios in-store. This included plugging into the restaurant’s ordering system and installing a network of beacons to interact with the system at four major order receiving points: counter, table, drive-thru and curbside pickup. Shown below is the full system of both customer-facing mobile components and internal system actions across four major fulfillment channels. These are currently being tested for tech feasibility. I created this schematic which is being used to inform design, technology, and the final implementation.
Prototyping & Testing
During on-site at testing I iterated on and tested our prototype through a wide range of fulfillment scenarios. Working with a 3rd party user testing team, we “plugged in” to a McDonald’s restaurant and ran our app which prompted orders at specific intervals as the customer moved through the space of the restaurant property. We shared our findings with the broader team working on all McDonald’s tracks. Shown here is an advanced prototype (connecting to two live databases that is configurable through a firebase terminal as well as a client-friendly control panel developed internally.
Kiosk
Of the many tracks included in the omni-channel strategy, kiosk was of particular interest to global markets across McDonald’s. This included developing a strategy to unify this experience globally and set the stage for our team to present our vision for the Restaurant of the Future. We worked with the McDonald’s team to re-evaluate the purpose of the Kiosk experience in the restaurant setting, test potential solutions with customers, and provide them with a completely new design that is considered one of the best-in-class examples in a QSR setting to this day. Ultimately, the kiosk became the key to the multi-device experience at McDonald’s, from personalized ordering to entertainment.
The Empathy Toolkit
As a part of unifying our process across multiple teams, the Lead Interaction Designer and I worked together to create the Empathy Toolkit, a series of configurable audience needs and concerns in order to test our work against. It was tested and refined internally, then shared with clients during collaborative worksessions.
This set of cards took on several iterations across tracks to address unique client audience & customer audience needs and continues to be used today as an essential workshopping tool.
Rio 2016 Olympics - McDonald’s in the Olympic Village
McDonald’s is the official restaurant of the Olympic Games. In preparation for the Rio 2016 Olympics, McDonald’s partnered with us to imagine how they could engage customers in and around the olympic village, from food to social engagement to augmented reality wayfinding.
A personal favorite concept which was ultimately realized was a series of animated emoji featuring McDonald’s themed characters and imagery. Concepts from simple keyboard stickers and widgets were proposed, as well as a possible ordering system through SMS & emoji.
Goodbye PDFs, Hello Markdown
With so many tracks of work going on at once, our delivery of PDF documentation was getting out of control. Me, the technology lead, and a visual designer worked together to imagine, test, build, launch and onboard the entire McDonald’s account team (about 30 people) to documenting in code.
This McDonald’s styleguide/documentation tool is an entirely HTML documentation tool where UX designers can design in sketch, annotate and version in code using a customized markdown language. Visual designers can document all style guides in HTML, and creative technologists can provide code snippets for all components.
