Figma User Research Product Flow Information Architecture Wireframing Mood board Visual Design
3 Weeks
ZOOX Autonomous Vehicle Interface Design
This is a class assignment for ENP166: Computer Interface Design
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.
Zoox is a California based autonomous vehicle company that wants to completely reimagine the ground transportation systems. Through producing completely self-driving electric vehicles, they want to lead the mobility as a service industry into the future.
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 people who frequently use ride-share services about the features they desire from an autonomous ride-share experience.
“How does the car have no steering wheel at all? What if you need to take over?”
Interview Insights
Through conversations, I found that these users are skeptical of how autonomous vehicles function, and are doubtful of their ability to keep the user safe.
I realized that I need to make this a key principle behind my designs:
To make people trust the system!
Affinity Mapping
Using the features I generated from the user interviews, I performed Affinity Mapping to have a better picture for the system layout.
Ideate
Distilling ideas
Using the features I generated from the user interviews, I performed Affinity Mapping to have a better picture for the system layout
Information Architecture
With the features finalized, I wanted to visualize the Information Architecture of the UI to make the design process easier, so I created a Product Flow Diagram.
Design
Low-Fidelity Wireframes
While discussing with my peers in class about possible features to be included in the designs, a lot of them leaned towards an entertainment heavy system with the ability to play videos.
However, after talking to the potential users, non of them even brought up entertainment as a possibility, probably because of the unknown nature of a fully autonomous vehicle.
Moodboard
I created a more dark themed moodboard as inspired by Zoox’s website, which featured a dark mode design with neon colors. I decided to not include the neon in my moodboard immediately because I feared it would hinder readability and accessibility.
Final Designs
Safety Prompt Page
Safety Prompt Page 2
Safety Prompt Page
A main adjustment I made to the trip confirmation page lies in the fact that the user is no longer required to swipe to confirm their ride. I changed this so the gesture of scanning a QR code would act as a two factor authenticator to make sure the correct account holder is entering the ride.
I also wanted to make important elements highlighted with color to create hierarchy and consistency in the UI. I adopted this throughout the rest of the screens as well.
Home Page
The home screen is the screen I modified the most from the wireframes, which is rightfully so, because I wanted this page to be the dashboard of all things in the system. A major change I made was a switch from a profile button, to have the user’s profile picture displayed as a subtle reminder that they are the correct user. I also modified the sizing of icons to make the thermostat stand out, as well as modify the camera icon.
I made the destination of the trip always displayed on all screens of the interface to maintain the visibility of system status.
Something I struggled with was implementing the neon colors seen on the Zoox website. I liked how it added to the brand image, but didn’t know the best way to add it in without dimishing visibility. I decided to add it to certain elements of the UI such as the seat belt, and the voice control button as a pop of color to add personality.
Trip Update Page
Window Control Button
Points of Interest Page
Here’s another page I modified a good amount, a design change I made was introducing a stacking box layout inspired by my moodboard, this helped create hierarchy on the information boxes and interactive buttons. This choice also makes the designs adaptive, and can scale depending on the size of the description.
I also added a photo section for the point of interest so the page feels more dynamic, and also establishes footprints for the greater zoox user community!
Final Prototype
Next Steps
As this project’s scope was limited due to it being a class project, I was not able to conduct user testing to refine my final designs. In the future, I would conduct testing, then modify the screens. I would then create additional screens to create a functional prototype, and repeat the process.
After the designs are completed, I would collaborate with a programmer to develop the app.
What I Learned
Prioritizing User Needs
I think one of the biggest takeaways of this project was the importance of finding out what the users actually want and need. Talking to the users helped me stay grounded on my goal of establishing trust in the system.
Visual Design
I practiced consistent visual design, which significantly elevated the usability of the designs. I particularly thought the blue highlighting was crucial
Big Picture Focus
I enjoyed how this project required me to research a lot into a field I was unfamiliar with, and helped me understand the workings of autonomous vehicles, and also envision how my product can be applied to different scenarios in the future.
Embrace Criticism
Although this was a solo project, I talked to my fellow classmates about getting feedback, which definitely overall made my designs better. I think it’s daunting especially as a young designer to put your work out there to be judged and criticised, but what doesn’t kill you makes you stronger, right?
.png)
.png)
