Working as part of the XD team, I supported the creation of our NextGen Design System, which acts as the foundation for all future BMTX white-label and higher-education banking products. This initiative resulted in streamlined design documentation, greater design consistency across products, and enhanced extensibility for future white-label partners.
Project Name: Support the creation of the NextGen Design System to underly all future BMTX white-label and higher-education banking products.
Client and Project Type: BMTX, Internal Company Initiative
Project Date: June 2021 - current
My involvement in the NextGen Design System effort began in earnest in November of 2022. As part of the XD team, I supported:
BMTX offers white-label banking solutions to Fortune 500 and higher-education partners. As part of the BMTX XD team, we were tasked with the creation of a scalable design system for our NextGen platform that could be quickly adapted for use across existing and future white-label banking partners.
Our team worked collaboratively with various internal and external stakeholders and used lessons learned from both existing white-label partnerships and on-going proposals to inform our decision making process. The result was a streamlined design system that has the potential to refine our existing product offerings, while offering the flexibility needed for successful future white-label banking partnerships.
Prior to NextGen, BMTX white-label partner and higher education product offerings were built in silos, lacking a cohesive design direction across products resulting in disparate and inconsistent application of design. Additionally, maintaining separate design documentation for each product offering was an untenable long-term strategy, over time resulting in massive slowdowns in our design process and ballooning design debt.
The question loomed - how could we create a design system that both unified our existing disparate design documentation, while creating a foundation for future partners to create their own unique white-label banking experiences?
TYPOGRAPHY
A thorough review of existing typographic styles, color palettes and most commonly used design patterns was conducted.
In order to create a scalable typographic scale, a REM-style preset naming convention was established. Typographic presets were created and named on a percentage based scale, relative to the font size value of established base font size (16px) otherwise known as our "preset-100" type preset. Inspired by EM font sizing, preset values could be easily converted from px to EMs measurements, and addressed possible scenarios where additional values may be needed for future partners.
Our defined type scale, designed with maximum flexibility and compatibility with any font family in mind.
Type uses for our defined NextGen Core type scale.
COLOR
We recognized that different partners may have different relationships with color palettes. Establishing a naming convention that could easily be flipped between our NextGen Core product and other partner's branding was critical. A color palette naming convention devoid of color signifiers was established for both light and dark mode.
Our NextGen Core color template with defined usage for both light and dark mode applications.
GRID SYSTEM
Defining a grid system was crucial to us for creating consistent, accessible, and responsive designs. An 8 point base unit size was established to allow for finer control over typography and spacing in compact interfaces. A 12-column horizontal grid layout with a gutter width of 24px was selected for responsive web design.
PATTERN LIBRARY CREATION
With the foundation of our design system established. I was tasked with the formal documentation of established styles and the creation of our pattern library. This effort included documenting color, type and grid and spacing as well as various components including button styles, form elements, dialogs, cards and tiles, iconography, loading patterns and various navigation elements.
Pattern libraries were established within Axure for our NextGen Core and Partner X products. We used Semantic Versioning (MAJOR.MINOR.PATCH) to denote changes to the Pattern Library and established a placeholder change-log for the Pattern Library in preparation for a stable release.
During the documentation process we identified and rectified various gaps in our existing legacy screen designs, including (but not limited to):
Weekly touch-points calls were established to review the status of the pattern library documentation effort across products. Over time, templates were created for most commonly used pages including confirmation and error states, modals, transaction registers and more. Once we felt the pattern libraries were in a mature enough state, they were socialized with lead developers for quick reference and distribution.
FIGMA MIGRATION
Late into the creation of these pattern libraries, the decision was made to migrate all XD team project files and documentation from Axure RP to Figma. This decision was made due in part to unrelated file size limitations experienced with Axure at the time. Pattern library documentation from Axure was used to inform the creation of the Figma libraries that housed the atoms, molecules and organisms that defined our NextGen Core and Partner X components.
The creation of these Figma libraries allowed us to expedite the migration of over 800 existing Partner X and NextGen product screens while establishing greater consistency of design application across all screens for both products.
Sample assortment of NextGen Core wireframes that were constructed using predefined components in Figma.
The creation of these Figma libraries allowed us to expedite the migration of over 800 existing Partner X and NextGen Core product screens while establishing greater consistency of design application across all screens for both products.
The creation of the NextGen Design System is an ongoing effort that I am thankful to have been a part of. It has significantly expanded my understanding of design systems and underscored the importance of designing for the future. Discoveries made during the documentation process have helped us address design inconsistencies in our product screens and create a more cohesive design system. Access to the pattern libraries in Axure, as well as product screens in Figma built from the ground up using our design system components, has facilitated the development of features that align more closely with our product screens.
Ongoing discussions about the design system include exploring how we can integrate tools like ZeroHeight to host our design system documentation online, providing a more streamlined view for developers, product teams, and other internal and external stakeholders. Long-term discussions regarding the design system revolve around the implementation of design tokens to establish a single source of truth that bridges the gap between designers and developers.
