The essential building blocks for this brand’s foundation had to be flexible to accommodate the wide variety of services offered. From the full-spectrum colour palette to the fluid spacing system, and the use of unassuming Open Sans typeface - designers at Chase had very few limitations in creativity for this new product.

The marketing website is the first point of contact for most new customers, so we worked hard to make sure the information is concise and also exciting. This meant designing components that are re-usable, responsive and unique to Chase - like the bottom corner cut on hero images.

A total of 83 components were created to support the web team in design and build, with highly complex interactions like carousels and paginations that can be replicated in prototype. This meant that the design team can visualise and showcase their work to higher fidelity faster and to better accuracy at design critiques.

Managing over 6 libraries and 600+ components with a team of 24 individuals overseeing website, mobile app and marketing, this represents my most extensive design system role to date. From third-party assets like brand logos to internal illustrations, we created a set of libraries that seamlessly work together.

A banking app requires the user to input and take action on their data on a daily basis. From radio buttons and checkboxes, to action sheets and inputs we created a fluid set of building blocks for the designers to craft the best product solutions.

Almost nobody in the design team referred to the documentation in Jira. After a short workshop, we identified that moving the documentation directly into Figma’s library file would increase interaction from the design team. Here, we were also able to add interactive prototype examples, keep an active checklist and have the components update automatically without having to export the images each time.

It was also important to have consistency in how Chase markets itself to the outside world. We created another library for the building blocks of email, external assets like app stores and social media.

Khaled Shaaban — Vice President of Design

Mark Wassmer — Design Operations

Danny Skinner — Product Designer