Uber -

Design Systems

Uber -

Design Systems

Uber -

Design Systems

Uber -

Design Systems

Reimagining the file upload experience

Reimagining the file upload experience

Reimagining the file upload experience

Reimagining the file

upload experience

Overview

My role

Product designer, design systems

Product designer,
design systems

Collaborator

Trix, Product Designer, Safety and Insurance

Timeline

~4 months

Deliverables

Figma component, documentation

Summary

I collaborated with key component users (Safety & Insurance, Customer Obsession, Earner, and Membership) to identify edge cases, encouraged further iteration, and refinement of the component.

Method

I followed the component creation and lifecycle process, established by the design systems team, to ensure a high bar of quality is maintained throughout my project

Problem

Problem

Problem

Problem

The component lacks transparency and
functionality which leads to high customization
and low insertion rate from our designers.

The component lacks transparency and functionality which leads to high customization and low insertion rate from our designers.

The component lacks transparency and
functionality which leads to high customization
and low insertion rate from our designers.

The component lacks transparency
and functionality which leads to high customization and low insertion rate
from our designers.

Before

Before

Before

Before

After

After

After

After

Competitive research

What can we do better?

What can we do better?

What can we do better?

What can we do better?

External audit

External audit

External audit

External audit

I conducted an external audit including file uploaders from 9 design systems.

Internal audit

Internal audit

Internal audit

Internal audit

I reviewed the internal usage of file uploaders in the past 3 months with our data tracking tool.

I reviewed the internal usage of
file uploaders in the past 3 months with our data tracking tool.

I reviewed the internal usage of
file uploaders in the past 3 months with our data tracking tool.

  • Safety & Insurance

  • Earner

  • Uber for Business

  • Customer obsession

  • Merchant

  • Membership

Increase transparency

Increase transparency

Increase transparency

Increase transparency

External

File previews give users a glimpse of the uploaded content and allow them to confirm and validate it.

File previews give users a glimpse of the uploaded content and allow them to confirm and validate it.

File previews give users a glimpse of the uploaded content and allow them to confirm and validate it.

File previews give users a glimpse of the uploaded content and allow them to confirm and validate it.

Improve waiting experience

Improve waiting experience

Improve waiting experience

Improve waiting experience

External

Providing clear status indicators reassures users progress is being made and decreases user drop-off rate.

Providing clear status indicators reassures users progress is being made and decreases user drop-off rate.

Providing clear status indicators reassures users progress is being made and decreases user drop-off rate.

Providing clear status indicators reassures users progress is being made and decreases user drop-off rate.

Consistent visual representation

Consistent visual

Consistent visual representation

Consistent visual representation

Internal

Consistency in how we represent uploaded files will increase learnability, reduce confusion, and establish a stronger brand across the ecosystem.

Consistency in how we represent uploaded files will increase learnability, reduce confusion, and establish a stronger brand across the ecosystem.

Consistency in how we represent uploaded files will increase learnability, reduce confusion, and establish a stronger brand across the ecosystem.

Consistency in how we represent uploaded files will increase learnability, reduce confusion, and establish a stronger brand across the ecosystem.

Support mobile platform

Support mobile platform

Support mobile platform

Support mobile platform

Internal

Uploading content has increased exponentially in the last few years, by supporting mobile platform, we could decrease the need for customization in the component.

Uploading content has increased exponentially in the last few years, by supporting mobile platform, we could decrease the need for customization in the component.

Uploading content has increased exponentially in the last few years, by supporting mobile platform, we could decrease the need for customization in the component.

Uploading content has increased exponentially in the last few years, by supporting mobile platform, we could decrease the need for customization in the component.

Increase education

Increase education

Increase education

Increase education

Internal

Better guidance of the component will lead to better adoption and eliminate task repetition.

Better guidance of the component will lead to better adoption and eliminate task repetition.

Better guidance of the component will lead to better adoption and eliminate task repetition.

Better guidance of the component will lead to better adoption and eliminate task repetition.

Explore & Feedback

What should we do first?

What should we do first?

What should we do first?

What should we do first?

Top brainstorms

Top brainstorms

Top brainstorms

Top brainstorms

We re-imagined different design approaches with a focus on the 5 areas of improvement from our research.

Re-evaluate the approach
to file preview

Re-evaluate the approach to
file preview

Re-evaluate the approach to file preview

File previews can vary widely, it would

be too restricting for our designers at

the component level.

File previews can vary widely, it would be too restricting for our designers at the component level.

File previews can vary widely,

it would be too restricting for

our designers at the component level.

File previews can vary widely, it would be too restricting for our designers at the component level.

Justify the info needed

on uploaded files

Justify the info needed on
uploaded files

Justify the info needed on uploaded files

Based on different file format types,

determine the types of information

that is most valuable to the user.

Based on different file format types, determine the types of information
that is most valuable to the user.

Based on different file format types,determine the types of informationthat is most

valuable to the user.

Based on different file format types, determine the types of information that is most valuable to the user.

Ensure visual

consistency

Ensure visual consistency

Ensure visual consistency

Stress test the component within
its component family to ensure visual consistency within the design system.

Stress test the component within its component family to ensure visual consistency within the design system.

Stress test the component within its component family to ensure visual consistency within the design system.

Iteration & Feedback

What do the key stakeholders think?

What do the key stakeholders think?

What do the key stakeholders think?

What do the key stakeholders think?

Component properties
aren't intuitive

Component properties aren't intuitive

Component properties aren't intuitive

An unpredictable and complex properties panel increases the detachment rate.

One big component vs

separate components

One big component vs
separate components

One big component vs separate components

With 120 variants, it would require more maintenance and memory storage.

With 120 variants, it would

require more maintenance

and memory storage.

Requires a lot of

vertical space

Requires a lot of vertical space

Requires a lot of vertical space

For a single file upload, the vertical

space isn't used economically.

For a single file upload, the vertical space isn't used economically.

For a single file upload, the

vertical space isn't used economically.

For a single file upload, the vertical space
isn't used economically.

~25% of
a standard
mobile screen


Usability test & Feedback

Usability test & Feedback

Usability test & Feedback

Usability test & Feedback

What do our users think?

What do our users think?

What do our users think?

What do our users think?

There were different viewpoints from key stakeholders on where the file upload would sit in the design system due to its complex properties.

Goal & methodology

Goal & methodology

Goal & methodology

Goal & methodology

Validate component architecture
and test out variant usability.

Validate component architecture
and test out
variant usability.

Validate component architecture
and test out variant usability.

Validate component architecture
and test out variant usability.

By conducting moderated remote usability test, we were able to observe participants interacting with the component in two different scenarios (mobile and web), while also giving them the opportunity to provide any general feedback.

Earner

Earner

Earner

Earner

Customer obsession

Customer obsession

Safety & insurance

Safety & insurance

Uber for Business

Uber for Business

Detail findings

Detail findings

Detail findings

Detail findings

The results

What did we ship?

What did we ship?

What did we ship?

What did we ship?

We prioritized creating a consistent user experience with component composability by separating the component into 3 parts. This is a consistent experience for our users and increases learnability in the design system.

Figma component

Prepare assets and component variants for the Base Figma component library publish and changes to the new component for design engineers to implement into the Base Figma plugin.

Documentation

Publish guidelines on usage, best practices, specs, grid layouts, and more to include in Base documentation to give a holistic understanding of the redesigned component.

What is our impact?

What is our impact?

What is our impact?

What is our impact?

File upload contributes to upholding the quality of the Base design system.

File upload contributes to upholding the
quality of the Base design system.

Designers from Delivery, Payments, Earner, Customer obsessions, and Safety and Insurance shared their usage of the new component in crit and support for more guidance on implementation in their specific use cases.

"hey team! just noticed we have this new uploader design lately, curious about the timeline to use this on building?"

- Senior Designer from Delivery

"Love the new framework [of the file upload component]. It looks clean!"

- Senior Designer from Delivery

"Hey all! I know we have a new shiny file upload comp available on Base, but while that is not code ready, is there any guidance for how to show uploaded files?

- Product Designer from Safety

Key takeaways

Key takeaways

Key takeaways

Key takeaways

What did I learn?

What did I learn?

What did I learn?

What did I learn?

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.

One of the biggest learnings is to remember to consistently reference the success criteria as this is 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.

Next Project

Home

Work

About

Contact

Home

Work

About

Contact