The amount of online transactions is steadily increasing, and this trend has been catalyzed by the global Covid pandemic, forcing many people to stay inside, wary of going out and using their physical cards to pay for items.
With it, this trend has brought forward the problem of how to make payment efficiently and securely. Our users need a way to make contactless and cashless payments seamlessly because they want a hassle-free and secure payment experience.
I started my research with understanding the competitors in the digital payment industry. In particular, to get a better understanding of the competitors' strengths and weaknesses, I researched Alipay and PayPal as they are two main players in the market. I researched and studied their applications to understand how they were presenting their brand, why they were doing it, what was working and what wasn’t. I started with creating their market profile and market strategy, then I created SWOT analysis to indicate their strengths, weaknesses, opportunities and threats. The last portion of my competitive analysis was UX audit, which I focused on aspects such as usability, layout, navigation structure and so on. This also helped me understand what my users might expect from a digital payment platform.
To have a better understanding of user needs and the challenges they are facing, I conducted surveys and user interviews. I aimed to understand user general behaviours and experiences towards:
Following surveys and interviews, I synthesised my findings and created two personas to better empathise with my main user groups. For each of my personas, I also came up a main scenario and then mapped out their user journeys to have a better understanding of their thoughts and feelings at every stage. These exercises formed a great foundation to move into feature ideation and prioritisation too.
With a better understanding of my users, their needs and pain points, I prioritised the features for Paywise.
Before I started to sketch out my application, the sitemap for Paywise's web app has been created to outline the information hierarchy of Paywise. I started with creating the initial sitemap, then I evaluated my ideas for the information architecture by conducting open card sorting. By doing so it gave me the clue on how to organise the web app in a most logical and user-friendly way. Based on the open card sorting result, I refined my sitemap to ensure all the contents were easily accessible for my users.
After having a good idea on the information architecture, I started to sketch out my idea using pen, so I can easily experiment with different layouts and ideas. I focused on highlighting the core features, and created multiple versions of each screen until I found a good combination of features and elements that matched the users needs.
Next, I used Figma to digitalise the wireframes for the mobile web app, clarify the design and also keep the mind open if there is any better design solution to solve user problem and meet user needs.
After creating the wireframes for the core features of Paywise, I created clickable prototype for user testing later.
The goal of this usability test was to assess the utility and usability of the Paywise mobile web app for new users. The test focused on three main features of Paywise, which were sign-up, money transfer, and wallet.
The test result showed that 83% of the participants were able to complete the assigned task without too much guidance or explanations. No big usability errors or mistakes occurred during each test session. After closely analysing participants’ behaviour and pain points I gathered from the tests, I listed issues that need to be iterated:
The first version of this page received some negative feedback from usability tests. Users complained that there was no password confirmation field for them to confirm they typed the correct password and the requirements for password setting was also not clarified.
The iteration was based on users’ feedback during user testing. Offering users an unmasking option for password and adding password setting requirement better solved users’ pain points. Placeholder has been added to the input field with labels to make the sign-up form more accessible for every user.
Since this page was relatively long, users could only see the skip option if they scroll all the way down to the bottom. To fix this issue, I moved "skip" button to the top of the page; this let users know that some of the sign-up steps are optional so that it would be less likely for them to drop the process halfway.
During the usability testing, some participants mentioned that they would like to be able to manage card settings on the same page rather than being guided to another place.
I designed a new version based on the insights I gathered during usability testing and ran preference test to find out which screen was more intuitive for my users.
I implemented the new design in my project based on the preference test result.
Paywise design system was created to document and explain Paywise's visual identity. The goal was to create a library of components to allow designers to reuse them and developers to build them in a consistent way. Following the guideline will ensure that Paywise's brand standards are upheld and that the brand experience is consistent.
Below I'm going to show case 3 core features of Paywise, which are sign-up, internatinal money transfer and digital wallet.
If you would like to interact with the full prototype,
Click me!
Secure, trusted and seamless sign-up process for users.
Security becomes particularly important when finances are involved. To provide my users a safety registration process, I introduced two-factor authentication to make sure that my users felt reassured during the sign-up process.
Accessible and painless international money transfer for everyone.
The goal was to provide users an easy, clear and secure international money transfer process. Progress indicator was introduced here to reduce uncertainty and to create a clear path to completion. SMS code were also applied in the process to authenticate a transaction for security reason.
Manage all payment options with an easy and intuitive digital wallet.
The digital wallet feature allowed users to store all their bank cards in one place. Users were able to add or remove cards, view or update card details here.
Define the MVP can be tricky sometimes. It is important to focus on the problem statement and find out what provides the most value. Make sure to define the MVP first and don't get distracted by those out-of-scope requests.
Design is a consistent iteration process. It is the key of improving user experience, so make sure to always collect feedback and insights from users.
