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.

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

No design system.

The main hurdle CloudBees was faced with was the lack of a design system and basic style guidelines. This left created rogue-branding, misaligned representation, and different user experiences across products.

CloudBees had become a “house of brands” rather than one, unified suite. And although there was a dedicated design team, there wasn’t a design system or strong communication/collaboration between product, marketing, design, or development.

The company was in a state of chaotic good – everyone was trying to make things better but going about it differently, resulting in heavy amounts of time spent on duplicate work. A source of truth was needed.

A source of truth.

The CloudBees identity and structure had gone through several changes already and was not only confusing to users but internally as well. New features were being turned out monthly and it all looked like it came from multiple companies with multiple design and development styles. We honed down CloudBees’ identity to embody three main brand archetypes (Hero, Sage, and Creator) and got to work.

To achieve visual uniformity and cross-communication between products, we pitched the first-year targets (see above in the problem statement) and built our source of truth based on atomic design. Not only were these components reusable from a design standpoint, but the code was reusable from a dev standpoint as well. This reduced cycle time while unifying product experience.

Increase in user satisfaction, decrease in usability issues.

With the creation of the design system, rebranding of CloudBees, introduction of unified navigation across products, organization of agile frameworks across teams, and establishing of cross-functional communication, CloudBees has seen huge success measured in the following ways:

👉 HoneyUI adopted by 66% of CloudBees products to date

👉 Cycle time reduced by 88%

👉 Increase in NPS from 7.9 to 9.5 (20.2%)

👉 Decrease in usability issues

👉 Decrease in bugs