Project Summary
Building Tuxedo Design System + Component Library
The Leader of Product hired me on with the goal to creating consistent design guidelines to be used throughout the AML, Fraud, and Lending systems.
Responsibilites
-
UX/UI Design
-
Research
-
Product Managment
The Challenge
Creating Consistency In Design Across Multiple Products
In 2018 Banker's Toolbox acquired Sageworks and Main Street Technologies. None of the companies previously had a UX Designer department. I was hired with the task to implement UX Designer practices and create a consistent experience for these company's two core products: BAM+ and Analyst.
Step 1: Understand Current State
I started by taking a full look at the product's design architecture and current component repository to understand how much change was actually needed and if there were any component libraries that were existing that would work with what was there while still allowing for usability improvements.
Key Similarities
-
BAM+ and Sageworks Use React Java Script Library
-
Information Architecture of both are very similar
Key Differences
-
Current UI's are custom and very different styles
-
Usability Requirements for both are vastly different given it's two different areas within banks.
Step 2: Choose a Organization Methodology
I choose Atomic Design because it's the most prevalent among methods, and my development team was aware of it. Atomic design is methodology for creating design systems. There are five distinct levels in atomic design:Atoms, Molecules Organisms, Templates, and Pages. Below you can see how this methodology plays out.
Step 3: Build UI Kit
Once I understood both systems, and I knew the best way to organize my designs, I could begin assembling the necessary design components in Figma in order to create consistent Ui styling for both products necessary interactions.
Final Step: Create Design Guidelines
I created a figma file that allowed Product Managers, Designers, Marketing, and Developers to understand when to use certain designs, how to adhere to design rules and guidelines, and how to implement the designs in the adsence of a fully made component library.