Designing a seamless payment gateway with 100% stakeholder buy-in.
1. Help shoppers save time and effort when transacting online;
2. Help shoppers feel safe with keeping their information private;
3. Help boost sales and conversions for online businesses.
1. The challenge was to request as little information from customers for a seamless conversion, but still ensuring maximum security.
2. This project challenged my skills, to be the advocates for the users and to attain the stakeholder’s buy-in, in order to design the best product.
After defining the problem, goal settings are also important to define the expected results so the team can work towards the desired outcome. The goals set for this project are as listed below:
Save your payment and shipping details once and checkout seamlessly every time.
Your info is encrypted and stored securely in compliance with PCI DSS.
Use one FastPay account to shop at all FastPay brand networks.
We started with some research and discovery to understand the current payment gateway landscape and what are our competitors doing. Due to the limited time constraints, competitive analysis was the quickest way to design a user journey.
We then created a user journey to determine all the necessary flows and screens needed, then wireframes to establish and visualise the structure of the major screens.
Based on the research done, we crafted the user journey where users have to login, then proceeding to select a payment method.
However, the business stakeholders gave feedback that merchants wouldn’t like how we request users to sign up/login as the first step because it feels like we are harvesting their customers.
Despite the attempt to explain the risks of cognitive overload, we ended up with 2 (two) different flows, which are the (1) Payment Priority flow and the (2) Login Priority flow.
The select payment method is prioritised for users to focus on the immediate goal of making the transaction. However, if users would like to sign up/login to enjoy the added benefits, they will have to scroll down the screen to find the login field.
Splitting the step into 2 is a behaviour that users have been used to. It provides a singular focus purpose for users to focus on the task at hand in order to achieve their goal. (Sign up > select payment method)
After creating the prototypes for the 2 (two) flows, we decided to validate them by testing the designs out with real users.
After letting users test out both prototypes, we identified which flow provided better clarity and experiences for our users to achieve their goal. With these key findings, it was easier to get the stakeholder’s buy-in to the proposed flow.
Nicer when it's not too long - I don’t like reading.
Went through the flow without a second thought because it’s a familiar behaviour.
The logging in and signing up flow is a lot clearer.
After letting users test out both prototypes, we identified which flow provided better clarity and experiences for our users to achieve their goal. With these key findings, it was easier to get the stakeholder’s buy-in to the proposed flow.
Nicer when it's not too long - I don’t like reading.
Went through the flow without a second thought because it’s a familiar behaviour.
The logging in and signing up flow is a lot clearer.
After solidifying the user experience, now is when the design system is created to introduce the brand identity visually. Growing and maintaining a design system is crucial in order to unify the components and experience.
Nicer when its not too long - I don’t like reading.
-
Went through the flow without a second thought because it’s a familiar behaviour.
The logging in and signing up flow is a lot clearer.
-
Based on the insights and feedbacks that we got from the user validation, I have updated the “Login Priority Flow” designs accordingly.
