Twilio Builder experience and patterns

[jess-watson]

Background

Elizabeth Langager and I are both working on builder/visual workflow experiences in our respective parts of the product. We're interested in creating a cohesive builder experience as a pattern across Twilio and if possible, would like to collaborate with the Paste team on incorporating these components and patterns into Paste.

Feedback

Some initial ideas and questions regarding the builder pattern:

• How should we engage with the Paste team as we begin to scope out this work?
• Both of our teams (and other Twilio teams) are planning to use React Flow as a library for the builder. Would your team have any knowledge on how this would impact patterns and components?
• How do we ensure we're creating a builder that is accessible?
• Initial components that we're exploring include steps/blocks and their states, connectors, and a toolbar with zoom controls.

Stage of design

Both of our engineering teams are currently tackling this work separately and iteratively. We are both in the design phase, and some initial eng work will begin over the next few weeks.

Research

No response

Relevant links

• Twilio Builder Pattern Collaboration Doc (contains notes and initial ideas)
• Segment journeys canvas UX specs (contains thoughts around patterns and interactions specific to Segment journeys)
• Twilio builder components Figma
• Journeys Canvas UX design exploration

Are you looking for visual design support?

• Yes

Additional Information

No response

[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.

---

To engage with the Paste team as you begin to scope out the work for creating a cohesive builder experience across Twilio, you should:

1. Request components or patterns that you may need for your customer experiences. This includes discussing new components or patterns like the builder pattern you're interested in developing.
2. Get feedback on usage of Paste components and compositions in your mocks and/or UIs. This can help ensure that the builder components and patterns you're developing align with Paste guidelines and best practices.
3. Attend DSYS office hours for direct support and to kickstart the contribution process. This is a great opportunity to discuss your ideas, get feedback, and understand how to best collaborate with the Paste team.

Regarding the use of React Flow and ensuring accessibility:

• While the documentation provided does not specifically mention React Flow, it's important to ensure that any external libraries used align with Paste's principles, especially around accessibility. The Paste team can provide guidance on building more accessible UIs and help identify common pitfalls.
• For accessibility considerations, the Paste team can offer support and information to ensure that the builder is accessible to all users. This includes ensuring that components and patterns follow accessibility guidelines and best practices.

Initial components for the builder, such as steps/blocks and their states, connectors, and a toolbar with zoom controls, should be designed with the Paste design system in mind. This means adhering to the system's guidelines on hierarchy, weight, spacing, and more, to ensure cohesion across Twilio's products.

For more detailed guidance and to start this collaboration, please reference the contribution guide and make sure to attend the DSYS office hours to discuss your project with the Paste team.

For more information about how Paste is built and where patterns fit into the hierarchy, you can read About Paste.

I also did a search, 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:

• Wizard template RFC (updated: 11/01/2023, similarity score: 86%)
• Using components in a code editor (Office hours: Sept 22, 2020) (updated: 11/15/2022, similarity score: 85%)
• Flex Users - Answer (updated: 02/03/2021, similarity score: 85%)

[serifluous]

Thanks for coming to office hours, @jess-watson ! Here's the recording: https://twilio.zoom.us/rec/share/cI5rGozTMbkvhRMNH5liyrzUu1ZadVZUltEDiIJGQaCox-WvwAwr0Y524CyVEN-X.IIi16Qmmvhi383Lf You can find the password in slack

To sum up our suggestions:

• To start, write basic guidelines in a doc and decide on a first draft of a design proposal (even if it's a small part of the whole canvas experience for now and even if you're not 100% confident about it—as long as you're more confident about it than the alternatives). That'll be the easiest point for us to get the ball rolling.
• Fill out a dependency request for accessibility support on this experience: https://airtable.com/appwvsQKyJHfnG5Sa/shrvMvL3BG6Zm0f9l In the meantime, the Salesforce guidelines are a good point of reference.
• For scope, decide what decisions you feel like you're making over and over again, or what other folks are asking you over and over again. And just start there to avoid the scope blowing up too much. We always recommend folks cut scope aggressively.

As an example, this is where we've started with data viz guidelines: https://paste.twilio.design/foundations/data-visualization It's essentially:

1. A library recommendation
2. Basic color guidelines
3. Basic accessibility guidelines

There's so much more to cover, but these were the 3 main things we were getting asked over and over again that we wanted to get written down.

Let us know if you have any more questions, and def sign up for office hours or follow up here with any progress!