Payment Page
Brief
Helcim's Payment Page product is essentially a tool that allows merchants to create payment links, send them to customers and get paid. While it initially existed as a standalone tool, Helcim decided to integrate it with the Subscription Manager. During the 2 months, I redesigned it from 0 to 1.
Background
The current payment page used by merchants for customer self-registration to a plan suffers from complexity, unnecessary features, and confusing context that fails to cater to different user groups effectively. Contrary to originally designed to be versatile, our goal now is to completely redesign and integrate it with the Subscription Manager tool, creating a curated experience for merchants using recurring plans.
Role
Solo Product Designer
Core responsibility
UX Design
Visual design
Product strategy
Research
Usability testing
Team
1 Product Manager
1 UX writer
2 Developers
Timeline
2 months
Impact
75%↑
Efficiency of Creating a Payment Page
92%
Task Success Rate
Kick-off
The goal is still ambiguous
When we were given the task to redesign the product, the task was quite ambiguous, basically to redesign a payment page curated for Subscription Manager.
But there were many problems we had no idea about, especially these key ones:
Problem: What exactly are the problems that users have? (may include usability, functionality, etc.)
Goal: How should the Payment Page integrate with the Subscription Manager? How should they work together?
What did I do?
User Interviews and Heuristic Audit 👉 Gathered feedback from users to identify common usability issues related to the Payment Page tool. Additionally, I conducted a heuristic audit to identify usability issues myself.
Competitive Analysis 👉Analyzed competing products to get a better understanding of how the Payment Page and Subscription Manager should work together.
Design Sprint 👉 Gathered more feedback (expert interviews with customer support team), as well as brainstormed (HWM statements, voting, sketching, storyboard).
Design Goals
Turning problems into design goals
After the design sprint, we decided as a group that we wanted to build an intuitive, quick and flexible way for merchants to create payment pages and for customers to subscribe to plans.
Why intuitive, quick and flexible?
Our vision was to empower merchants to utilize the payment page to invite customers to subscribe to plans effortlessly. We aimed to provide merchants with a simple and efficient process for creating and sending payment pages, enabling their customers to register quickly. This will save merchants valuable time, simplify their workflow, and ultimately boost their revenue.
Intuitive
Align with merchants' mental model
Quick
Reduce merchant’s workload and increase customer’s adoption
Flexible
Meet the needs of different merchants
Users
Merchants
Create payment page & send it
Fill info to self-register
Customers
Overview
Design process
This project went through a complete design thinking process, from research to usability testing. However, instead of going through what I did at each step, I think it is more valuable to share the highlights from the ideation to the prototyping phase.
Highlights
How to make it intuitive, quick, and flexible?
I see the design process as a two-step process:
Translate the problem into solution 👉 Brainstorm, discuss ideas with the PM, and decide on the flows and features together.
Translate the solution into UIs 👉 Create user interfaces that reflect the solution and make sure they are easy for users to understand.
So I will talk about my design process from 2 perspectives: Flow perspective and UI perspective.
What can we do in terms of flow?
Get the Basic
Make it intuitive: align flow with users’ mental model
To get my ideas straight, I started by drawing a flow chart. To make the process intuitive, we need to align the flow with the user's mental model. I started by decluttering the original flow, keeping only the steps related to the subscription. Then I reorganized them into a clear and easy-to-follow sequence for merchants.
Inspired by Competitors
How to make it faster while flexible?
During our competitive analysis, I identified two main approaches to building a payment page:
Type 1: Fully customized form-building process, starting from scratch.
Choose a plan
Configure/Design the page
Preview and publish page
Get a URL
Type 2: Quick link - For each plan, merchants can directly click an action called "Share Link", which directly generates a URL.
Go to “Plan Detail”
Click” Copy Link”
Get a URL
Combined the best of two solutions
The idea came to me: what if we combined two approaches into a single solution? Then how?
I proposed a concept: What if the system automatically generated a default payment page for each merchant's plan?
This default link can be used when merchants want to share their plans with customers. They can edit, modify and view the link just like any other payment page. This gives merchants the convenience of not having to create a payment page from scratch, while still giving them full control over the customization and personalization of the page.
Plan
Default payment page (=quick link)
Auto-generate
Edit & Update
This means:
Why?
“Select one plan” is the most common starting point. 84% of people start with select only one plan.
Based on our interviews, most merchants only require basic customer information such as name and email address. This means they have limited customization needs for the “add fields”.
With these insights, we can provide merchants with a pre-designed template that serves as a starting point for creating a payment page.
👉 Even better, we can automatically generate that page for them, eliminating the need for manual creation.
Benefit
👍🏻 Automatically generated link. No need to create it.
👍🏻 This link is the same as the quick link.
👍🏻 Merchants can always edit and update the content and design of the default payment page.
👍🏻 If they ever choose their brand colour and upload their logo, then this link will have their brand colour and logo, they never need to update again.
What can we do in terms of UI?
After clarifying the product framework with the PM, my next task was to bring it to life through design. I will demonstrate how I did this with a few examples.
Inline editing
The content elements in the design use inline editing. This feature allows users to make changes directly to the content, saving time and improving efficiency.
Drag and drop
Drag and drop functionality provides a more intuitive, natural, and fast way for users to move objects around the screen.
Preview in the drawer
Merchants can view both desktop and mobile versions of their payment page directly in the detail view, providing them with more confidence and certainty.
Quick action menu
Hovering over an icon displays a tooltip that tells the user the name of the action. This approach maintains a clean visual design while ensuring that the actions are easily accessible.
Save as draft
In usability testing, this was one of the most loved features among merchants.
"I'm really invested in my business's brand and reputation, and the last thing I want is to make mistakes in front of my customers. That's why this feature is so helpful - it ensures that the final version is polished and free of errors.”
——Merchant
Final UI
Big challenge, big learning
Designing the customer-facing flow posed the greatest challenge during this project. With 8 parallel user flows to consider (including single plan vs. multi-plan, with add-ons vs. without add-ons, and mobile vs. desktop), I faced several obstacles:
Finding a solution that would work for all 8 cases.
Striking the right balance between usability, aesthetics, and consistency.
Initially, I decided to tackle the most complex flow, believing that if I could make it work, it would naturally work for the other flows as well. However, upon finalizing my design solution, I suddenly realized that it was overly complex for the simplest flow, which happened to be the most frequently used and impactful one. It was at this moment that I realized the importance of prioritizing user flows based on their frequency of use and impact, rather than starting with the most challenging one.
I am very grateful for this "aha" moment, as it has given me a deeper understanding and insight into "how to design for complex products" and provided me with more perspectives. It gave me profound insight and reminded me once again how fascinating the field of product design can be.