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.
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.
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.
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.
Tabs and Toggles
We explored primary horizontal tabs, secondary horizontal tabs, vertical tabs, and toggles as well as their states.
Vertical Tab Example
Horizontal Tab Example
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.
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.
Other Components
Other components we worked on included alerts, modals, data tables, tags, typography, inputs, and controls.
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.
