Pill Design System

PILL, the name for the well-known pharmacy's design system, took me through many trials and tribulations...err I should say learning experiences.

Upon taking ownership of the design team’s Figma component library, I created a new taxonomy for the component library that removed atomic naming structure, making it easier for designers to find styles and swap out components more efficiently.

While I was in the process of renaming components, I took the time to audit every component to make sure it was properly built. Many of the symbols were nested within larger components that had been detached from their master causing them to not sync up properly when updates were pushed. I created color styles, layer styles, and typography settings to apply throughout the library for a more systematic way of working. If you decide to change the primary color from blue to yellow, you can update your entire library + design comps in two easy clicks!

I made sure to check in with my fellow designers to make sure I was building this in a way that was easy for everyone to use to include everyone’s style of working…after all, they are my primary users! I added a few pages to give more guidance: a table of contents, global styles page, UI Kit sticker sheet, Illustrations (coming soon), Data Visuals (coming soon), Symbols (master), and Deprecated (to reference older styles.

Check out a few examples of my documentation skills!