external-facing
design system
external-facing
design system
Transforming Chase's assisted account opening experiences
Transforming Chase's assisted account opening experiences
Building a component library to standardize and enhance Chase’s Assisted Account Opening user experience.
Building a component library to standardize and enhance Chase’s Assisted Account Opening user experience.
Details
Details
UX Design Co-Lead
UX Design Co-Lead
Tools
Tools
Figma
Storybook
Figma
Storybook
Details
Details
January - June 2025
January - June 2025
Impact
Impact
Shortened design to dev time from 1 year to 3 sprints for a new assisted account opening experience. Supported 1.1M assisted accounts opened in 2025.
Shortened design to dev time from 1 year to 3 sprints for a new assisted account opening experience. Supported 1.1M assisted accounts opened in 2025.
One flexible design system, one million design variations
One flexible design system, one million design variations
At Chase, we leverage the Manhattan Design System (MDS) to create consistent, delightful user experiences. MDS components are very flexible in nature to support different users and use cases. While the flexibility is necessary, in the Acquisition and Enablement Platform organization—which includes any type of account opening, shopping for a new card, internal marketing tools, and more— we began noticing that the flexibility caused us to solve for the same problems in different ways. This caused a fragmented, inconsistent experience for our users, as well as increased design and development times internally.
At Chase, we leverage the Manhattan Design System (MDS) to create consistent, delightful user experiences. MDS components are very flexible in nature to support different users and use cases. While the flexibility is necessary, in the Acquisition and Enablement Platform organization—which includes any type of account opening, shopping for a new card, internal marketing tools, and more— we began noticing that the flexibility caused us to solve for the same problems in different ways. This caused a fragmented, inconsistent experience for our users, as well as increased design and development times internally.
The creation of the platform team
The creation of the platform team
To create a consistent, scalable user experience, the platform team (my team!) was born. We help standardize design and dev efforts through creating a re-usable design library (in both React and Figma), saving time and costs while enhancing the user experience. In order to do this efficiently, the platform design, tech, and product teams work cross-functionally with the experience teams to understand their needs and how to best support them from a platform approach. Experience teams include teams in the account opening, shopping, and enterprise spaces - all of which contained even more LOB teams within themselves. In total, the platform team serves over 200+ designers and developers, and is responsible for some of the first experiences a user will have at Chase.
To create a consistent, scalable user experience, the platform team (my team!) was born. We help standardize design and dev efforts through creating a re-usable design library (in both React and Figma), saving time and costs while enhancing the user experience. In order to do this efficiently, the platform design, tech, and product teams work cross-functionally with the experience teams to understand their needs and how to best support them from a platform approach. Experience teams include teams in the account opening, shopping, and enterprise spaces - all of which contained even more LOB teams within themselves. In total, the platform team serves over 200+ designers and developers, and is responsible for some of the first experiences a user will have at Chase.
Premier Plus
Savings
Chase First Banking
Auto
Foundations of a platform library
Foundations of a platform library
We started building our library components for the account opening space. We audited existing designs in each line of business to identify components based off of frequency, structure, and content similarities (the opportunity for standardization can be seen from the designs to the left!). Once components were identified, we worked together to gather requirements and create components in both Figma and React.
To scale our library and support other areas of the CAMP organization beyond account opening, we created generic components such as brand bars, nav buttons, and more. Each generic component includes properties needed by specific teams, such as support for different form factors (mobile/desktop/native), color tokens, and more.
We started building our library components for the account opening space. We audited existing designs in each line of business to identify components based off of frequency, structure, and content similarities (the opportunity for standardization can be seen from the designs to the left!). Once components were identified, we worked together to gather requirements and create components in both Figma and React.
To scale our library and support other areas of the CAMP organization beyond account opening, we created generic components such as brand bars, nav buttons, and more. Each generic component includes properties needed by specific teams, such as support for different form factors (mobile/desktop/native), color tokens, and more.
The assisted account opening black box
The assisted account opening black box
After seeing successful results from our platform launch with account opening and generic components, we wanted to expand into the Assisted Account Opening space. While the Assisted Account Opening teams were already using some of our components, the teams were notoriously a black-box; they had very little visibility into each others’ efforts, and weren’t even sure if what they had in Figma was what was accurately in production. As a result, they were creating different solutions for the same problems - which we identified as a platform, since we are involved with every team in CAMP. The opportunity to standardize and create a more unified approach was clear, and our assisted account opening teams were eager for platform support.
Myself and another teammate completed a full audit of over 9 different hero flows, identifying the local components each team made and organizing them into a matrix. We completed an affinity mapping of the matrix see which components made sense to standardize and support as a platform, and we met with the teams to verify our decisions. We created net-new components, as well as components that had been built by the various teams’ developers in code but not in Figma, as a way to make sure that designers and tech teams were working off of the same sources of truth.
After seeing successful results from our platform launch with account opening and generic components, we wanted to expand into the Assisted Account Opening space. While the Assisted Account Opening teams were already using some of our components, the teams were notoriously a black-box; they had very little visibility into each others’ efforts, and weren’t even sure if what they had in Figma was what was accurately in production. As a result, they were creating different solutions for the same problems - which we identified as a platform, since we are involved with every team in CAMP. The opportunity to standardize and create a more unified approach was clear, and our assisted account opening teams were eager for platform support.
Myself and another teammate completed a full audit of over 9 different hero flows, identifying the local components each team made and organizing them into a matrix. We completed an affinity mapping of the matrix see which components made sense to standardize and support as a platform, and we met with the teams to verify our decisions. We created net-new components, as well as components that had been built by the various teams’ developers in code but not in Figma, as a way to make sure that designers and tech teams were working off of the same sources of truth.
1.1M
assisted accounts opened in 2025
10
new components and layouts
~85%
of designs in Assisted Account Opening built from MDS and CAMP Library components
9%
decrease in local component usage - meaning less users are needing to make their own custom component solutions
"Because of the Assisted Account Opening components and standards, we built out an entire flow in 3 sprints. The first time we did this, it took an entire year."
-WM Account Opening Designer
Measuring success
Measuring success
To measure success for this initiative, we looked into how many different components we created and standardized, as well as hearing from the teams to see if 1) they felt they were saving time using our components, 2) they felt like our components were easy to use, and 3) ultimately, if their users—customers who are opening an account and bankers who are helping the customer—felt an improvement in their experiences and time to complete the application. We also wanted to see if we could make the space less of a black-box.
As a result of our efforts, we created 10 new components and layouts for Assisted Account Opening teams, which—in combination with other library components—accounts for ~85% of each page in their flows. We enhanced and supported 1.1M assisted accounts opened in 2025 and received praise from designers re: speed and improved communication and visibility among assisted account opening teams.
Looking at the components in action, an assisted account opening team created a new joint account opening experience using our new components and existing library standards. As a result, they were able to shorten the design to dev time from the ~1 year baseline to only 3 sprints!
To measure success for this initiative, we looked into how many different components we created and standardized, as well as hearing from the teams to see if 1) they felt they were saving time using our components, 2) they felt like our components were easy to use, and 3) ultimately, if their users—customers who are opening an account and bankers who are helping the customer—felt an improvement in their experiences and time to complete the application. We also wanted to see if we could make the space less of a black-box.
As a result of our efforts, we created 10 new components and layouts for Assisted Account Opening teams, which—in combination with other library components—accounts for ~85% of each page in their flows. We enhanced and supported 1.1M assisted accounts opened in 2025 and received praise from designers re: speed and improved communication and visibility among assisted account opening teams.
Looking at the components in action, an assisted account opening team created a new joint account opening experience using our new components and existing library standards. As a result, they were able to shorten the design to dev time from the ~1 year baseline to only 3 sprints!
9
design flows impacted
10
new components and layouts
~85%
of designs in Assisted Account Opening built from MDS and CAMP Library components
9%
decrease in local component usage - meaning less users are needing to make their own custom component solutions
Supporting our users post-release
Supporting our users post-release
Adoption is only one (small!) piece of the puzzle. Whether it’s giving guidance on usage, talking through component edits and enhancements, or identifying new components to add, communication is the pillar of continued success with our library. To create open communication with our Assisted Account Opening teams post-release, we set up a standing biweekly meeting where the teams walk through current efforts and ask about library components or patterns. My team facilitates office hours with all library users and has a feedback chat if they need more immediate responses. We also send users a quarterly survey to better understand our strengths and where we need to improve. All of these methods of communication and feedback have created a community that strengthens our platform and overarching experiences for Chase users.
Adoption is only one (small!) piece of the puzzle. Whether it’s giving guidance on usage, talking through component edits and enhancements, or identifying new components to add, communication is the pillar of continued success with our library. To create open communication with our Assisted Account Opening teams post-release, we set up a standing biweekly meeting where the teams walk through current efforts and ask about library components or patterns. My team facilitates office hours with all library users and has a feedback chat if they need more immediate responses. We also send users a quarterly survey to better understand our strengths and where we need to improve. All of these methods of communication and feedback have created a community that strengthens our platform and overarching experiences for Chase users.
daily teams feedback channel
weekly office hours
bi-weekly meetings
monthly demos
quarterly surveys
ad-hoc documentation updates
Next steps: sharing library learnings
Next steps: sharing library learnings
There has been a lot of positive momentum with our platform library approach and other teams are vocalizing their desire to collaborate. Our team has become the standard for building a design library, and we are working with teams at Chase that cover both the pre-customer and post-customer experiences!
There has been a lot of positive momentum with our platform library approach and other teams are vocalizing their desire to collaborate. Our team has become the standard for building a design library, and we are working with teams at Chase that cover both the pre-customer and post-customer experiences!
