Mock-Up of Kiosk 6.0 In-Situ

Mock-Up of Kiosk 6.0 In-Situ

McDonald's Kiosk

Design new, large-scale touchscreen food ordering kiosk experience for implementation across McDonald's global markets. McDonald's serves ~68 million customers daily in 119 countries across ~37K outlets. There are over 3 million kiosks world-wide. MVP release planned for early 2018 in France.

The Ask

Develop a design system within a digital cross-channel (web, app, kiosk) approach. Considerations include usability testing insights, business requirements, and variability across global markets.

How might we

Enable diverse customers to order on the kiosk with a sense of confidence and ease, according to their individual budget, taste, and dietary preferences?

My Role

Interaction Designer on cross-cross-disciplinary team, working with Visual Designer, Creative Technologist Lead, and Project Manager. Second sprint team (IxD & VD) added midway through.

My work included: clarifying questions, strategizing approach and developing strong POV, and gaining buy-in from client. I wrote user stories, sketched, created pattern library, created wireframes and flows, planned and conducted usability testing with working prototype, iterated based on learnings, and more.

Deliverables

POV documents, screen anatomies, wireframes, flows

Success looks like

Navigating the tension between legacy design and IT while re-envisioning Kiosk using UX process and systems thinking—all with an eye toward simplicity. Advocating for design-led solutions and processes. Leading cross-channel design through Kiosk sprints and testing.

 We conducted guerilla ethnographic research. On this day at the local McDonald's on Canal Street, I observed a family ordering as a group on the current Kiosk 5.X build.

We conducted guerilla ethnographic research. On this day at the local McDonald's on Canal Street, I observed a family ordering as a group on the current Kiosk 5.X build.


Process Snapshots — Analyzing & Grooming User Stories from Client

We would receive Jira User Stories from the client that were incomplete, vaguely written, &/or redundant across sprints.

My job included discerning what was missing, misplaced, &/or needed questioning or further information.

Part of the process included brainstorming with my design partner to define and prioritize problems and explore the possible directions for design exploration—based on all the at we already knew and understood, beyond the stories. This thinking would feed into grooming/rewriting the user stories.

In this case, we did a design exploration around Payment implications on the Pull-In Screen. Here Eli is documenting our whiteboard sketches/thinking.

Here's an example of further sketching and thought around that design exploration...

We added a little fidelity—but we're actually more interested in conveying how the screen accommodates future anticipated features that haven't been designed yet.


Process Snapshots — the above dovetails with further IA work

Part of the "success" meant understanding legacy IT systems/constraints.

With the user stories & design exploration above, I needed to understand configurations across individual restaurants.

Shown here are the three market-configurable fulfillment "modes," and its restaurant-specific variations. The design exploration adds an alternate path from the Pull-In screen and anticipates future implementations yet to be designed. We also urged IT streamline to a single mode, Mode 0.

Fulfillment_Overview_Wk2.png

Flow Examples

  • Signature Item Customization Flows — low fidelity

  • Deals Flows — mixed fidelity

  • Accessibility Flows — high fidelity

Accessibility Flows for Wheelchair ("Reach") Mode — based on research into anthropometrics and best practices, ADA requirements, and principles of respect through simplicity and parity with non-wheelchair mode


Process Snapshots — Testing

We test regularly with a working, tappable prototype. Here's one testing session with a participant and moderator. You can see the creative technologists that created the prototype through the window on the left—at the moment, they're fixing a bug!

Kiosk_worksheet 1.png
 The viewing room holds team members, clients, and observers from the rest of the studio.

The viewing room holds team members, clients, and observers from the rest of the studio.

Click above to view click-through of prototype (coded in react). password: ocean.

After testing, my visual design partner, Eli, and I quickly worked through our observations to ID problems and prioritize possible areas for iteration.

This enabled us to share back with the design team, align, and iterate quickly.

 Formal Client Readouts

Formal Client Readouts

Process Snapshots — Ethnographic Research in McDonald's and other stores with kiosks

 We also go through the Kiosk 5.X ordering experience to understand and analyze the current build's features and transactional flow. On this day, we were checking out the ADA features and how the credit card reader coordinated with the kiosk's payment flow screens.

We also go through the Kiosk 5.X ordering experience to understand and analyze the current build's features and transactional flow. On this day, we were checking out the ADA features and how the credit card reader coordinated with the kiosk's payment flow screens.

kiosk_s7_ethno_fam.jpg

Process Snapshot — Literature Review, Accessibility examples

Documentation — Pattern Library

  • Component examples

  • Template examples

Cross-Channel Design References — examples

 app ordering / kiosk

app ordering / kiosk

 web ordering

web ordering

 working design system

working design system

News Highlight — Prototype Restaurant

 The Kiosk was presented to investors in a "Gallery Walk" at McDonald's operational prototyping restaurant.

The Kiosk was presented to investors in a "Gallery Walk" at McDonald's operational prototyping restaurant.