Supports longer labels and complex flows, improves clarity and scannability, replaces inconsistent custom steppers, reinforces ‘one step = one task,’ reduces cognitive load with a top-to-bottom layout, and creates a unified, future-proof workflow pattern.”
Redesigned Splunk’s Step Bar for enterprise complexity - adding a vertical variant, better hierarchy, and stronger accessibility. Now a consistent workflow framework adopted across teams.
Introduced a vertical variant for long labels and complex flows, added an opt-in heading model for proper grouping, and reinforced a clear ‘one step = one task’ mental model. Standardized DOM, keyboard, and screen-reader behavior, and aligned patterns with Cisco design systems while staying consistent within Splunk.
UI Component Library
Architecting the core design system that powers Splunk's ecosystem
Component Design
Splunk Design System
Interaction Design
Accessibility
Mixed-Methods Research
The Step Bar is a core component used across Splunk for creation, configuration, and onboarding flows. I led the redesign to make it scalable for real enterprise complexity - introducing a new vertical variant, a clear hierarchy model, and stronger accessibility standards, while aligning with other Cisco design system teams. The result is a flexible, consistent, and future-proof workflow framework now adopted across multiple product teams.
Overview
The problem
No supported vertical variant
-
Splunk UI design only offered a horizontal Step Bar, so teams created their own vertical versions.
-
This resulted in inconsistent UX, accessibility gaps, and divergent interaction behavior.
-
Teams needed a vertical layout to support longer labels, more steps, and complex workflows.
Misuse of hierarchy and grouping
-
Without a supported section/heading model, teams relied on sub-steps to group tasks.
-
This caused semantic and accessibility issues.
-
Collapsible behaviors introduced confusion and inconsistent navigation.
The Step Bar needed to evolve from a simple list into a structured, scalable component without compromising clarity or accessibility.
The solution
-
Introduced a vertical variant designed for long labels and high step counts.
-
Added an opt-in heading model to support grouping without sub-steps or collapsible patterns.
-
Reinforced a clear mental model: each step = one unit of work.
-
Established predictable DOM order, keyboard navigation, and screen-reader behavior.
-
Aligned the component with other Cisco design system teams while keeping consistent across Splunk DS components.
Process
Discovery sessions with 7 designers across product teams
Audited existing implementations across Splunk’s product toolkits
Researched leading design systems
Mapped hierarchy and grouping needs
Research
Partnered closely with accessibility, engineering and product
Aligned with other Cisco design systems
Cross-functional alignment
Design & Execution
Designed the vertical variant
Ran iterative reviews and refinements with engineering
Authored detailed documentation
Supports longer labels and higher step counts.
Improves clarity and scannability for complex flows.
Replaces inconsistent custom vertical steppers across products.
Supports mental model 1 step = 1 unit of work
Reduces cognitive load with a natural top-to-bottom layout.
Creates a unified, future-proof workflow pattern for all teams.
Before
Product impact
After
-
Delivered a standardized vertical Step Bar, eliminating ad-hoc implementations and unifying workflows product-wide across Splunk
-
Established a clear, accessible hierarchy model by replacing sub-step misuse with explicit headings - improving clarity, predictability, and screen-reader behavior.
-
Improved cross-system consistency by aligning structure, spacing, and interaction logic with Magnetic while maintaining SUI’s product realities.
-
Reduced design and engineering debt by providing a scalable, documented workflow framework - leading teams to adopt the new pattern even before final release.
-
Strengthened accessibility and feasibility through deep collaboration with engineering and accessibility, ensuring a compliant, robust component built on well-defined ARIA, DOM, and keyboard standards.
Result
Product teams grouped steps inconsistently - mixing steps, sub-steps, and headings - which led to unclear hierarchy, broken navigation, and accessibility issues. How we solved it: Introduced a constrained, opt-in heading model that supports grouping without sub-steps, reinforced with clear guardrails (e.g., no single-step sections). This preserved flexibility while eliminating misuse.
Uncontrolled Flexibility
Challenges
Sub-steps created hidden navigation, unpredictable DOM order, and complex screen-reader behavior, yet many teams depended on them for grouping. How we solved it: Replaced sub-steps with always-visible headings and clarified that each step represents one unit of work. This improved predictability, fixed semantic issues, and ensured consistent screen-reader announcements.
Accessibility and interaction
Other Cisco design systems used visual elements (like connector lines) that didn’t translate cleanly to SUI’s workflow complexity, causing potential divergence. How we solved it: Partnered with Magnetic to align spacing, structure, and state logic while intentionally removing connector lines and documenting the decision trail for future unification.
Alignment without forced parity
DOM structure, ARIA labeling, and keyboard expectations limited some design directions. Ensuring accessibility without overloading engineering was a constant balance. How we solved it: Held regular working sessions with engineering and accessibility to validate designs early, refine interaction models, and ensure every pattern shipped with clear ARIA, DOM, and keyboard guidance.
Technical constraints
The problem
Without a supported vertical Step Bar or proper hierarchy model, teams built inconsistent versions with UX and accessibility issues. The component needed to evolve into a structured, scalable workflow pattern.
The solution
Discovery - interviews, audits, Design System research, hierarchy mapping.
Alignment - Worked with accessibility, engineering, and Cisco Design System teams.
Delivery - Built the vertical variant, iterated with engineering, and documented.
The process
Product impact
Before
After
Delivered a standardized vertical Step Bar that replaced ad-hoc versions, unified workflows, and reduced design/engineering debt. Added a clear, accessible heading model, aligned patterns with Magnetic, and strengthened ARIA, DOM, and keyboard standards through close engineering and a11y partnership.
Result
-
Uncontrolled Flexibility
-
Accessibility and interaction problems
-
Alignment without forced parity
-
Technical constraints
Challenges
Nishka.jiandani@gmail.com
Tel. (415) 610 6284
San Francisco, CA