McDonald’s OTP Conference

Gamify the user experience of virtual employee training.

McDonald’s OTP Conference
Duration

April–November 2021

Tools & Methods

Figma
Illustrator
Photoshop
After Effects

My Roles

UI/UX Design

Team

Creative Director
Engineer team
3D Designer
Project Manager

Project Goals

This website provides live streaming for McDonald's employee training. The main purpose is to train employees on the newest in-store technology knowledge. In the second year of project design, I mainly focused on enhancing the established core event features and improving the user flow to bring a fresh look for the users.

Challenge

A virtual Experience designed for 1300+ global employee training.

This is the second year that McDonald's is hosting the virtual OTP conference during the global pandemic. The second year presents both advantages and challenges. How can we find ways to maximize design innovation and deliver the same training value to users.

Design Process

McDonald’s OTP Conference design process

Solution

Gamify the user experience

In the team brainstorming session, we learned that employee training sessions can be long and overwhelming for people. However, we want to turn the day into a delightful experience for those who attend the event. I focused on designing these key features with the following purposes:

Refresh UI Design
McDonald’s OTP Conference Photobooth
Cyber user interface

In terms of the event experience redesign, we worked with McDonald's team. In the updated version, we added cyber and high-tech user interface styles to the user, which tie back to the internal employee technology training purpose.

AR Photobooth
McDonald’s OTP Conference Photobooth
Increase social sharing

AR photo booth provides users with the capabilities to create content and share on an OTP community page. This feature provided users a moment to hang out with others virtually.

Trivia Game
McDonald’s OTP Conference Trivia
Have fun and win a prize

Trivia is another fun, and educational moment for users. This feature allows users to come to the page anytime and answer some McDonald's trivia questions to gain points. The top three winners of the trivia game qualify for a special prize from McDonald's.

AR Photobooth Experience Design

Photobooth creates fun moments for users to enjoy. Users can utilize the booth to create content and share their pictures in the OTP community page and on social media during the two-day event.

AR Photobooth User Flow

McDonald’s OTP Conference Photobooth UX flow

AR Photobooth Usability Testing Finding

1. Adjust micro design decision under design system

After conducting user testing, I learned that the “go-back button” was not visible on the photo booth page. One solution for this page could be to change the “go-back button” to white and keep it the same size. While we decided not to go with this solution to make the UI more cohesive, I was able to start the discussion on these issues that users identified. We decided to only update to a bigger size for go-back buttons.

McDonald’s OTP Conference Photobooth UX design

2. Provide a solution for unhappy flow

In the testing, we learned some users' browsers cannot access their cameras. I discussed this problem with the engineering team. This problem depends on the user having a Mac or a Windows computer. There is a different solution for each. Instead of creating a long scrolling page inside the AR Photobooth, we added a button link to the camera access instructions page.

McDonald’s OTP Conference Photobooth UX design

3. How do I use specific button colors to lead users to finish the task?

McDonald’s has their own brand guideline that allows using certain colors. I followed this design strategy when I made color decisions:

  • Red – The primary action color for button. For example: take pictures, enter, download buttons.
  • Yellow – The secondary button color comes with an arrow. For example: next, back, or retake buttons.
  • Green – In chromatography green means “success”, user success takes a photo, so I chose this color as a preview button color.
McDonald’s OTP Conference Photobooth UX design

Trivia Gamification Design

The trivia game was designed to be accessed at any time during the event from the OTP town home page. If players were to exit the game and come back later, users could restart where they left off.

Trivia Game User Flow

McDonald’s OTP Conference Trivia User flow

Trivia Game Experience Usability Testing Finding

Users need more time to answer the questions

As the levels progress, the duration of time users will have to answer questions will grow shorter to make the trivia game more challenging. The faster the user answers the question, the more points the user gains. In user testing, I learned that the rate of correct trivia answers was too low. I also learned users needed more time to read questions and react. As a result, we increased the duration per question.

McDonald’s OTP Conference Trivia UX

Trivia Game Interface

Overall, what experience needed to be improved?

McDonald’s OTP Conference Trivia UX

Trivia game “answer button” design

If users were to select the correct answer, the button would change to green, and then automatically move to the next question. But if users clicked the wrong answer, then answer button would change to red, and we would show the correct answer. Then the game would automatically move to the next question.If users were to select the correct answer, the button would change to green, and then automatically move to the next question. But if users clicked the wrong answer, then answer button would change to red, and we would show the correct answer. Then the game would automatically move to the next question.

McDonald’s OTP Conference Trivia UX

Trivia Tournament leaderboard page

Users can check the top 10 trivia game players with the leaderboard feature.

McDonald’s OTP Conference Trivia UX

Reflection

I was grateful to be able to work as a main UI/UX Designer for this project. This was a large-scale UX project, including UX designers, a 3D artist, a producer, an AV live streaming team, engineers, and the McDonald's team. In total, I had around 15 -20 people involved. I also attended the client meeting, which allowed me to cater design feedback from multiple stakeholders. The most significant lesson I learned was that the UX designer cannot act as a solo dancer.

The UX Designer is a thinker, a problem solver. However, when I was working on this UX project, the problems always required me working with others. Because I come from a diverse background, I specialize in UX and visuals. However, while working on this project, I also learned motion graphic design and programming experience on the side. I love the movie Intern's tagline – “Experience never gets old”. In this project, I saw my value in UX. I saw how my skills helped me find the solution in an efficient way, while communicating with others in their language.