top of page
Untitled-1.png
Abrigo Logo@4x.png

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.

1.png

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.

!
Widget Didn’t Load
Check your internet and refresh this page.
If that doesn’t work, contact us.

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.

atomic-design-stages.jpg

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. 

Frame 26086143.png

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. 

!
Services_CustomerDocuments_ResearchAtlas_01_2022_edited.jpg

Next Project

Home Depot Documents Research Atlas

bottom of page