Bluehost Design System

Creating and documenting the Bluehost product design system

This case study aims to document how we created a design system at Bluehost.

An example UI from one of our products using the Nova design system

Exploration

In an effort to modernize, Bluehost launched a new user experience in 2016. Two years later, the platform’s UI is difficult to maintain and inconsistent page-to-page. In order to reduce custom components and increase consistency, we created a design system built for sustainability and growth.

Bluehost has four primary use cases that drive the functionality of the product.

1. Purchasing and managing domain(s)
2. Purchasing and managing supporting products
3. Building and launching a Wordpress website
4. Manage account settings (including billing)

Design

We wanted to stay as close as possible to the existing aesthetic of the product, and maintain a simpler and clean aesthetic.

Colors

Bluehost is made up of blues, neutral grays and white. Since Blue is the core brand color, it is used for primary actions and navigational links. Orange is used for warnings, and red is used for alerts. Green is only used as a tertiary color to indicate success, and purchase flows.

Typeface

Bluehost uses Open Sans, a simple and neutral font optimized for web, and mobile interfaces.

A glimpse of our master Sketch file for the Nova design system

Building a visual language

Our designers needed to feel ownership over the design system to ensure longterm success. To achieve this, we decided to make decisions as a team. We proposed and approved major new components in design review meetings.

Each designer was responsible for researching and proposing designs for at least one existing component. These meetings included all team designers, and at least one representative from the development team.

Process

1. A designer is assigned to propose a solution for a component group
2. The proposal is distributed across the design team to be “pressure tested”
3. After discussing any issues discovered during testing, the final component is locked down and added to the design system documentation.

Bringing it all together

Documenting the system

The long term goal for Bluebird is to create an internal website documenting the design system. We needed to start sharing styles as soon as possible. Taking our cue from We Works design system, we used Sketch and Google Docs to document all of our design decisions.

The document outline feature of Google Docs, and the ability to link/ anchor to bookmarks and headings provides the navigation.

Tools

Sketch’s editable symbols and text styles made it simple to distribute and maintain a design system. We have a master sketch file for all of the Bluebird design system.

The design system in progress in Sketch

Templates

We created a Sketch template for our team to use, hosted on Google Drive, that has a wide array of editable symbols, text styles, brand colors and grid system built in and ready to go.

Just the beginning

We are started developing the Bluehost design system with the hope of rolling it into the Bluehost product. Our developers are currently updating all of our CSS classes so that we can make global changes to the product and our designers are actively designing with the new design system.