Fidelity Investments

Design system themes

How might we ensure consistency across different platforms and devices?
Role Principal UX Designer
Channel Android, iOS, Web
Timeframe 6 months

Overview Design tokens provide a single source of truth to ensure visual consistency and efficient collaboration across Android, iOS, and Web, addressing fragmented token pipelines and inconsistent naming conventions.
Contribution Led token architecture and consolidation efforts with front-end engineers and an enterprise architect; defined naming conventions, pilot platforms, and recommended toolchains to scale tokens across platforms.

Problem Disparate token pipelines and inconsistent naming caused visual inconsistencies and manual mapping across products.
Hypothesis A single, well-defined token pipeline and naming convention will reduce duplication, lower maintenance costs, and increase cross-platform parity.

 

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

Overview

Our organization faced challenges maintaining consistent visual styles and efficient token pipelines across multiple products and platforms. Design tokens were fragmented across tools and repositories, creating manual work and inconsistencies.

Problem

Visual inconsistencies across products due to varied token pipelines.Manual token mapping and lack of integration between design tools and code repositories.
  • 01
    Visual inconsistencies

    Various token pipelines made it difficult to maintain a consistent design language across products.

  • 02
    Manual token mapping

    Token maintenance required manual work across design and code, increasing errors and friction.

Fidelity.com
Fidelity.com
Open an account
Open an account
Fidelity NetBenefits
Fidelity NetBenefits
Fidelity 401k
Fidelity 401k
Life events
Life events
Frequently Asked Questions
Frequently Asked Questions
FidSafe
FidSafe
Account performance
Account performance

Solution

Consolidate token repositories and define a token architecture with clear naming conventions and tiers to support theming and platform parity.
  • 01
    Single source of truth

    Merged repositories and pipelines into a unified package, retiring redundant assets and infrastructure.

  • 02
    Token architecture

    Refined token tiers by intent to enable multi-brand theming and density modes.

Approach

Worked with front-end engineers and enterprise architects to audit and consolidate token repositories, synthesize guidance, and pilot cross-platform implementations.

Insights
  • Inconsistent and generic naming conventions across systems.
  • No documented programmatic approach to scale color across systems.
  • Need to ensure color combinations meet AA accessibility standards.
  • Tokens were maintained manually across design software and code repositories.
  • Gaps in design tools and front-end pipelines created confusing workarounds.
Recommendations
  • Define a scalable token naming convention to support business units and system tokens.
  • Leverage Style Dictionary to transform brand styles across Android, iOS, Web, and Figma.
  • Educate the enterprise on token tiers, intent, and usage guidance.
  • Define pilot platforms to demonstrate token value and implementation paths.
  • Provide implementation examples to show token adoption benefits.

Token architecture and pipeline flow
Token architecture and pipeline flow

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 modes with AA compliance.
Support light, dark, and high-contrast modes with AA compliance.
Density modes Provide compact and comfortable spacing modes for various contexts.
Provide compact and comfortable spacing modes for various contexts.

Wireframes

Wireframes focus on demonstrating token-driven layout and theming across screens.

Impact

A consolidated token pipeline enables consistent experiences across systems and reduces duplicate effort and cost.

Estimated annual cost savings from consolidated UX and token efforts.

$12.5M

Number of unified design systems consolidated across the organization.

8

Takeaway

Design tokens are design decisions—focus on intent, not tooling; provide examples and education to drive adoption.

Lessons learned
  • Prioritize accessibility and AA-compliance when defining token palettes.
  • Use demos and examples to encourage adoption across teams.
  • Coordinate closely with content strategy and architects for consistent documentation and APIs.
Potential next steps
  • Conduct discovery on internal desktop tools for token benefits.
  • Tokenize motion properties and add reduced-motion guidance.
  • Expand data visualization guidance for brand theming and accessibility.

Design System Themes Scaling design tokens across Android, iOS, and Web to enable multi-brand theming and cross-platform consistency

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 Disparate token pipelines and inconsistent naming caused visual inconsistencies and manual mapping, increasing maintenance costs
  • Scope Organization-wide token consolidation across Android, iOS, Web with multi-brand theming and density modes
  • 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 token architecture and consolidation with front-end engineers and enterprise architect

  • Research & Strategy Defined naming conventions, pilot platforms, and recommended toolchains (Style Dictionary)

  • Component Design Established token tiers for theming, color modes (light, dark, high-contrast), and density modes

  • Adoption & Governance Created documentation and demos to increase team adoption of consolidated tokens

  • Measurable Impact 50% reduction in design production effort for color modes, 75% increase in visual style 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 tokens were fragmented across tools and repositories, creating manual work and inconsistencies

  • Developer Feedback Token maintenance required manual work across design and code, increasing errors

  • Cross-Platform Analysis Naming paradigms were inconsistent, making it difficult to maintain parity

  • Accessibility Gap Token pipelines lacked systematic support for AA accessibility standards

  • Key Insight Single, well-defined token pipeline would reduce duplication and increase parity

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

Platform-Specific Tokens

Each platform maintains own tokens—fast to implement but perpetuates inconsistency

Consolidated Token Pipeline (Selected)

Single source of truth with Style Dictionary transformation—scalable and consistent

Manual Synchronization

Document standards but leave implementation to teams—wouldn't solve consistency

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 Naming Standard

Established namespace, property, and variant structure to classify tokens systematically

Style Dictionary Adoption

Recommended Style Dictionary as transformation tool across platforms

Token Tiers

Defined semantic, component, and reference layers for theming flexibility

Accessibility First

Built AA compliance into token palette from day one

Why these mattered Prioritized long-term scalability while enabling incremental team adoption

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 Collaboration Partnered with engineers and architects to align on technical implementation

  • Pilot Platform Success Piloted pipeline on select platforms to validate before org-wide rollout

  • Documentation & Demos Created demos and guidance to build confidence across teams

  • Incremental Adoption Allowed gradual adoption without forcing all-or-nothing migrations

  • Result 75% increase in visual style adoption, reducing duplicative token work

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

  • Token Structure Too Complex First iteration too granular—simplified based on feedback

  • Delayed Developer Training Should have trained developers earlier—documentation alone wasn't sufficient

  • Over-Engineering Early Tried to account for every edge case—learned to start simple and iterate

  • Key Learning Teams need working code and demos, 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 Token systems are communication problems first—invest in partnership

  • Lesson 2 Start with high-impact tokens (color, typography) to demonstrate value

  • Lesson 3 Platform constraints are real—token architecture must accommodate them

  • Lesson 4 Accessibility can't be retrofitted—build it into foundation

  • Lesson 5 Incremental adoption beats big-bang releases

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

75%

Increase in visual style adoption through shared token library

50%

Reduction in design production effort for color modes

100%

AA accessibility compliance across all token palettes

Qualitative Impact Established foundation for multi-brand theming, enabling faster product launches with cohesive visual language

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 Adoption Token system now supports additional platforms with proven scalability

  • What I Learned Design systems as technical infrastructure, not just visual standards

  • What I Bring Ability to bridge design and engineering, translating needs into architecture

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 token architecture, cross-functional collaboration, or platform-specific challenges.

What aspects of token system design 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 Fidelity Design System
Next AdviceHub
View all work