Zapier: App Integration Pages Re-design
What are App Integration Pages?
With over 5,000 apps to choose from, Zapier enables users to connect those apps in an almost infinite number of ways. Some of the most high-traffic integration pages were 2-service pages (pages showing the possible api connections for 2 different apps). These pages are some of the highest sign-up and activation generating pages for the company.
Problem & User Research
An old 2-service integrations page.
Sign-ups were not leading to activations at the rate we hoped
Abandonment was higher than other pages
Mobile metrics for these pages were all lower than the desktop
Through user research and user interviews we identified a number of places where users were running into issues.
Too much content, users felt overwhelmed
Unsure of what Zapier product offered
No clear place for a first click (missing a journey)
Unsure of what they were signing up for
Mobile is too hard to use
Hypothesis
Based on user feedback, the hypothesis crafted with my Product Manager was:
A simple, visually driven page which not only explains what the Zapier product is, but also helps informs the user on how their specific use case might be solved will lead to more, and better quality, sign-ups & activations.
Design & User Testing
I began putting together wireframes and low-fi designs to address the concerns and wishes we heard. After working closely with my Product Manager partner, we decided to try a slot-machine style interaction menu to show users the available Triggers & Action for the selected Apps. We tested a prototype of the new design and were very pleased with the feedback from users, so we decided to update the live design.
Concepts around Trigger & Action interactive area
More refined concepts
Finalizing the concepts
PUSHING TEST DESIGN LIVE
I crafted the hi-res designs and created responsive designs for smaller devices. We were able to push these changes live to gather further feedback for future enhancements. We saw increases in our key metrics, matching our targets, that encouraged us to continue optimizing the design.
Visual Design & Interaction Refinement
While the initial design was live, we used the metrics and user research finding the further refine the experience. Users wanted a way to be able to see more information and needed a more clear idea of how to start playing around with Zapier’s functionality.
My updated 2-service integrations page.
Users were having difficulty understanding the options for connecting apps together as well as the general the concept of how Zapier works. I was able to craft this interaction to address these issues and bring a more exploratory approach to the vast amount of options available.
The user selects the Trigger from a drop-down of available options.
The user then selects an Action from the available options.
Mobile Optimization
With more and more of our user traffic coming from mobile, it was essential to ensure that our experience on devices was easy to use, understand and interact with. Since space is at a premium on smaller devices, we had to ensure everything fit, but didn’t overwhelm the screen. In our old version, the main CTA button was below the fold which led to far less sign-ups than the final version.
Results & Next steps
Each stage of this design process saw improvements in our key metrics of increase sign-ups, increase activation, decrease abandon rate. This gave us confidence that we were on the right path to helping explain a complicated product to new users. Mobile usage, sign-ups, and activations all increased significantly due to the improved mobile experience.
Next steps were to continue to make these pages more interactive and provide a bit of sandbox experience to users.
Vision for how to add more sandbox elements and remove remaining visual noise on the page.