Component to present a timeline/chronological steps

[chrischan-twilio]

Background

We are building A/B experimentation into Segment's Broadcasts feature. This allows marketers to run experiments on different variants of their campaigns that are distributed to their test recipients, so they can validate which variant performs the best.

For this functionality, we need a component that allows for users to preview a sequence of experiment steps (e.g. start test, run test, etc) and their relevant dates. When I am reviewing my experiment in Broadcasts, I want to preview a flow of my experiment, so that I can be confident in each step of my experiment and ensure its success.

The current proposal for this preview of steps is adapting the visual picker component for this use case. Similar usage was was seen in some of the paste migration work for the delivery overview.

Feedback

Is this an advisable usage of this component? Is there another approach that might better support this use case?

In this proposal, are the icons, background, and border color appropriate to convey the status of each step?

Stage of design

Exploration, high fidelity

Research

Experimentation foundational research

Relevant links

Figma explorations

Are you looking for visual design support?

• Yes

Additional Information

No response

[chrischan-twilio]

Following up from our office hours discussion on 9/7, it was advised that the progress steps component should be leveraged for our use case. We have since updated the design explorations, and @msaunders-twilio has completed a spike using progress steps.

We'd appreciate any feedback around best presenting the step metadata (i.e. dates, test percentages) under each step. How should we consider alignment of icons to the step names here?

[serifluous]

Hey @chrischan-twilio ! Did you get a chance to do any explorations beyond this, like some of the suggestions @nkrantz had in discussion #3389 ?

Seeing these explorations with Progress Steps, it feels like it might be stretched beyond what it's intended to do. Thoughts?

[serifluous]

Thanks for coming to office hours! Here's the recording: https://twilio.zoom.us/rec/share/APhhuOP0V-V4XCIguVpqMhuQfppNuJbhTz4HGVu9FCBhXRP_FOCsZV9QVRQIaOk.14YO9Yyx8oQtZfI_You can find the password in #help-design-system