CDRO — CD Release Orchestration Redesign
Design Manager — full product redesign, leading a team of three designers
CDRO's interface was built for pipeline configuration experts, but CloudBees needed to reach a broader engineering audience. At the same moment as the redesign mandate, the Honey UI design system was disbanded — the team lost its design-system foundation just as it faced its largest redesign challenge.
Ran a full double diamond with a team of three designers: discovery through delivery across the core CDRO UI, a new MyWork dashboard, a manual approvals widget, and YAML configuration surfaces. Adopted Material Design/MUI as the new design language, built a theming system on top of it, and prototyped each feature area before engineering handoff.
01 Discover
CDRO early wires — initial discovery, current-state mapping, and first redesign direction
CDRO basic UI and dashboard concept — early structural exploration
Release users had no consolidated starting point in CDRO. Pipeline status, task queues, and approval requests were scattered across separate views with no single home screen.
A modular, widget-based dashboard where users could configure their own view — adding, removing, grouping, and repositioning widgets to match their workflow. The widget library introduced a self-serve model for layout management.
02 Define
CBUI login — MUI design language applied to login surfaces
03 Develop
CDRO microinteractions — animation and state-change detail
MyWork Dashboard
MyWork dashboard 0.2 — release engineer home view
The 0.1 dashboard prototype had a practical flaw: at smaller widget sizes, the header control bar overloaded with icons, making it hard to act on the right control. The quick start guide was also non-sequential — unclear which step to do next.
Consolidated widget header controls to reduce icon count at compact sizes, restructured the quick start guide into a sequential task model, and refined the drag-and-drop interaction so users could reposition widgets without accidentally triggering other controls.
Manual Approvals
CDRO manual approval widget — full interaction arc and approval flow
Release users in compliance-heavy environments had to manage approval queues manually, but CDRO had no consolidated surface for it. Requests were buried in the pipeline view, and bulk operations weren't possible at all.
A two-layer approval system: a dashboard widget for quick individual approvals and status overview, and a dedicated data grid in the notification center for bulk editing, filtering, sorting, and column management across large approval queues.
CDRO 0.4 — manual approval widget iteration
The previous approval widget required users to navigate to the pipeline view to approve requests — interrupting their workflow every time they needed to clear an approval, even for simple cases with no ambiguity.
Added inline approval from the dashboard widget (data grid with pagination, quick preview, undo), a summary toggle for users who only need a count, and a full notification center with tabbed management and bulk actions including per-task comment and review.
AI Integration — BeeBot
BeeBot — AI-assisted release management prototype
CDRO dashboards required manual widget configuration — users had to know which metrics existed and how to surface them. Getting meaningful pipeline visibility required significant product knowledge before the dashboard could deliver value.
A conversational AI layer that interpreted natural language requests — 'what was our release frequency this month vs last month?', 'add failed runs', 'create a DORA metrics group' — and built the corresponding widget layout in real time, without requiring users to navigate the widget library.
Responsive Design & Theming
CDRO theming — Material Design token system and CloudBees brand layer
Material Design's default colour system needed adapting to carry the CloudBees brand identity without overriding the accessibility guarantees and semantic logic baked into Material Design's role-based token model.
Tested foreground/background combinations across CloudBees brand colours, identifying how illumination behaviour varied by hue — informing the mapping between CloudBees semantic tokens and Material Design's colour roles.
CBUI responsive layout — fluid grid across breakpoints
CBUI breakpoints — responsive behaviour across viewport sizes
YAML Configuration
04 Deliver