A smooth and safe food ordering experience on the car touchscreens for the driver, front passenger, and rear cabin passengers.
Timeline:
May.2022 - Aug.2022
Team Member:
Nancy
JY
Ziyi
My Role:
HMI design
Design strategy
Research
Prototyping
Scope:
Design Thinking
Problem framing
Concept Ideation
Prototyping
User testing
CURRENT SITUATION
As a driver or a passenger, we mostly order food from our phones today because most of the in-vehicle touchscreens still don't support food ordering.
PROBLEM
-
Checking ordering progress on the phone will distract the driver.
-
Phone ordering can't support all the passengers in ordering food at the same time.
-
Troublesome to rearrange journeys on car navigation.
-
Extra waiting time for pickup orders if road time is not considered.
-
Delivery arrived home first when we are still on the road...
BUSINESS OPPORTUNITIES
Building an in-vehicle food ordering system is a great extension of the current services on the touchscreen that manages to leverage its existing audience, and increase its value to them. The number of in-platform listings and conversion rate could be used to measure success.
For pickup orders, we need to re-plan our trip, usually, we will try on the car center screen to decide whether we should go to pick up the food or go to the current destination first, which sometimes will interfere with our schedule.
For delivery orders, sometimes we have not yet arrived home, the delivery man arrived first, which will cause some unnecessary troubles again.
Discover
Competitor Analysis
There are not many systems that offer in-car ordering. We first looked into the market to examine whether the small number of existing in-car systems can help the driver complete the task of ordering food.
KEY FINDINGS
-
2/4 of them just support limited restaurant choices.
-
4/4 of them have an old-fashioned UI.
-
2/4 of them have burdensome user flow when ordering food.
GOAL
-
Have a better understanding of the driver's different use cases.
-
Reimagine the UI with a more refreshing and modern look.
-
Create an in-car food ordering system with a smooth and intuitive user flow.
EXAMPLES OF EXISTING PRODUCTS
Dunkin’ app on CarPlay for mobile ordering
General Motors - in-car ordering GM Marketplace
BMW pilots in-car food ordering with delivery app Olo
Audience
We divided the audience into two groups: drivers and passengers and interviewed them.
For drivers, ordering in the car while driving is extremely unsafe and inconvenient.
-
80% of the users have such kind of experience: ordered ahead on phone but arrived at the restaurant for pickup too late or too early because they can't keep track of the order progress and time on the road at the same time.
-
Safe driving is their priority.
-
It's troublesome to enter restaurant address to the navigation system when the current destination already exists.
For passengers, ordering in the car together is not enjoyable at all.
-
The phone screen size is too small to enable everyone in the car to think about their own ordering decisions.
-
Everyone might be torn about what to eat, and it may cost too much time to miss their desired restaurant in a moving car.
User Journey
To dive deeper into the user’s situation and encourage myself to think about the user flow inside the product as well as before and after, I chose to do a Journey Mapping focusing on both groups of the target users, which are the driver and the passenger(s).
The driver's journey
The passengers' journey
New Findings
-
The driver should be able to refuse passengers' order requests if the route or food options are not reasonable.
-
Food ordering info should placed on the left side of the driver's touchscreen for convenience.
-
Voice control system should be provided to the driver.
-
A route planning feature should be provided for the multiple orders scenario.
Define
Deeper insights in the interviews - About "habituation and safe exploration".
"I am used to using the phone app to order food. I don't really need to order from the car touchscreen."
Trying new technology is risky and fraught with uncertainty, which will make users choose to go back to their phones that look more familiar. Because when they use a device repeatedly, some physical actions become reflexive. There's no longer a need to think about what to do next, they've become habitual.
"It's good to use the cell phone to order food, it makes me feel sureness."
I found that some users are afraid of suffering dire consequences and don't like to explore a brand-new interface. This kind of mental stress would be a great obstacle when we transfer the food ordering experience to the car touchscreens.
What my solution doesn't address
I didn't expect to find that users stick to their cells so much because they can provide a sense of security and familiarity. Then I started to think about the scope of this project. I decided that my solution should not focus on how to let users abandon using phone and turn to our touchscreens to order food immediately. Because their belongness to their phones both includes positive feelings and negative ones. I want my solution to be the least risky although it may not that attractive from a business perspective.
Reframing problem
After defining the constraint, I started to reframe the problem by asking myself "what does my solution can address?"
HMW design a system that addresses exclusive problems about ordering food IN THE CAR, specifically to shorten ordering selection time, help track delivery, and support multiple ordering?
PAIN POINTS
1. Can't manage order status and the road time at the same time
USER GOALS
1. I can take care of my order status and the navigation info at the same time
2. Can't decide what to eat
2. I can quickly decide what to eat
3. Hard to do multiple people ordering
3a. We can order a great meal together and everyone is happy about their food
3b. We can share it with the driver
3c. We can order from different restaurants
How I got there
USER GOAL #1
I can take care of my order status and the navigation info at the same time
DESIGN CHALLENGE
HMW match the road time and the order pickup/delivery time?
DESIGN DECISION #1
Visibility of Order Status
From user interviews, I learned that long waiting for pickup orders or the impossibility to get delivery on time are quite bothering for people who order in their car.
So, for the driver's screen:
-
I initially thought that showing the restaurant location on the map while and after ordering would allow the driver easily estimate the current distance to the restaurant.
But after user tests, I found:
-
Even though the former assumption is true, the map gives the driver some clue about how far is the restaurant, but the user is still not sure how long they have to wait to get the pickup.
-
Furthermore, after the driver orders the food, the prompt of adding a new stop(restaurant) to the current navigation is very hard to be noticed.
-
After two iterations, I made a more obvious and specific prompt on the navigation map, indicating the exact waiting time for pickup orders.
-
I decided to use a progress indicator pattern to show the driver the journey progress and the order progress at the same time. In split seconds, the user will understand progress — this is affordance in action.
-
This pattern would reassure the driver that he/she will not miss any update on the order status and could take control of it all.
DESIGN DECISION #2
User Control and Freedom
For the passengers' screen:
-
Initially, I designed a two-layer filter under the food categories to enable the passenger(s) to filter their pickup/delivery options, distance, etc.
But after user tests, I found:
-
The users found the two-layer filter confusing. Some users can't notice the delivery/pickup filter below the food categories.
-
After iterations, I shrank the previous confusing two-layer filter to a filter icon on the upper right corner for simplicity, and a fat filter panel could be released underneath it.
-
Also, the overall layout has been changed into a modular design pattern to reduce the complexity of the system and better visualize the hierarchy.
#1 Driver's Screen Solution:
Order Prompt on Navigation
PREVIOUS VERSION
PREVIOUS VERSION
(Click to see details)
#2 Passengers' Screen Solution:
Decide on the Filter
PREVIOUS VERSION
(Click to see details)
USER GOAL #2
Can't decide what to eat
DESIGN CHALLENGE
What information should be prioritized to help users decide what to eat?
DESIGN DECISION #3
Ensure essential options are obvious and accessible
For the driver's screen:
-
If the driver is driving alone and needs to find a restaurant, then the restaurant location is crucial.
-
Since it is more intuitive to find restaurant options on the map and it is ideal for drivers to read as less information as possible, so we initially listed separately a section for the food map on the bottom control panel.
-
Then, the driver could find different kinds of restaurants based on the current location. A filter was also provided on the right.
But after user tests, we found:
-
Users find it inconvenient as drivers to only see food information on the map with no other information
-
After iterations, we gave up the food-based map but integrated the food options with the navigation map together. Module Tabs like coffee and restaurants directly filter out the nearby restaurants. This pattern could present more content than I can show at one time.
-
We also make frequently searched items, such as gas stations, and parking, obvious and accessible on the module tabs.
DESIGN DECISION #4
Anticipatory design
For the passenger's screen:
-
We initially blindly designed recommendations about popular restaurants and deals for passengers.
But after user tests, we found:
-
It's too normal and not intelligent enough to solve users' hesitation towards food options.
-
Therefore, we came up with a idea called proprietary recommendation feature, which allows users to pick food from best options from our recommendation with just a few clicks based on what they’ve ordered in the past, their interests, distance, meal-prep time, etc.
#1 Driver's Screen Solution:
Search based on map & distance
PREVIOUS VERSION
(Click to see details)
#2 Passengers' Screen Solution:
Anticipatory Recommendation
PREVIOUS VERSION
(Click to see details)
USER GOAL #3
3a. We can order a great meal together and everyone is happy about their food
3b. We can share it with the driver
3c. We can order from different restaurants
DESIGN CHALLENGE
HMW support multiple people ordering?
SOLUTION
Intelligent Route Planning but with Flexibility
-
Every passenger could add dishes in real-time in multiple restaurants. Ultimately, an order with multiple restaurants could be placed.
-
As a default setting, the intelligent route planning feature would automatically arrange the fastest route according to meal-prep time, current location restaurant location, and the original destination.
-
However, the passenger could help the driver can customize the order of the route to the restaurant according to their situation and will.
The sync flow between the passenger's screen and the driver's screen.
Finalized Design
The driver's screen
The passengers' screen
Learnings & Next Steps...
Spend the longest time sorting out the problems is necessary
One of the most difficult challenges for this project is to figure out why we need to design an in-vehicle food ordering system when most people could simply use their phones. We spent several weeks analyzing the problem to its essence and brainstormed a couple of solutions. Therefore, we have to finish the visual design in a more limited time. But in retrospect, it was fortunate that we spent most of our energy thinking about the logic of the project, which allowed the design to proceed smoothly later on.
Voice Interaction
We brought up the voice interaction system when we were brainstorming the solutions. However, because of time limitations, we didn't deal with this scope of work. Though it is a new domain left for all of us to learn, we were really excited to continue the voice interaction design. With the progress of technology, voice interaction will be used in more and more scenarios. How to achieve a more natural and reasonable voice interaction experience will be our next goal.
Thanks for making it to the end!
💌