Designing a Stripe Connect integration to enable merchants to easily set up online payments

Note: Elements of this case study have been omitted or altered to comply with the conditions of my NDA

Timeline

Aug - Dec 2022

Role

Product designer

Team

1 EM, 2 Developers

Context

I designed a way for merchants to connect a payment processor to their online store, enabling millions in transactions

Understanding WP Engine (WPE) starts with first understanding WordPress. WordPress is a content management system (CMS) that allows users to create and manage content, similar to platforms like Squarespace or Webflow.

Fig. 1. Think of web hosting like an empty area on your wall to hang up your next picture

WP Engine provides specialized hosting for WordPress sites. Think of web hosting as giving your website a home on the internet—like hanging a painting on a wall (Fig. 1). Our services offer enhanced security, the ability to handle high traffic, and faster site speeds.

Problem
Problem

Duration

30 minutes

Fig. 2. Style, participants and duration for the study we conducted

Typically, merchants (sometimes referred to as clients) will work with a developers (sometimes referred to as builders) from an agency to build out their website.

While many issues arose during the setup process, we saw two big problems:

  • Finding a payment processor: Many payment service providers (PSPs, Fig. 7.) have technical limitations for developers or are too costly, making it difficult to find an optimal one.

Fig. 6. I used an affinity map to to visualize commonalities amongst interviewee’s answers

Our proposal for safer, faster transactions

Contextual Interviews

Participants

Fueling WP Engine’s eCommerce growth: How simplifying payments could boost adoption and renevue

WPE set out to enhance its eCommerce capabilities in hopes of expanding into a new market, but with so many moving parts—store setup, management, and long-term maintenance—the challenge was understanding where to focus first. In an effort to understand where exactly in the multi-step build process we could make an impact, we opted to run contextual interviews.

Style

18

Fig. 7. PSPs like these allow businesses to accept a wide range of payment methods

  • Security risks: Security risks crop up when developers copy and paste API keys from the merchants

Our solution was to introduce Stripe Connect, a PSP, to WPE users. With this solution. Why? We believed that this solution would

  • save time on searching for a dev-friendly PSP

  • eliminate the security risks involved in copying and pasting keys

Save on build time

Eliminate security risks

Additionally by integrating a PSP like Stripe Connect means users will get the additional benefit of WPE’s use of OAuth authentication—if any changes are made to payment configurations, the developer will be notified right away.

Fig. 8. One possible journey a builder would go on to set up a PSP for their client’s site

I mapped out the steps a developer would need to take to set up a payment processor for a merchant’s store to help inform the design below. We then wanted to test whether developers would find value in a feature like this so we ran an concept-usability test with 8 agency develpers, 2 developer merchants and 2 merchants. The following is a partial prototype (Fig. 10.) from the testing sessions that we asked our participants to interact with.

Fig. 10. We asked agency developers to describe how this would impact their work (if at all)

Here’s an overview of what we found through testing:

  • A potential time saver: The concept definitely resonated with developers and they believed this would save them time on trying to find and implement a PSP

  • Confusion between options: 4 out of 10 participants struggled to understand the difference between two of our options in the initial three presented

What we released

After conducting contextual interviews and usability testing, we were ready for a beta-launch. This was followed by a general availability (GA) release in January 2023 to 100% of our users across the world.

Fig. 12. I needed to design new empty states for edge cases and other scenarios—for example when the sign up link was expired for a client

impact

$2,000 MRR, a new customer segment and global impact

solution
impact

Since launch the Stripe integration has generated $2,000 MRR for WP Engine, boosting revenue. Additionally, our research introduced a new customer persona—the merchant—gaining valuable insights through contextual interviews to better serve this market. Lastly, Stripe Connect now enables transactions in over 35 countries and accepts payments from 180 countries worldwide.

Fig. 12. Users also have the ability to regenerate keys across multiple sites

Fig. 11. This flow shows the create account option, an option for those who will manage the Stripe account themselves

Before

After

40% of participants were unclear about the difference between two buttons:

Inviting a client to create a new Stripe account vs. Inviting a client with an existing Stripe account.

To make the distinction clearer, I made the following changes:

  • Simplified and reframed microcopy for the buttons relative to one another better highlight the differences between them

  • Enhanced icon hierarchy by adding circular backdrops

Process
Process

Fig. 3. Meet our most common eCommerce personas—the agency developer and the merchant

For those reasons, we talked to both developers and merchants to understand pain points throughout the process of setting up and maintaining a store. Our 18 participants included:

  • 10 agency developers

  • 2 in-house developers

  • 2 merchants

  • 2 merchant-developers

Process

Next Case Study

I hope you enjoyed this read. If you’re looking for more, how about checking out how I designed a local legislation tracker?