AlphaPay | Web Payment <>
Shopify Plugin

Designed a web payment system to be integrated as a Shopify Plugin

Timeline
March - April 2022 (2 months)
‍

Team
Product Manager
Business Development Manager
2 Developers

Tools Used
Adobe XD, Ipad, pen and paper, Zoom

Role
UX/ UI Designer- User Research, Project Management, UX Design, UI Design

Project Summary
The project was first brought up by a new customer asking if we had a Shopify plugin for them to use, along with our in-store solutions. Although we had an existing web payment product for WordPress, Woocommerce, Magento, Open Cart, and Ecshop, we didn't have one specifically for Shopify. Shopify's requirements were also different from what we originally had, and required us to provide two solutions, a merchant's page for linking, and a customer's page for paying.
Product Overview
AlphaPay is a payment gateway that connects Canadian Merchants with Chinese Consumers. It includes payment methods such as WeChat Pay, Alipay, UnionPay, and other credit card methods. AlphaPay provides both in-store and online payment methods. In-store methods include QR Code Payment, POS System integration, AlphaPay mobile App, and smart POS terminals. Online payment methods include web and E-commerce API Integration, Mobile In-app payment, mini-program, and Pay-by-Link.
My Role
As the sole designer on the team, I was in charge of transforming user feedback into solutions. I closely collaborated with the Product Manager, developers, as well as our customer service team to create a better checkout experience that tailors to Shopify. My main areas of responsibility include:
- User Test
- Design (app)
Shopify's Requirements
Once the partnership with Shopify was confirmed, I came into place to research what Shopify required from us, and also the user flow of how users would transition from Shopify to AlphaPay and back to Shopify.
After determining the requirements, I jumped into researching the market and doing a competitive analysis and conducting a simple user test. The insights show that users want:
• A Simple and Clean UI
• Quick Process with minimal screens
• Flow well with Shopify’s UI
Initial Sketches
With these users in mind, I quickly sketched out a few ideas to determine the ultimate method that was more effective for the users. The sketches include information architecture from the previous web payment pages. All sketches are a one-step process where users would jump from Shopify's cart to this page, and then to Shopify's payment successful page.
Hi-Fidelity Mockups
After narrowing down a solution through meeting with my team, I jumped straight into the Hi-fidelity mockups as we wanted to launch as quickly as possible. All of the Chinese payment methods have a QR Code call to action, where users will open the corresponding app on their phone, and scan the code. Users will then complete the payment on their phones. The design also includes a credit card option for the required form fields designed in different states.
I then met up with my team to determine the most effective solution, and jumped in right away afterwards to create Hi-Fidelity Mockups to shorten the design process so our users could use our product right away. The design is a one-step process where users could select a payment method and have the main call to action displayed in the middle. It consists of a split screen design where the right side contains all the order details, and the left side contains all the actionable items. By using a similar design to Shopify's cart, users could seamlessly jump over to our page without any confusion. Once I completed this design, I handed it off to the development team.
However, a problem occurred...

By having all of the payment methods and QR codes on one page, if a user navigates between each payment method back and forth, the page would constantly have to refresh to regenerate a QR code.

This action greatly strained our database as it was constantly refreshing. It was also a very bad experience for the merchant, as with every new QR code generated, a new order was created in the merchant's dashboard. This means that the merchant would see tons of opened orders that were not paid through.
I then went back to reiterate my design and ended up having to split this process into two steps. In the first step, the user would select a payment method and then click Next. The user will then continue the payment by either filling out their card information or scanning the code.
Merchant Solution
As for the merchant side, it is also a one-stop solution. Users only have to fill out their partner code and credential code to connect their Shopify store with AlphaPay. Merchants can also be redirected to our FAQ, Contact Us, or our Apply page if they choose to.
User Flow
I also handed off a full user flow to clearly show how each user can navigate through the pages based on their decisions.

1. Registration Process
Youpi's redesign allows users from Canada and China to create a Youpi account. The form is kept short so users can quickly browse the app without spending much time at the registration. The phone number is used as the main identifier of the user as it is more unique, and an email is used as a secondary identifier that will mostly be used for account retrieval.

2. Login Process
Each user is identified based on their phone numbers, as it is more of a unique identifier while compared to an email. An alternative login method for Youpi's login process was wanted as the H5 platform didn't save passwords, which frustrated the users who often forget their passwords. Therefore, a mobile verification login method was added. A code will be sent to the user so the users are not required to remember their passwords. As long as they can receive an SMS, they will always be able to log in.

3. Forgot Password
Based on the feedback and the newly created personas, we discovered that one of the user group travel often, and might not be able to retrieve an SMS code for resetting their passwords. Therefore, we added an email verification code retrieval option for this type of user. Although emails are used as a secondary identifier, users still have to verify their emails when they register, and they also have to verify both the old and new emails when they want to change their email.

4. Third-Party Authorization
With third-party authorization, users can speed through the registration process. Since the third-party app doesn't have all the form fields that we require, we added an additional "complete your profile" form. The form field was shortened so users only have to fill in the necessary fields for creating an account, and the rest of the information can be completed in the app's profile section.

Results
After launching the product, we kept in close communication with the users that integrated with us right away. Overall, 95% of merchants were greatly satisfied with the easy connection process. None of them also received any concerns from their customers regarding the payment process.

As for the customer side, we managed to track the two payment pages and discovered a bounce rate of only 1%. This means that 99% of our users were able to complete the payment process.
Reflection

From this project, I learned that sometimes there could be business limitations or development limitations that could restrain the final design from having the most effective solution. Sometimes we have to be satisfied with a slightly less effective method, as long as there are no major pain points.

© Rachel Hui 2024