Building Unity: Shelter's Design System Journey
KEY GOALS
Develop a centralized design system to maintain consistent branding- 1st version.
The Team
1 UI/UX Designer
8 Frontend Developers
1 Scrum Master
1 Product Owner
Time
8 months
Creating Design Harmony
Shelter Insurance needed a unified design language to strengthen our brand identity and streamline the work of our product teams. As the sole UX designer on this initiative, I had to bridge the gap between design and development while learning enterprise-level design systems from scratch.
Gathering the Evidence
We took a deeper look at our current applications by:
Comprehensive audit of existing sites
Analysis of design inconsistencies
What we found
Color patterns that didn’t meet accessibility
Various fonts
Different components
And so many different shades of blue
Building Blocks of Trust
After the audit, it was clear that we needed a design system to help solidify our branding and build trust with our users.
Learning from the Giants
I studied several successful design systems to determine where to start:
IBM Carbon
Dell Design System
Material
Apple
Clarity
Moving forward
After looking at multiple open source systems, our team decided to use Material principles as our foundation. We also established core design tokens: a unified color system, web typography standards, and consistent spacing and grid rules. We developed components iteratively while building an internal application, allowing us to validate our system through practical implementation and shape our roadmap based on real usage needs.
Colors
We added a cohesive range of blues and reds that met accessibility to our branding.
Typography
Libre Franklin and Lato combine readability with modern, clean design aesthetics.
Grid
The 8px grid ensures consistent spacing across all digital platforms
The button trap
We started with the fundamental button component because it seemed like the right place to start. After designing and reiterating with developers thought we realized buttons require significant refinement. Looking back, I wish I had conducted more thorough research with our developers to better understand their needs, especially since many teams at Shelter work without dedicated designers.
Life after the button
We structured our component roadmap around an internal app we were building at the same time.
This parallel development allowed us to:
Plan what to design next
Test our components in a real application
And refine based on how our components worked in real-time
Making an impact
Reduced design and development time
Consistent user experience
A more efficient design handoff
Key learnings
Importance of stakeholder buy-in
Value of starting small
Documentation is key
The balance between flexibility and consistency
Reduced design and development time
Version 1 and 2 complete
I was happy to complete version 1 of the design system because I learned so much about UI, UX and working with developers. I moved to a new team, but the design system was left in good hands as they went on to add more components and create version 2.
Pamela Sextro-Kelly
Contact
