Building a FinTech Design System
The research and creation of a sustainable, scalable design system for a financial technology company, and the accompanying resources and mentorship sessions to teach its best practices for use.
Beginning in July of 2020, I took on the challenge of creating the entire UX design system in Figma for a 5-year-old Financial Technology (FinTech) company. The UX team had just begun its transition to using Figma instead of Adobe XD, and there was no previous style guide or design repository in existence. The need for the system was clear: This FinTech company had been functioning in a startup capacity for multiple years, but was now in the process of multiple acquisitions by financial giants and with a potential product integration on the horizon. Unless a design system was created that adhered to the most up-to-date Figma best practices, we would run into major scalability and integration issues down the road.
The process I followed for creating the design system is detailed below. Many items in the list are continuous efforts that needed to be consistently facilitated, and the steps follow more of an iterative framework rather than a sequential structure for this reason:
• Research on best practices for design systems in Figma — I became a well-versed Figma fanatic in preparation for making this design system. Figma has countless resources and guides on how to best utilize their products, and they often host discussions with users of their platform where I was able to learn how companies like Lyft transitioned to Figma and implemented a design system.
• Conceptualization and modeling of the system structure — I then organized conversations with developers about our platform's structure and became an expert at dissecting HTML and CSS with the Inspect panel on Chrome. I also studied the actual code library of our platform on Bitbucket and took to whiteboarding in order to figure out the high level framework for the system. This led me to separate the system into 4 levels: (1) Core styles, (2) Base components, (3) Parent components and (4) Templates.
• Creation of the design system, using code as my guide — Branching off the model I had created, level (1) closely mirrored our global CSS variables and mixins for color, typography, content size and effects. It also contained basic guidelines for accessibility and layout as well as some components for UX critiques and markup. Levels (2) and (3) were modeled off of how our company built its reusable components, which often consisted of basic components nested within more complex components. The final level (4) was mainly geared toward the UX design team, as this level provided templates for common screens within our platform so they did not have to start from scratch every time they designed something on an existing page. For each and every pre-existing style and component, I attached a description with the file path of the object, which development was able to view when we handed off designs.
• Aim for responsiveness without neglecting tablet & mobile — In our platform, the components were largely built to responsively resize on smaller screen sizes, and I mirrored this behavior within the design system using Figma's Auto Layout capability. However, there were some components that simply needed their own custom forms for the different breakpoints, and it was important for me to include these permutations in an organized way.
• Continuous management of the design system as components are optimized, added or removed — As is typical of the software design industry, things are perpetually changing. MVPs are delivered and then iterated on over time, and all of this change needs to be reflected in the design system.
• Audits of our existing components for usability or accessibility issues — The creation of a master style guide was a great opportunity to audit the platform's existing styles and components for optimization and ADA compliance.
• Implementation of new Figma capabilities — Figma is still relatively new as a UX platform, and understandably they continue to innovate and add exciting new features. I had to stay up to date with the latest capabilities and update the library accordingly. A recent example of this was Figma's introduction of Variants and improved Auto Layout controls.
• Production of shared resources and cross-functional mentorship sessions on best practices for the system's use — I also created documentation detailing how to best use the new design system to both UX and engineering's advantage. This included walkthroughs for each stakeholder group of key aspects for use or handoff. You can view a screenshot of the beginning of these documents below.
• Routine designer + developer checkins — Communication was key in keeping the library updated and accurate. It also provided a platform for us to bring up issues with certain components or front end problems that could then be ticketed in Jira and fixed.
The opportunity for me to create and manage this design system proved to be invaluable in teaching me skills I will forever take with me in my UX career. There are too many to name, but some of the key
insights generated from my work were: (1) Foster a close relationship between designers and developers at all steps of the process; (2) The UX design system structure should mirror the technology's code as closely as possible to facilitate efficient and effortless handoffs;
(3) A significant aspect in building a successful design system is flexibility and interconnectedness, as the components should be able to be manipulated within designs without "breaking" their connection to the larger system; and (4) A continuously well-managed and nurtured design system is
essential to any company with hopes to scale or grow in the future.
- — category: UX/UI, branding
- — organization: A growing FinTech company
- — year: 2020 - 2021
- — for: company design system