001.jpg

Design Strategy, Leadership, Research

Design System Architecture

 
I lead a cross-functional team to create Designcraft — Web.com’s design system.
 
 

Overview

Web.com’s history of acquiring companies has resulted in a diverse product portfolio. Once a company has multiple software products, the arguments for a design system are overwhelming — they allow better experiences to be built more rapidly at a lower cost. 

The company attempted to create a design system but it didn’t gain adoption. Using strategic product design leadership, I drove numerous designers and developers to create a design system to service the needs of various product teams across the company.


Empathize

To understand why Web.com’s previous attempt of creating a design systems did not succeed, product designers conducted ethnographic interviews, sent out surveys and I facilitated an open forum with key members of more than 10 product teams to discuss their design and development process and their history with design systems. 

Product designers conducted an audit across Web.com’s product portfolio to gain an understanding of the variations in UI, UX and tech stacks. They also ran an analysis of 8 design systems being used by other companies.

 
 
 

Web.com’s teams were not empowered to produce high quality brand-aligned, system-minded products. There was an opportunity to increase the quality and velocity of products if teams used highly reusable assets, leaving room for them to solve complex business issues. 

 
By analyzing the formative data, I hypothesized that successful design systems are not just based on components and tech stack, success is strongly tied to how teams interact with the system on a continuous basis.
 

Many successful design systems are created when dedicated multidisciplinary teams build with simple, reusable, accessible components. It is also important to pair designers and developers together as they create the system. With a part-time resource of designers and developers, I hypothesized that Web.com could create an MVP of the design system in 3 months. 

 

 

Strategy

I aligned executive leadership on a focused problem and opportunity — design systems provide value by reducing workflow inefficiencies and allowing teams to reach their goals faster:

  • Increase dedication to product primary goals.

  • Designing faster and with brand consistency.

  • Hi-Fi Prototype faster.

  • Validate faster.

  • Develop faster.

I assembled a central Design System team and brought in a part-time task force of designers and developers from multiple product teams to collectively build the system.


Design systems allows our team to spend less time thinking about pixels and more time dedicated to solving customer problems.
Lior Belenki, Product Manager
 
 

 

Ideation

I facilitated a brainstorming session where this blended team of designers, engineers, and managers were tasked to create a list of Design System fundamentals. The group set out to align with a 3-month scope and to meet the business and experience needs of over 15 product teams. 

During a brainstorming session, we used Affinity Mapping to categorize the ideas of Designcraft’s principles.

The team established these principles of the Designcraft design system
devices.jpg

Device Agnostic

Designing for multiple screen sizes would create a large product backlog. To reduce the scope of work we decided to make our components as device agnostic as possible.

snap.jpg

Simple

In order to increase the likelihood of adoption across the 15+ product teams, the components of the system must be simple in design and documentation. 

modular.jpg

Modular

Successful systems have highly modular elements. Components for DC will be reused in multiple contexts and they should not be tied to single use cases.

 

Build

A project roadmap was created. 

  • Assigned individual contributors and some managers to build the MVP components.

  • To ensure that the behavior of DC elements was logical from a UX and engineering standard, designers were paired with developers when they built components. 

 

Outcome

The Design system team collects qualitative data to measure the effectiveness of the system and to date, Web.com is benefiting from using Designcraft.  

It provides a single source of truth for building user interfaces. 

  • It’s easy to modify.

  • It saves time and money.

  • It increases consistency across products.

It took the UI Guild 30 days to update the nav.
Now we have central space that renders nav
updates, which takes 30 min
Jeff Young, Lead Software Engineer
The direct impact is the DRY principle - don’t repeat yourself. Without (Designcraft) we will be rebuilding components over and over...which in-turn leads to more turn-around
Arun Shanker, Sr Software Engineer