ZOOX: In-ride Experience

Project Info: Sp22-ENP-0166-02-Computer Interface Design, Individual Class Project

Project Type: Conceptual UI design

Project Timeline: 4 weeks (March 2022)

Skills and Techniques: Ideation, Wireframing, Rapid Prototyping

OVERVIEW

Brief: Developing conceptual UI design for the in-ride experience for ZOOX autonomous vehicles in which the system with the full set of functional capabilities will be fully integrated into the car - able to control anything a driver could typically control.

Deliverables: Bulleted list of at least 10 functional capabilities, Product flow diagram, 4–5 wireframes illustrating meaningfully-different states of interaction, 2–3 moodboards, 4–5 mockups screens, 1-page design rationale, Basic interactive prototype covering primary navigation, 5-minute design presentation

Background: Zoox is a company headquartered in Foster City, California that provides on-demand autonomous ride-hailing through its autonomous vehicles.

PROCESS

Stage 1: Discover

Initial Desk Research: Autonomous Vehicles

Because I'm not familiar with self-driving cars or Zoox as a company, I did some quick research to understand the user experience of riding in a self-driving car. I watched videos of people riding Zoox vehicles, as well as read stories of other people's experiences and articles about various companies that provide similar services, including Uber, which seized its operations. I looked at UI designs of other companies for inspiration and further identified some recurring themes tied to user experience and noted down user expectations. Because riding in a self-driving car is a new and unfamiliar concept to most riders, they may not feel confident and safe enough, it is very important to provide as transparent experience as possible to install safety, trust, and confidence to acclimate people to autonomous driving.

Key Points

Transparent Experience
Safety, Trust and Confidence
Sense of Control

About Zoox & Users

I did some more specific research on Zoom as a company/brand and identified key values, vision and mission of Zoox that are essential to its brand identity. I realized that Zoox places great emphasis on Safety, which is communicated many times in its website and other online sources, also exemplified by the number of safety innovations and proactive measures taken in vehicles. Keeping these in mind helped me and inspired me when ideating for the product flow, mood boards, and further the design of the UI.

Autonomous, purpose-built robotaxi
- “The future is for riders”
- “Designed for riders, not drivers” —> rider(user)-focused approach
Vision: Reinventing personal transportation to life — making the future safer, cleaner, and more enjoyable for everyone.
- combining AI, robotics, vehicle design, and sustainable energy
- “build a new kind of transportation”
- “reimagines the future of mobility”

Values:
- integrity, authenticity, and unity
- mission-driven and inquisitive
Emphasis on Sustainability
- zero-emissions vehicles (all-electric)
- part of The Climate Pledge

Emphasis on Safety
- more than 100 proprietary safety innovations and proactive measures
- “Safety first, for you and everyone else”

Interior: “Mobility Designed Around You”
- “Check your ETA, location, and route any time — and set the music and air exactly the way you want them."
High-technology
- Full-stack autonomous vehicle

Pioneering the autonomous vehicle industry and providing mobility-as-a-service, Zoox is an innovative company that creates social impact and aims to “build a new kind of transportation” that is safer, cleaner, and more enjoyable.

Note: Information above is obtained from the Zoox website, from this brochure and this press release

Branding: Website Style Elements

Visiting the current website of Zoox, I inspected and identified some style elements including typography and colors that are part of the brand identity. I used Google Chrome's extension CSS Peeper to pinpoint exact shades and fonts. There is a wide range of colors used throughout the website, as shown on the right, however, some main colors stood out like the bright green used for both the logo and call to action buttons. The website has a dark UI theme and a futuristic look with purple, pink, and blue accents and gradients. The font Planer is used consistently for headers while Rogan is used for paragraphs.

Stage 2: Define & Ideate

Product Flow Diagram

Keeping my research on self-driving cars and Zoox as a brand in mind, I came up with a long list of functional capabilities for a system that will be fully integrated into the car where the users are able to control anything a driver could typically control in a car. Before starting the ride, I made sure that trip details and important safety considerations are communicated well to the users. I further organized and categorized information based on navigation. Looking at infotainment systems of other planes and cars was helpful and a source of inspiration to make the design more intuitive. I wanted to make sure that the users have a sense of control and a personalized experience where they can view and adjust car settings and information, connect their devices, and access various entertainment platforms.

Functional Capabilities

Zoox places great value on customer safety, comfort, and satisfaction, and providing a transparent experience to the users for an in-ride experience is essential to make them feel safe and confident, and install trust. Features like a real-time map view would best reflect a real-life car experience as users can view the outside environment as if they are the driver. Users/riders would be provided with enough information about the trip supported by the map as well as speed details. By this way, they would know where exactly they are and keep track of trip details visually, which is assuring and comfortable. Where the vehicle is turning and headed towards would also be shown like on a navigation app to maximize transparency and to provide real-time feedback to the riders. This would provide a reassuring indication of what the car is seeing, thinking, and planning.

The “Stop the Vehicle” button would give users the option to stop the vehicle and pull aside whenever they want to, if they feel uncomfortable, scared or there is an emergency situation. Another safety precaution would be the inclusion of emergency buttons that are easily accessible across all screens for convenience. Users would also be given the option to edit their display preferences (for example light vs. dark mode), and edit trip details like changing route, adding a stop, and other car settings like the climate inside the car. The voice assistant feature would allow the users to interact with the product more easily, which is especially useful for people with disabilities. The vehicle information screen would display technical details about the vehicle and Zoox as a company, adding to the idea of transparency and reminding the users of a real driving experience.

Mid-Fidelity Wireframes

I further translated my ideas into wireframes that include the list of functional capabilities mentioned above, based on the product flow dagram. The design is modern, yet simple and easy to use. I made sure that the users are able to adjust settings based on personal preference and have a sense of control over their ride experience, with increased comfort and satisfaction. The navigation bar is placed on the left-hand side is simple and easy to navigate, occupying less space than a horizontal navigation bar.

Constant Elements Across Screens

Emergency buttons at the bottom right corner (call, report an issue and help) are all easily and accessible across all pages to ensure safety and quick necessary action once the ride begins. The information at the top part of the screen is kept consistent across all screens which includes date, time, weather and shortcut icons for CarPlay, Voice Assistant, Bluetooth, switching between dark vs. light mode and the information on battery. This information and controls concerning the inside and outside environment of the vehicle are helpful for the in-ride experience of the users. Another thing that is kept constant is the bar at the top and trip-relevant information. No matter which screen the users are on, they are able to visually view how much of the trip is completed, how many miles are left, and when the arrival time is. Without having to refer back to the map on the home screen, users are reminded of trip-relevant information, which, again, provides a transparent experience and provides quick feedback to the users.

The welcome screen is kept simple and straightforward, asking for identity verification to ensure the passenger is at the correct vehicle before beginning the ride. Users type in the 4-digit number they see on the mobile app, which is quick and efficient.

This screen displays important trip details, including location and the time. Users are able to see a simple visual overview on the map as well as edit trip details (if they change their mind about the destination or the information is somehow wrong) before proceeding to confirm. This step double-checks the trip details with the users.

The final screen before beginning the ride displays safety instructions in detail since vehicle safety is the most important consideration in a ride experience, especially in an autonomous vehicle and wearing a safety belt is required by the law. Zoox as a company values safety greatly and the elements of a safe ride experience is emphasized and communicated clearly to passengers in an easy-to-digest way with visual icons. Passengers are also informed on what to expect in their ride experience.

As the ride begins, the users are able to track their trip details visually and switch between a real-time view and a map view. On the right side, default and basic information like the weather, the music and the speed of the vehicle is displayed. Information on the trip details is communicated effectively to the users at the top bar with destination, time, miles left and how much of the trip is completed. Users can also see navigation-related details like directions and street names.

As users connect their smart phone devices to the Zoox system through Bluetooth, they can make phone calls, send text messages and emails to their own contacts as well as have access to various social media platforms. If users want more application options on a bigger screen like shopping apps, they can opt in to enable wireless CarPlay and connect to the Zoox infotainment system with increased flexibility.

In-ride entertainment & media system offers various opportunities in audio and visual form. Users can listen to music on the radio or connect their phones and access their own music. Users can also choose and watch free movies and TV programs from the Zoox library and access to podcasts and audiobooks. Simple and interactive games are also offered to entertain users and keep them engaged, like the ones in planes. Access to various news outlets and the internet is also provided for users.

This screen features car controls and settings users can adjust to their own personal preference, ranging from typical interior car settings to display and interface settings. Users can also view their Zoox account profile, learn more about safety measures and change the language.

Important and technical vehicle-related information is displayed to users if they want to view as if they are the driver, for a transparent experience. PRND gear selector shows which mode the vehicle is on and provides visual feedback to riders. Emissions and “About Zoox” sections allow the users to learn more about the policies, vision and mission of Zoox in the area of sustainability (which Zoox places great value), autonomy and other vehicle-related areas.

Moodboards

I experimented with the color palette, fonts, and style and came up with two different mood boards, which are attached below. Out of those two, the “Futuristic” mood board was chosen to proceed forward with the design. The design has a dark theme, aligning well with the mood. The colors and overall style fit the brand identity, mission, and vision of Zoox better and are consistent with the existing Zoox website. Zoox, with its innovative autonomous vehicles and ride-hailing service, aims to “build a new kind of transportation” that is safer, cleaner, and more enjoyable. The high-quality visuals, bright colors, and interactive experience within the website fit the futuristic and dynamic look and feel.

Stage 3: Develop

Mock-Ups

Retaining Brand Identity

The UI design for the in-ride experience for ZOOX autonomous vehicles is Zoox-branded and has a futuristic theme and dynamic feel, aligning with the existing website of Zoox which has a dark UI design. Using a dark theme (low-light UI) as an aesthetic choice creates a striking and dramatic look, and tends to express power and sophistication. This aligns with and retains the brand identity of Zoox as a high-tech company emphasizing its “groundbreaking technology” engineered in-house and integrated design. The design also has a tech and design look with the dark theme using a dark grey background (not true black to not be hard on the eye) and flashier colors that stand out and high-quality original visuals downloaded from the website.

Purple, pink, and blue accents were borrowed from the website and used to highlight visual icons. A gradient of those colors is used in controls and sliders in a visually aesthetic way. Glowing icons with highlights and glare effects add to the futuristic look. A bright green shade is used in call-to-action buttons similar to the website and to give visual feedback on user choices (i.e. map view vs. real-time view, navigation bar icons) consistently throughout the design to draw the attention of the users. All buttons, icons, and other UI elements have round edges, adding a softer feel, also consistent with the ones on the current website. Finally, the main font styles (Planer and Rogan) with round-edged letters are also borrowed from the website to maintain consistency in style. Roboto font is also used for simplicity. The font styles with a clean, sans serif aesthetic without decorative elements give a minimal and modern feel and also achieve high readability, making the design more accessible.

Design Considerations & Changes

In terms of the use of colors, white text on top of the dark background is used to achieve strong contrast and high legibility. The saturation level of the pinkish-purple tone is altered in the final mockups and made more desaturated (lighter tone) to provide more flexibility and usability in a dark theme. Google’s Material Design dark theme recommends the use of desaturated colors to reduce visual vibrations against a dark background and to avoid high saturated colors which may induce eye strain. Another minor alteration in final mockups was to reduce the opacity of white used in text to 87% so that it is not too bright to disturb the eye, which is also recommend by Google for high-emphasis text. A saturated green shade as a brand color to maintain brand identity is consistently used in call-to-action buttons similar to the website and to help user choices stand out. Black text against green background achieves a significantly high contrast ratio, meeting the standard of at least 4.5:1 set by Web Content Accessibility Guidelines (WCAG) to ensure the design is accessible and comfortably legible for all users.

The passcode number pad is added to the welcome screen for convenience. This reduces the number of steps and communicates to users that they have to enter a 4-digit number code they receive on the app to begin the ride.

Emphasis is placed on fastening the seatbelt through the use of bright red color for text and the icon to attract more attention

A visual illustration for traffic lights is added on for both real-time and map views to communicate the real-life situation of the traffic lights. Small Zoox car icon is borrowed from the website and added to the trip progress bar at the top to make the design more aesthetic with the gradient. The background picture that demonstrates the real-time view is taken from a video shared by Zoox.

A navigation map is created using the tool Mapbox. Map visual is customized to fit the branding and the UI, using dark colors for the background, bright green for navigation indicator and location icons, and a purple-pink gradient for the vehicle path. Sound and compass elements and option to enlarge the map into full screen is also added.

A new screen that displays Trip Details and trip editing features is added. As the users click on the arrow on the right side and this trip menu expands upwards.

Climate Controls Screen is added as an example to demonstrate how to adjust one of car controls (climate). The moving bar has a gradient of purples, pinks and blues, consistent with the theme

Stage 4: Deliver

In the final stage of the project, I created a basic interactive prototype on Figma connecting the final mock-ups. To the right, is a screen capture of the prototype, demonstrating how potential users would interact with the user interface as part of their in-ride experience.

View Prototype on Figma

Reflection

Doing a hypothetical consulting design project has been interesting, especially for a real-life company like Zoox which specializes in the autonomous vehicles industry, an area I was not familiar with at all. I enjoyed learning about user experiences, although this was limited to online videos and articles due to the nature of the project, and then integrating the most important goals and expectations into the design. There were a lot of different factors to consider, with the essential consideration being providing a safe, transparent, and comfortable in-ride experience to users. It was challenging to include all the features and fit them into the UI design effectively in a way that is simple and easy to process for the users. I tried to balance out the potentially overwhelming visual design by using small rounded boxes for each feature/capability and by giving the user a choice to personalize their experience by playing with display settings like dark vs. light mode and making the map full screen. Furthermore, although it took more time and effort, I enjoyed sticking to visual design elements and maintaining the brand identity by including brand-related icons as well as designing a map and its elements. I liked to see how my project evolved every week, from the product flow diagram to mid and high-fidelity wireframes and finally the interactive prototype. Being able to interact with the final product, although on a basic level, was fun and a rewarding experience.