Uber -

Design Systems

Uber -

Design Systems

Uber -

Design Systems

Uber -

Design Systems

Refactoring page controls from
design < > ENG

Refactoring page controls from design < > ENG

Refactoring page controls from
design < > ENG

Refactoring page controls from design < > ENG

Overview

My role

Product designer, Design systems

Timeline

~2 months

Deliverables

Figma component, documentation

Summary

I collaborated with engineers to implement the refactored page controls to meet accessibility standards, best practices, and improve component architecture to reduce improper usage.

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 lack of education and compliance with accessibility standards is limiting the discoverability and usage of page controls.

The lack of education and compliance with accessibility standards is limiting the discoverability and usage of page controls.

The lack of education and compliance with accessibility standards is limiting the discoverability and usage of page controls.

The lack of education and compliance with accessibility standards is limiting the discoverability and usage of page controls.

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 of page control best practices from 4 design systems.

Internal audit

Internal audit

Internal audit

Internal audit

I reviewed the internal usage and support requests of page controls in the past 3 months.

  • Rides

  • Eats

  • Uber for Business

Increase indicator size

Increase indicator size

Increase indicator size

Increase indicator size

External

Increasing the indicator size provides a better sense of affordance and interactive accuracy.

Increasing the indicator size provides a better sense of affordance and interactive accuracy.

Increasing the indicator size provides a better sense of affordance and interactive accuracy.

Increasing the indicator size provides a better sense of affordance and interactive accuracy.

Increase color contrast

Increase color contrast

Increase color contrast

Increase color contrast

External

Increasing the color contrast between the indicators and background will help improve visibility.

Increasing the color contrast between the indicators and background will help improve visibility.

Increasing the color contrast between the indicators and background will help improve visibility.

Increasing the color contrast between the indicators and background will help improve visibility.

Improve predictability

Improve predictability

Improve predictability

Improve predictability

Internal

Improving predictability increases content engagement and task efficiency.

Improving predictability increases content engagement and task efficiency.

Improving predictability increases content engagement and task efficiency.

Improving predictability increases content engagement and task efficiency.

Provide clarity on functionality

Provide clarity on functionality

Provide clarity on functionality

Clarity on functionality

Internal

Establishing a clear understanding of navigation hierarchy and utilization of page controls leads to better adoption.

Establishing a clear understanding of navigation hierarchy and utilization of page controls leads to better adoption.

Establishing a clear understanding of navigation hierarchy and utilization of page controls leads to better adoption.

Establishing a clear understanding of navigation hierarchy and utilization of page controls leads to better adoption.

Explore & Feedback

What should we do first?

What should we do first?

What should we do first?

What should we do first?

Accessibility

Identify the appropriate size and color of the indicators that meet accessibility standards.

Identify the appropriate size and color of the indicators that meet accessibility standards.


Identify the appropriate size and color of the indicators that meet accessibility standards.

Education

Build the page controls component to increase discoverability of the ascending and descending navigation behaviors.

Bridge the gap

Uncover the disparity between what is available in design and code for consistency and efficient workflows

Uncover the disparity between what is available in design and code for consistency and efficient workflows

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?

Bloated component

Justify the value of having a 162 variant Figma component for 5 dots.

Accessible within context

Identify the different layouts and surrounding context to ensure page control accessibility.

Design feasibility

Re-evaluate pressed state in web vs. mobile in light of technical constraints.

ENG

How did you support ENG?

How did you support ENG?

How did you support ENG?

How did you support ENG?

ENG doc to guide conversation

Justify the value of having a 162 variant Figma component for 5 dots.

API layout to ensure functionality

Identify the different layouts and surrounding context to ensure page control accessibility.

Prototypes to demonstrate design navigation intention

Re-evaluate pressed state in web vs. mobile in light of technical constraints.

The results

What did we ship?

What did we ship?

What did we ship?

What did we ship?

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.

Web component

Released a P0 version along with a suite of other navigation components.

Released a P0 version along
with a suite of other navigation components.

Key takeaways

Key takeaways

Key takeaways

Key takeaways

Every pixel counts

Every pixel counts

Every pixel counts

Every pixel counts

The difference between a good experience and a great experience can be only in the difference of a few pixels.

The difference between a good experience and a great experience can be only in the difference of a few pixels.

The difference between a good experience and a great experience can be only in the difference of a few pixels.

The difference between a good experience and a great experience can be only in the difference of a few pixels.

It's only 5 lil dots until it's in code

It's only 5 lil dots until it's in code

It's only 5 lil dots until it's in code

It's only 5 lil dots until it's in code

The work only comes to life when it is in code, so it is important to collaborate with your engineer and follow through on your designs.

The work only comes to life when it is in code, so it is important to collaborate with your engineer and follow through on your designs.

The work only comes to life when it is in code, so it is important to collaborate with your engineer and follow through on your designs.

The work only comes to life when it is in code, so it is important to collaborate with your engineer and follow through on your designs.

Next Project

Home

Work

About

Contact

Home

Work

About

Contact