Honey Design System

Pitch, buy-in and launch of a design system while on a small contract

Role

Product Designer

Date

2018

Timeline

3 months

Tools

Sketch, Adobe CC

The challenge

Hive Home is a leading smart home technology provider, including smart thermostats, smart lights, and smart security systems.

During a contract to redesign their website product display pages, I identified the need for a design system to improve communication across design and between designers and developers.

Methodology

I thoroughly audited the website's UI, capturing every component and logo found on the website and partner sites.

Also, I ran the website through CSS Stats, a handy tool that can identify rewritten rules and quantify the number of colour and type styles declared, how many background colours, spacing parameters, and more.

Buttons were our worst offender.

A range of buttons discovered on the website.

The audit revealed that commonly used components, such as buttons, navbars, and form inputs, were constantly redesigned and needed to be standardised. The misalignment led to confusion among designers and developers, who needed guidance on which versions to use.

Also, I found that more than 30 versions of a colour were in the website's CSS. In the Sketch files, colours weren't linked to a remote library; designers were colour-picking from the website when they needed a colour instead.

To address the issue, I worked with the web and app teams to extract standard components and determine their appearance. I also went back to the original brand guidelines to determine what the Hive colours were, what the type styles should be and standardised spacing with the 8px grid system.

The team reviewed and confirmed which components were most typical or relevant and agreed on their design. We also had a few weekly sessions to lock down the type and colour styles and load them into a shared Sketch Library.

In addition to creating a shared library and components, the design system at the Hive used design tokens. Design tokens are a set of design-specific variables that can be used to consistently apply design attributes across the entire website, such as colours, typography, spacing, and more.

With a front-end dev, I created a set of design tokens that were based on the company's brand guidelines and defined these tokens in a platform-agnostic format with JSON. The tokens were then used throughout the website's codebase, allowing easy updates and consistency across all pages.

For example, instead of hardcoding specific hex values for Hive's brand colours throughout the website's CSS, we created a design token for the brand colour, which the team could easily update in one central location.

This ensured that the brand colour was consistently applied throughout the website and could be easily corrected.

Design tokens also helped to improve collaboration between the design and development teams, as the tokens provided a common language for discussing design attributes and ensured that we accurately translated the design team's vision into code.

Additionally, because the tokens were defined in a platform-agnostic format, they could be easily exported and used in other platforms, such as mobile apps, thus ensuring consistency across all the company's products.

New cards component using the design tokens agreed on.

Documentation

To document the design system, I created catalogues instead of traditional documentation, keeping track of all decisions as the team made them. A trick I picked up was to develop blueprints inside Sketch for components with specific spacing, layouts, or arrangements.

With a blueprint, a designer could drop a bigger component and then detach it to understand how common spacing was measured. This was particularly powerful with form components.

A blueprint for the checkout component, made of many atomic components.

Internal communication was crucial for the design system's success. I used the company's internal social media platform to explain terms like design thinking and UX and to share real-world examples of how the site would look using new styles and components.

Another task I took on — while we were in the spirit of DesignOps — was to help standardise how Hive presents product imagery. I shared a prison-lineup-style image that helped designers at a glance tell how big one product should be next to another.

Even an agency working with the company on 3D renders of the product range requested a copy of my line-up.

Results

Hive's implementation of a design system was a great success. It helped them stay competitive in the tech industry by creating a more consistent and user-friendly customer experience while streamlining the design and development process for the company's internal teams.

A handful of the styles and components on launch.

"Hexagon" design system has become an integral part of the company's design and development workflow and will continue to be used for future updates and developments.

Hive extended my contract twice because I added so much value in my short time there. I'm proud to see it in use on their website today.

Final screens on hivehome.com — 100% from the design system.


But wait, there's more...

Read another case study

Shell MarketHub

$19B e-commerce platform redesign
UI, UX, Design System, B2B

Shell GTP

Traceability on bottles, cartons, pallets
UI, UX, B2B

Shell Lubricants

Site assessment tool for field advisors
UI, UX, B2B