Builder Experience – Unified components and patterns

[jess-watson]

Hi Paste team! There is interest from the Segment Journeys and Twilio Studio teams in creating a unified component and pattern library in Paste for builder experiences.

At a high level, we are currently considering builder experiences as:

• Designing a business process on a blank canvas
• Creating and defining a series of logical actions that result in different outputs

Salesforce's design system has a component library for the same purpose, and we've found it to be a great source of inspiration when talking about this project.

Some of the components we've identified as candidates are:

• Background grid
• Toolbar
• Canvas header
• Builder library
• Nodes (in library and on canvas)
• Connectors
• Action toolbar
• Configuration panel

This is not an exhaustive list, but hopefully a good starting point.

Some of my questions are:

• What is the best way to collaborate with your team on contributing these components and patterns to Paste?
• Is there a different process for tackling a contribution like this vs. a standard component or pattern?
• Do you have any learnings from creating the Artificial Intelligence Experience that we could leverage?
• Is there a way we can iteratively design and implement this experience so we're not taking on too much at once?

Thanks for your insight!

(I just checked your office hours schedule but all of the time slots are before my working hours. Is it possible to schedule at a later time slot to kickoff this discussion?)

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

---

Hi there! It's fantastic to hear about your interest in creating a unified component and pattern library for builder experiences within Paste. Your project sounds like an exciting opportunity to enhance the design system with a set of components and patterns that could benefit various teams across Twilio.

To address your questions:

1. Collaborating on Contributing Components and Patterns to Paste:
   The best way to start collaborating with the Paste team is by engaging with us through the Design System Office Hours. These sessions are an excellent opportunity for direct communication and to discuss your project's scope, needs, and how it aligns with Paste's roadmap. Additionally, you can post in the Paste GitHub discussions to share your ideas and get feedback from the community.

2. Process for Contributing a New Experience vs. a Standard Component or Pattern:
   While the Happy Path outlines the ideal process for using existing Paste components, contributing a new experience like a builder might require a more tailored approach. This could involve:

   • Identifying existing Paste components that can be composed to create parts of the builder experience.
   • Working closely with the Paste team to ensure any new components or patterns align with Paste's design principles and accessibility guidelines.
   • Leveraging Design Primitive Components for any unique needs not currently covered by Paste.

3. Learnings from Creating the Artificial Intelligence Experience:
   While specific details or learnings from the Artificial Intelligence Experience are not mentioned in the provided documentation, a general best practice is to ensure consistency with Paste's design system and to prioritize accessibility and usability in your designs. Engaging with the Paste team could uncover specific insights or learnings relevant to your project.

4. Iterative Design and Implementation:
   An iterative approach is highly recommended for a project of this scale. Starting with a minimal viable product (MVP) that includes the most critical components and patterns can help gather user feedback early and inform future iterations. This approach allows for adjustments and improvements without the commitment to a full suite of components upfront. Regular check-ins with the Paste team during office hours or through GitHub discussions can help keep the project aligned with Paste's standards and best practices.

Regarding scheduling office hours outside of your working hours, I recommend reaching out directly to the Paste team via the GitHub discussions or the contact information provided on the Paste documentation site to request a more suitable time slot. The team is generally accommodating and may be able to arrange a meeting that fits your schedule.

For more detailed guidance and to start the conversation, visit the Paste documentation site: https://paste.twilio.design

I hope this helps set the stage for your collaboration with the Paste team! If you have any more questions or need further assistance, feel free to reach out.

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:

• Twilio Builder experience and patterns (updated: 05/24/2024, similarity score: 92%)
• Builder node/step component (updated: 06/10/2024, similarity score: 88%)
• Studio Paste migration (Office hours: Feb 3, 2022) (updated: 07/07/2022, similarity score: 88%)

[jess-watson]

I have asked this same question before 🤦 I'll leave this discussion to restart the convo and get office hours scheduled, but will take your previous advice in getting started with documentation!

[serifluous]

Just scheduled an office hours session for this!

What is the best way to collaborate with your team on contributing these components and patterns to Paste?
Is there a different process for tackling a contribution like this vs. a standard component or pattern?

Nope, there's not really a different process. The way @kkenna3 worked with us to contribute the Pricing pattern was great. We had check-in meetings every 2 weeks to go gradually through each step of the process. And she made iterative progress through the guidelines, design, and gathering feedback across each of those check-ins.

Do you have any learnings from creating the Artificial Intelligence Experience that we could leverage?
Is there a way we can iteratively design and implement this experience so we're not taking on too much at once?

I'll share more during office hours! For the AI components, we narrowed down on an MVP list of components based on what would be first used with the highest impact. Like, what absolutely needs to be standardized first, either because it's used the most, it's blocking other teams the most, etc.?

Looking forward to chatting more!

[serifluous]

Hey! Forgot to record the meeting today, but next steps are:

• Jess will set up a monthly check-in meeting to update on iterative progress
• Jess will set up an intro meeting with engineers on Flex, Segment, and Paste to chat about React Flow
• Sarah created a temporary Slack channel and shared links from Kara's Pricing contribution
• Sarah added tickets to the Paste backlog to look into React Flow from our side and review the initial doc.

For now, we're going to focus mainly on getting guidelines published on the Paste doc site. Over time, we'll make a decision on when/whether we move the Figma components into Paste, and how we handle the React components.