Consistency and efficiency

With the expansive growth of the website over the last 4 years, we realized that to make sure we maintian a consistent look and feel and improve efficiency of the dev team in creating new features, we needed some help. We created a design system across the site to unify and create rules and guidelines for everything on the site.

We based the system off of Brad Frost’s atomic system, and built a custom online resource to display atoms, molecules, organisms and more. Users of the system can see all these components in their code form and visually.

  • 250+ Atoms, Molecules, and Organisms.
  • 99% Improvement in consistency of styling throughout the site
  • Cut down development time and impoved code base
  • Improved workflow between design and dev teams
  • Increased collaboration between designers and developers

250

Components Created

99

UI Consistency

10

Increased Design Speed

Collaborations & Efficiency

With all the improvements that our design system brought to the site and the teams, the best byproduct of it was something that wasn’t so easily measurable. Through the design and building of the system and the day to day use of it, I’ve seen an amazing increase in collaborations between the two teams.

More and more I can see each team reach out to the other for help and insight into whatever they are working on. In my opinion, this was the best outcome of the project.

Status Updates

Atoms, Molecules, and Organisms