top of page

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. 

Prototype Walkthrough (Video)

Portfolio Walkthrough (Video)

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

PayLight Final Product Images


My Design Thinking Process

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.

PayPal SWOT Analysis
Google Pay SWOT Analysis

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.

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 Surveys Results
User Interviews Results
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.

User Flow.PNG


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.

PayLight Sitemap


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

PayLight Mid-Fidelity Wireframes
PayLight Mid-Fidelity Wireframes

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

PayLight High-Fidelity Wireframe and Prototypes
  • Link a Card by Entering Card Details 

PayLight High-Fidelity Wireframe and Prototypes
  • Link a Card by Login into Card Account

PayLight High-Fidelity Wireframe and Prototypes

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.

Prefrence Testing1.png

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.

Design Itteration1.png

Style Guide

Design Language Guide - Button Style and Colors

Final Product

Final Product Images


  • 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.


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:
Frame 53a.png
bottom of page