Design System, Token Management & Documentation
Methods
Accessibility Testing, Visual Consistency,
Created
Color Scheme, Tokens and Variable, Component Library
Components
Contributed to
features
01.
Color Scheme
ColorScheme
Accessibility
We prioritized accessibility by creating tints and shades of the primary and secondary colors, ensuring readability across all interfaces.
02.
Token Library
DesignTokens
TokenManagement
03.
Typography
Typography
FontConsistency
04.
Component Library & Guidelines
ComponentLibrary
DesignGuidelines
What I Achieved
84% components reuse rate. Design are more consistent and accessible
Duration
1.5 Months
Role
Product Designer, Design System
Overview
Building a Scalable, Cross-Functional Design System
Led the creation of 10+ key components and contributed to 5+ features across four teams, collaborating closely to identify and prioritize essential design needs. Conducted an affinity mapping process to consolidate component requirements, building a focused, scalable design system with core elements like Color Scheme, Forms, Cards, and streamlined Design Handoff for seamless implementation.
If you're short of time, you can jump to
Documentation
Color Scheme
For Disney Threads, we defined a color palette that incorporates both playful and professional tones, ensuring that the colors resonate with the target audience while maintaining accessibility. The color scheme includes primary, secondary, and accent colors that are versatile across various UI components and are optimized for readability and visual harmony.
Token Library
By utilizing design tokens, we established a system that ensures consistency across all components while allowing for easy updates. Tokens were categorized based on type—such as color tokens for brand and UI colors, spacing tokens for consistent layouts, and typography tokens for uniform font usage—reducing redundancy and simplifying the handoff process.
Typography
For Disney Threads, we selected a modern sans-serif font that aligns with Disney’s brand identity while maintaining clarity across different screen sizes. We defined font weights, sizes, line heights, and letter spacing, ensuring that each text element was consistent and legible, from headings to body text. This unified approach to typography reduces confusion and enhances the product’s overall aesthetic.
Typography/Body
Typography/Headings
Components Library with Design Guidelines
A comprehensive component library is the backbone of a successful design system. We curated reusable components such as buttons, input fields, cards, and modals that adhere to the brand’s visual language and design principles. Each component is documented with usage guidelines, including states (active, disabled, focused) and variations (size, color, etc.). This component library reduces redundancy, accelerates the design process, and ensures consistent UI elements across the entire product. The design guidelines also provide a clear framework for future designers and developers to follow, ensuring ongoing consistency.
Components/Inputs/Field Label
Anatomy
Layout and Spacing
Options
Components/Inputs/Help Text
Anatomy
Layout and Spacing
Options
Components/Patterns/Cards/Login
Anatomy
Layout and Spacing
Components/Patterns/Cards/Live Quiz
Anatomy
Layout and Spacing
Components/Patterns/Cards/Leaderboard Rankings
Anatomy
Layout and Spacing
Components/Patterns/Cards/Card Details
Anatomy
Layout and Spacing
Components/Patterns/Cards/Polls
Anatomy
Layout and Spacing
Components/Patterns/Cards/Signup
Anatomy
Layout and Spacing
Components/Patterns/Cards/Reviews
Anatomy
Layout and Spacing
Process
Overview
As Disney Threads evolves into an immersive augmented reality (AR) app, we recognized the need for a cohesive, scalable design system to support the platform's growth. The goal was to create a unified approach that would ensure consistency across all touchpoints while enhancing user engagement and developer efficiency.
Defining Goals and Objectives (My Responsibilities)
Objectives
Scope
Competitive Analysis/Direct Competitors
SaaS Platforms
Disney Threads' design system shares similarities with SaaS apps in terms of engagement, personalization, and accessibility. Competitors like Netflix or Spotify employ robust design systems that manage streaming and content presentation, which can offer insights into AR-related systems.
AR-based Applications
Competitors that focus on AR experiences like Snapchat, Instagram, or Pokémon GO, which have unique design systems for managing AR elements while maintaining an intuitive user interface.
Competitive Analysis/In-Direct Competitors
E-commerce platforms
Disney Threads shares user engagement aspects with platforms like Shopify or Amazon, which rely on seamless user experience, consistent visual identity, and component reuse.
Mobile applications with augmented reality
Apps like IKEA Place or Google Lens offer unique AR features and have their own design systems for handling AR interactions, offering lessons on AR components and user flow.
Benchmarking Metrics
Component Reuse
Measure how frequently design system components are used across different screens and features. This includes components like buttons, navigation elements, and modals.
Goal
Achieve a high reuse rate (80%+), indicating efficient use of the design system.
Maintainability
Evaluate how easily the design system can be updated or extended. This includes managing components, tokens, and color schemes without breaking the existing design.
Goal
Ensure that design updates can be made within a week without requiring major redesigns or impacting the user experience.
Accessibility
Measure accessibility scores based on WCAG compliance and usability for users with disabilities.
Goal
Achieve WCAG compliance and provide an inclusive experience.
Color Scheme
Voting for Brand Color
The team participated in a voting process to select the primary brand color, ensuring alignment with Disney's visual identity while considering user experience.
Accessibility Considerations
We conducted an accessibility review to ensure color contrast met WCAG guidelines for readability. This included testing with color-blind simulations and getting feedback from accessibility experts.
Creating Tints and Shades
We developed various tints and shades of the primary and secondary colors to maintain consistency across UI elements and ensure flexibility in design. These variations were then tested across different backgrounds and use cases.
Typography
Font Selection
After reviewing several options, we chose Avenir as the primary font family due to its clean, modern look and alignment with the Disney Threads brand identity.
Creating Text Styles
I defined text styles using font variables (e.g., for headings, body text) so that these could be easily applied across the product. This approach ensures consistency and flexibility for different screen sizes.
Token Management
Naming Scheme
We created a consistent and intuitive naming scheme for tokens, which is easy to understand for both designers and developers.
Tokens and Variable Collection
I established collections for key design properties like colors, typography, and spacing. These were defined as tokens in the system, allowing for easy scalability and reuse throughout the product.
Components and Guidelines
Team Collaboration
We gathered input from all four teams (User Engagement, Onboarding & Login/Signup, Feed, and Payment & AR) to identify the most used components for our tasks. We held collaborative workshops to understand the most common elements and prioritize them.
After gathering feedback, we created a list of all necessary components, including buttons, form fields, modals, and cards. Each component was documented with clear guidelines on its usage and variations.
