Overview

When I joined Fama Technologies as their Lead Product Designer, I created a scalable product design system using Atomic Design Principles that would allow for easy updates across multiple components. This solved the UX and visual inconsistencies across their previous components and pages. The design system I put in place greatly improved the organizational and operational structure surrounding it.

 
DS_Hero.png
 
 

Challenges

One of the bigger challenges for creating this design system was conducting an audit for all existing components and documenting where they live in the app and what they do. To accomplish this, I took screenshots of every page and interaction throughout the app and mapped them to any existing pages that were designed in Sketch. Afterwards, I filled in the blanks and created the missing components and pages in Sketch so that there would be a 1-to-1 match between Sketch files and what was in production.

As I conducted the audit, our product team realized this was a good opportunity to rethink the structure and design aesthetic of the app. Working in parallel on both the design system and restructure was efficient because I was able to freely explore both design execution and an improved IA and UX for the app.

 
 
 

Solution

DS_Tools.png

Sketch was used to build the design system while making sure atomic design principles were applied. By establishing basic foundation design elements including color palettes, text styles, iconography…etc and working up towards more complex components such as input fields, buttons and content cards, it allows us to freely explore visual styles and quickly see them across multiple pages. Prototypes for component interactions were built in Marvel App.

We used Abstract to version control the design system as well as our actual project files. As the lead for this project, I established the overall workflow and organization of the design system, with the goal of having any future designers create their own branch in Abstract to do explorations, and at the end of the week conduct review sessions before merging. The idea was to hopefully allow us to have a consistently up-to-date design library. Finally, all design file locations and prototype links were housed in a design Confluence page for all members of the product and engineering teams to reference.

Abstract.png
 
 
 

Results

Applying Atom Design Principles into our design system and maintaining it using Sketch shared libraries and Abstract allowed our team to have a single source of truth for all design components. Our team did have challenges adapting to a process of version controlling, but learned quickly that the upfront investment was well worth it in the end as all working files were centralized and drastically reduced any future problems of losing consistency.

DS_Palette.png
DS_Inputs.png
Behavior_Overview.png