building a custom design system on tailwind
working smarter, not harder
date and role
Principal designer
2021
summary
We needed to build an alpha proof-of-concept for a new system quickly, but not at the sacrifice of quality. We took the common library Tailwind, with prebuilt code components, and fully customized the design and interaction patterns to fit our use case. With this approach, we saved weeks of engineering time of building a front-end infrastructure with the custom design system we wanted to achieve.
challenge
Our biggest challenge from engineering was a lack of resources and of time. We had one front-end developer and a small allocation of a full-stack engineer’s time, and an alpha timeline of only a few sprints. Talk about chaos.
From a product design perspective, our challenge presented itself very quickly. How do we make white-label live and breathe our brand’s point-of-view? How do the out-the-box interaction patterns need to be pieced together to make sense to the product’s demographic so we can go test it with real people?
solution
We took the core underpinnings of Tailwind, focused on the parts of the system we needed for our project, and redesigned the front-end experience of the components to fit the project’s needs while maintaining the wonderful accessibility that Tailwind affords.
We created design system and editorial guidelines, component usage guidelines, color palettes with intent—not a stone unturned. With this, we created a very intentional design system that engineers could use to rapidly build portions of the alpha proof-of-concept with good user experience at the core.
results
While the alpha project ended up getting sidelined, we were able to pivot our work into updating our existing custom Storybook components and take accessibility-baked, customized Tailwind components to update some our biggest problems in the existing system.
In doing so, we saw fewer accessibility issues while maintaining consistency in the product.
