Creating online payment experience using payment link.

Live product here

This case study documents the design process for the payment link feature within the Pooler payment infrastructure product.

My roles & responsibilities

  • Research: Competitive analysis, User interviews, Userflow, User journey mapping, Ideation

  • UX Design: Sketches, Prototypes

Team

  • Product designer (Me)

  • Product manager

  • Developers (2 Frontend, 1 Backend)

  • Product owners

Tools used

FIGMA

MIRO

GOOGLE MEET

Timeline

August - October 2023 [Full time role]

Driven by the desire to empower merchants with seamless online payment solutions, the product and engineering teams embarked on the mission of creating and launching a feature that allows business owners to effortlessly create payment links and accept payments with ease.

How can we eliminate the friction for business owners who need to get paid right away by enabling them to instantly generate and share payment links that their customers can trust?

Solution

Payment link creation

  • Upload product image to make the payment link feel much more personalized for the customers

  • Create one-time and recurring payment links

  • Customize extra fields

  • Preview link before sharing

  • Share payment link

Payment link dashboard management

  • Filter all payment links created

  • Share payment link

  • Configure payment link to fit into vendor's brand

  • Use payment link template

My Approach

01

Define

  • Understand scope of task

  • Define feature success

02

Research

  • User interview

  • Journey mapping

  • Competitive analysis

03

Design

  • Design ideation

  • Sketches

  • User flow

  • MVP 1 design

04

Validation

  • User based testing

  • Customer feedbacks

05

Iteration

  • Feedback-backed design iteration

Research

Our research was divided into two phases - [ Carried out by Product manager and Me ]

  • A market audit on existing solutions people are used to already

  • A primary research where we conducted interviews and then synthesized all of the data to help us build a journey map and design ideas.

  • Competitive analysis

To enable us understand the experiences out there in the market, we conducted an audit of the various solutions within our emerging market. The goal was to understand

  • What users are used to?

  • How can we position ourselves in the market?

  • What way we can improve the current experiences people are used to?

  • User interviews

We conducted interviews on 6 business owners and vendors to understand the thought process they have on receiving online payments and know the painpoints they experience using other platforms.

Participants that took part in the interviews include:

Business owners

Online vendors

Freelancer

  • Insights

Based on the competitive analysis and user interviews, we generated the following insights:

01

Insight 1

Merchants want to configure links easily in no time.

02

Insight 2

Merchants want to ensure their customers' financial information are secure.

03

Insight 3

Merchants want a platform that would enable them track payments.

04

Insight 4

Merchants want their payment page to feel like an extension of their brand.

05

Insight 5

Merchants want to be able to reuse a payment link more than once like in case of donation and subscription.

Given our research findings, we visualize the customer journey to help us understand the various touch points a potential customer will have with both the brand and the product.

Leveraging a deep understanding of user needs, we translated our research insights into a comprehensive user requirement document that guided the design and development of a streamlined MVP, ensuring a swift development implementation and time-to-market.

MVP 1 Design

With a clear understanding of the requirements, I began the design process. I created the user flow, wireframes and prototypes, iteratively refining them based on feedback from the product manager and other stakeholders.

  • Working with our design system

After defining and refining the user flow for, I went into designing the interface. For consistent visual experience across the product and to help us implement faster, I used the components and widgets from the design system I had created earlier to create the interface design.

  • MVP 1 screens

Payment link creation

  • Create one-time and recurring payment links

  • Customize extra fields

  • Add redirect link

  • Share payment link

Payment link dashboard management

  • Filter all payment links by date created

  • Copy link and share

  • View payment link details

Collecting feedbacks and improving

MVP 1 was implemented by the developers and shipped to market.
To enhance the payment link experience, we conducted extensive user research, including cold calls and meetings with merchants, over a five-week period.

  • Insights

We got great insights on how to improve the experience of the payment link creation. Although some of them were insights we got already at the beginning of the project.

01

Insight 1

Merchants want to be able to upload one or more images when configuring the payment link.

02

Insight 2

Merchants want to preview their payment link before sending it out.

03

Insight 3

Merchants want recurring links to have timing intervals so it could be used as a subscription link.

04

Insight 4

Merchants want to be able to create payment links on the go. So they want the application to be mobile responsive.

  • MVP 2 screens

Improving on what we had from MVP 1, we designed MVP 2 with a lot of updates.

Payment link creation

The new screen makes creating payment link effortless! Fewer steps, instant previews, and everything you need on one page.

  • Upload product image to make the payment link feel much more personalized for the customers

  • Create one-time and recurring payment links

  • Customize extra fields

  • Preview link before sharing

  • Share payment link

Payment link dashboard management

  • Filter all payment links created

  • Share payment link

  • Configure payment link to fit into vendor's brand

  • Use payment link template

Takeaways and next steps

  • Takeaways

Communication: Regularly check in with group members to address any concerns or questions.

Engineering Collaboration: Early developer involvement ensured designs were implementation-friendly, minimizing delays and accelerating time-to-market.

Utilizing Design system helps in speeding design time
Testing is crucial: While informed assumptions is acceptible in the design process, it's essential to set aside time for user testing before launching the product to the public to ensure that the focus remains on creating a user-centered experience.

  • Next steps

  • Explore and design payment link solution for mobile responsiveness and mobile app.

  • Explore design options to make creating payment links easier.