Design Systems
Creating The Right Design System
Design Systems are a set of standards for designers and developers to work from. What makes them so effective, are the libraries of reusable UI and code that speeds up the build of new products and features.
A good design system should constantly evolve to better serve the needs of its customers, an organization’s product and/or marketing teams. We created our design systems in-house using Figma. We created design systems for Web.com, Network Solutions, Host Gator, BlueHost, Domain.com, and Register,com.
Role: Creative Direction & Product Owner
Service
Creative Director, Visual Design, UX, Figma, Branding
Client
Web.com, Network Solutions, Bluehost, HostGator, Domain.com
Year
2022-2024
Overview
During several design reviews across different product teams it became clear that both the design and engineering teams were spending time, slowly developing bespoke UI for their products. Knowing the teams could make a larger impact focusing on solving customer problems versus developing the same components and patterns, we embarked on a company wide initiative of building a proprietary design system.
Why a design system is important
Internally, a design system allows teams to rapidly and effectively move from hypothesis to release by speeding up the prototyping, testing and validation phases. This allows for more releases on a product’s roadmap and a more consistent customer experience.
Externally, a design system improves customer satisfaction by providing better solutions through quicker release cycles. Additionally, a design system can build customer trust by utilizing consistent UI/IXD patterns through the customer journey.
In the images below, by utilizing the design systems, we were able to build out consistent elements in a fraction of the time, by having components and patterns built out in our brands design systems.
The biggest learning curve was establishing a contribution process for the design and engineering teams.
This process started with the prioritization of components and patterns that were most prevalent. This helped us determine which components and patterns would make the largest impact.
Once approved, the rest of the documentation would be placed in the file with the asset and handed off to the developer to build.
Once built, the code would be placed in the repo and made available on the site.
Outcomes
By building out the design system from fonts and colors, to complete UI patterns, we worked 60% faster in creating emails and product pages.
