JPMorgan Chase & Co.

Problem

JPMC’s design system has only been around for 3 years, so you can imagine there’s been a few limitations when it comes to individual components. Three components we use frequently, MDS Tile Accordion, MDS List and MDS Data Table, have already had their fair share of enhancements, so we were advised to create our own custom components and use MDS and accessibility advisors as a resource. The tokens would remain the same, but the engineers could now build something entirely our own to fit our needs.

Time

Aug 2021 - Mar 2023

Design System

This is how Custom Accordion, DIY List, and DIY Table came to life. The Custom Accordion can house almost any content, with keys and values, and additional slots in the main blade. Our DIY List allows for multiple headers and sections, which we utilize for separating transactions by date. Our DIY table allows us to use buttons, definition links, additional text colors, and more - something MDS Data Table for Transactions didn’t offer.

Custom Accordion:

Challenges: First ever custom component / Resizing on web XS

DIY List:

Challenges: Limited slots available / WCAG 1.4.10 reflow

DIY Table:

Challenges: Incorporating additional components (MDS Data Table limitations)

Conclusion

These three custom components were successfully implemented by our scrum teams , and adopted by multiple teams across JPMC to use in their projects.