Design Once, Scale Forever: Creating a Reusable Integration Template
When your users' daily workflows depend on seamless integration between planning and delivery tools, announcing you're rebuilding their most-used connection from scratch is guaranteed to raise some eyebrows. This is the story of how we turned a risky platform migration into an opportunity to solve persistent usability issues and build a foundation that would scale with our growth.
Jul 23 - Jan 24
1 PM, 1 Designer, 2 Engineers
Re-building a third-party powered Jira integration in-house without losing currently available functionality
Creating a library of re-usable components, layouts, and patterns
Adding importing functionality
Collaborated with Engineering to map user flows considering any known technical limitations
Ran teardown analysis of legacy UI to identify usability issues
Streamlined the wizard flow and designed new UI components and modular layouts
Collaborated on import UX to balance dev constraints with user support needs
Successful transition from a third-party powered to a proprietary native integration with minimal service disruption
24% increase in Jira Cloud integrations set up a month since launch
UI components re-used to build 4 more integrations with minimal support from Design
Context
ProdPad is a product management platform that helps create and update roadmaps, maintain ideas backlog, and manage customer feedback – all in one tool.
With its focus on discovery, integration with delivery tools is a crucial part of the experience. ProdPad offers a number of native integrations with a range of development tools including Jira, Azure DevOps, Trello, and Github.
The Big Decision
In 2022, the team was looking for ways to speed up the development of new integrations and onboarded with a well-known cloud integration and automation platform. Whilst it did allow us to ship faster, it did not quite meet our expectations in terms of customisability, and a year later we made a big decision to re-build all third-party powered integrations in-house.
Understanding the task
At that time we offered 2 types of Jira integration, a Full two-way sync and Status-only sync, for both Jira Cloud and Jira Data Center customers. Given that we were essentially building for 4 different scenarios, it was important to understand the differences in setup and the exact order the data needed to be entered to finish the setup successfully. To do that we sat down with the engineering team to map out the four flows and mark all important milestones.
Having the architecture outline allowed me to get started on the new UI. Having done UI teardowns of the existing wizards, I’ve listed three main issues I wanted to fix with the new design:
1
Make the setup less intimidating
2
Eliminate guesswork about the direction the data will be flowing during field mapping
3
Provide in-line support and guidance throughout the setup process
On top of that, the new wizard’s design had to be re-usable to enable developers build new integrations with minimal design support.
Designing the solution
Make the setup less intimidating
Old wizards provided very little information about the steps and info required to finish the setup. To fix that, I suggested having a ‘table of contents’ and a progress bar to see where you are in the process at a glance. Using progressive disclosure and adding new inputs one at a time also helped to reduce the perceived complexity of the task.
Field mapping
When defining the field-to-field relationships, it’s important to understand the direction of information exchange between two apps. To help users visualise this, I added a set of icons to indicate the direction the data will be moving in.
Additional help layer
Setting up an integration is a highly technical task; where someone might blitz through it, others might need some additional support. Whilst links to help documentation are always available throughout the setup, I wanted to support the most complicated parts of the process with some just-in-time help prompts.
Integrating importing into the new flow
Importing data is an important activation milestone for ProdPad, however, the existing solution was rather lightweight and did not offer enough support for the newer users.
We were working on a very tight schedule, so the new solution could not be too time-consuming to build. I solved it by adding a preview of the selected integration’s mapping and a simple success message outlining what’s going to happen next. New users who might not yet have any active integrations, a prompt was added directing them to the setup wizard.
Project outcomes
24%
increase in Jira Cloud integrations set up
5x
increase in the number of Ideas and User Stories pushed via Jira Cloud
60
Jira work item imports started
…but only 8 finished successfully, indicating there are issues at play
*a month since launch
Jira Cloud and Data Center were the first two integrations that used the new setup wizard. Shortly after followed another two – built by the Engineering team without any high fidelity designs produced. The format proved to be repeatable and easy to adjust to new scenarios.
Looking forward
While the new setup wizard has significantly improved completion rates and reduced support overhead, our metrics revealed an interesting challenge: import initiation increased dramatically, but completion rates remained low at just 13%. This suggests users are engaging with the feature but encountering friction during the process.
To uncover the cause, I suggested a deep-dive into product analytics to see if there are any obvious drop-off points, as well as scheduling some short calls with the users who abandoned importing to get some qualitative insight into their decision-making process.