The problem
At Afresh, a startup making products for grocery stores, our UI patterns and things like type styles and colors were becoming inconsistent as our design system became out of date. No one really knew how to use the current library (established about a year before) - this was costing us time and affecting quality.
The goals
We needed a shared up-to-date library that would increase our speed and make components consistent.
Research
How did our design team feel about the current system and what needed to change to make it successful? I began an internal research project that consisted of 8 user interviews with the team, along with a workshop to gather further insights and ideas.
I found that my teammates felt using the system was a struggle, they were distrustful of the current library, and often confused by it.
Contributing to the library was unclear, our design system was lacking some foundational rules, and we had some misaligned expectations as a result of tech debt that had been accumulating.
A few ideas from here:
Audit system
Make templates
Go back and spend time defining foundations like color, spacing, and typography
Auditing
Once we had established our game plan, I set out on completing an audit of our product suite to figure out where there were differences in the system and our live products.
Designing
I created templates for documenting the system and came up with a new type scale, used figma tokens for colors, and documented the brand icon library rules.
Then there was a problem
Documenting was great for sharing rules but it was a headache to keep updating and no one was reading it… We decided to scrap the documentation entirely and instead spent time making really nice components that would be easy to grab and use.
Final
By relying on well-built components and strong typography, grid, and color foundations, we found that designers were using the library more and it was easier to update.
