ZOOX is reinventing personal transportation and making the future safer, cleaner, and more enjoyable for everyone. The service ZOOX provides is on-demand autonomous ride-hailing. Although they have a well developed online presence and brand identity and website, we were tasked with creating an accompanying interface for the in-car experience. This design would be displayed in tablets in the back of the seats, for users to control the car and personalize their riding experience with ZOOX.

ZOOX

Overview

The visual design language is based off of the current ZOOX website, which follows current design trends for futuristic looking products. When people think of autonomous vehicles or self-driving cars, they immediately think of the future and advanced technology, so the moodboard leans into this. It relies on dark backgrounds, which is also best for the in-ride experience because a super bright white screen in front of users for the entire ride is unpleasant. This design leans on purples, blues, and greens, and glowing accents.


Core Features List

  1. Welcome screen - features a welcome message, a button to confirm the name of the rider before the ride begins, a button to confirm the destination, and a map of the ride.

  2. Climate control - enables riders to change the temperature and level of air conditioning and heating and control seat heaters. 

  3. Declare an Emergency - allows users to declare an emergency to either 911 or their emergency contact or ZOOX emergency hotline, or multiple of the above.

  4. Play/control music - riders can play music from the options loaded into the vehicle or they can login to/connect their own accounts via bluetooth to play from their own libraries and streaming services, and control volume, bass and treble and other levels, and play, pause, repeat, and skip songs.

  5. Entertainment - a sample of pre-loaded movies and television shows and games, similar to that of an airplane, or login to select streaming services that they have or to airplay/cast from their phone or personal device. 

  6. Trip overview/map - users can follow a map as they drive, similar to Uber or Waze.

  7. Destination changes - Changes to the destination/route can be made through the trip overview/map screen.

  8. Search - users can search for a feature or key word and the interface will bring up options that are related, similar to the spotlight feature on a Mac.

  9. Operational instructions - provides safety information (like emergency button location) and a walk through of the interface.

  10. Vehicle details - riders can display car details like total distance covered on this trip, total mileage overall, charge, etc.

  11. Assistance - riders can video, audio, or type to chat with a ZOOX employee. 

  12. Tour - riders can follow along with their trip similar to the map page, and can learn about landmarks and click on pop-ups to learn more.

  13. Adjust display settings - to adjust basic features of the interface, like brightness and volume, and toggle between light and dark modes.

  14. Display trip progress - to view the general overview of their trip including time remaining, distance remaining, etc.

  15. About/Why ZOOX - informational page for users to learn about the benefits or ZOOX and why they should continue to use the service. 

  16. Window controls - to control the tint of the windows/shades and open/close them (depending on the capabilities of the vehicle).

  17. ZOOX account - Enables riders to edit their account in the vehicle if desired.


Design

Initial Wireframes

The welcome screen features the ZOOX logo, ZOOX car, a personalized welcome message for the rider, the destination requested, and a button to confirm and begin the ride. We decided to keep this screen simple for clarity, ease of use, and introduction to the interface and user experience.


This main screen features a map and the ride overview. The small car on the map will follow the teal path and it will move as the car completes the route. The rider can always view and change their destination and view the time and distance remaining in their ride and their estimated arrival time. There is an SOS emergency button that riders can press at any time. On the top right is basic information that we feel users would expect to find in a regular car, such as the current time, temperature outside, and direction traveling. The menu options are music, entertainment, tour mode, vehicle info, account, and about ZOOX. The entertainment menu is modeled off of popular streaming services, tour mode opens a larger map view with a real time view outside of the car and pop up windows for landmarks, account allow riders to access or edit their ZOOX account, the vehicle information will provide specific information about the vehicle they are in such as total distance traveled, number of trips completed, current charged status, etc, and the about ZOOX menu will enable riders to learn more about the company as they would on the website. The bottom menu provides basic functionalities and controls such as the ability to search, a help menu for customer assistance, climate, volume, and brightness controls.


Popup menu that will appear when a user clicks on the button to change their destination. They can then search for a new destination and it will locate it on the map. They can then confirm the new destination, the ride will change, and it will return to the main menu.


This screen shows the main climate controls for the vehicle. Riders can control all aspects that they would expect to be able to control in a regular vehicle. It features a ZOOX car graphic from above and icon based controls for the fan speed, temperature, airflow, and seat heat. This screen has the same main layout as the previous with the heading and information at the top for consistency throughout the experience. In the bar below the heading on this screen riders can toggle between main climate controls, window controls such as rolling up and down, tinting, and shades, and lighting within the vehicle such as general overhead, directional reading light, etc.


The entertainment menu features the current outdoor basic information in the top right as well, followed by a summary of the trip status so that users can see this on all pages. The SOS button is also featured on all pages. Below that, is a menu of different options for riders to select where to view entertainment options. This screen shows the ZOOX selections page, which are preloaded and always available entertainment options. To the right is the same menu that is found at the bottom of the home page, just in a vertical format because this screen lends itself much better to that. This menu also features a home option to enable riders to easily navigate back to the home page if finished with entertainment.


To develop an in-ride experience for a tablet sized screen of an autonomous vehicle ride hailing service.

The Challenge

A small scope solo project to establish essential features for riders and design a beneficial in-ride experience, in line with brand standards.

My Role

Moodboard

Product Flow

Prototype

At a Glance

Key Skills & Lessons

Product Flow, Core Features Determination, Wire-framing, Moodboard, Visual Design, Interactive Prototype