Unbounce's integrations home page
When a PMM approached a designer and myself to revamp Unbounce's integrations home page, we knew it would be a big job: 1. Unbounce had a ton of integrations (100+) and 2. There were quite a few different types of integrations that tended to confuse customers who weren't familiar with how software integrations worked.
Our task was to redesign the homepage to not only showcase Unbounce's integration partners clearly, but also make it obvious to our customers that some integrations were native (already built, just needed to be turned on), available through Zapier (a third-party integration app), and so on:
We focused on clarity and kept things minimalist up top on the page, because we knew that the integrations section below would get busier.
To help people understand the different integration types, we added a small legend at the top of the list, along with sorting and filtering options. Because the descriptions of each integration type would be pretty lengthy if they were all just visible on the page, I suggested to the designer that we use a hover pop-up instead:
When you hover over the options in the legend, a small tool-tip pops up to give a quick description of what differentiates those different integration types. We then opted to use iconography in the corner of each integration partner's tile to let the reader know at a glance what type of integration Unbounce has with that partner:
The result: We saw much higher engagement and time spent on the page (more people were clicking through to check out the different integrations), and it became a retention-influencing feature for customers who integrated Unbounce with other tools they were already using.
