A design system in the smart home space

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.

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.

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.

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.

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.

‍