Release Phase Modal

[char-mainewang]

Hey team

The Segment team is interested in building this "Introducing New Features" component using Paste. This is a component a previous designer started working on, the design + content are ready but it hasn't been built. (component google doc)

It's reflective of an internal Pilot/Beta Legal Guidance and Requirements doc that outlines the necessary comms for product releases (pilot, beta), which includes a modal with an optional illustration – we often include illustrations to support explaining the product / features as the names tend to be a bit more abstract.

Do y'all have any guidance on how to start building this component?

[serifluous]

Hey @char-mainewang! I think the last time we'd talked to Brandon about this, he was going to update the design using the Paste Modal. Not sure if y'all had further conversations about it, or if he didn't get around to updating the designs to align to the Paste Modal.

With the Modal component, you can set a negative left and right margin on an image in the body to get close to the design you have. I mocked up a few examples of how that might be laid out here: https://www.figma.com/file/SpeLpBoqN2vZv8KWcSn0J1/Paste-Feedback?type=design&node-id=2822-949&mode=design&t=gjKYjYUnVrtYx3Cy-0 cc @ceyerkes, it'd help to coordinate with the other Segment designers on how to align the existing design of the new features modal with the Paste Modal.

Here's a CodeSandbox showing how to do the negative margin: https://codesandbox.io/s/late-rain-l99s4g?file=/src/index.tsx

Let us know what the layout you end up going with. We can add an example on our doc site!

[char-mainewang]

I haven't heard anything about using the Paste Modal but the examples you laid out are amazing, thank you so much!! I'll chat with the team and report back :)

[char-mainewang]

Hey @serifluous, I chatted with the team and we prefer option A with the documentation link in line with the footer / OK button :)

Another open question we have is how this modal would work when there are multiple products / changes we want to introduce in one modal (also open to discussing if we have an announcement modal that does this at all). We've ran into this scenario twice and opted to use a multi-slide modal, something like this. It's not a super common use case, but I can see it come up in the future again. I mocked up some potential options, and am curious to know if the Paste team has any UX and accessibility feedback?

[serifluous]

Nice, thanks for sharing!

Multi-step/slide modal has come up as a need in the past, so it's definitely A Thing. You can do it with the Paste Modal, but your team will have to build/manage the animation yourself for now since it's not built-in. If you want to see it be more of a standardized pattern, fill out the dependency form here!: https://airtable.com/appwvsQKyJHfnG5Sa/shrvMvL3BG6Zm0f9l

Option 2 is your best bet here—it's more cohesive with other Modals, and people are probably moving forward more often, so the visual difference in the "back" and "next" buttons makes sense. Pagination was designed more for larger data sets and pages, and the page numbers might be overkill.

[char-mainewang]

Awesome, appreciate your feedback and agree that pagination is overkill for this use case. I'll be adding the new announcement modal pattern to the Segment Design Library. I'm not super familiar with the design <> code collaboration process for design systems, how should I work with your team on adding at least the one modal example to Paste? cc: @ceyerkes

[serifluous]

I added it to our backlog: https://twilio-productivity.atlassian.net/browse/DS-300 We'll reference this discussion & the outcome of it when we get to it, but for now, adding it to the Segment Design Library is totally great to round out the work so there's at least some reference for designers now.

[char-mainewang]

Another follow up question regarding the multi-slide modal. The use cases we've had thus far allow the modal header, illustration and body text to change depending on which slide the user is in. I assumed the illustration and body text can be updated but is changing the modal header also doable with the Paste component?

examples:

1. RETL, PS and IA change announcement
2. Personas and Engage rebrand and IA change announcement

[serifluous]

Yep, you can have the Modal header text change based on the slide. The header can accept any children, and the only thing that can't change in it is the close button.