Journeys Canvas UX

[jess-watson]

Hey team! The D&G Campaigns team is making investments in the Journeys canvas experience, which includes replacing the rendering/interaction layer and implementing features such as drag and drop, a minimap, and bulk selection.

I've done some UI explorations and built out a Figma prototype of what the new canvas experience could look like, but I'm running into a few questions and constraints regarding our existing Paste/Evergreen components.

Some of these questions include:

• Are we able to open the side sheet component from the left side of the screen?
• Evergreen has a different placement for side sheet buttons than Paste. Do we anticipate updating the Evergreen side sheet to have the CTA buttons in the footer rather than the header? I have a few explorations around this for Journeys but I know it breaks the overall Evergreen pattern.
• We have a 'toolbar' pattern in Journeys. Do we have anything similar in Paste or any general guidance around styling?
• I saw that Colleen is working on a drag and drop interaction. We're also implementing a drag and drop interaction and I'm wondering if we can leverage styling that already exists or if there's any guidance you have here.
• Do we have any patterns for collapsing navigation sidebars?

Thanks for your help!

[serifluous]

Thanks, @jess-watson ! We'll take a look and discuss more on Thursday.

Some initial thoughts:

1. What's the thinking behind opening the side modal from the left side? And are there other cases within Segment/Engage of the sheet coming in from the left?
2. CTAs will all be in the same place regardless of what theme they're in, and Side Modal matched the centered Modal implementation to start. But! This is a pretty early component, so we're open to feedback and research insights on the design of it.
3. Re: Toolbar, no specific guidance from us because this kind of floating toolbar is pretty unique to canvas-type products. Let us know if you need support building it out and understanding which components to use.
4. Yes! It's in our backlog (as a "Dropzone" component, which is the dotted outline box, and "Drag and Drop pattern", which would be more specific guidelines for canvas-type products like this) so we're totally open to direction here. Please fill out a dependency request for these, which will help us push these up in priority for us: https://airtable.com/shrvMvL3BG6Zm0f9l
5. I couldn't find screens for collapsing navigation sidebars in your figma file, but @loreina's been working on a navigation UI kit that has screens exploring this functionality, if this helps: https://www.figma.com/file/KUOgqFmTe46GOAvQNOhRnY/Navigation-UI-Kit?node-id=513%3A94472&t=v2Ctr6m6yYtmUptX-0

[serifluous]

Here's the office hours recording: https://www.loom.com/share/1aceaa25998749b88688b650dfee102d. The password is posted in the #help-design-system channel. Thanks for coming to office hours!