A design system in the smart home space

Honey is a design system for Hive Home, a smart home company based in the UK. I led Hive’s first design system to streamline the design process and user experience with beautiful UI and cohesive journeys.
2018
Hive Home
Sketch, Adobe CC

As a product designer, I had the opportunity to work with Hive Home, a leading smart home technology provider, during a contract to redesign their website product display pages. During the redesign process, I identified the need for a design system to improve communication across design and between designers and developers.

The challenge

Hive Home needed to improve communication across design and between designers and developers. The website's UI could have been more consistent, with commonly used components, such as buttons, navbars, and form inputs, constantly redesigned and not standardised.

Methodology

I thoroughly audited the website's UI to capture every component and logo. I ran the website through CSS Stats, which revealed the need for standardised components.

A range of buttons I found during my UI audit.

To address this issue, I worked with the web and app teams to extract standard components and determine their appearance. In addition to creating a shared library and components, I introduced design tokens that allowed the consistent application of design attributes across the entire website.

Original brand colours—now in Sketch.
Type styles and guidance for padding.

I created catalogues and blueprints inside Sketch for components with specific spacing, layouts, or arrangements to document the design system. I also 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.

Creating components

Creating components is a critical part of any design system process. As part of my work on the "Hexagon" design system at Hive Home, I worked closely with the web and app teams to extract standard components and determine their appearance.

More in-depth documentation inside Sketch for quick reference.

We identified the most commonly used components across the website, such as buttons, navbars, and form inputs. We then created a set of guidelines to standardise their design and ensure consistency across all pages.

Using the system with new product image renders.

Results

Hive's implementation of the "Hexagon" design system was a great success, and it created a more consistent and user-friendly customer experience while streamlining the design and development process for the company's internal teams.

As a result of my work, Hive extended my contract twice because I added so much value in my short time there. The final screens on hivehome.com are 100% from the design system. The "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.

A range of styles and components from Honey.
Some of the first pages I made using Honey.


More case studies

Theft Insurance Flow Redesign

During some recent free time, I explored how the rental or hire industry could increase the sign-ups for theft or other insurance during checkout flows. Here's some of my thinking from a couple of hours.
Take a look

GoodNotes Design Leadership

Supporting 12 designers to define the future of digital paper, bring high-quality study notes to every student, and tell the world about GoodNotes. Led development of the "Ink" design system.
Take a look

LubePro Global

The LubePro app had issues that made it awkward for technical advisors to capture and analyse data during site visits. They found it quicker to use a notepad and their iPhone camera.
Take a look

Global Traceability Platform

Shell faced a three-month deadline to achieve full traceability for their lubricant products across bottles, cartons, and pallets in multiple locations worldwide. As the lead user interface designer, I collaborated with a user experience designer to map out essential business movements and streamline workflows.
Take a look

MarketHub 2.0

Shell MarketHub, a $19B B2B e-commerce site, had a considerable task when investing in a customer-centred digital overhaul. With 100k monthly orders, we faced an enormous challenge.
Take a look