Atomic Design System

Understanding the problem

Retail Pro's point of sale software was in desperate need of a style guide. The UX and UI was very inconsistent and there was no design language.The UI framework it used was also very old and out-dated. It was a very old version of Bootstrap that had been modified and customized by several designers and developers.

To better understand the problem I started interviewing key stakeholders: product designers, developers, people in marketing and the company's software instructor. These interviews helped me understand the communication breakdown that was happening between departments and helped me see opportunities for improving it.

Narrowing my focus

It became clear that we needed more that just a style guide. We needed to break down the current UI into small parts, find commonalities, and then put it together again. We needed an atomic style guide.

Exploration and iteration

Before I created the style guide I started cataloging and and organizing all the components in Retail Pro's software. I then worked with stakeholders to identify trends and commonalities with the different components starting with the atoms, then the molecules and finally the organisms.

Finding the solution

I consolidated the reusable parts of the UI and translated them into Material UI components (a preferred framework in place of bootstrap). I then started building the style guide and reviewed it with stakeholders. Dev helped me refine and improve its specs and designers helped me created a reusable pattern library in Sketch.

The result

The atomic design system helped simplify our UI and made it more consistent. It also helped us improve communication between our departments. Devs now had a detailed and consistent spec document to reference and designers had the building blocks to create a better UI.