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)

Screen Shot 2019-12-17 at 12.05.18 PM.pn
 
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

Previous Solution.png

Vehicle Statuses

Vehicle Card

Previous Vehicle Card.png

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

Screen Shot 2019-12-16 at 7.04.49 PM.png

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

  1. can understand vehicle availabilities and

  2. 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

Vehicle Card Component

Example States

Rentals: Available Later

Available Sep 20.png

Active

Active.png

Available

Unavailable

Update documents.png

Updated Vehicles Page

Screen Shot 2019-12-17 at 12.05.18 PM.pn

Using "›" icons, vehicle cards also indicate if there are relevant documents to view.

Therefore, drivers can easily access their documents from the vehicles page.

Vehicle Card to Rental Terms.gif

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.

black car.png
 
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

  1. A combination of icons, colors, and text can effectively show status.

  2. 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

Android Mock Up.png
1 - Existing Vehicles Hub.png
Android Mock Up.png
Android Mock Up.png

1st Iteration

2nd Iteration

3rd Iteration

4th Iteration

4 - Radio Buttons, Colored Text, and Ico
Android Mock Up.png
2 - Radio Buttons & Icons
Android Mock Up.png
3 - Categorizing by availability.png

​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.

Mobile-Google-Nexus-PNG.png

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.

Android Mock Up.png
Screen Shot 2019-12-17 at 12.05.18 PM.pn
Android Mock Up.png
Screen Shot 2019-12-17 at 12.05.18 PM.pn
black car.png
 

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.

IMG_20190913_204005_918 (1).jpg

Thanks for reading, feel free to check out my other projects!