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)
Uber's rental program connects drivers with rental vehicles to bring more earning opportunities to more drivers.
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
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?
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
Rentals: Available Later
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 Manager, Product Designer/Mentor, Product Design Intern (Me)
Product Manager, UX Researcher, Content Strategist, Software Engineer
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.
Redesign the vehicles screen to maximize info while minimizing effort/interactions.
Inspect the current driver app
Analyze how other products display status/availability
Heuristic Analysis of existing solution
Competitive Analysis of Contract Management Products as contracts go through stages of pending, signed, rejected, etc.
A combination of icons, colors, and text can effectively show status.
Sorting items based on status can make items easier to find.
Using Uber's well-established design system, I was able to iterate quickly through multiple designs with weekly critique from stakeholders.
Categorizing by Availability
UI System Update
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
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.
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.