Role Product Designer II, Design System
Date October '22-23
Website https://www.sling.com
• 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
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.
The global color palettes will provide the colors used for specific use cases while creating consistency across brands.
The font styles used across brands is also predefined to provide consistency across UI, onboarding, and marketing materials.
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.
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.
These styles will be leveraged to create differentiation in brand components and provide global variables for efficient theming and future changes.
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.
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.
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.
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 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.
Learning the structure of the pipeline was essential to making broad decisions around the variable nomenclature and brand theming.