Integrations

Strategic use of components, like integration banners or empty states, at the right moment in the flow ensures complementary tool discovery without disrupting the workflow.

We're in the early stages of tailoring industry best practices to our unique product needs. These guidelines will evolve with more patterns, and we welcome all ideas.

    Common scenarios

  • Use integration patterns for apps that integrate directly or complement each other.
  • Direct integrations deepen the usage of both apps via data sharing or cross-functionality.
    For example, one app can display charts based on data from another app.
  • Complementary apps can address specific user needs without direct interaction.

    Make it timely, contextual, and valuable

  • Provide a smooth, non-intrusive experience by suggesting apps that match user goals.
  • Place your suggestions at the right time in the journey when they add value.
  • Explain how the recommended app enhances or complements the current experience.
  • Don't be spammy. Our recommendation should feel like an invitation, not a nuisance.

Integration banners

    Placement and visibility

  • Display banners in high-visibility areas or near relevant features.
  • Ensure they don't overlap with other in-app messages and interface elements.
  • Avoid making components bounce, glow, or pulse to prevent overwhelming users.
  • Don't display integration banners in error states.

    Headings

  • Use direct, concise, and motivating language.
  • Highlight the primary integration value and include the recommended app name.
  • Prioritize highlighting the benefit, not the actions required to achieve it.
  • At times, people might also seek specific functionalities.
    Always evaluate what's most relevant and adjust your focus accordingly.
“Unlock insights” or “Streamline planning” tells people why they might be interested in creating charts, dragging tasks, etc.
“Plan work with Gantt charts“ can work better if people fully understand the value and need specific functionality.

    Body

  • Start with choosing the recommended app's specific function, feature, or capability.
    This will make your message more tangible and relatable.
  • You can also highlight an example of a use case if applicable.
  • Tie any of the above to the direct benefit or outcome people will experience.
  • Aim to fit your description into 2 lines.
  • Don't repeat details from the heading to avoid wasting space.
Template for structuring integration banner content.

Content template
Using a template for integration banners ensures all key details are included, helps maintain consistency, and prevents omissions.

An example of an integration message using the template.

Example 1
A concise and value-filled heading grabs attention and inspires action. Highlighting specific capabilities helps visualize how the app supports everyday tasks.

An example of an integration message using the template.

Example 2
Experimenting with structure or shifting the focus might be a way to go for your specific flow. Templates ensure consistency but are flexible and can be adapted to meet all priorities.

Share your feedback on the #design-systems channel in Slack.