View the original post
McDonald’s app design for Smart TV case study
1. The challenge
The challenge was to design a McDonald’s app for smart TVs. The highest demand for food delivery is during weekend nights. Is the moment where we are sitting on our coaches watching something on TV, so why don’t to take advantage of the device we have in front of us and create a digital product for it?
Understanding the context and how the user experiences the product or similar products
- What? Digital product for Smart TVs to order food.
- Why? To take advantage of the TVs when people is about to watch it.
- When? During weekend nights before watching something on TV.
- Who? People who gather together (groups of friends or families) to watch something on TV (films, sport events, shows, etc).
- Where? At home.
I asked people what do they do currently when they gather together at home and want to order some food (currently there is no Smart TV apps available in the food delivery market). I came up with some insights:
- Some people share their mobile screen in the TV so everyone can see what is in the order.
- It usually takes time because they pass a phone around so everyone can view the menus and make their food selection one by one.
- Families ask for the same order almost every weekend for their kids.
- They miss variety of products or more products focused on groups.
I also wanted to point out things to consider while designing for a TV;
- TV constraints in terms of interaction. There is only 4 ways to go around the screen (left, right, up and down).
- Size of the elements.
- Ambience: taking care of color and contrast.
Narrowing down which end-user problem is the most important to solve
Once context, users and device have been well understood, that led me to a main insight;
How to make an app for groups and families before watching something together on TV during weekend nights, easy to use and navigate and where they can make fast choices?
They are all relaxed on the couch, watching an awesome movie or playing an exciting game on TV when hunger strikes. With the McDonald’s TV app, they can just pause what they are doing, order a tasty burger, and get right back to the fun.
I didn’t want just to replicate the McDonald’s web or mobile app and making it bigger for the TV screen, I wanted to add value for this new TV app focusing on families and friends and creating a new immersive experiences.
The colors I chose are black — giving a cozy ambient during nights. And yellow, McDonald’s yellow. Besides, these two colors gives high contrast.
The first half of the nav bar is dedicated for families and friends:
- Packs and offers
While the second half is focused on one user:
- Previous orders
- Shopping cart
Packs and offers
First thing users will see in the screen is a variety of packs and offers designed exclusively for friends and families.
I decided to present the offers in a carousel to avoid users to be overwhelmed with the huge amount of offers they can choose. This way they can see them one by one.
Scrolling down a bit we find the packs, they are all categorized depending on the number of people (groups of 2, 3, 5, etc.), for families (with options for kids), or by events (with great combos of appetizers and drinks).
All the offers and packs are designed having in mind groups of people.
For those who prefer to create their own McMenus they can choose the McMenú section.
The McMenu section is divided in four steps designed with four big carousels — Burgers, complements, drinks and extras. Again, I use the carousel design to avoid users to be overwhelmed by the high number of options they can choose, and also to show the product in the center of the TV in a really visual way (users are supposed to be really hungry). They can navigate among those carousels by going up and down, and left to right to navigate inside them.
By clicking the center button, users can customize the burger ingredients;
I wanted all the relevant information related with the order to be in one view, this is why I created four cards (following the card structure of the main screen)— Summary, address details, payment method and waiting time.
The spotlight goes directly to the checkout button, understanding that users don’t want to change anything (they do this during the signing up process) and just check the info and checkout straight on. In case they would like to modify something, they can go up and click on the card they want to modify.
Notifications on the TV and smartphones
Once the checkout has been completed, the notifications of the tracking info will appear on both TV and users smartphones so they can turn off the app once the checkout is completed and keep watching the TV.
This was a 3 weeks personal project along my interaction design studies at Instituto Tramontana. I hope you liked it.