With the growing demand for convenience in food ordering, many people now prefer using apps over traditional in-store methods. To meet this demand, restaurants are embracing curbside pick-up and drive-thru services. E-Thru takes convenience to the next level with an app designed specifically for car screens, allowing users to manage everything from ordering and payment to navigation for pick-up—all without leaving their vehicle.
My Role: User research, User Flow, Site Map, Wireframing, Prototyping, UI design
Tools: Adobe XD, Photoshop, Illustrator
When I return from hiking, I typically enjoy a cup of coffee. After grocery shopping, I often crave bubble tea. However, I find it inconvenient to stop and use a mobile app as it distracts me while driving, and I don’t want to risk getting a ticket. That’s when the idea of creating an app specifically for ordering food on the car’s navigation screen dawned on me. With this app, there would be no need to interrupt the drive by using the phone; everything could be conveniently done through the car’s navigation system.
After considering this change, I came up with an idea for letting drivers order food while on the road. I specifically thought of implementing this feature on Tesla’s touchscreen because the infotainment system is both reliable and advanced. Many drivers primarily use their car’s navigation system for directions and to estimate travel time. By adding a food ordering feature to the car’s screen, we could provide a convenient option for drivers to order food without distractions. This concept could be applied to any car with a navigation system, not just limited to Tesla.
User Research – What people want and why they want it?
I conducted phone interviews with my friends and relatives, dividing them into three small groups to better understand their needs and current situations. Here are the three groups and some key findings from the research:
Group 1: Working professionals commuting to work on weekdays – They expressed a desire to easily and quickly order their favorite meals while driving to work. They wanted to avoid the hassle of making card payments at the store and also wished to know the estimated pick-up time from the restaurant.
Group 2: Students commuting to school – They were looking for a convenient and safe way to order food while driving to school. They specifically mentioned the desire to use voice commands to place their food orders.
Group 3: Individuals who enjoy driving around the city – They were interested in having access to a recommended list of nearby restaurants while driving. They also wanted the ability to view menus on their car’s navigation system and choose their preferred pick-up time directly from the car’s screen.
The Process of E Thru’s Product Design
Site Map
Wireframes Flow
UI Elements
I chose blue and orange as the primary colors and used red as an accent color. The E Thru logo has a gradient color scheme that goes from red to violet, and I ensured it looked balanced on the main screen. The icons were designed with a single expressive line to keep the layout simple and clean.
Start Screen
The main aim of the app is to provide a simple and safe experience for drivers. Safety is the top priority, and the design approach differs from that of a regular mobile app. With this in mind, my design philosophy focuses on simplicity and usability. To achieve this, I have included four large and straightforward icons on the app’s start screen.
Search Screen
On the search screen, you’ll find nearby restaurants displayed. If you prefer, you can use voice commands to search for specific keywords. The app also suggests the fastest, most popular, and recommended places. By clicking a button, you can view the available options based on your current location.
Restaurant Main Screen
The main screen has three menus: Overview, Menu, and Directions. From the Overview screen, users can access the restaurant’s address, opening hours, and phone number. The Menu button allows users to view the restaurant’s menu and place orders directly from there. The Map feature enables users to see their car’s location and the distance between their current location and the restaurant.
Overview Screen
Users can view the address and estimated drive time from their current location. They can also see restaurant ratings from other customers. Moreover, the app allows users to make direct calls to the restaurant with just one click within the app.
Menu Screen
Customers have the option to browse the restaurant’s menu on a spacious screen, select items, and view them in detail. In addition, customers can conveniently save their payment information within the app for quick and easy checkout with just a few clicks.
Directions
Order Process
Users can effortlessly place orders with just a few clicks using this app. They have the convenience of browsing the menu directly on the app’s screen. Once the checkout process is complete, the app not only offers directions to the restaurant but also provides an estimated preparation time for the food. This streamlined and user-friendly process eliminates the need for users to switch between their phone or computer to select items and access restaurant directions.
1. Choose the menu
This app allows users to browse and order food from the menu directly on their car screen. They can effortlessly select items and make modifications such as adding or removing items, all within the same screen. The price of each item is also conveniently displayed for users to see.
2. Check out process
Users have the option to securely save their payment information in the ‘My Account’ menu of the app. This feature allows for a seamless checkout experience, as users can complete their orders with just one click, without the need to enter their payment information every time they place an order.
3. Order Complete
Once the user receives the order confirmation, the app immediately provides directions to the designated place. It displays the estimated travel time to reach the destination and also informs the user about the estimated time of order readiness. This convenient feature eliminates the need for users to enter the address separately, ensuring a seamless and efficient ordering experience.
