UDS Implementation

Verizon Media

Unified Design System implementation

Goals

Improve Verizon Media Ad Platforms’ design consistency and increase design/engineering efficiency through implementing the new Verizon branded design system to Native and DSP.

Definitions of Success

Uncompromised User Experience

Users will acknowledge the new visual treatment. The usability of the platform will not be impacted.

UDS in Code

Existing design components will be replaced. Engineers will have their own UDS in code.

A Comprehensive System

The system will continue to evolve and cover more use cases as UX issues are being addressed.

Easy Adaptation

Designers can easily adapt to the new system and start producing mocks with the UDS components.

The old Oath branding to be replaced by the new Verizon branding

Requirement 1

Make UDS as comprehensive as possible

Data table anatomy in the UDS documentation

Native / UDS Application

DSP/ UDS Application

The first step in evaluating the comprehensiveness of UDS is to understand its current capacity by going through all its design documentation. Then, stress tests the system by applying it to the key screens that have the most components.

Understand its current capacity

After collecting feedback from the product design and engineering teams. I consolidated the feedback and started a proposal on how to make the system more comprehensive by providing constructive feedback along with illustrative visuals.

Proposal to improve the system

To make UDS more comprehensive and cover as many use cases as possible, I established a feedback/revision workflow with the product design team and the engineers who will be implementing UDS. The workflow will help my team capture all the feedback for UDS, propose suggestions to improve the system, and track the implementation progress from an engineering perspective.

Establish a feedback/revision loop

One of the UDS component improvement proposals

UDS application feedback/revision loop

Requirement 2

UDS in Code

Tracker to monitor design feedback and implementation progress

To ensure the engineering implementation is truthful to the UDS design and implemented in a timely manner, I created a shared tracker that tracks the implementation progress and all the feedback related to the visual treatment of the UDS components.

Monitor implementation quality and progress

Requirement 3

Provide support for easy adaptation

Rize (UDS) cheatsheet for the product design team

Cheatsheet for product designers

Color value swap instructions for engineers and designers

To speed up the adaptation process of the product design team, I made myself accessible to fellow designers whenever they needed to review the UDS application of their design. By doing that, I was able to spot potential application errors and improvements for the UDS.

UDS application review

Result

1 Quarte, 2 Platforms

It took the team three months to rebrand two of the company's biggest demand-side platforms from scratch.

50+ Screens, 500 + Components

Throughout the process, more than 50 mocks were produced and more than 500 components were replaced.

A Successful Launch

The newly branded design platform is now serving our global audiences while retaining the same usability.

2 Platforms, 1 System

The two demand platforms are now sharing the same components, colors, typography etc. from the UDS.

Some illustrations I did for the implementation

Product screenshots with UDS implementation