Smart Home Design System

Hive Home · Design System · Sketch · 2018

While on contract to redesign marketing pages for Hive smart home I identified a need for a design system to improve communication across design and between designers and developers. Here’s what I did while on contract at Hive.

My task

I found myself constantly re-creating simple components. Buttons, navbars, form inputs and other frequently used pieces of the Hive website weren’t living together under one roof. Designers were constantly re-designing them which meant we had a handful of versions and developers were unsure which to follow.

The marketing landing pages I was hired for 😌

User interface audit

To gauge the scale of my operation I started with a humble audit. I scoured every live design I could across hivehome.com and Hive’s presence as a concession on partner sites. I screenshot every button I could find. Every input. The logo. Every representation of Hive was captured and grouped so I could pitch my case that this was required.

Buttons I discovered during my audit.

Design

The nitty-gritty! Once I’d done the audit I worked with the other designers on the web team and a couple from the app team—it helps to make more friends in this case, particularly as I wasn’t looking to step on anyone’s toes here. I extracted really common components and asked them to review and confirm which they saw as most common or relevant, and to help identify how they should look.

A screen from my ‘roadshow deck’ where I’d request open feedback on my perceived components.

Communications

I can’t remember specifically who said it, but it’s stuck with me: If 100% of potential adopters aren’t using 100% of the system’s features, it’s failing. I knew it would be an uphill battle encouraging the adoption of the system, so I had to sell the benefits. At Hive we used Facebook Workplace and had “Hivebook” a place where we celebrated successes, encouraged open working and connected with colleagues we otherwise might not interact with.

I posted frequently on Hivebook about design in Hive, breaking down terms like design thinking and UX. Democratising design through a comfortable medium where I could gauge feedback with Facebook Likes really amplified the message and helped get the word out about the design system as it was taking shape. I recall sitting in a feature team meeting and hearing a product owner ask “Can this use the new design system?”.

Results

The design system lived on long after my contract with Hive ended. In fact, I was offered a contract extension based on my impressive output and starting the design system initiative.

Design language excerpt

With the system, we could all accomplish more work in less time. Working on checkout I could design not only the logged-in journey but a guest checkout flow that aligned with Hive’s design principles. Rapid prototyping in high-fidelity was unlocked and we were able to test ideas sooner with more users.

I remember when I joined we were using Lookback for usability testing every 3–5 weeks. When I left it was almost weekly.