Yahoo! Design System & CS Products

DESIGN SYSTEM | INTERNAL PLATFORM

Yahoo Component Library

UI UX DESIGN
SYSTEMS DESIGN
VISUAL DESIGN

ENGINEERING SUPPORT
CREATIVE SUPPORT

FEB 2017 - MAY 2019
FIRST LAUNCH: MAY 2019
SECOND LAUNCH: JAN 2020

4 DESIGNERS | x ENGINEERS | 1 PRODUCT MANAGER

YAHOO! 

Network of web services providing internet communications, finance, and media outlets

Goals

With over 60 internal CS products at Yahoo!, our team had the goal of creating an easily accessible open source design system as well as a cohesive user experience navigating from product to product 

The Very Beginning

Our team started by building each component to fit cross-functioning products under Cloud Services. We aimed to make sure that any and every component we designed would look good and work well on each platform it was placed on.

Denali Component Library

Creating Components

When designing these components, we had to take into consideration each products' brand, usage, and purpose. 

For many component organisms we created a formula that would allow different style changes for different products. We also made sure to prioritize components that would support quick and easy navigation from one product to another.

Buttons

Form Elements

Icons

Toggles

Tabs

Alerts

Inputs

Modals

Data Tables

Type

Tags

Yahoo Denali Buttons
Menu Tool Tip
Menu Tool Tip
Menu Tool Tip
Menu Tool Tip
Menu Tool Tip
Menu Tool Tip
Navigation
Navigation Formula
icon guidelines
Alerts
Colors
graph colors expanded
graph colors expanded

Creating Pages

As we were creating this system language, we were slowly implementing the new components and styles into our assigned products as well as updating the user experience of these products.

Internal Tools
Internal Tools
Internal Tools

We started planning and designing the open source library of our components and elements with the intent of making the system language readily available for designers and engineers to use.

Denali Website
Denali Website

Check out Project Denali

Learnings

Project Denali was my first experience working on a system focused on multiple products at a time as well as one catered towards internal tooling and developer data. I enjoyed working hand in hand with our engineers as both partners in product development as well as users of our products. Something I learned through this experience is how important it is to work cross-functionally with different teams. Getting different perspectives and user needs was incredibly impactful in the way we decided to build this design system and even design our individual products.

More Work

NZXT WEB

WEB | MOBILE WEB | DESIGN SYSTEM

Hero.jpg

NZXT SOFTWARE

DESKTOP APPLICATIONS | DESIGN SYSTEM

cam-monitoring-dark.png