Uber - Design systems

Redesigning the file upload experience

Overview

My role

Product designer, design systems

Team

Beatrix Lee, Product Designer from Safety and Insurance

Timeline

~4 months

Deliverables

Figma component, documentation

Summary

I worked with cross functional partners to research and re-design the file upload component to increase platform coverage, functionality, and comprehension in the component.

Method

This project follows the established component creation and lifecycle process, established by the design systems team, to ensure a high bar of quality is maintained across every project.

Competitive research

External audit

We researched the current best practices for file uploaders across leading design systems and noticed these two features:

File previews enhance the upload experience and reduce user error.
Status indicators on individual files improve the waiting experience and decrease user drop-off rate.

Internal audit

I looked into the file upload experience across the Uber ecosystem and there were 3 major gaps in the component.

Inconsistent visual representation of files across the Uber ecosystem.
Inaccessible feature in the mobile platform.
More education is needed for better adoption.

Insights and findings

Structure

Increase clarity on the layout, usage, and behavior

Visual design

Align with components that are in the same family

Flexibility

Support a variety of file formats and media uploads

Platform coverage

Support mobile platform experiences

Explore

Revision 1

These are the top 3 explorations from the first attempt

Pros

Decreases user error

Cons

Visual inconsistencies

Missing functionality

Unsupported file formats

Color accessibility concerns

Pros

Visually aligns with modal sheets

Cons

Only for a very specific use case

Pros

Compact and conserves vertical space.

Cons

Discrepancies between the layout and color between adjacent components

Feedback

File previews necessary?

File previews can vary widely depending on different use cases. I had to reconsider if this is a feature that can be universal or would require customization at the upper level.

Is this design flexible?

Review the flexibility of accepting different file formats and conduct further research on the importance of including a top level visual indicator for different file formats

Is it visually consistent

with the design system?

Stress test the component in different scenarios and create visual consistency between components with similar functionalities.

Iteration

Revision 2

Too many features

There were 126 variants with complex component properties

Too much space

Consider a configuration for single file upload that requires conserving vertical space.

Not accessible

The loading state in media file items are too small.

Usability test

Revision 3

5 participants

Identified key component users to share designs with across the organization including Safety & Insurance, Customer Obsession, Earner, and Membership.

5 participants

Identified key component users to share designs with across the organization including Safety & Insurance, Customer Obsession, Earner, and Membership.

5 participants

Identified key component users to share designs with across the organization including Safety & Insurance, Customer Obsession, Earner, and Membership.

5 participants

Identified key component users to share designs with across the organization including Safety & Insurance, Customer Obsession, Earner, and Membership.

Goal

Uncover how designers would use the file upload component

Identify how designers approach and use this component

Goal

Uncover how designers would use the file upload component

Identify how designers approach and use this component

Goal

Uncover how designers would use the file upload component

Identify how designers approach and use this component

Goal

Uncover how designers would use the file upload component

Identify how designers approach and use this component

Method

We conducted moderated remote usability tests. Participants were given two activities where they replicated a web screen and a mobile screen utilizing the new file upload component in real time. We wrapped up the session with a couple questions for any general feedback.

Method

Detail findings

The results

Due to limitations in creating grids in a Figma component and creating a consistent user experience with component composability with adjacent components like tiles and list items, I decided to separate the component into 3 parts. Since users are already familiar with this type of layout, it is a seamless addition to the design system.

Key takeaways

Eyes on the prize

One of the biggest learnings is to remember to consistently reference the success criteria as this the guide that will help make critical design decisions and help to keep moving forward.

Eyes on the prize

One of the biggest learnings is to remember to consistently reference the success criteria as this the guide that will help make critical design decisions and help to keep moving forward.

Eyes on the prize

One of the biggest learnings is to remember to consistently reference the success criteria as this the guide that will help make critical design decisions and help to keep moving forward.

Eyes on the prize

One of the biggest learnings is to remember to consistently reference the success criteria as this the guide that will help make critical design decisions and help to keep moving forward.

Use all your resources

There are so many resources and topic experts that are available to us and to reach out to get their insight to increase quality and efficiency in my designs.

Use all your resources

There are so many resources and topic experts that are available to us and to reach out to get their insight to increase quality and efficiency in my designs.

Use all your resources

There are so many resources and topic experts that are available to us and to reach out to get their insight to increase quality and efficiency in my designs.

Use all your resources

There are so many resources and topic experts that are available to us and to reach out to get their insight to increase quality and efficiency in my designs.

The Results

Next Project