Project Background
I am one half of the Design Operations team at CloudBees. Our goal is to optimise the design department to benefit the entire organisation. We do this by providing and managing tools, processes and systems.
This case study talks about how the creation and management of the CloudBees design system, which we named HoneyUI.
The Problem
The lack of a design system resulted in some key problems:
🚫 An unclear, time-consuming development process causing misalignment and little collaboration between disciplines
🚫 UI inconsistencies that led to unpredictable user experiences
🚫 A lack of one source of truth for both design and engineering
☝️ Before
☝️ After
Project Targets (In the first year)
🏆 HoneyUI to be adopted by 45% of CloudBees' products (+40% YoY)
🏆 Improve team satisfaction by streamlining development processes and bridging the gap between design and engineering
🏆Reduce cycle time by 60% by amplifying our speed of delivery through creating reusable UI components and patterns
🏆Increase user satisfaction, measured by a 20% increase in NPS through providing a consistent user experience
The goal was unity and speed - the faster we build, the faster we can gather data and improve.
The Solution
1. Ensuring Consistency
🔎I managed the collaborative building of a central repository of reusable front end components built on top of Bootstrap 4
🔎I worked closely with design and engineering to document usage guidelines for each component & pattern
🔎I outlined a set of design principles with the purpose of empowering all team members
2. Bridging the gap between Design and Engineering:
💡I ensured we were championing designers and engineers to equally own HoneyUI, encouraging them to contribute to the system
💡I set up weekly HoneyUI syncs where both design and engineering were represented and a HoneyUI Slack channel for all questions
💡I pushed for the importance of defining Storybook as our source of truth for both design and engineering - If a component/pattern didn't live in StoryBook, then it did not exist
3. Amplifying our speed of delivery:
I helped streamline a number of processes including:
➡️Designer to Engineer handshake
➡️ Design and Engineering reviews
➡️ HoneyUI component/pattern addition
Below is an example of our HoneyUI addition process:
Product Adoption
HoneyUI was essentially useless unless it was being adopted by our products.
CloudBees has 9 products so I knew product adoption would be a challenge. I embedded myself in product teams to ensure there was always a HoneyUI advocate present, along with over communicating the tangible benefits of the system, and appointing myself as a POC for all HoneyUI questions.
As of today, HoneyUI has been adopted by 6 of our 9 products (66%) and our pace of adoption continues to increase. Below is an example of how we are tracking this:
Team Resources
Additionally, I noticed that there were other ways of increasing our teams speed of delivery:
Problem: Our marketing team was swamped with requests to design landing pages, and update our website quickly
Solution: I created a hi-fi pattern library for the team to quickly pull from to construct consistent HoneyUI designs.
Outcome: The library has saved the marketing designers on avg. 8 hours a week, whilst ensuring unity amongst our marketing designs.
Measuring Success
The following metrics help us to measures success:
⭐ HUI has been adopted by 66% products to date
⭐ Decreased cycle time by 88%
⭐ 87% teams say HUI saves them time
⭐ 11% teams say HUI saves them 12+ hours per week
⭐ 22% teams say HUI saves them 2-6 hours per week
⭐ Increase in NPS from 7.9 to 9.5 (20.2%)
We are also seeing the following:
⭐ Decrease in usability issues
⭐ Decrease in bugs
What about our end-users?
We hope to see an increase in trust of our products through a consistent and predictable experience.
Along with NPS, we're also monitoring quantitative data e.g Are we seeing more visitors to our site after HUI implementation:
What Next?
We are constantly thinking of ways to improve HoneyUI and keep the resource moving forward. My next step is to add accessibility standards to our documentation to ensure that we are always providing an inclusive experience for all users.
HoneyUI is an ongoing project and we are constantly learning as we go. I'd love to hear your feedback or just chat if you have also been working with design systems 🙂
Thanks for reading!