Problem #3
Making retroactive updates to visual styles required a lot of work.
Problem #2
It was taking a long time to get new features to market.
Problem #1
Our interfaces were becoming increasingly visually inconsistent.
As the firm invested more and more into enhancing Fidelity's iOS and Android apps through 2020, three problems emerged:
Fidelity's Design System
Standardizing visual styles, components, and patterns across Fidelity's interfaces by providing design tools and coded assets.
Roles
Lead Designer
Consulting Designer
Platforms
iOS, Android, & Web
Year
2020 - Ongoing
Feature #1
Rich components
Components like the "Row" can be configured to fit a myriad of different needs through the component settings panel.
Feature #2
Ease of use
Designers struggled to use Figma's built-in Assets panel, so I created a shared file, dubbed the "Sticker sheet" from which everyone could copy and paste components into their working files. Over time, this also become a collaborative space and shared pattern library.
Feature #3
Robust tokens
The team and I built a multi-tiered system of global, alias, and component tokens using Figma's variables feature, and applied them to the components. This make scaling and updating easy, lets us swap between light and dark modes, and enables the use of...
I created a component library Figma that aligned with matching coded components.
I collaborated with dedicated iOS and Android developers to established a set of functional requirements for each component, which I referenced as I built out each component in Figma. The team relied heavily on what came out-of-the-box from iOS and Android, taking care to only override where absolutely necessary.
Solution
Communication
We published an internal site to share updates and guidance with other designers and the rest of the firm.
The site includes onboarding walk-throughs for designers new to the system, links to important resources, files, and libraries, blog posts addressing topical issues, and a growing repository of guidance and best-practices for patterns and components.
Feature #4
Themes
As the organization aligns to a single design system, newly built features must occasionally be able to integrate with an existing page or journey that still uses an old or different system. Using thoughtfully-applied design tokens, we can create themes that approximate these other design systems.
(This is still a work-in-progress)