top of page

Design System

Shelter lacked a core system of components.

Key Goal

Create a design system to bring consistency across our applications.

The Team

  • 1 UI/UX Designer

  • 8 Frontend Developers

  • 1 Scrum Master

  • 1 Product Owner

Timeline

8 months​

Untitled design (9)_edited.png

In the beginning...

When I started at Shelter, I worked for a subsidiary called Say Insurance.  Our design system allowed us to create and build new designs quickly and efficiently.

Unfortunately, Say closed six months after I began my UX career, but lucky for me, I was moved to Shelter.

Where Say was more nuance, Shelter was more traditional and not many departments had much experience with UX.  So as my manager worked to onboard the company to UX, she also decided it was about time for a design system.

Of course as an eager junior designer, I jumped at the chance for a new learning opportunity and jump in I did.

6_edited.png

We found incosistencies...

Shelter lacked a consistent and cohesive brand across its external and internal sites.

 

Our team conducted an audit and found over eight shades of blue and different fonts that didn’t match our style guide.

It became apparent that designers and developers needed consistent guidance on building and deploying web applications.

1.png

Which led to questions...

  1. Where do I start?  

  2. Who is this for?
  3. What are other design systems doing?  

  4. How do I design components when there are so many options?  

  5. Documentation?

  6. Help!  I'm a junior designer and what did I get myself into? 

7_edited.png

And those questions needed answers...

We decided to take examples from different open-source design systems to get started. We looked at IBM Carbon, Dell, Material, Clarity, and Apple.

During this process, we looked for a simple open-source system that could be implemented quickly and provide enough components to get teams across Shelter started.

We liked specific open-source systems for their simplicity, but we also needed to look at a good range of components.  

We also had to keep in mind the Shelter Style guide, and work with marketing to get style changes approved and reign in all the inconsistencies.

3.png

Which led to design and development...

The devs and I agreed to design and code based on Google Material, and we worked together to prioritize components. 

Our team was also simultaneously working on an internal application, which helped us choose which components to build first.

So, where did we start? With the almighty button, because you always need a button.  But, so much thought goes into this particular component and if felt like we rushed to get it done.  We came back many times to redesign and rename; hashing out the "best" way to handle buttons.

As I look back, we should have asked developers across the company more questions to determine their component needs. Many teams across Shelter don't have designers for their applications, which is why we wanted to build the design system.

As for the designers, we're a small UX team so we can discuss components and content amongst ourselves.

Documentation:  
I started DS documentation in Confluence but handed it over to another UX designer so I could focus on the designs.

4.png

And we learned it's a journey, not a sprint.

Design systems are complex but well worth the journey.

We started this project to make Shelter a cohesive brand. However, a design system also allows designers and developers to work quickly and efficiently.  

As a newbie to UX, this was a demanding project. I learned and failed fast. Because of my inexperience and being the sole designer, I ran into complications while working in Figma and understanding all the details that go into a DS. 

But I carried on and am now happy to say that I completed version 1 while simultaneously building another application using the components our team created.

I'm working on another project, but version 2 has been released, and different teams can use the components we have made so far.

The Product

bottom of page