Drive Out

Drive Out changes on-the-go ordering by seamlessly integrating with the user's car screen & Siri. This app allows users to order food from restaurants directly through their car's entertainment system.

Timeline
2 weeks
Role
UX Design, UI Design
Tools
Figma
img

The Problem

The conventional methods of food ordering while on the go frequently entails distractions, such as using smartphones or other devices.

The Solution

Drive Out addresses the safety concerns and the convenience needs of drivers by offering an Apple CarPlay compatible app that utilizes Siri and voice control. The app allows users to order food directly from their car, eliminating the need for distracting smartphone usage while driving.

Initial Discovery

During the initial discovery phase, I began to create a design brief outlining the general requirements, product vision, challenges and constraints, brand principles and descriptors, and success metrics. This allowed me to get a good understanding of the app’s trajectory. I also focused on asking questions and recognizing different scenarios users could be in throughout the process of using the app. At first I was unsure if the app should be white labeled and used by individual restaurants or if there should be multiple restaurants on the app similar to Uber Eats or Door Dash. This was kept at the front of my discovery phase to see what users would actually prefer.

img

Personas

Digging deeper into the target audience, I created three personas that would use this app regularly. I learned their goals and challenges, which later helped me develop user stories that drove the features.

img

User Stories

Creating user stories for each persona allowed me to cater to each persona’s specific needs and wants. While each persona valued various specific features, they all wanted the following: diverse food options, a safe experience while driving, and to have convenient options based on location. This led me to explore the concept of having multiple restaurants on the app instead of it being a white label solution for only one restaurant at a time. This would allow the users to have a diverse set of options to pick from.

img

User Journeys

Based on the four main scenarios I recognized in the briefing, I created a user journey for each of them. This aided me in discovering critical decision points and screens that would be essential to their journeys.

img

Heuristic Evaluation

I took a few screenshots of Apple Carplay’s interface to take note of subtle ways they display information such as notification pop ups and navigation.

img

What I learned in the discovery phase

The optimal approach involves having multiple restaurants featured on a single application, rather than adopting a white-label strategy that allows individual restaurants to have their own separate apps. This strategy will enable users to discover new dining options based on their location. Additionally, the application's interface should be designed to be minimal and free of distractions. To further enhance the user experience, integrating voice assistance and Siri is recommended to facilitate a hands-off ordering experience.

Apple Carplay Visual Guidelines

In the design and development process, the emphasis is on prioritizing safety by designing with a focus on minimizing distractions and ensuring quick, easy interactions for drivers. There is also a strong emphasis on upholding a unified brand experience, aligning with Apple's design principles to create a cohesive look and feel. Clarity and simplicity are key, enhancing the overall user experience by recognizing the limited attention drivers can dedicate while on the road. It is important to guarantee readability at a glance, using legible fonts and appropriate text sizes. Finally, content and controls must be organized logically, considering the driving context and minimizing the need for excessive navigation.

Style Guide

img

Wireframes

img

High Fidelity

img

High Fidelity - Home

The main screen includes three key functions: Initiating a new order through Siri, exploring nearby restaurants, and checking the distance of those restaurants from your location.

img

High Fidelity - Siri

At the heart of this application is Siri, offering users important information within a conversational setting. Siri is well-informed about the user's current route, providing suggestions for restaurants and estimating the additional time it would take for a detour. In addition, Siri knows details about menus and caloric information.

img

High Fidelity - Ordering & Customization

While driving, drivers are restricted from directly viewing the menu; however, they can utilize Siri to inquire about menu items and customize their orders verbally. When the vehicle is parked, the menu becomes visible on the screen, allowing for manual customization of orders.

img

High Fidelity - Order Pickup

Upon submitting an order, whether through Siri or while the vehicle is parked, location services will be employed to determine the arrival at the restaurant. A popup on the screen will then prompt the user to select their preferred pickup method, accompanied by an order number.

img