Project Denali 

The Design System Language for Engineers and Designers

Role

UX Design

UI/Visual Design

Tools

Sketch

Adobe Illustrator

Yahoo! has over 60 internal products under their Cloud Services, all with different UI, UX, and Visual designs. Although perfectly functional, our team had the goal of creating a cohesive and effortless user experience system which would include a universal navigation system for simple and effective navigation from product to product. 

 

Aside from that, we aimed to create an easily accessible open source platform to that system language that is both design and engineer friendly.

all-together.png

Creating a cohesive and effortless user experience

Our team started from the very beginning, building each component to fit all cross-functioning products under Cloud Services. Our main goal was to make sure that any and every component we designed would look good and work well on each platform it was placed on.

Buttons

When designing the buttons, we established three different size options in the event of different use cases. We explored primary buttons, secondary buttons, text-only buttons, icon-only buttons, text and icon buttons, and warning buttons. We tested them on light and dark backgrounds to ensure the best usability possible.

For consistency purposes, we set rules for these buttons including their sizes, widths, heights, margins, paddings, and states.

Buttons-all.png
Buttons-Secondary.png
Buttons-Primary.png
Buttons-Misc.png

Menus

Our team focused on a few types of menus, those that were more regularly used throughout the 60+ products: regular dropdown menu, menu with links, menu with links and icons, title and section title menu, profile menu, and dialpad menu. Some of these menus were particularly significant as they were to be cross-functional across all the different products.

 

For example: The dialpad menu would be placed in the navigation of each product, allowing quick and easy navigation from one product to another.

Menus-1.png
Menus-2.png
Menus-3.png
Menus-6.png
Menus-4.png
Menus-5.png

Nav Bar

There were a few challenges we had to tackle when designing the navigation bar as we had to take into consideration each product and each products brand colors. Though we had main brand colors for Cloud Services as a whole, each product came with its own brand and logo colors.

 

We created a formula that would allow for the color of the nav bar to change depending on the product. 

Header1.png
Header2.png

Tabs and Toggles

We explored primary horizontal tabs, secondary horizontal tabs, vertical tabs, and toggles as well as their states.  

Tabs General.png
Text Fields.png

Vertical Tab Example

Example - Vertical Tabs.png

Custom Icons

We created unique line icons using a custom grid for the purpose of building a consistent UI system in each product under Cloud Services. The icons also had a set of rules which would ensure that each of them would have the same look and feel.

Horizontal Tab Example

Example - Horizontal Tabs.png
icons2.png
icons1.png

Colors

While building the visual guidelines of the system language, we developed color palettes to include not only brand colors and expanded brand colors, but colors to function in grey scale, status updates, graphs and advanced graphs.

colors1.png
colors2.png
colors3.png

Other Components

Other components we worked on included alerts, modals, data tables, tags, typography, inputs, and controls.

alerts1.png
modal1.png
modal2.png
tables1.png
tables3.png
tables2.png
type1.png
type2.png
inputs3.png
inputs1.png
inputs2.png

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

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

website1.png
website2.png