UX/UI design
Standardizing Chase’s Assisted Account Opening Experience
Standardizing Chase’s Assisted Account Opening Experience
Creating a component library to standardize Chase’s Assisted Account Opening user experience.
Creating a component library to standardize Chase’s Assisted Account Opening user experience.
My Role
My Role
UX Design Co-Lead
UX Design Co-Lead
Tools
Tools
Figma
Storybook
Figma
Storybook
Details
Details
January - June 2025
January - June 2025
Impact
Impact
Standardized 9+ hero flows across 3 teams, creating 10 new components/layouts with ~85% of pages composed of library components
Standardized 9+ hero flows across 3 teams, creating 10 new components/layouts with ~85% of pages composed of library components
One Flexible Design System, One Million Designs
One Flexible Design System, One Million Designs
At Chase, we leverage the Manhattan Design System (MDS) to create consistent, delightful user experiences. MDS components are very flexible in nature; they include properties to configure multiple variants of each component to support different users and use cases. While the flexibility is necessary, in the Customer Acquisition and Marketing Platform (CAMP) 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; they include properties to configure multiple variants of each component to support different users and use cases. While the flexibility is necessary, in the Customer Acquisition and Marketing Platform (CAMP) 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
The Creation of the Platform
In order to create a more consistent user experience in a scalable way, the CAMP platform (my team!) was born. The main goal as a platform team is to standardize design and development efforts by creating a library of MDS components (in both React and Figma) that designers and tech can re-use, thus saving time and costs while enhancing the user experience. In order to do this efficiently, the platform team as a whole (design, tech, and product) works cross-functionally together as well as 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.
In order to create a more consistent user experience in a scalable way, the CAMP platform (my team!) was born. The main goal as a platform team is to standardize design and development efforts by creating a library of MDS components (in both React and Figma) that designers and tech can re-use, thus saving time and costs while enhancing the user experience. In order to do this efficiently, the platform team as a whole (design, tech, and product) works cross-functionally together as well as 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.
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
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 received praise from designers on the team re: how fast they’ve been able to pick up our components and how it’s improved communication and visibility among assisted account opening teams. We are still waiting to hear from their users since the development teams are still in their building process, but we have high hopes!
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 received praise from designers on the team re: how fast they’ve been able to pick up our components and how it’s improved communication and visibility among assisted account opening teams. We are still waiting to hear from their users since the development teams are still in their building process, but we have high hopes!
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-Library Release
Supporting our Users Post-Library 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 any questions they might have about specific components or how others are solving for similar problems. For all CAMP library users, we facilitate office hours for specific design questions and have a teams feedback channel 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 any questions they might have about specific components or how others are solving for similar problems. For all CAMP library users, we facilitate office hours for specific design questions and have a teams feedback channel 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
Expanding the Library
Expanding the Library
There has been a lot of positive momentum with our platform approach and other teams are vocalizing their desire to have platform-supported components, which has been incredibly exciting to be a part of. Our team has been taking a strategic approach with scaling our library and expanding into other areas not yet supported on the design AND code-side, starting with the Shopping space.
Right now, we are completing an audit of our existing 100+ components from a tech, product, and design perspective to see what needs to be done to existing components to allow them to work for other teams in the future. This auditing process involves looking into over 45 different specific criteria for each component and marking if the component passes/fails based off of those results. After the audit is completed, the goal is to make edits and enhancements based off of the results and decouple the back-end and front-end from a code perspective so the platform can truly be a self-service tool for both designers and developers across Chase.
It’s an exciting time to be on the platform team, and we have a really promising future ahead of us!
There has been a lot of positive momentum with our platform approach and other teams are vocalizing their desire to have platform-supported components, which has been incredibly exciting to be a part of. Our team has been taking a strategic approach with scaling our library and expanding into other areas not yet supported on the design AND code-side, starting with the Shopping space.
Right now, we are completing an audit of our existing 100+ components from a tech, product, and design perspective to see what needs to be done to existing components to allow them to work for other teams in the future. This auditing process involves looking into over 45 different specific criteria for each component and marking if the component passes/fails based off of those results. After the audit is completed, the goal is to make edits and enhancements based off of the results and decouple the back-end and front-end from a code perspective so the platform can truly be a self-service tool for both designers and developers across Chase.
It’s an exciting time to be on the platform team, and we have a really promising future ahead of us!
