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 enhance their website’s product display pages. Our collective goal was to introduce updated design principles while retaining the website’s core functionality. Through this collaborative journey, the team realised the benefits of a unified design system for improved synergy between design and development teams.

The challenge

Hive Home’s website was functional, but there were areas where we saw opportunities for improvement in terms of consistency. Specific components, like buttons and navigation bars, seemed to be redesigned frequently, leading to slight inconsistencies in the user experience. Our joint mission was to address these and make the collaboration between designers and developers smoother.

Methodology

  1. UI Audit & analysis: We conducted a detailed audit of the website’s UI components and visual elements. Utilising tools like CSS Stats made it evident that a more consistent design approach was needed.‍
  2. Creation of shared libraries & tokens: Collaborating with the web and app teams, we gathered standard components to address the inconsistencies. Together, we worked on aligning their visual characteristics. The introduction of design tokens was an idea we explored and implemented, striving for consistency in design elements across all platforms.‍
  3. Documentation & blueprinting: Using Sketch, we worked on building catalogues and blueprints for the design system. This ensured that there were clear guidelines for component design and layout.‍
  4. Educative campaign: To foster a deeper understanding and adoption of the new design approach, we made use of Hive's internal communication channels. By sharing insights on design thinking and providing examples of the envisioned changes, we aimed to bring the entire team on board.
A range of buttons I found during my UI audit.
Original brand colours—now in Sketch.
Type styles and guidance on padding.

Creating components

Component creation is fundamental for a design system. Drawing inspiration from the structured yet simple nature of honeycombs, the "Honey" design system was born. Collaboratively, with the web and app teams, we established the foundational components of our website and set forth 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 collective efforts, the Honey design system emerged. Hive Home’s online platform was transformed to offer a more unified user experience.

The positive feedback Honey wasn't solely from external users. Hive's decision to extend my contract was an affirmation of the value that I had brought to the project.

Today, hivehome.com stands as a testament to our collaborative effort. Honey design system continues to be a cornerstone in the company’s design approach, laying the groundwork for any 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.