Fidelity Investments

Fidelity Design System

How might we create a unified design system that ensures consistent experiences across all our platforms and brands?
Role Principal UX Designer
Channel Android, iOS, Web
Timeframe 6 months

Overview Fidelity Investments launched a fourth-generation design system to improve scalability and cross-platform consistency, enabling multi-brand theming and density modes for Android, iOS, and responsive web. The effort aimed to align design and code, reduce redundant component maintenance, and accelerate delivery across products.
Contribution Led design system evolution, aligning accessibility, theming, and component workflows. Coordinated design and engineering efforts to establish token pipelines, component libraries, and documentation to increase adoption and consistency.

Problem The lack of a unified design system caused inconsistent standards across products, brand fragmentation, and higher maintenance costs due to duplicated components and ad-hoc overrides.
Hypothesis By establishing a single source of truth through token-based architecture with design-code parity, we can reduce duplicative maintenance effort, accelerate cross-platform delivery, increase design system adoption, and ensure consistent brand experiences that meet accessibility standards across all touchpoints.

 

Disclaimer: Due to compliant restrictions, details have been omited. Let's connect for more details!

Overview

Fidelity Investments launched a fourth-generation design system to improve scalability and cross-platform consistency, enabling multi-brand theming and density modes for Android, iOS, and responsive web. The effort aimed to align design and code, reduce redundant component maintenance, and accelerate delivery across products.

Problem

Inconsistent design standards across products created confusion and fragmented brand identity.High maintenance costs and duplicated effort due to multiple component versions and token pipelines.
  • 01
    Inconsistent design standards

    The absence of a unified design system led to fragmented UI patterns and inconsistent implementations.

  • 02
    Increased maintenance costs

    Multiple versions of similar components increased upkeep and complicated updates across teams.

Gen 1 Business Design System
Gen 1 Business Design System
Deprecated UX Practice Reference Site
Deprecated UX Practice Reference Site
Gen 2 Business Unit A - Design System
Gen 2 Business Unit A - Design System
Gen 2 Business Unit B - Design System
Gen 2 Business Unit B - Design System
Gen 2 Business Logic APIs for Design System A
Gen 2 Business Logic APIs for Design System A
Gen 2 Visual Language Effort for A and B
Gen 2 Visual Language Effort for A and B

Solution

Establish a single source of truth for design tokens, components, and documentation to align design and engineering practices across platforms.
  • 01
    Code and design parity

    Sync design and development artifacts to reduce duplicative efforts and improve component reliability.

  • 02
    Token architecture

    Define token tiers and naming standards to support theming, density modes, and cross-platform distribution.

Approach

Coordinated cross-functional squads and external agencies to develop token pipelines, component libraries, and an internal reference docsite while prioritizing accessibility and adoption.

Insights
  • Design toolkits and coded components lacked parity, creating tech debt and custom overrides.
  • Documentation gaps existed for Android and iOS, creating a disconnect between design and development.
  • Naming paradigms were inconsistent (card vs tile vs content block).
  • Brand standards were primarily marketing-focused and not optimized for digital experiences.
  • Design tokens were fragmented and not shared across systems.
Recommendations
  • Prioritize IA for consolidated documentation of tokens, components, and brand guidance.
  • Define token naming conventions and transformation pipelines (e.g., Style Dictionary) for multi-platform sync.
  • Partner with accessibility teams to validate components in context.
  • Provide adoption support and demos to help teams integrate the system.
  • Pilot token mapping and implementation examples to demonstrate value.

Ideation

Distinction of system from user preference is a critical path to define when it comes to mapping tokens to themes.

My phone has dark mode enabled, show the dark mode version of your app.

System preference My phone has dark mode enabled, show the dark mode version of your app.
My web browser font size is set to very large, please don't make me zoom my page.

User preference My web browser font size is set to very large, please don't make me zoom my page.

Token naming standard Classify token names to scale namespaces, properties, variants, and modifiers.
Classify token names to scale namespaces, properties, variants, and modifiers.
Color modes Support light, dark, and high-contrast palettes for accessibility and preference.
Support light, dark, and high-contrast palettes for accessibility and preference.
Density modes Provide compact mode to reduce spacing and fit more content while maintaining accessibility.
Provide compact mode to reduce spacing and fit more content while maintaining accessibility.

Wireframes

Documentation website

Documentation sitedesign.fmr.com
design.fmr.com
Getting startedLanding page
Landing page
Design foundationsColor palettes
Color palettes

Impact

Measuring success

Annual cost savings in UX improvements

$12.5M

Adoption across app

71.43%

Takeaway

I joined our design system team to combat growing needs across our enterprise. Being on the other side of the fence was a humbling and eye-opening experience in navigating the decisions involved in building a design system.

Lessons learned
  • Deepened my understanding of accessibility requirements and closely defining criteria to be AA compliant.
  • Collaborate with content strategy as documentation in guidance can be bridged across the enterprise.
  • Demos are critical to the success of instilling confidence in design adoption. The increased in design tool updates created a gap for consuming designers to navigate features integrating with iterative releases.
Potential next steps
  • Expand pattern documentation efforts to be centralized across business units.
  • Refine data visualization guidance by leading with an emphasis when to use vs just a data table as well as expanding guidance to not rely soley on color strictly as visual distinction.
  • Continue to lean in and listen to design community feedback and dive deep into understanding component limitations not meeting their use cases.

Fidelity Design System (Gen 4) Establishing fourth-generation design system for scalability and cross-platform consistency across Android, iOS, and Web

CDO Priority Set expectations for brevity (15 min), establish credibility, preview your direct leadership impact. Say Your title, company context, the business problem scale. Emphasize "I led" statements, quantifiable scope (users, teams, timeline). Avoid Generic team language—focus on YOUR role/decisions.

Context The Challenge
  • Organization Fidelity Investments is a multinational financial services corporation, offering investment management, retirement planning, portfolio guidance, and brokerage services to individuals and institutions worldwide.
  • Problem Lack of unified design system caused inconsistent standards, brand fragmentation, and higher maintenance costs
  • Scope Enterprise-wide design system supporting Android, iOS, Web with multi-brand theming and accessibility compliance
  • Timeline 6 months
  • Role Principal UX Designer

CDO Priority Demonstrate strategic context awareness—why this mattered to the business. Say Root cause (acquisitions, tech debt, org structure), business cost/impact, constraints that made it hard. Emphasize Why YOU were brought in, executive stakes, urgency. Keep under 60 seconds.

Context My Role & Impact

  • Design Leadership Led design system evolution, coordinating with cross-functional squads and external agencies

  • Research & Strategy Conducted component inventory and alignment workshops to identify gaps and inconsistencies

  • Component Design Designed token pipelines, component libraries, and reference documentation site

  • Adoption & Governance Provided adoption support, demos, and guidance to help teams integrate system

  • Measurable Impact 75% increase in visual style adoption, $12.5M annual cost savings, 71.43% app adoption

CDO Priority Prove you led hands-on AND strategically. Say Specific actions YOU took (audited, designed, trained), tactical deliverables with YOUR fingerprints. Emphasize Leadership evolution—IC work that built credibility → process/systems you established. Connect metrics to your decisions. CDOs want to see agency, not task completion.

Research What We Discovered

  • Component Audit Design toolkits and coded components lacked parity, creating tech debt and custom overrides

  • Platform Gap Analysis Documentation gaps existed for Android and iOS, creating disconnect between design and development

  • Naming Consistency Naming paradigms were inconsistent (card vs tile vs content block)

  • Brand Standards Review Brand standards were marketing-focused, not optimized for digital experiences

  • Key Insight Single source of truth for tokens, components, and documentation would align practices

CDO Priority Show research rigor led to strategic insights, not just findings. Say Methods YOU used (interviews, audits, synthesis), key insight that changed the approach, how you reframed problems to leadership. Emphasize User empathy, business risk/opportunity, influencing up. 1 memorable story > 5 data points.

Exploration Approach

Decentralized Systems

Let teams build own systems—perpetuates inconsistency and duplication

Unified System (Selected)

Single design system with token architecture for theming and platforms—scalable and consistent

Documentation Only

Provide guidance without components—wouldn't solve implementation gaps

CDO Priority Demonstrate design thinking—explored multiple paths, made informed trade-offs. Say Why each approach failed/succeeded, YOUR criteria for selection, what you personally built/designed. Emphasize Strategic architecture decisions (tokens, systems thinking), balancing user needs vs. business constraints. Show prototyping rigor, not perfection.

Process Critical Design Decisions

Token Architecture

Defined token tiers and naming to support theming, density modes, and platform distribution

Code and Design Parity

Synced design and development artifacts to reduce duplicative efforts

Accessibility Non-Negotiable

All components met AA accessibility standards with zero defects

Adoption Support

Created demos and workshops to build confidence in system integration

Why these mattered Prioritized IA for consolidated documentation across tokens, components, and brand guidance

CDO Priority Prove you make principled decisions under ambiguity. Say Each decision's rationale, what you traded off, how decisions connected to research insights. Emphasize YOUR convictions (why you fought for X), where you adapted based on feedback. Focus on 2-3 decisions that show strategic maturity. CDOs value judgment over process.

Outcomes What Worked

  • Cross-Functional Coordination Partnered with external agencies and internal teams to develop token pipelines and components

  • Pilot Validation Piloted token mapping to demonstrate value before full rollout

  • Accessibility Partnership Worked with accessibility teams to validate components in context

  • Documentation Hub Revamped information architecture to reflect expanded offerings

  • Result $12.5M annual cost savings, 71.43% adoption across app, 75% visual style adoption increase

CDO Priority Show execution + change management skills. Say Specific tactics YOU ran (workshops, partnerships, pilots), how you drove adoption without authority. Emphasize Building coalitions, creating internal champions, adapting when initial plans failed. Mention systems/frameworks you created that others could replicate. CDOs hire multipliers, not doers.

Learnings What Didn't Work

  • Initial Scope Too Broad Tried to tackle too many components at once—should have started with high-impact patterns

  • Documentation Assumptions Assumed designers would adopt without demos—hands-on sessions were critical

  • Key Learning Adoption requires education and partnership, not just documentation

CDO Priority Demonstrate self-awareness and learning agility—critical for senior roles. Say 2-3 failures YOU owned, what you learned, how you pivoted quickly. Emphasize Personal accountability ("I pushed too hard," "I bottlenecked"), data-informed corrections, humility. CDOs respect vulnerability + action. Never blame team/stakeholders—show ownership.

Reflection Key Lessons

  • Lesson 1 Deepened understanding of accessibility requirements and AA compliance criteria

  • Lesson 2 Documentation bridges enterprise collaboration through content strategy

  • Lesson 3 Demos build confidence in design adoption—tool updates create adoption gaps

  • Lesson 4 Listen to design community feedback and understand component limitations

CDO Priority Synthesize insights into transferable principles—show you build repeatable systems. Say 3-5 lessons that transcend this project, how they'd apply to new contexts. Emphasize Strategic maturity ("systems > heroes"), process innovations you'd bring to their org. Connect lessons to CDO concerns scaling design, org transformation, cross-functional influence.

Results Impact

$12.5M

Annual cost savings in UX improvements

71.43%

Adoption across app

75%

Increase in visual style adoption

Qualitative Impact Transformed design culture from fragmented to cohesive, establishing shared language across company

CDO Priority Quantify business value in their language—this is THE slide that matters. Say How metrics were measured (methodology = credibility), before/after comparison, financial impact. Emphasize Metrics tied to YOUR decisions/work, exceeded goals (show ambition), qualitative transformation. Spend 90 seconds here. CDOs fund impact, not activity. Always tie to revenue/cost/risk.

Future What's Next

  • Expanded Scope System continues to support new product lines with proven scalability

  • What I Learned Design systems require equal focus on technical architecture and organizational change

  • What I Bring Ability to lead system transformation while building cross-functional partnerships

CDO Priority Connect past success to future value for THEIR org. Say Proof of sustainability (what happened after you ), transferable capabilities you demonstrated. Emphasize Leadership philosophy, comfort with ambiguity, what you'd bring to their specific challenges. Close with confidence "This taught me to [capability], which aligns with your [need]."

Discussion Questions & Deep Dives

I'm happy to discuss design system strategy, token architecture, accessibility compliance, or adoption challenges.

What aspects of design system transformation would you like to explore further?

CDO Priority Invite engagement, show depth without overwhelming. Say "Happy to elaborate on [their concern]—design process, stakeholder dynamics, technical decisions." Emphasize You have more depth than shown, you're collaborative and open. Read the room If early (13 min), offer areas to expand. If late (16 min), offer Q&A only. Demonstrate executive presence.

Previous Member Experience
Next Design system themes
View all work