Hive Design System

Hive Design System

Managing hivehome.com is a bigger task than it seems at face value.

The website is managed by a team of approx 13 including leadership, project management, data, research, and design – then another 15 or so developers too.

The site isn’t powered by a CMS nor is the design documented. It’s spread across five territories: UK, USA, Canada, Italy, France, and Ireland, in 5 languages. It became apparent early on in my contract with Hive that change was required to the design management on the website.

I initially suggested a design system be created to compliment the UI kit in my second week and the idea was met a little reservedly.

Pitching the design system

To win the team over and buy some time to work on a design system I needed to prove it’s relevance. It’s more than a pretty style guide and provides more function than to settle designs disagreements.

I needed to visualise the benefits of a design system.

One quick way I thought to highlight this design disconnect was a button and links audit. I spent less than five minutes and found 10+ conflicting styles:

The system was to: speed up the design process, provide a single source of truth, minimise design debt.

The groundwork

Before we started, some executive decisions needed to be made.

One I led with was to use an 8px baseline grid. We agreed to all use an 8px system as this is scalable, cuts the number of design decisions in half, works on all platforms, is pixel-friendly, etc.

We changed our nudge settings in Sketch to the following:

Auditing components

As soon as the team had agreed this was worthwhile (it didn’t take much persuasion), I ran into the same issues as those who had gone before me. We had a massive backlog of work and constant business requirements coming our way.

I had to multitask getting work done, auditing our website and documenting components that are newly created.

I set out to create a list of what we’d need to get a head start on improving design process – keeping in mind no time and minimal resource to take this step back.

Phase one

I started the design system tackling out frequently used styles: typography, colour, buttons, forms, alerts, selectors

We quickly started to use these components together, and although we weren’t set on how some parts looked (the alerts didn’t match what was online, the quantity selector was undergoing a redesign) we were all seeing the improved workflow of a shared Sketch library and aligning the symbols to use.

Phase two

This part was based on locking down more significant chunks and actual components based on what we use.

E.g. the fictitious checkout below:

The above example took less than 10 minutes to put together using the updated component library – a library that’s shared locally with the team so we can all rapidly prototype new designs.

Onwards. And upwards

The future of the designs system is now out of my hands, but it’s safe. The value of the system is widely recognised inside and outside of our team.

Marketing, for example, appreciates a link that can be shared with agencies creating 3rd party Hive collateral that is still on brand and pixel perfect.

Unfortunately, I cannot share a link to the design system as it’s under NDA and unreleased publicly.