Integrations Section






Lead Designer

Project overview:

The Unbounce Integrations page was a new section on I designed the visual layout and experience of the section, which includes the main directory page and child pages. This was a fairly large scope, as it was related to a product launch, Zapier in-app integrations, so it was also depedent on other departments as well.

Project Goals

  • Generate NTS (new trial start) for Unbounce
  • Better showcase Unbounce’s 100+ integrations, which is prompted by the in-app Zapier integrations product launch, to provide a better experience for evaluators that are looking for what tools Unbounce integrate with, and whether Unbounce integrate with the tools they use.

Design process:

The project started because Unbounce was launching a new large-scale feature, in-app Zapier integrations. To support this new feature launch, marketing had a few initiatives, and the integrations section on the website was part of them, as it was the biggest initiative in support of the launch. The project started off with a kick-off meeting with key stakeholders, and of course, the team lead and executors (designer and copywriter). We defined the brief and the RACI (responsible, accountable, consulted, informed), and I was appointed to lead the project, as well as be the lead designer of everything that involves Unbounce integrations.

Secondary Research

Precedent Research & Competitive Analysis

First, contributors gathered a few precedents to see what are some of the things other companies do well, as well as can be improved, to acquire inspiration and insights.

We also did competitive analysis to see how our competitors showcasing their integrations, as well as doing a SWOT analysis on their integration section, which was really useful for our strategy and design decision.


I set up a meeting with the copywriter, and outlined the structure of the page. I then drew out a low fidelity wireframe on the whiteboard for both of us to have a clear understanding of the direction, and could move forward with the project simultaneously, so that I did not have to wait for copy to start designing, or vice versa.

After drawing the low-fidelity wireframe, I created the high-fidelity wireframe using Sketch.

Mock Up & Prototyping

After the wireframe was approved, I worked on the mock ups and explored various visual approaches to discover what was the best way to depict the content. I received many constructive feedback internally from different stakeholders and the design team along the way, and gathered all the valuable critiques to create the final mock up for prototyping.

I used Invision to create the prototype and ensured all functionalities, such as filters and hover events, I wanted to test were implemented.

Usability Test

I contacted external marketers, including both Unbounce customers and potential prospects, to participate in a usability test. I prepared a questionnaire for the sessions to observe the participants interaction with the prototype, as well as to gather their feedback.

Not only did we want to test the functionality of the section, but also the clarity of content, as well as the placement and flow of elements. I’ve acquired many valuable insights from the sessions that I later implemented into the final design.

Web Development

After the mock up was finalized, it was sent to the developers. In the process of web development, I contributed in some technical problem solving. Because of the Zapier integrations launch, we had to add 60+ Zapier integrations, and each integration needed a dedicated child page, which would take forever to produce content for and be added to the site one by one. The team working on the project decided to create a dynamic child page, where the content is the same, but it will be customized to the specific integration by changing a few elements on the page dynamically. This is something we’ve never done on before, so I helped the dev team to find a solution together. We input all the dynamic content onto a Google spreadsheet and exported the sheet to a JSON file. In the WordPress CMS, everytime it needed dynamic content, there will be a custom field or span class to call it out, which will pull the text or image from the JSON file to the page with the URL parameter of the integration. This probably sounds pretty complex, but it definitely made our lives less complicated by saving us time and from being bored to death from copying and pasting. #thankgodfortechnology


Integrations Directory Page

This integrations directory page displays all of the integrations available in the Unbounce platform. This page is designed to allow prospects to quickly check if Unbounce integrates with tools they use when they are evaluating the product.


Integrations Section Interactions

The integrations section of the website allows visitors to browse through various apps that integrate with Unbounce. They can filter through categories, search, and type (in-app, Zapier or compatible) to ease the process of finding specific apps.


Zapier-integrated App Child Page

This page displays dynamic content and images based on the specific Zapier-integrated app. Because there are too many, we streamlined the process in the CMS. Instead of creating a bunch of pages, we just created one and replaced copy and images dynamically in various parts of the page using JSON in the backend.


Child Page about Zapier

The Integrations child page about Zapier presents how Unbounce integrates with Zapier within its app. The page outlines the benefits of using Zapier within Unbounce, highlighting that users can integrate multiples apps inside the Unbounce app instead of going though the usual complex integration process.


In-app Integrations Child Page

This page showcases the apps that integrate with Unbounce within the Unbounce app, in which users would’t have to go outside of Unbounce and do a bunch of technical things to make everything work.


Integrations Section Mobile View

The integrations section is built to be responsive, just like the rest of the website. These are some of the pages in the section in mobile view.


Result & Performance Metrics

Metrics measured from January 2018 – March 2018 (3 months post-launch)






497 NTS

Key takeaways:

Let the user’s behaviour guide you, not your bias.

In the beginning, we faced a challenge about how to position the in-app Zapier integrations to prospects. We spent a lot of time discussing what its messaging should be for prospects to understand what an in-app Zapier integration was. Through the usability tests, we found that the content we want to highlight was not always what our prospects care about. They just wanted to accomplish their task, they weren’t gonna stay to learn about some complicated thing we thought was relevant. #truthhurts

Getting a head start doesn’t always speed up the process.

I sent my mockups and prototype to the devs before usability test so that they could get a head start on the development. There were a few changes to the design after the usability test, which was a pain point for the developers because they had to change what they had already completed. We established a better process between design and web development after that. We agreed that designers would have to send the final mockup along with the design specs via Zeplin for every project that requires dev work.


Copywriting: Grace Lau

Web Development: Sam Shen (Directory Page), Alex Tjokro (Child Pages)

Overall Support (Team Lead): Megan Sakakibara

Support (Integration Partnership): Tyrone Lingley