PayLight is a virtual wallet web app which provides fast and secure platform to users to send, request and receive money, pay their utility & subscription bills as well as split expenses with friends and do shopping using their unique Id.
As a UX/UI designer, I designed this project in Figma from inception to final visual design through research, ideation and UX design principals.
Duration: 7 Months
Role: UX Researcher, UX/UI Designer
Methodology: Research (SWOT/UX Analysis), User Stories, Surveys, User Interviews, Card Sorting, Information Architecture, Wireframing, Prototyping, Usability Testing, Affinity Mapping, Preference Testing
Tools: Figma, Usability Hub, Optimal Workshop, Google Forms
About
My Design Thinking Process
Problem & Objective
Problem Statement : Our users need a way to send & receive money from their family and friends, pay bills as well as split expenses with friends and do shopping using their unique Id because they wish to have a more authentic, secured and trustworthy platform to make these transactions without sharing their personal data (credit card and banking information) to the outside world.
Objective : We need to create an application that would be intuitive, user friendly, and especially secure for our user. We need to focus on the functions and features of our competitor's app and try to find all the frictions experienced by users and ensure that we do not do the same mistakes and create an overall experience which is much better than them. Therefore, we can buy the trust of our users and create our place in the market.
Competitive Analysis
As part of the market research, I evaluated the top competitors in the market in the form of SWOT and UX Analysis and I discovered following key friction points which I addressed in our app:
-
They often Freezes or limits accounts of their users.
-
Only works on NFC POS terminals not MST.
-
Still some stores or websites don’t support their services.
-
Transaction history page is not clear enough for the users.
-
Split expenses feature is hidden under the hamburger menu.
-
Send & Request money options are confusing for the users.
User Research
After getting the market analysis done, I conducted User Survey and Interviews to learn more about the problem space from the users' perspectives.
Research Goals
-
Determine user’s pain point, frustrations, achievements, requirements, likes, and dislikes with existing payment apps in the market.
-
Collecting data on the context in which users use the virtual wallet apps.
-
To find which features users like the most and which they would like to add in existing apps.
-
To know the security concern about victual wallet apps or which type of security requirements they have?
-
To know personal thoughts and attitude of users regarding the services offering by other payment apps in the market.
Surveys
To get quantitative research data, I conducted online surveys with 30 participants to gather initial insights of my payment app.
There are some key insights of surveys:
-
75% of our respondents use PayPal
-
44% of our respondents required Two Factor Authentication
-
24% of our respondents, primary motivation is Ease of use.
-
90% of our respondents use virtual-wallets app for their Shopping
User Interview
Then I conducted user interviews with 15 participants to get qualitative research data as it’s a great way to know users’ attitude toward payment apps and their needs, goals and pain points based on direct interaction.
There are some key insights of user interviews:
-
Users expect all financial related feature under one app
-
From a security purpose, users need Fingerprint and Two Factor Authentication
-
They expect, split expenses feature should be in the app
-
As motivation, they expect cash back or rewards
User Personas
Based on Proto-Personas and the information gathered in the survey and interviews, I created 3 user personas who use financial apps to do monetary transactions:
Anna is a 37 years old music teacher, wants e-wallet app where she could pay easily in stores.
Matt is a 34 years old recruiter, looking for fast & secure e-wallet app to send money to his parents.
Jennifer is 24 years old student, needs an app to split expenses with friends and then send money to them.
User Journeys
To get an understanding of user’s possible pain point and their experience, I created user journeys to identify the way of my personas accomplish set of tasks.
User Flows
Next, I created the user flows by defining the specific objective of each of my persona and the path which my persona will take to complete that objective.
Sitemap
In my initial sitemap, I formed a conceptual structure of my web- app and I tried to create an IA framework of the Dashboard /My Account page. To accomplish this task, , I focused on the navigational part of the Dashboard, and I envisaged 7 main screens such as Profile, Wallet, Send & Receive, Split expenses, Summary, Help, and Settings, which I linked with sub screens to organize the information into subpages.
After that, I executed the card sorting process with 8 participants, in order to remove any assumption and to better design the information architecture of my application. Then, I got the clear understand of my users’ mental model and based on that I made some changes in my revised sitemap. Now, I think my revised sitemap is much more user friendly than I had initially set out with. Now I have clear navigational structure under the 6 main categories, which I formed based on the responses of my 8 participants.
Wireframing
In the process of designing the PayLight responsive web app, I followed the below process and learnt from each stage to improve my wireframes.
Low-Fidelity : At this stage, I had the clear understanding of the most important features and navigation structure of my web-app. Now, I created low-fidelity wireframes to portray interactivity between functional elements.
Mid-Fidelity : Now, I have solid low-fidelity prototypes to use as a foundation. After that, I started adding details to better communicate the form and functions of my app, transforming it into a mid-fidelity.
Mid-Fidelity "Link a Card" Flow
High-Fidelity : After creating mid fidelity prototype, now it’s time to reach at high fidelity prototype after further evaluation and revisions. High-fidelity prototype takes much longer to create as the goal is to flesh out every single detail of the design. It looks and feel like a live system in terms of layout, navigation, usability and closely resembles the finished product or true representation of the user interface.
High-Fidelity "Link a Card" Flow
-
Link a Card by Entering Card Details
-
Link a Card by Login into Card Account
Usability Testing
After high- fidelity prototype was built, I tested the complete product to evaluate the accessibility, flow and usability of the app then I refined my design based on the outcome of the analysis and participants’ feedback.
Specification :
6 Participants
Remote-Moderated Usability Testing
40-45 minutes sessions
Refine Design Based on Test Results
Preference Testing
In my early design phases, I conducted a Preference testing where I shared 2 design variants with participants and asking about their preference about which one they like and why? While usability testing is useful for getting both quantitative and qualitative feedback on the usability of several different features and design decisions at the same time, Preference testing gives statistically significant quantitative feedback on the impact of a particular design decision, such as whether users prefer one design style over another.
Designing for Accessibility
I gave the importance of accessibility in my design by using “Accessibility Guidelines” to ensure the usability of the app for people with disabilities and the design are accessible to as many people as possible.
Design Iterations
With the idea of continuous iterations in mind, I focused on polishing the design of my app and use iteration to continue improving my app’s design and usability over the time to make it more useful and usable product.
Style Guide
Final Product
Challenges
-
Find the relevant participants for user interviews and Usability testing.
-
Creating an app which could satisfy different type of users’ expectations and needs.
-
Narrow down the important features.
-
Creating Visual Design which appeals others rather than my personal preference.
Learnings
Throughout the journey of PayLight, I learned so much as I went through the whole process from inception to final visual design, I would say defining the problem statement to arrive at the final product.
It was challenging for me, but I love challenge as it gives me the opportunity to learn more. While working on this project, I learnt a lot from my users as they were finding the mistakes in my design and giving their valuable feedback and suggestion which were really helpful for me. I got to know completely different sides of myself when I was stuck somewhere and found the way to come out gracefully.
One important thing I learned is we don’t need to conclude based on our assumptions, rather we should always validate the design by reaching out to our users first and then keep iterating based on learnings.
Projects you may also like:
