Honey Design System

Honey is a robust design system crafted for Hive Home, a prominent smart home technology firm located in the UK. As the forerunner in the conception and realisation of Hive's inaugural design system, I envisaged and brought to life an interface that was not just aesthetically appealing but ensured fluid and cohesive user journeys.
Design system
2018
Sketch, Adobe CC

I worked with Hive Home to improve their website’s product display pages. We aimed to update the design while keeping the website’s core functions. Through this collaboration, we saw the benefits of a unified design system, which helped the design and development teams work better together.

The challenge

Hive Home’s website was functional, but some areas needed improvement. Components like buttons and navigation bars were often redesigned, leading to inconsistencies in the user experience. We aimed to fix these issues and smooth the teamwork between designers and developers.

Methodology

UI Audit & analysis: We conducted a detailed audit of the website’s UI components and visual elements. Using tools like CSS Stats, we determined that a more consistent design was needed.

Creation of shared libraries & tokens: We worked with the web and app teams to gather standard components and fix inconsistencies. We introduced design tokens to ensure consistency across all platforms.

Documentation & blueprinting: Using Sketch, we created catalogues and blueprints for the design system. This provided clear guidelines for component design and layout.

Educative campaign: We used Hive’s internal communication channels to help everyone understand and adopt the new design approach. We shared insights on design thinking and examples of the changes we envisioned.

A range of buttons I found during my UI audit.
Original brand colours—now in Sketch.
Type styles and guidance on padding.

Creating components

Creating components is fundamental for a design system. Inspired by honeycombs, we made the “Honey” design system. Together with the web and app teams, we established the foundational components and set guidelines to maintain design integrity.

More in-depth documentation inside Sketch for quick reference.
Using the system with new product image renders.

Results

Thanks to the team’s efforts, the Honey design system was created. Hive Home’s online platform now offers a more unified user experience. The positive feedback wasn’t just from users; Hive extended my contract, showing the value I brought to the project.

Today, hivehome.com stands as a testament to our collaboration. The Honey design system remains vital to the company’s design approach, providing a solid foundation for future developments.

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

Ink Design System

Stepping up from an IC, I found the biggest impact I could have on Design Ops and the maturity of the design organisation was by applying my skills in design systems to lift the company’s quality bar

An Award-Winning Design Team

I transformed GoodNotes' design team into an engaged, connected, high-performing remote team of 11 world-class designers from 8 countries across 5 time zones.

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.