It was my first day at Accutech. My manager was showing me around our product ecosystem and I started noticing things, things like buttons looking drastically different, form fields having different error message interactions, menus of all kinds functioning in odd ways, and an umpteen of other inconsistencies. It was almost like Accutech never had a product designer on staff before (they hadn’t, that’s a joke) and I knew I had my work cut out for me.

The challenge however wasn’t solely inconsistency. The message I had to get across to our leadership and various teams is that every new variant of button, dropdown, menu, etc. used across our ecosystem represented a certain amount of resources. Because for each of those components that we either made from scratch or borrowed from a library represented the time to chose the styling and desired interactions, the time to code and implement, and the time for QA to review and test functionality and accessibility. It was at this point things clicked for folks, where everyone started to see this wasn’t just a UI/UX issue, this was a business issue with real financial impact.

Five years later (props to those who get the Spongebob reference), we have a design system that all six products in our ecosystem use, two full-time developers on the Product Design team to support it, over 80 unique reusable components that I designed and are used at least in 3,000 instances across our products, and design and development documentation guiding their implementation. We’ve learned so much along the way and made our fair share of mistakes, but I couldn’t be more proud of the collective effort it took us to get here.

See below for a small sample of components we built from the ground up and continue to iterate on.