Hive Design System

Hive Design System

I joined Hive Home to work on the UI designs for new product and plan pages.

The design of the landing pages had already begun and by the time I had arrived many inconsistencies were apparent. My onboarding included a “grab what you can from the Sketch files” and because of the pace the team worked at there was no documentation for type, colour, buttons, etc.

The UI kit when I joined in early 2018

Alongside the work for which I’d initially been bought in for; I set forth pitching to the Global Head of Web that we create a design system to better align design and developers and simplify out approach to updating and creating new pages for hivehome.com

An early audit of button components further highlighted the need for such a system:

I created a ticket each sprint following this audit to carve out a little time to work on re-creating some components based on what the team were using most of the time. I’d also catch up a few times per week with the lead front-end dev to keep us aligned.

I also ushered in an 8px rule. We agreed to all use an 8px system as this its scalable, cuts the number of design decisions in half, works on all platforms, and is pixel-friendly.

The groundwork

The foundations for the design system were always going to by colour, typography and layout. The brand work by Wolf Ollins underpinned a lot of the colour work however the brand guidelines only covered print and TV design while leaving digital design out entirely.

First pass at colours, excluding accessibility

We needed to consider accessibility however decided it was quicker to all check this independently as designers and aim for AA contrast ratios at all times.

This set of colours reduced the decision time greatly for colour and meant we were able to set out defining design tokens which the developers could all use e.g:

$hive-colour-orange

The only setback we had locking these down was when we realised we hadn’t run things by brand. Once I explained that I had referenced all hex codes against the brand bible we were good to go. Next up was typography:

The primary issue I had here was that across all type on the Hive website there is a CSS rule which is making the kerning something of a nightmare:

letter-spacing: 1px;

When this code was originally added I’m sure no harm was intended, however a lot of legacy UI components were built to these spacings and the website had begun to ‘feel’ like the space belonged. When we tried loading the website without the rule everything felt to tight.

This was a battle I decided wasn’t worth taking up.

Layout was calling so I jumped in to figure out some spacing metrics that would not only work for all design going forward but could also be organically implemented into legacy pages:

Spacing with the 8px grid system

Surfaces are also big part of Hive’s website. Many of the micro-interactions are based on Material Design so we borrow a lot from there:

Putting it to good use

Best of all with this design system was we were finally getting ahead of development. Further with every sprint. Typically we were often the bottleneck for the web team and this meant we had limited time for exploration, but this step back and analysis allowed us to invest in a system that reaps great benefits.

To highlight it’s effectiveness I did a live demo for some of the team members showing the power of HDS (Hive Design System) and how it eliminates the need to think twice about every font style, colour and layout when working:

My < 10 minute checkout creation with HDS

As my tenure at Hive was coming to an end I was feeling good about the impact I had made. Although I was drafted in to help with more hands to create marketing landing and product pages I had managed to shorten time to development, improve design consistency and bridged a missing link between design and development.

I created one more group of components in my final week:

In the end the best learning we had was that it’s the very smallest level of components or styles (especially in atomic design) that have the most impact.

I cannot share the system in its entirety as it hasn’t been released publicly and some parts remain under an NDA. Get in touch to learn more.