Vehicle Card Redesign
Redesigning Components to Communicate Vehicle Info
Contributions UI Component & Vehicles Page Redesign
Outcome Launched Fall 2019 as part of the Uber Rental Program
Team Vehicle Team
Role Product Design Intern
Tools Figma, Sketch
Duration 12 weeks (SUM2019)
Overview
Business Mission
Uber's rental program connects drivers with rental vehicles to bring more earning opportunities to more drivers.
Project Context
During my internship, the driver app's rental feature was quite new and needed updates to support these newly added rental vehicles.
Problem 1: Missing Rental Vehicle Status
Existing Driver App's Vehicles Screen
Vehicle Statuses
Vehicle Card
Vehicles for Uber are listed as active, inactive, or unavailable to drive.
Rental vehicles however, have a unique status of "available later" (while drivers wait to pick them up) that the existing UI could not display.
Problem 2: Inconvenient Documents Location
Vehicles vs. Documents Screen
Rental vehicles have documents (rental terms) that are inconvenient to find as they were not displayed within the vehicles screen.
Because the existing solution separates vehicles and documents into different tabs, drivers need to navigate through multiple screens before finding the documents they need.
How might we redesign the vehicle cards to include rentals so that drivers
-
can understand vehicle availabilities and
-
easily access vehicle documents?
Solution
I updated the vehicle card component to support a variety of vehicle statuses, including rentals that will be available at a later date.
Updated Vehicle Card
Vehicle Card Template
Example States
Rentals: Available Later
Active
Available
Unavailable
Updated Vehicles Page
Using "›" icons, vehicle cards also indicate if there are relevant documents to view.
Therefore, drivers can easily access their documents from the vehicles page.
Contributions to the Team
I took ownership of this redesign as I worked independently to analyze current design systems, present iterations for critique, and discuss implementation with engineers.
Design Team
Cross-Functional Team
Design Manager, Product Designer/Mentor, Product Design Intern (Me)
Product Manager, UX Researcher, Content Strategist, Software Engineer
Impact
These vehicle components were launched in Brazil in Fall 2019, as part of Uber's overall rental product.
Design Process
Defining the Problem & Task
The existing UI needed an update to
-
support/display rental vehicles.
-
make vehicle documents easier to find.
-
reflect Uber's updated design system.
Design Opportunity/Principle
Redesign the vehicles screen to maximize info while minimizing effort/interactions.
Research
Goals
-
Inspect the current driver app
-
Analyze how other products display status/availability
Methods
-
Heuristic Analysis of existing solution
-
Competitive Analysis of Contract Management Products as contracts go through stages of pending, signed, rejected, etc.
Insights
-
A combination of icons, colors, and text can effectively show status.
-
Sorting items based on status can make items easier to find.
Component Redesign
Using Uber's well-established design system, I was able to iterate quickly through multiple designs with weekly critique from stakeholders.
Existing UI
1st Iteration
2nd Iteration
3rd Iteration
4th Iteration
Icons
Categorizing by Availability
Avatar Icons
Radio Buttons
Colored Text
UI System Update
Colored Icons
3 lined vehicle card
The final solution uses sections, icons, colors, and text for optimal scanning.
Icons make the UI more accessible for colorblind users.
Red-Green Colorblind Filter On
Without Icons
With Icons
With a majority of Uber drivers in Brazil being male and colorblindness affecting 1 in 12 men, designing for visual accessibility is crucial.
Instead of relying solely on text to understand vehicle availability, icons help users scan for vehicle status faster.
Reflection
Challenges: How do I design a new component?
When I first started designing, I struggled with using Uber's Figma library as I was not used to the rigidity of design components. Over time, I grew to appreciate its organization as I was able to iterate more efficiently. Because Uber has a well-established visual system, as I was designing components, I ensured my design choices were well-rooted in the overall system. I collaborated with other designers and engineers to verify that my solution fit into the existing ecosystem while being easily scalable.
Takeaways: Cross-functional collaboration is key to success.
My experience at Uber helped me grow not just as a designer, but also as a teammate. Prior to this internship, I had little experience collaborating with cross-functional teams but I eventually learned how to work with engineers, PMs, content strategists, and researchers and developed a great appreciation for their jobs and what they dedicate to the final product. I am thankful to have learned how to effectively communicate with cross-functional teams and balance business priorities with design.
.jpg)
