Problem Statement
No reusable UI or 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 had 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.
First-Year Project Targets
Establish a source of truth
- •Provide designers and developers with the atoms for our design system
- •Align in-house design AND outsource design without visual misalignment
Unify the CloudBees brand
- •Minimize brand confusion by 90% and build up name recognition through familiarity
- •Increase user trust through a consistent visual experience
Build the design system
- •Increase speed of development by creating reusable UI, reducing cycle time by 60%
- •Increase user satisfaction, measured by a 20% increase in NPS through providing a consistent user experience
- •HoneyUI to be adopted by 45% of CloudBees products (+40% YoY)
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
Challenges
No design guidelines
The main hurdle CloudBees was faced with was the lack of a design system and basic style guidelines. This left CloudBees with rogue-branding, misaligned representation, and different user experiences across products.
CloudBees had a number of different products and each had 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.
Solutions
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 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. This reduced cycle time while unifying product experience.
Results
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:
of CloudBees products adopted HoneyUI (as of 2021)
Cycle time reduced
Increase in NPS (20.2%)
time saved by HoneyUI according to product teams
