Wells Fargo
Year
04/2019-09/2020
Role
UX Designer
I joined Wells Fargo's design systems team in April of 2019. Prior to joining, the framework team had created a small set of components & usage guidelines that were not widely adopted across Wells Fargo's suite of products.
My role focused on improving adoption, system growth, usability, coverage, and creating a more unified framework experience overall. During my time with Wells Fargo, my team and I also crafted a unified brand, website, and created a robust component library that nearly doubled in size. All of this work ultimately led to us officially introducing Pioneer - Wells Fargo's new, official, internal, enterprise-wide design system.
Highlights
PIONEER
Design System Overview
Wells Fargo offers a wide range of banking applications and products, but due to its size, has historically struggled with ensuring that each and every one of its applications follow the same brand identities & patterns.
It can also be difficult to ensure that all application teams consistently make time to update their product to match new branding guidelines and principles, which creates inconsistency in pattern application & component usage.
Some applications are modern & up to date, but others tend to lag behind, using older components and layouts. Pioneer was created in order to tie the breadth of Wells Fargo’s products together under a single brand identity, while simultaneously making it easier to update and maintain a modern design throughout its entire consumer banking product suite.
Prior to joining the team & introducing Pioneer, all of the system’s initial components, patterns, code, and asset libraries were scattered throughout several links, confluence pages, website, applications, and sketch files. It was obvious that we needed to create a singular space to house all of our design system’s files, guidelines, and components together.
We launched our new Pioneer site with aggregated links to all of our style guides, components, patterns, and principles, as well as resources & contribution links. This site gave the framework team the ability to reach a wider range of product owners & application teams, which provided the foundation to grow Pioneer’s enterprise-wide adoption.
TOKENS
Tokenization
One of the many projects that I was involved in was leading the implementation of design tokens & tokenizing the entire Pioneer framework.
Design tokens are the most simplistic method for maintaining up to date & consistent products as design system patterns tend to change & modernize over time.
Similarly to Sketch Symbols or Figma Components, design tokens give front-end developers the ability to change a component’s value in a single area & have that singular change be reflected in every single area of their application. This means you can change the master variable in a single place & have every usage of that variable be updated automatically throughout your entire product suite - no more manually updating every single usage individually, tediously, and then doing it again after every framework change. Change it once to reflect the token name and the framework team can keep it consistent from there, pushing incremental updates with every release, with your token always remaining up to date.
Ultimately, the improvements made to Pioneer’s framework, library, website, and code through the incorporation of tokens drastically improved the adoptability & reach of the design system holistically. Pioneer quickly became Wells Fargo’s standard for branding & pattern consistency across all of it’s online consumer banking applications.
Due to Pioneer being an internal-only design system, it's not available publically. To learn more about my contributions to Pioneer, please reach out with any questions.
Notable contributions:
-
Design kits/sticker sheets
-
Branding updates & refreshes
-
Icon, component, pattern, & guideline creation
-
Tokenization of the entire framework
-
Adoption increases & coverage increases across several application teams
-
Component visual, IxD, and usability improvements
-
Creation of website for housing both design & engineer resources, including design kits & API documentation & much more