Design systems
Creating the Evidenced design system
Over four years I’ve grown Evidenced’s product design system from a Material Design starter kit into a token-driven library. It's defined in code, and powers the features we ship. It also extends to our marketing site, sales decks and event collateral too.
Where we started
When I joined, Evidenced’s product UI was Material Design out of the box. The brand had just been refreshed for the move from “Hiring Bar” to “Evidenced”, but none of it had been updated in the product yet…
Setting up the foundations
The first thing I did was rationalise the design elements we had. Looking at color, type, spacing and radius, I built a set of tokens that would power the system.
These are defined in code, and used to power the product UI. They're also used to power the marketing site and other collateral. We're a small team and it give us all a consistent system to build from.
Iconography
We didn't have the resources to build our own icon library, but knew we wanted to move away from the Android look of the app. So we replaced the MUI icons with the Iconic library.
Building the components
The library of components is the easy bit. The harder, more useful work is agreeing on the patterns that sit above them.
Delivering a consistent experience
Having a defined system means we can ship features faster and with less rework. It also means we can ship features that are consistent with the rest of the product.
As a product team, we're now building features using AI and having a design system means we can have confidence in what the AI is generating. Giving it the necessary guardrails to make sure it's on-brand.
Beyond the product
The same tokens and components are used in other areas of the business. The marketing site, sales decks and downloads all draw from the same palette, type scale and component vocabulary, so everything we put in front of a customer feels consistent.
The polished and considered look helped Evidenced present itself as a premium product, which enabled it to secure multiple rounds of funding over the years.