UX/UI Case study
Designing a mobile payment app
INTRODUCTION
Project Overview
My users who regularly shop online need a convenient and secure way to pay for the things they need fast and easily with their smartphones. Because they need an one-stop tool that will become the digital wallet that gives them everything they need in one place to manage their money.
Project Goal
We will know this to be true when we see how many people are engaging with our product to manage money and when they accomplished the goal of managing their finances after using Plutopay.
Role
UX/UI Designer
Duration
7 months Project
Skills
CareerFoundry UX course
Primary Stakeholder
Figma, Adobe XD, Marvel, Zoom
Tools Used
Competitor Analysis and SWOT Analysis, Business Requirements, User Interview, Card Sorting and Affinity Mapping,
User Personas, User Stories, Information Architecture ( Sitemap and Task Flows ), Wireframing and Prototyping from Low to High Fidelity, Usability Testing, Preference Testing, Design Style guide & Language system, Final Visual Design of the Screens
The Design Process
Competitive Analysis
I conducted a competitive analysis to identify our relevant customers and prioritize their goals, needs and motivations. This helped to shift the perspective from a features-first to a users-first mindset.
User Interviews
User Interviews Findings
To understand users’ general behaviours and thoughts and feelings toward personal finance.
To identify users’ pain points and main problems with payment apps they currently use or they’ve used before.
To find out what features users would like in the payment app.
Key Insights
All IN ONE PLACE
Users will need to do everything in one place such as make a payment, transfer money, purchase products and send/receive money. Our users carry their phones as a wallet instead of carrying cash so they want to do things they need on their phones.
MANAGING MONEY
Participants don’t feel that managing personal finance is hard if they can track their payments and purchases on the app and find the average spending habits for each category of expenses.
CUSTOMIZATION
Users will need a way to switch accounts and credit/debit cards easily. It allows them to organize their money for different purposes on each account and card.
User Personas
“I want to know what things I spent most per week so I can manage my money.”
Jane is a university student working part-time at the restaurant. She’s been receiving government student loans for tuition fees and living costs. She uses her money for herself but she doesn’t know all her expenses each month. She needs an app that helps her to start saving money without losing motivation.
Her goal is to check her expenses and to set a saving goal with a deadline.
“As a busy mum, I want to manage my finances in one place.”
Mila has a busy life as a mum of two. She often buys things online as she has no time to go to the shops. She has several bank/credit cards and now she needs an app that ensures secure card management.
Mila is organising a Halloween party for kids with school mums. She wants to buy things online and share the cost with them. Her goal is to get things with plutopay and to request money from mums and share the receipt.
Card Sorting
Site map
Wireframes/Prototype
Iterations process of Sign up / Log in
Usability Test
Goals
-To gain a good understanding of the usability and determine if the users understand the navigation and see how they feel about the features and processes of completing tasks on our product.
Tasks
-Send money to your friend
-Set a saving goal with deadline date
All the test participants are tech savvy and had an experience with online transactions before.
Usability Test Results
Issue 1 : There are no back/cancel buttons from send/request pages
Evidence: Three participants struggled to find a way to go back to the home page. Especially when they accidentally clicked the wrong buttons during the session. This is a necessary option for users to be able to complete a core function of the app, thus revisions to this are a high priority.
Suggested Change: Revisit the prototype and add the button on the top right on send/request pages.
Issue 2 : After setting a goal, I have no idea where I can review or change the details
Evidence: 50% of participants shared that they couldn’t see their goal after setting a goal, it might be useful if they can review their saving goal on the homepage.
Suggested Change: Add it in the homepage to be able to review every time they open the app. Additionally, they can also check how much they saved so far with a circle percentage diagram and how much they still need to save until the set dates.
Design Systems
Summary
It was completely my first real UX/UI project and it was very challenging for me to conduct each step to create my first product. I’ve learned that user interviews, surveys and user testing gave me invaluable insights and experiences to make my app better and I was able to get valuable feedback from participants. Creating rapid prototypes at the early stage is also shown me how important to ensure I have the right user interface design.
I’ve learned a lot during this project. Design is not only for visuals, it’s more about supporting the everyday lives of millions of people with digital products to solve problems users have. As a UX designer, it’s critical to study the needs of the audience and offer the appropriate solutions which will make the product helpful for users to be able to have a better user experience.
What I could have done better
It is critical to test early on, especially during the sketching process. It can be increasingly more difficult to make changes as I progress in the project. I struggled to change my design in the later project. Also, I could have put more time and effort into my user research. For my next project, I would put more time to experiment with different app designs early on to save time down the road.
Next Steps
This project is going to move forward as long as the app exists and to refine my product, I would conduct more iterations and User testing to improve my product based on the users data collected.
I would conduct adding a new feature to make payments easier and faster without being hassled. This QR code payment allows users to pay from their smartphone’s camera. Just like open the camera and scan the code and pay.
I have created the feature that allows users to upload the invoice when they send/request money. I would add the new feature that allows users to create the invoice in the app so they will be able to organize their finance easily.