Spelling out our new design system

 Wellford Bank’s outdated design system had become irrelevant and fell into disuse, with UX designers going rogue to create things locally, leading to inconsistent design and longer, pricier build times. So when I jumped on to reimagine a system 2.0, I knew we had to raise adoption. Adoption requires relevance. And relevance requires context. The result? An engaging, beloved component guidelines that keep the “why” at the forefront—and in doing so, become a resource for all designers.

So, what was this project?

As the sole content designer, I worked with seven UX designers to transform the component guidelines and icon library, collaborating between the design systems team and patterns team for alignment, asking feedback from other UX designers along the way.

What made it cuckoo bananas?

Sudden timelines meant we had just a month to crank out our first 8 component guidelines — with no solid template in place. Very build the plane while you’re flying. It was made more difficult because there we also late-breaking changes to the new components themselves, which had eleventh-hour content impacts.

Good, Better, Best Practices

To create the best practices, I triangulated worthwhile “Editorial notes” from 1.0, guidance from north star design systems such as Google Material, and observations from my own experience as a designer and a user. Here was the result of that effort for Inputs.

The (indifferent) devil in the details

By asking the right questions, I pried open the brains of the design system team to shed light on the little-known reasons for various sizes, weights, and styles, so I could arm designers with knowledge to make the best choice (and catch less heat during critiques).“Subtle” shouldn’t be a reason for random choices.

Relevant guidance → less arbitrary design decisions → more intention with detail → beautiful designs

Keeping it scannable

Connecting the dots