Role Product Designer II, Design System
Date October '22-23
Website https://www.sling.com
Embedded Files
Objectives / Tasks
Objectives / Tasks
• Built design system UI master components and variants
• Co-developed 3 level token / Figma variable system
• Built component library with mode switching per brand
→
→
• Strategized component rebranding
• Worked with engineers to create the Figma API pipeline
• Wrote documentation for styles, elevation, grids, and components
Introduction
Introduction
Dish's products had significant disparity in both UX and UI. This lead to problems with consistency and customer's lack of trust in the product. On the engineering side, the codebase was bloated and inefficient. Certain simple designs could not be pushed due to complexity of the codebase.
→
→
Starting with the flagship video product lines for Dish and Sling, the Design System team strategized on the goal. The development of the UI should be both distinct for both brands and deliver the UX that customers have come to expect. It should also promote efficiency in both design delivery and implementation.
How can the design system enable consistency and efficiency across
two different products?
How can the design system enable consistency and efficiency across
two different products?
Level 1: Core Styles
Level 1: Core Styles
Colors
Colors
The global color palettes will provide the colors used for specific use cases while creating consistency across brands.
Typography
Typography
The font styles used across brands is also predefined to provide consistency across UI, onboarding, and marketing materials.
Defining the style palette.
Defining the style palette.
Level 2: Semantic Styles
Level 2: Semantic Styles
Colors
Colors
These color styles related to brand, typography, accent, messaging, and other specific use cases are pulled from the primitive level. They provide efficiency when changing colors across the system.
Elevation
Elevation
Related to the use of color are elevation styles developed specifically to add dimension to the layers of the UI. It was especially important to create distinction with the use of color instead of shadows for the sake of performance.
Repeatative element attributes
Repeatative element attributes
These styles will be leveraged to create differentiation in brand components and provide global variables for efficient theming and future changes.
Brand Switching, Themes
Brand Switching, Themes
All of the semantic values could point to different styles for each brand and through variable modes, we achieved instant brand switching by the designers and engineers alike.
Creating efficiency and brand identity.
Creating efficiency and brand identity.
Level 3: Component Styles
Level 3: Component Styles
Spacing, radius, and stroke
Spacing, radius, and stroke
These styles will be leveraged to create differentiation in brand components. A radius may create a pill shape on one brand button and a more square shape for another.
Flexibility at a Highly Iterative Phase
Flexibility at a Highly Iterative Phase
Great thought was put into adding padding to the component level. As the redesign took shape, it was important to make tweaks to the components without taking up engineering resources.
Creating flexibility for future style changes.
Creating flexibility for future style changes.
Components: Atoms, Molecules, and Organisms
Components: Atoms, Molecules, and Organisms
The atoms were built with the intention of nesting them into larger existing components, but made available to the squad designers so they may create new patterns. Once pushed to production, those new patterns were codified into the DS pattern library.
Properties: For Designers and Developers Alike
Properties: For Designers and Developers Alike
Properties provided ease of use for making quick changes to sticker sheets by the DS team, efficient workflow for squad designers, and in some cases provided an easy path to identifying assets through variable strings.
Pipeline: Where do the Variables End Up?
Pipeline: Where do the Variables End Up?
Learning the structure of the pipeline was essential to making broad decisions around the variable nomenclature and brand theming.
A design system that allows designers and engineers to spend time making great products, not fixing design debt.
A design system that allows designers and engineers to spend time making great products, not fixing design debt.
Google Sites
Report abuse