Financial Services
Managed Solutions
How might we simplify complex capabilities across multiple experiences to create a more efficient workflow for associates to deepen and broaden client relationships?
View the work
Financial Services
Design Tokens & Theming
How might we ensure consistency across different platforms and devices?
Timeline
6-months
My role
Principal UX Designer
Deliverables
Color system, visual style language, design tokens, design themes
Overview
Our organization faces significant challenges in maintaining consistency and efficiency across multiple systems, platforms, and products due to disparate design assets and custom theming.
Design tokens provide a single source of truth, ensuring that both design and engineering teams share a common specification language. This unified approach streamlines the handoff process, making collaboration more efficient and reducing misunderstandings.
Problem
Outcome
Visual inconsistencies in design and code
Various token pipelines make it difficult to maintain consistency across products.
Single source of truth
Merged repositories, pipelines, and artifacts into one package, while also retiring redundant assets and infrastructure.
Manual token mapping
The lack of integration across applications creates confusion, inefficiency, and manual errors.
Token Architecture
We refined our token tiers by intent to establish a foundation for theme support like color and density modes.
Approach
A shared language is a critical factor when it comes to navigating conversation surround properties that translate to components and ultimately user experiences.
While design tokens can be an underlying piece of design systems that live behind the scenes, they are a critical player in building a framework to scale as new product offerings require new sub brands or user preferences like color modes and density.
Methodology
I primarily worked with two front-end engineers and an enterprise architect to audit and consolidate existing token repositories, synthesize recommendations with usage guidance, and determine the recommended practices for the enterprise.
Key findings
- Inconsistent and generic naming conventions are used to describe tokens across systems.
- The absence of a documented programmatic approach to scale color across systems is a critical issue that needs to be addressed.
- It is imperative to ensure that all color combinations in coded components meet the AA-compliance standards for accessibility.
- Tokens are maintained manually across design software and coded repositories.
- Gaps in design software and front-end development created workaround paths, further confusing the source of truth in design decisions.
Recommendations
- Define token naming convention to scale and support business units and their use cases outside core and system design tokens.
- Leverage Style Dictionary to transform defined brand visual styles across Android, iOS, Web, and Figma.
- Educate enterprise on token tiers, their intent, benefits and value to the broader organization.
- Define pilot platforms to collaborate and develop examples to demonstrate their value and flexibility.
- Show and don't just tell, instill confidence in community be walking through implementation paths for design and code.
User Flow
Constraints
Description FPO
Critical
Dependent on third-party integrations
Tools like Token Studio and Style Dictionary are critical tools for syncing our token pipeline. Without them, we're at risk of not having an internal solution to scale in the short timeline we have to deliver.
High
Responsive design queries
Current design globally adopted by designers does not support media queries to determine responsive sizing for tokens. A workaround involves manually converting unit sizes and toggling a new theme mode.
Ideation
Distinction of system from user preference is a critical path to define when it comes to mapping tokens to themes.
System preference
"My phone has dark mode enabled, show the dark mode version of your app."
User preference
"My web browser font size is set to very large, please don't make me zoom my page."Features
The biggest opportunity for revisiting our token architecture is to lay a strong foundation to scale across business domains, platforms and products.
Token naming standard
By classifying parts of token names we are able to scale our namespaces, properties, variants, attributes and modifiers as considerations for token creation and maintenance.
Color modes
Support for color changes such as light mode (well lit environment experience), dark mode (low-light conditions), or high contrast (enhanced readability).
Density modes
The size and space between UI elements, allowing enabling more content to fit on the screen in a compact mode, or to allow more content to be spacious in a comfortable mode.
Title 1 FPO
Description FPO
Title 2 FPO
Description FPO
Title 3 FPO
Description FPO
Title 4 FPO
Description FPO
Title 5 FPO
Description FPO
Title 6 FPO
Description FPO
Impact
Background FPO
Impact 1 FPO
Description FPOImpact 2 FPO
Description FPOImpact 3 FPO
Description FPOTakeaways
Background FPO
Lessons learned
- Lesson 1 FPO
- Lesson 2 FPO
- Lesson 3 FPO
Some potential next steps
- Next 1 FPO
- Next 2 FPO
- Next 3 FPO
More work
View all work