🤔 Problem

Integrations have become a fundamental piece of the platform and it makes interacting with external resources much more straightforward.

While resources are being created, we display alerts to remind users to activate integrations. Doing so still requires a couple of hops and goes through the Integrations page, where the content is poorly organized.

This leads to a couple of problems:

• Users are sometimes redirected to the Integrations page before they finish creating new content, causing them to lose their previous inputs when they return to the original page (e.g., create a new data connector or data export that requires an integration).
• Users might be redirected to a different page after activating the integration (e.g., we don’t have stable links to go back to a Code repository off-canvas).
• Users might be confused once landing on the Integrations page. We highlight the relevant integration when possible, but the required action isn’t obvious for some, and the “go back” link isn’t very prominent.
• Users see an increasing number of irrelevant integrations on the Integrations page. Even if we don’t expect users to browse that content frequently, having the most relevant information readily available would make the page easier to parse (e.g., most users are likely to be interested in GitHub.com, while only a few will connect to department-specific GitLab instances).

🍴 Appetite

3 weeks

🎯 Solution

<aside> ℹ️

The following images are meant as a quick way to mock up a possible solution, not as the exact expected outcome.

</aside>

🚞 User stories / journeys

• When I see a label/warning suggesting activating an integration

  • I want to connect right there instead of being redirected to the integration page (image: left side is the current status; right side is a possible solution)

    

• When my connection is in an invalid state (pending or error-ed)

  • I want to try reconnecting right away without getting confusing messages or having to parse unintelligible messages (image: this is the current message for a pending connection)

    

    (image: this is a more user-friendly “finish connection” example)

    

• When I look at the integration page

  • I want to see content relevant to me

    • The “connected” and “pending” integrations should be visible and more prominent.

    • There should be a distinct way to activate “non-connected” integrations; we might want to differentiate between popular public services (e.g., GitHub.com, GitLab.com, GitHub Container Registry, …) and niche deployments (e.g., UZH GitLab, ETH GitLab, …). Feel free to experiment here; perhaps we could show up to n non-active integrations, and gradually hide them as users have more active integrations

      <aside> ℹ️

      Mockups to be taken from ‣

      </aside>

🐰 Rabbit Holes