Project Overview: In the midst of my first major key website project at Justworks, the launch of an entirely new content platform, we uncovered the need to set standards and consistency within our designs. This would apply across the website that already exists as well as create a shared language across new experiences we want to create. Using Atomic Design, we rebuilt our design system from the ground up starting with atoms (foundations) and ending with a complete site refresh. The foundations we created would go on to be used in countless experiences from our new content platform, the resource center, all the way to entirely new products like the Guidepost.
Problem: Prior to J.A.D.E (Justworks Approach to Design Enhancement) there were no standardized design modules. Pages across the marketing site felt disjointed and disconnected with no real visual consistency. Modules would need to be developed from scratch which would lead to lengthy design sprints and heavy lifts for our developers.
Goals: We needed to create a scalable and reusable design system that can allow for consistency across numerous digital experiences and a shared language between designers and developers.
Foundations
Grids & Spacing
Typography
Color
Aspect Ratio
Patterns
Site Refresh
