McDonald's Digital Vision
Creating six new UX concepts to bring more fun to McDonald’s digital presence in the upcoming year.
| Client | McDonald's Digital |
|---|---|
| Project Type | Product Vision, Concept Creation, Rapid Prototyping |
| Role | Experience Design Lead |
| Team | Visual Design | Laetitia Auguste |
|---|---|---|
| Motion Design | Delaney Trione | |
| Creative Direction | Nour Tabet | |
| Length | 4 weeks |
Finding the “fun” in functional.
McDonald's partnered with Huge to strengthen their digital presence, focused on cross-channel usability, scalability, and standing up the loyalty program.
The revamped ordering experience and new design guidelines helped the McDonald’s app to become one of the leading Food & Beverage apps globally.
Brand personality guidelines
To celebrate this success, the McDonald's Huge team had a hackathon to brainstorm how to take experience and brand expression to the next level, with loyalty and partnerships emerging as key takeaways.
Brand personality guidelines
We then had four weeks to shape the hackathon ideas into a cohesive vision for the future of McDonald's Digital strategy in time to be presented at the upcoming McDonald’s corporate call.
I paired up with visual designer Laetitia to find where along the customer journey we could pump up the lighthearted, playful, and welcoming sides of our client’s personality.
At our team’s internal kickoff meeting, we discussed four broader experience pillars to ideate around:
01. UX Enhancements
Improving the existing experience to elevate the brand presence on digital channels.
02. Personalization
Creating a sense of belonging and McDonald's digital community through customization.
03. Engagement
Exploring engagement beyond the transactional – from social to interactive.
04. Future State
Building an aspirational future state that connects the physical and digital worlds.
Beyond the transaction.
To kickstart ideation, I tested each digital ordering channel myself, sketching out ideas as I snacked on my fries.
The McDonald’s digital experience weaves mobile, web, and in-store kiosk touchpoints into different stages of the customer journey.
All channels follow the same basic journey
- Ordering and claiming deals at the in-store kiosk, counter service, or drive-thru.
- Ready-on-Arrival table service, counter pick-up, and drive-thru.
- McDelivery via the mobile app or website.
Grouping ideas by principle
Because all channels follow the same user journey, I started ideation focused on the mobile-app experience.
Grouping ideas by principle
I collaged wireframes, screenshots, design system components, and notes into mid-to-low fidelity franken-wires in Figma as I iterated on my ideas into workable concepts.
Laetitia and I synched daily, trading feedback and collaborating on the more interactive or visual aspects of each other’s work.
At the end of week two, we met with hackathon participants to get their input on what we had made with their ideas and prioritize our final concepts.
In the remaining time, we worked on refining our concepts, making sure each built toward a cohesive vision for McDonald’s Digital.
fast food future
At the end of the four weeks, I had created six mini-prototypes that each illustrate a standalone UX concept. Together, they form a modular system for keeping the dependable core experience fresh and fun.
Dynamic UI surfaces TOD-specific deals and campaigns
Breakfast, Lunch, & Dinner Mode
Serving up contextual recommendations tailored to mealtime and location allows McDonald’s to anticipate user needs without requiring much personal data.
Unique deals, UI components, and iconography that reflect the present time-of-day connect the digital journey to the physical experience, signaling value and strengthening trust.
Introduce unexpected content in predictable patterns
Homage Filters
Experience filters provide a standard approach to weave dynamic content into the everyday experience without adding friction.
Creating localized moments of celebration and fun at key moments can seamlessly reframe core functionality in harmony with partnerships & campaigns.
Unified campaigns to satisfy the most die-hard fanbases
Campaigns Home Base
Creating room in the app for campaign-specific content allows McDonald’s to build the authentic experiences that customers crave.
Flexible landing page and UI theme templates will streamline extending marketing campaigns across channels and drive digital adoption.
Meet users where they are at home and abroad
McPassport
As one of the world’s most recognized brands, McDonald’s can merge convenience and fun at an unmatched global scale.
Specialty user flows at airport locations welcome and assist travelers with dependable familiarity.
Badges and loyalty features tap into users’ competitive edge and celebrate milestone’s shared with McDonald’s abroad and close to home.
Don’t ditch users digitally during downtime
While You Wait
Adding fun and engaging interactions during moments of downtime in the customer journey will reassure and improve the customer’s perception of speed.
These bubbles of happiness and fun are an opportunity to update the digital experience with dynamic content and to guide users to other app features.
Deals are most delicious when they’re shared
Gifting the Happy
We make it easy to manage and send rewards and deals directly from the McDonald’s App.
This simple, customer-to-customer referral system will drive digital awareness and adoption.
The perfect combo.
I packaged together our concepts with value propositions, descriptions, & prototypes to handoff for final delivery.
Motion designer Delaney put together a sizzle reel showcasing everything for our client team to present at the upcoming McDonald’s corporate call.
McDonald’s Digital sizzle reel
The video pairs our new concepts with planned design & usability updates to show how our vision fits into the McDonald’s Digital roadmap for the upcoming year.
Now when I open the app, I can see our vision taking shape, with aspects of the concepts we created reflected in each update.
So far, new interactive promo meal flows and celebratory micro-animations are only the first of our ideas to be implemented, adding flavor to the everyday digital experience.