Restructuring Discovery's Design System
While collaborating with the Discovery Product Team, I played a key role in developing and structuring Discovery Go's design system. I worked closely with a total of six designers (including three dedicated to the design system), five developers, two product managers, the user research team, and the accessibility team.
Challenge
The previous framework had a basic color palette and typography ramp with many repeated sizes, and tile components that failed to meet accessibility standards. Our goal was to develop a more robust and flexible color system that adhered to accessibility guidelines and to simplify and unify the typography ramp. We also aimed to address the redundancy and lack of scalability in the existing fonts and color palettes in our redesign.
Overall Goals
Seamless
Ensure cross-platform compatibility and high performance with seamless integration and scalability.
Brand Awareness
Maintain brand identity with consistent and flexible design across all components and themes.
Accessibility
Comply with accessibility standards (e.g., WCAG) for a usable experience for all users.
Adoption
Aim for a +60% adoption rate of the design system among all development teams within the first 7 months.
Design Workshops and Definition
User studies were conducted to gather insights into how the current app was being used, as well as data on brand awareness and product usability.
Structure Workshop
We organized a workshop to define our design system's structure in Figma and Zeplin, assessing current tools, processes, and development elements. We planned regular team meetings for continued development and collaboration, and outlined upcoming training and documentation needs to facilitate a smooth transition to the new system.
Naming Convention Strucutre
We documented our initial ideas and structures in Confluence, creating a central repository for all naming conventions. As we developed our color schemes and design tokens, we continuously updated the documentation to keep all information current and accessible.
Color Exploration
We experimented with various palettes for global colors to ensure flexibility and scalability, while rigorously testing contrast levels to prevent future accessibility issues. This approach helped us create a design system that not only looks visually appealing but is also fully accessible.
Global Colors
We expanded the original color palette, introducing a broader range of shades for each base color and developing them into flexible ramps. All enhancements adhered to WCAG accessibility guidelines, aiming for a universally usable design system.
Our methodical naming convention follows a structured format: category-subcategory-element-state. We also introduced colors with semantic meanings like "success" and "warning," and crafted inverse colors to ensure contrast against dark backgrounds.
Our methodical naming convention follows a structured format: category-subcategory-element-state. We also introduced colors with semantic meanings like "success" and "warning," and crafted inverse colors to ensure contrast against dark backgrounds.
Theming Exploration
We explored palettes based on the brands' original colors and assessed contrast accessibility to identify what was effective and what needed refinement.
Theming Colors
Theming tokens were introduced to define brand-specific styles for TLC and Discovery across the UI, independent of global colors. This centralized design system updates while allowing for brand-specific adjustments. UI components used a mix of global and brand tokens for aesthetic and functional needs, with platform-agnostic tokens ensuring uniformity across devices.
Additionally, platform-specific tokens like mobile gradients were derived from central theme palettes, ensuring consistency and meeting platform-specific requirements.
Additionally, platform-specific tokens like mobile gradients were derived from central theme palettes, ensuring consistency and meeting platform-specific requirements.
Foundations
We streamlined the original type ramp by consolidating header and body text sizes for a more uniform typography scale and introduced T-shirt sizing for design flexibility. In the iconography of the Discovery Go Apps design system, we blended existing material design icons with custom icons for specific uses.
To maintain consistency across components and layouts, we set fixed pixel values based on an 8px grid, enhancing the design’s coherence and adaptability.
To maintain consistency across components and layouts, we set fixed pixel values based on an 8px grid, enhancing the design’s coherence and adaptability.
Typography Ramp
Spacing
Iconography
Component Exploration
In our review of the overall component and UI designs, we addressed issues like small untappable areas to enhance content visibility and clarity. We also explored redesigning tiles, experimenting with various text and badge placements.
Throughout this process, we focused on correcting previous accessibility issues, ensuring that the new designs not only enhanced aesthetics and usability but also strictly adhered to accessibility standards.
Throughout this process, we focused on correcting previous accessibility issues, ensuring that the new designs not only enhanced aesthetics and usability but also strictly adhered to accessibility standards.
Tiles Exploration
Redesigned Tiles
In our exploration for the overall component and UI designs, we identified and fixed issues such as small untappable areas, enhancing content visibility and clarity. We also conducted an exploration for the redesign of tiles, where we experimented with different arrangements for text and badge placement. Throughout this process, we concentrated on rectifying past accessibility issues, ensuring that the new designs not only improved aesthetics and usability but also adhered strictly to accessibility standards.
Usertesting Components
We collaborated with the user research team to test and refine designs and components, leading to continuous improvements.
.png)
Priotizing Accessibility
We prioritized enhancing color contrast for improved visibility and refined keyboard navigation for smoother page traversal. I oversaw development issues in Jira, collaborating closely with developers to build screen reader compatibility and guarantee that all content included alt text.
My ongoing collaboration with the accessibility team and developers ensured that accessibility was a fundamental aspect of our design system, making it more inclusive and user-friendly.
My ongoing collaboration with the accessibility team and developers ensured that accessibility was a fundamental aspect of our design system, making it more inclusive and user-friendly.
Outcome
- By implementing design tokens and brand theming, we achieved consistent branding and enhanced user experience. 90% increase in user satisfaction and a 35% increase in session duration.
- Consistent branding was ensured through design tokens and brand theming. Figma analytics and engineering data indicated that over 60% of designers and developers fully integrated the design system.
- After thorough testing, 100% of our redesigned components and foundational elements met WCAG 2.1 standards, ensuring top-tier accessibility.
Post-Project Steps
Initially, we used Confluence as a central repository for documentation, complemented by Figma files for designers and developers. Developers also accessed Storybook to view interactive components. After establishing the core components and tokens, we collaborated with a design technologist to develop an asset importer, greatly enhancing the design workflow.
Additionally, we experimented with a color-responsive theming system, similar to Hulu's, which dynamically sampled colors from images. Although this initiative was paused, it offered valuable insights into adaptive process mechanics and potential.
Additionally, we experimented with a color-responsive theming system, similar to Hulu's, which dynamically sampled colors from images. Although this initiative was paused, it offered valuable insights into adaptive process mechanics and potential.
