DESIGN SYSTEM
One of the first task I was ask to explore upon starting work at Abrigo was the idea of a pattern library and system of design in which to based UX decisions for building the BAM+ product. The product was already built under a design framework, however the ask was to do an audit of the system and see what is a better way to design modules and pages within it.
My Role
-
Creator/Owner
-
Visual Designer
-
Sketch Pattern Library Owner
-
Co-Product Manager
Product Audit
To begin, I dove into the entire product to understand its architecture. I did this to inform what components would make up the global navgiation and sublevel of interaction within the product. I also, wanted to see what components and designs were already being used effectively.
Customer & Market Research
After completing my audit, i looked externally to the market. I wanted to know the characteristics of a successful design system and how to organize the information that was easily identifiable for UX, Product, and Development persons in the company. I drew inspiration from systems like Material Design, Atlassian Design, Salesforce Lightning, and Atomic Design to understand the core of what information was useful to bring forth in the design patterns. At this point I had also been doing user research and I understood and empathized a lot more with our customers to the level that I knew what was important to them at a high level.
Using Atomic Design in BAM+
The greatest resource for creating design systems came from the book Atomic Design by Brad Frost. The core concept of the book lays out designs systems the same way they can be organized within code with everything building up to the Page (the final design). Because the development departments was currently using a third party component library, Element.io, I didn't worry as much about restyling of Atoms (input fields, buttons, multi-selects, etc.) I instead focus on how those core components would be comprised into Molecules, Organisms, and Templates.
BAM+ Sketch Library
The core function of the BAM+ Design System comes from the utilization of it's components in actual designs. In order to communicate those designs effectively I needed to create components within Sketch that were readily available for UX Designers and Product Manager for creating mockups. Having this file shared out through Sketch cloud helped with onboarding new UX people as well as helping developers with the hand off prior to implement the component library.
UI Design | UX Design | User Research
Documentation: How/When to Use
A big thing when creating a design system is documenting how the components are intended to be use and when. This is an on-going process as new project and product are finding new ways to use these components and new situations arise that warrant new component. This is very important so that Development and Product knows why the UX Designer advocates to spend more time or effort to use a certain component rather than another. I spent several weeks and several projects understanding when and how to implement these components.
