JANET XU
  • About
  • Play
  • Work
    • Alexa Design System
    Unified Design Across Devices
    Parallax Image
    Shipped 10 Alexa Design System components, scaling across 8 viewports and multiple interaction paradigms.
    My role
    Interaction design
    Visual design
    Guidelines creation
    Accessibility improvements
    Timeline
    Q1 2023 - Q3 2023
    Team
    2 designers, 1 product manager, 2 developers
    What?
    The Alexa Design System provides scalable components, templates, and patterns for voice, touch, and remote interactions.
    Why?
    Ensures consistency, scalability, and accessibility across Alexa devices, improving product cohesion and usability.
    How?
    Identify user needs and collaborate with cross-functional teams for iterative component development and testing.
    Underlying reasons
    Multiple design teams
    We have 4 product design teams, each with their own brand, and design legacy
    Multiple design systems
    Each system is brand-specific, with the Alexa Design System as the only horizontal system
    Multiple tech stacks
    Each device is built by separate teams on different platforms
    A lot of detached components
    Components look and feel similar but have been customized from the shared libraries
    Different nomenclature
    Team needs led to nomenclature differences
    Key insights
    Engaged with the internal team and gathered customer insights, forming high-level key personas, including Alexa customers, designers, and engineers.
    "
    The devices don’t feel like they belong to the same brand.
    —
    Customer
    "
    Every device has its own design system — we lack a standard.
    —
    Designer
    "
    Every device has unique components — code reuse is limited.
    —
    Engineer
    My role
    My design team maintains all Alexa Design System components, patterns, and templates. I collaborated with engineering teams, product managers, and designers to drive adoption and scalability.
    Owned 10 components/templates, co-owning 4
    Took ownership of key components and templates, applying a "design once, deploy everywhere" approach for consistency across devices.
    Refined Design Elements
    Optimized components for better usability, consistency, and scalability across the product family.
    Guidelines & Accessibility
    Developed design guidelines and prioritized accessibility to ensure cohesive, inclusive experiences.
    Key challenges
    Slide 1 Slide 2 Slide 3
    Text list item
    Context:
    The design didn’t scale well to 1/6-sized home screen widgets.
    Outcome:
    Adapted it for smaller widget sizes and for both portrait and landscape orientations.
    Selection controls
    Context:
    Consists of the checkbox, switch, and radio button components.
    Outcome:
    Unified the state framework across the Alexa product family, and improved accessibility with text label and icon support.
    Date and time picker
    Context:
    Inadequate touch target size and inconsistent interface usage across teams.
    Outcome:
    Unified approach across teams. Reduced user errors in touch-based date and time selection.
    Star rating
    Context:
    Inconsistent styling required guidelines, and the system lacked support for adding provider logos like IMDB for TV customization.
    Outcome:
    Consistent styling with added parameters for domain customization.
    Documentation and handoff
    Created specs and authored new content to our Human Interface Guidelines for the components I updated.
    Impact
    The results a few months out from rolling out these updates were:
    10+ ▲
    Shipped components/patterns/specs, and authored pages to our Human Interface Guideline.
    2x ▲
    Speed improvement reported by teams using our design system.
    4 Check Icon
    Teams and domains impacted by the changes.
    © Janet Xu
    janet16xu@gmail.com
    Made with love and lofi hip hop ♪