Figma User Research Product Flow Information Architecture Wireframing Mood Board Visual Design
Design Methods
This is an individual class assignment for ENP166: Computer Interface Design Project time frame: 2 weeks This project required me to design for the in-ride experience for ZOOX autonomous vehicles, which will feature a 3024 x 1964 pixel LED-backlit, touch screen display.
Context Overview
Research
The premise of a ZOOX ride experience could be compared with both that of a self-driving car, as well as an Uber ride. In order to identify the most relevant features for such an experience, I interviewed 5 college students who frequently use ride-share services about the features they desire from an autonomous ride-share experience.
-Trip progress display - Car speed display - Cancel trip - Connect Spotify to car speaker, controlling music - Change temperature - Use voice control - Car camera view - Window controls - Points of interest display
After splitting the features generated from user interviews into categories, I distilled a list of features I would include in the UI.
Ideate
Information Architecture
With the features finalized, I wanted to finalize the Information Architecture of the UI to make the design process easier, so I created a Product Flow Diagram.
Low-Fidelity Wireframes
With that in mind, I decided to move in a direction that is more function heavy and less entertainment oriented. And now, it’s time to build!
ZOOX’s interface might be the norm of all vehicles in the future!
I brained stormed different ways in which the ZOOX UI could be brought to life, but realized something:
Safety Prompt Page 1
Safety Prompt Page 2
Ride Detail Confirmation Page
Home Page
Traffic Update Pop-Up
Window Controls
Points of Interest Page
Moodboard 1
After establishing the low-fidelity layouts, I wanted to finalize the visual direction the UI would take. I created two distinct moodboards.
Moodboards
Moodboard 2
The challenge is: "How can we subtly, but distinctively integrate this brand theme?”
ZOOX’s website has a distinct dark mode visual design that conjures the image of a slick Mercedes-Benz advert. I wanted to capture that, however, Zoox also distinctly includes a neon sheen on parts of the site. It is a distinct brand image and I deemed that important.
Aside on the color palette
I decided to move forward with the darkmode moodboard for my final designs, as I felt it was more coherent with Zoox’s brand.
Zoox is an amazing service, and I believe people should spend most of it enjoying the space and scenery, as well as the convenience provided by an autonomous vehicle. Thus I wanted my designs to feel simplistic and easy to access, to not detract from the physical experience.
Final Designs
Safety Prompt Page 1
Safety Prompt Page 2
Trip Confirmation Page
Home Page
Trip Update Notification
Window Controls
Points of Interest Page
I focused on creating spotlights with the color blue to increase visual interest as well as highlight dynamic features. I initially struggled with integrating the neon color mesh, as it detracted from visibility in icons and did not fit well with the map. My final solution was to introduce glimpses of the color in areas where legibility would not be affected, and it would still be noticeable to contribute to the brand identity.
Although this was not present on the moodboards, I took liberties and was inspired by thinking about the ZOOX user interface as a video game interface heads up display (HUD). Many games today include specialized UI for driving, and I felt an autonomous vehicles was a cutting edge field that could spawn brand new ways of thinking about vehicle UIs.
Future directions will be focused on prototyping and animating the experience, which will be added soon!
.png)
