UI/UX Design — Payment process interface optimization
From the old payment process, solve existing problems, think of new processes and interfaces and import the preliminary design system into the new interface
01 Foreword
In the past, I have been exposed to the design of education platforms, tourism platforms, and IoT platforms. Although there are payment-related processes, in the past, they used third-party payment platforms directly, and they did not need to consider the logistics process.
02 Problem explore
The old version of the payment process has been used for about 3 years, during which a lot of usage issues have accumulated. Last year, the technical team happened to want to develop a new program architecture. So I took this opportunity to rethink the new payment process and redefine usage behavior.
Related issues in the old interface process
In the previous version of the interface and process, you can see that there are three steps, and the steps are as follows:
STEP 1 - Enter shopping list and discount code
STEP 2.1 - Buyer identity confirmation, data filling, logistics options
STEP 3 - Checkout amount and payment options
STEP 1
In the past experience, colleagues have mentioned that when many buyers see the discount code field, they start to be distracted to find the discount code, and many orders may be dropped.
STEP 2
There is a lot of logic in this step, so it is relatively complicated. When the buyer enters step 2, they need to fill in an email to confirm whether they have registered an account on the platform. There are several situations:
A. When the buyer is a non-member and does not agree to register as a member. Continue filling in the information and go to the next step.
B. When the buyer is a non-member and agrees to register a member, after the registration is completed, the relevant functions after the member logs in will be turned on.
C. When the buyer is a member, navigate to the login page.
The simplest cases mentioned above is the case A.
B. and C. are among the most likely to distract buyers, and the most important thing for shopping platforms is to allow buyers to complete orders in the shortest and fastest way. But when buyers are led to a process that is less relevant to shopping, they will start to be distracted by things like finding discount codes, forgetting passwords, etc.
(The issue of member log in can usually be solved through the SSO login function, but unfortunately, there is no development of this feature so far)
STEP 3
The last step is a relatively simple step, choosing a payment method.
The old version was designed to make each different payment option a big button, as shown below. When clicking on something like a credit card or bank transfer, the relevant input fields will expand below. At this time, when the screen of the mobile device is narrow, the user may be unable to intuitively understand the degree of relevance of the options to the expanded content below.
03 Research issues and design directions
Because the company’s organization is not very big, the supervisor is also very relieved to assign this task to me, so research and thinking have become one of my subjects.
Realizing from past experience, in fact, most of the sources of many problems will come from the company’s business people, because they are the most direct role to communicate with users. Others come from the analysis of the data, such as at which step the user usually jumps out … etc.
Personal habits, when researching problems, first go through a rough analysis of other similar products at present, then find out their respective advantages and disadvantages, and then evaluate which parts are worthy of reference. This time, I roughly researched the shopping experience of Amazon, Shopify, Shopee, ASOS, Tictail, Uniqlo, H & M, Zara, Lazada, etc.
Among them, I especially like the checkout process of H & M, Tictail, ASOS, especially the single-page checkout process, to avoid users losing orders when jumping pages. In addition, because the main TA of the platform is used by small sellers, the payment processes of some larger shopping platforms are not equally applicable to this platform.
The general design direction is sorted out from it:
- A simple and clear visual.
- Avoid page jumps and distracting focus payment processes.
- Scalable block design.
04 Revised design
Start designing with directions, and the most important idea is to make a one-page checkout process interface that can be seamlessly integrated.
Design V1.0
In this version, try to make the process stay on the same page, and give the process steps a hint. This is a preliminary design direction, allowing users to choose a logistics method immediately after completing the information and switch to the payment block in the next step. However, because the information on a single page is too complicated at the same time, the flow of the process is unclear, so try to simplify the functional blocks of the interface.
Design v2.0
After discussions at the conference, a shopping cart block was added to this version, making it easier for users to add, reduce, and delete the number of products at any time, and prevent users from returning to the previous page to modify the content of the product. The biggest change is to remove the step prompt and transfer the concept of the step to the process block, which is more in line with the single-page interface design. But because there are more shopping carts, the interface looks crowded overall.
Design v3.1 (Final)
Adjusted the checkout process, removed the extra burden on the interface, and faded the background color to make the overall vision lighter. The width of the layout is also widened so that the blocks do not appear too crowded.
When designing version 3.0 at that time, the design system was not yet planned. Therefore, what can be seen in the figure below is the adjusted version 3.1 after importing the design system.
05 New payment process experience
After completing one stage of the design system, the component design in the design system was redesigned into the new version of the payment interface to make the overall visual of the page more uniform. In addition, there are a lot of micro-interactions in the experience, mainly to reduce some process interference or inconvenience to users.
Before entering development, we also used Storybook to develop prototypes, allowing testers to perform tests, and to correct some issues raised by testers. It is very interesting that when testing, most of the issues are not placed on the interface design but on the text of the interface, such as the title of the block, the text of the button, the description text, etc., mainly They will be confused and hesitant about an uncertain text.
The other parts went well on the test, but we still have to continue to collect data and continue to test the response after it is officially launched.
The new version of the checkout interface design has already been designed a paragraph before planning the design system, so the development timeline is a bit messy, so only half of the design system architecture is used in the project. And such integration experience also better understands how to modify the design system components and development methods.
UI/UX Demo
01 Email Account confirmation
After the user enters the Email, confirm whether the account has been registered. If Email has already registered as a member, open the password input field, or you can skip continuing as a guest. The login function is performed in a non-jumping manner to reduce interference with user behavior.
In the old version, users were directed to the login page. In the next stage, we hope to implement an SSO login.
02 Country menu
When there are too many countries, you can find the country by searching directly.
03 Payment menu
Expand the relevant information and content when choosing different payment methods. The new version solves the less intuitive interface design and usage behavior of the old version. After a discussion at the meeting, I hope to have the opportunity to introduce payment options such as Apple pay or Google Pay. Make the payment process even smoother.
04 Simplified member registration
When the user clicks to agree to become a member, the password field is expanded, and payment and member registration are completed at the same time.
05 Member profile list feature
After the user logs in, he can select the filled-in data list and can edit or add. The new version mainly simplifies the presentation of the data list and allows users to modify the data directly.
06 Discount code feature
The discount code is placed under the shopping cart, and the field input box only appears when clicked. Because the user is easily distracted by the checkout in order to find the discount code, it is changed to a less obvious design.
06 Conclusion
This project took about a year and a half from design to development, mainly because the technical team was previously busy with the development of other projects. Although the design draft was completed very early, 6 to 8 months have passed when it was officially developed, and the design system development and integration have been revised in the meantime. Finally, it will be updated and online today.
The process of integrating the design system is not a problem for the design, but at the technical level, it still takes a lot of time to communicate with the technical team on how to effectively introduce the design system. Although the chaos-based on development time leads to only half of the design system architecture, this is also a beginning. Solving some integration problems in the future should be much smoother in the next new project.
At the time of design, because I was not familiar with the checkout process, I spent a lot of time researching the checkout functions of major platforms. Some people in the middle also proposed a step-by-step checkout process instead of a single-page checkout process, so everyone also tested the single-page checkout experience, and slowly convinced some different opinions.
After the new interface is launched, we will definitely continue to receive different topics. Of course, continue to collect problems and solve problems. In addition, some functions will be integrated in the future, such as SSO Login and Apple / Google Pay….
Other 2 or 3 things
Because the previous article about designing the system was because the company was still in the development stage, some customers learned from the article that they thought there was a new interface, so I went to ask my colleagues when to go online. It’s off the shelf, but it will be re-launched when the time is right ~ So I don’t know the company that I serve.
If you are interested in a design system or a designer or engineer who is developing a design, welcome to join the community to study and discuss ~ We are currently developing a new design system, and then open source in the future so that everyone can learn, research and use together.
