Problem Statement

Reusable UI and uniform experience.

CloudBees is a remote-forward company with employees and clients across the globe. Its focus is on providing enterprise DevOps solutions by enabling developers with tools to deliver quality software while also providing management with equally powerful tools.

CloudBees has a number of different products and each started their own visual directions and component libraries which caused brand confusion. With the rapid advancement of offered services, CloudBees was in great need of a uniform experience across brand and product as well as reusable UI to increase delivery speed.

 

A sample of CloudBees collateral created within the same year (left) vs our proposal using a design system and reusable UI (right).

 

First-Year Project Targets

1. Establish a source of truth

  • provide designers and developers with the atoms for our design system

  • align in-house design as well as outsource without visual misalignment


2. Unify the CloudBees brand

  • Minimize brand confusion by 90% and build up name recognition

  • Increase user trust through a consistent visual experience (accomplished partly through product navigation)


3. Build the design system

  • Increase speed of development by creating reusable UI components and patterns, reducing cycle time by 60%

  • Increase user satisfaction, measured by a 20% increase in NPS through providing a consistent user experience

  • HoneyUI (the CloudBees design system) to be adopted by 45% of CloudBees products (+40% YoY)


4. Embed cross-functional communication

  • Improve team satisfaction by bridging the gap between design and engineering

  • Reduce duplicate work by 95%

  • Share discovery and research, increasing PM collaboration