Modal  Case Study 

Design and build a reusable modal wizard component using Figma component properties.
Establish and document usage rules and guidelines.

A multi-use stepper modal to streamline complex, multi-step workflows.

Year

2024

Uses

Incident Reporting
Policy Setup
User Feedback
Onboarding

Client

CrowdStrike

Key Goals

Clear Navigation
Systemize for Team
Expand for Scalability

About the Project

CrowdStrike needed a multi-use stepper modal to streamline complex, multi-step workflows within their platform. This component would be used across various features, such as incident reporting, policy setup, and user onboarding. The key goals were to ensure clarity in navigation, minimize cognitive load, and make the modal expandable for scalability.

UX Design Process

Designing an adaptable, user-friendly component required collaboration with stakeholders and iterative prototyping. Below are the key steps I followed:

1. Research and Requirements

Using existing areas of need I began with a low-fidelity wireframe, focusing on layout and flow for key functionalities in use case scenarios like onboarding wizards, surveys, payment flows, and contact forms. Key insights included:

  • The need for a clear progress indicator to reduce user confusion.
  • Flexibility to support workflows ranging from 3 to 10 steps.
  • Easy implementation via the Figma design system for the team of over 50 UI Designers

2. Discovery and Concept Exploration

I explored multiple wireframe variations to explore:

  • Vertical vs. horizontal layouts for step indicators.
  • The placement and visibility of actions (e.g., Next, Back, Save).
  • Expandable sections for advanced options without overwhelming users.

Usability study feedback from a third-party firm guided the decision to pursue a horizontal stepper with overlay panels to balance simplicity and functionality.

3. Prototyping and Usability Testing

I developed an interactive prototype in Figma to test:

  • User comprehension of progress and navigation.
  • Responsiveness of collapsible sections in different workflows.

4. High-Fidelity Design and Accessibility

The finalized stepper modal featured:

  • Expandable/collapsible steps to accommodate advanced settings.
  • WCAG-compliant designs with focus indicators, scalable text, and clear contrasts.
  • A consistent UI style, aligned with CrowdStrike’s design system.

Features Delivered:

Horizontal Multi-Step Modal

An improved user experience

Problem Statement:
Users often struggled to track their progress in workflows involving multiple steps, leading to frustration and abandonment.

Solution:
A stepper modal with numbered progress indicators was designed to provide clear navigation. Users could collapse or expand steps to focus on what mattered most.

Expandable for Many Uses

Efficient, consistent design system

Problem Statement:
Power users required access to advanced configurations without cluttering the UI for general users.

Solution:
Overlaying sections keeps workflow clean and clear while giving users access to the tools and information they needed.

Summary

The multi-use stepper modal for CrowdStrike successfully streamlined complex workflows while maintaining flexibility and scalability. Its user-friendly design reduced cognitive load, supported diverse user needs, and ensured seamless integration into the existing platform.

Outcomes

  • Designed and delivered an expandable, multi-step modal adaptable to various use cases.
  • Facilitated usability testing, resulting in improved navigation and interaction design.
  • Ensured accessibility compliance, meeting WCAG standards for inclusivity.
  • Collaborated closely with developers, providing prototypes, specs, and interaction guidelines.
  • Detailed documentation for engineering and development team