Builder node/step component

[jess-watson]

Hey Paste team! I'm looking to get feedback on a "node" / "step" / "block" component for Segment journeys. This component could feed into a broader "builder" experience (referencing this discussion from office hours). Here's a document I started for detailing Segment's journeys interactions and UX, with a short section started for steps/nodes.

I've started exploring what information should always be on a step, such as:

• An avatar with an icon and color to represent each action
• A name label
• Optional metadata

I've explored the following states:

• Default
• Hover
• Focus
• Selected
• Error
• Needs input / missing settings
• Filled out

Some of the things I'd love further feedback/help on include:

• General visual feedback (there are more explorations in the Journeys Canvas UX Figma if you want to take a peek!)
• How to display metadata on the step: in the Studio BPW designs, the step expands to show metadata, but in journeys there are not many settings that need to be represented directly on the step.
• How to design for a "needs input" / "missing settings" state: when building out journeys, marketers want to "scaffold" the flow before filling in the details. The way I'm designing for this, is that when a user adds a step it will have a state that indicates there are fields to fill out. I'm currently using a warning icon, but I'm concerned this will come off as intimidating to the user when they immediately add a step. Any thoughts on how to better portray this state? I've explored using a badge or other icons that may be less intimidating to the user.

Explorations for Journeys (Figma):

Explorations for Studio BPW (Figma):

[TwilioPasteBot]

Disclaimer: This is a very experimental bot using OpenAI's GPT-4. The answers may not be correct, a human will review the answer and update it if necessary.

---

Sorry, I don't know how to help with that.

I did do a search though, and I managed to find these other Discussions that might be similar or related to your question. Give them a read to see if they answer your question. If they do, head back here and update this discussion and mark it as answered, pointing others to the related discussion:

• Component to present a timeline/chronological steps (updated: 09/20/2023, similarity score: 88%)
• Stepper - use case (updated: 06/22/2023, similarity score: 88%)
• Interactive cards with flow (updated: 11/28/2023, similarity score: 87%)

[nkrantz]

Hey @jess-watson - going to chat with the design team and circle back. Would you like to come to next week's Office Hours (June 6) to continue the discussion?

[jess-watson]

I'll grab a slot! Thanks.

[nkrantz]

Great! Changing the category of this Discussion to Office Hours.

[nkrantz]

Hey @jess-watson - reminder to sign up for a slot if you still want to come to office hours this week!

[nkrantz]

Hey @jess-watson - just shared the office hours recording in Slack! Let's keep using this thread to share any updates or questions you have about the step component designs. Thanks for coming yesterday!