Overview
Carbon for Cloud is an extension of Carbon, one of the largest and most well-known open source design systems.
Carbon for Cloud provides cloud-specific components and patterns used by hundreds of designers and developers across IBM Cloud, helping teams create consistent experiences across a large and complex product ecosystem.
The system lacked a lightweight, guided pattern for onboarding and simpler provisioning flows, leaving teams without an easy way to walk users through those flows.
Who we were designing for
We needed to design a pattern that was flexible enough for product teams to reuse, while remaining simple and intuitive for the customers completing these workflows.
Problem
The stepper proposed by the design systems team broke down as workflows became more complex
To fill the gap, the Carbon for Cloud team began exploring a horizontal stepper intended to make guided setup flows feel simpler and more modern.
While the new pattern was visually streamlined, usability and scalability challenges became a concern as my Security product team adapted it to real workflows. As flows grew longer and content became more complex, the horizontal structure struggled to accommodate additional steps, longer labels, and responsive layouts.
Common pain points found with the original proposed horizontal stepper design
Issues
Limited scalability
Longer workflows required lots of horizontal scrolling
Content constraints
There was not a lot of vertical space for longer content
Poor accessibility
It was difficult to view the preview of next steps
How might we…
Exploration
Exploring a more flexible approach to guided workflows
I explored a vertical alternative to the proposed horizontal pattern called the Vertical Accordion Stepper. By expanding the active step inline and collapsing completed steps, the pattern created more room for complex content while keeping the broader workflow visible.
I brought the concept to product teams across IBM Cloud to understand how it would perform across different workflows, uncover edge cases, and identify the flexibility teams would need from a shared component.
Research
Testing the new pattern against the existing experience
To evaluate whether the Vertical Accordion Stepper actually improved the onboarding experience, I conducted comparative usability testing with IBM Cloud designers and developers.
Participants completed the same provisioning task using either the new Vertical Accordion Stepper or the existing full-page provisioning flow. I randomized which experience participants received to reduce ordering and treatment bias, then gathered feedback on usability, navigation, comprehension, and overall preference.
Feedback from product teams across IBM Cloud
A majority of participants preferred the new experience
8 of 13 participants preferred the new Vertical Accordion Stepper, compared with just 2 who preferred the existing full-page provisioning flow.
The remaining 3 participants had no clear preference, suggesting the new pattern improved the experience without introducing a strong usability tradeoff.
Design
A guided flow that scales with the complexity of the task
The final Vertical Accordion Stepper keeps the entire journey visible while focusing attention on one step at a time. Each step expands inline when active and collapses once completed, allowing users to maintain context without being overwhelmed by the full form.
The vertical structure gives teams the flexibility to accommodate longer workflows, descriptive step labels, and more complex content without the space constraints of a horizontal stepper.
Feedback from product teams across IBM Cloud
Usability testing uncovered several points of confusion in the initial concept. I used these findings to refine the component's interactions and guidance before moving it forward with the Carbon for Cloud design systems team.
Making review more discoverable
Over half of participants missed the review action. I replaced the icon with a clearly labeled Review button.
Making completed steps easier to edit
Participants needed a clearer way to revisit completed steps. I added an Edit action using a familiar IBM Cloud pattern.
Rethinking optional steps
Optional steps caused confusion about what was required. I moved optional fields into required steps to simplify the flow.
Conclusion
The Vertical Accordion Stepper evolved from an alternative to the horizontal stepper into a pattern shaped by feedback from teams across IBM Cloud and validated through usability testing.
The final component and usage guidance were handed off to the Carbon for Cloud team for development. While implementation had not been completed by the time I left IBM, the project demonstrated how a product-specific need could be translated into a flexible pattern designed to work across a broader ecosystem.
What I learned
Designing for a design system required me to think beyond the ideal experience for a single product. I had to balance user needs with the flexibility, consistency, and scalability required for a component that could support many different teams and workflows.
