LumaPay is a responsive web app that allows its users to send or receive money electronically and view all their payment card transactions in one place in the form of a digital wallet.
As online and card payments become more prevalent in today’s society, users have grown to enjoy their convenience and ease of use. How does a user manage all of their transactions and send money to others in a borderline cashless world? LumaPay is designed to allow its users to send, receive, and transfer money while simultaneously allowing them to view their payment card transactions.
Client
CareerFoundry
Role
UX/UI Designer
Timeline
Oct 2021 - Jun 2022
Tools
Figma, Optimal Sort, Usability Hub
Problem Statement
With consumers becoming more incentivized on using card payments over cash, users are finding it challenging to manage all of their financial transactions in addition to having a convenient way to send others money.
Why Is This A Problem?
If a user has multiple payment cards it can be difficult to keep track of all of their expenses. A 2019 study revealed the average American has 4 credit cards. Managing that many can be exhausting. People have gradually used less and less cash since 2015 and the COVID-19 pandemic further accelerated its already on-going decline. This article reveals that cash was used less in 2020. Given the scarcity of cash usage and rapid increase in payment cards; users are not able to pay each other conveniently. Not everyone has a checkbook lying around and going to the bank can be seen as an inconvenience.
Design Goals
Create a user friendly responsive web app and native app that allows users to:
Securely store all of their payment cards and banking information
Browse transactions across all linked cards/bank accounts to keep track of all expenses
Send and receive money to and from others electronically in a fast, secure, and convenient way.
Design Process
EMPATHIZE
Competitive Analysis
After establishing the problem and solution, I moved on to conducting a competitive analysis of other electronic payment apps in the finance industry. I researched Venmo & Zelle as they have great brand awareness and popularity within the US. I performed an evaluation of the competition through a SWOT analysis to better understand their strengths and weaknesses in addition to finding opportunities to meet an unfulfilled user need.
Strengths
Unique user interface that resembles social media feed
Allows users to easily send and deposit money electronically
No fee to setup account
Strong brand awareness
Allows users to pay with Venmo funds for services/products
Weaknesses
Charges 1.5% fee for instant deposit to bank account
No way to reverse error payment
Recipient is required to have Venmo account
Strengths
Already incorporated into major US banking apps
Universal interface across all banking apps
Easy to setup an account
Allows instant money transfers to others without any fee or need for third party app
Users can still use Zelle app if their bank does not support it
Weaknesses
No responsive web app; users limited to mobile
No way to reverse error payment
Recipient is required to have Zelle account
Doesn’t offer any other products/services to grow brand’s ecosystem
User Research & Interviews
Research Goals
To better understand user perceptions and behavior when it comes to payments and mobile payment apps
To discover potential pain points users may experience when navigating their current mobile payment apps
To learn what users value most in a payment app
Process
I conducted one on one interviews with three users who actively use mobile payment and banking apps to gain further insight based upon my research goals.
The participants' attitude/behavior show strong preference for paying with card as their primary method of payment. With one participant mentioning Apple Pay. Additionally, they all valued the convenience of being able to browse all their transactions electronically.
The overall navigation and user experience when the participants use their primary mobile payment apps are described by them as "intuitive, convenient, and user friendly". This implies that my users desire a simple app and that I should also try to mirror these aspects to foster a sense of familiarity and no confusion.
The participants all disliked the instant deposit fee that Venmo charges. This insight shows me that even when 2 different apps can provide the same feature, one is preferred over the other due to it taking away a pain point.
The primary security concern was the fear of sending money to the wrong recipient.
The participants all primarily use the "send money" feature the most when it comes to using their mobile payment apps. I will be sure to make my app's "send money" feature is prominent so that users can make their transactions quick and easy.
Affinity Mapping Results
DEFINE
Personas & User Journeys
Based on my research insights, it allowed me to define and create two distinct user personas that resonate with my target audience. For each of my personas, I came up with a user journey that helps illustrates their feelings, thoughts, and actions in a given scenario. This humanizes the personas and allows me to put myself in their shoes.
User Persona 1: Taylor
User Persona 2: Melanie
Taylor User Journey
Melanie User Journey
IDEATE
Information Architecture
After establishing my user personas, the next step I did was to create a sitemap for my app. The sitemap helped served as a foundation of LumaPay’s information hierarchy. With a rough draft of my information architecture, I conducted a closed card sorting test with 10 participants to see how they would group the given categories together. Based on the closed card sorting results, I refined my sitemap to ensure all of the features and content were easily accessible with minimum friction.
Card Sorting Results
Site Map
Initial Site Map
PROTOTYPE
Wireframes & Prototype
Once I developed a general idea of how my sitemap would look like, I was ready to move onto wireframing. I established 3 main features to iterate based on my user personas.
The features are:
Sending another user money
Requesting another user money
Viewing credit/debit card transactions
I first started off with low-fidelity wireframes. My medium was the traditional sketch and paper! The focus wasn’t so much on the interface, but rather, establishing the general navigation and flow of what the user will go through to complete their success criteria. With the sketches complete, it was then time to translate my wireframes into digital format. I used Figma for this process. For these wireframes, I added general shapes, colors, and typography. Lastly, I focused more on the UI of my app and brought the wireframes to higher fidelity. Generic shapes/icons were replaced with photos, buttons, input fields, etc. to make the app appear more realistic to the final product.
As a bonus, I also added a transfer balance feature and onboarding process to illustrate what it look for a user to register for a LumaPay account for the first time.
Pay or Request
Pay or Request - Low Fidelity
Pay or Request - Mid Fidelity
Pay or Request - High Fidelity
![Pay or Request [Pay Selected] + $10 (1).png](https://images.squarespace-cdn.com/content/v1/62de09b13683300aae23e927/1658718642644-30T18U8DXEQ84QSQB60A/Pay+or+Request+%5BPay+Selected%5D+%2B+%2410+%281%29.png)
![LumaPay Pay or Request [Request Selected] + Recipient (2).png](https://images.squarespace-cdn.com/content/v1/62de09b13683300aae23e927/1658718642695-KPRICKMCS5ZYF4MYFV23/LumaPay+Pay+or+Request+%5BRequest+Selected%5D+%2B+Recipient+%282%29.png)
![Pay or Request [Pay Selected] + Submit (1).png](https://images.squarespace-cdn.com/content/v1/62de09b13683300aae23e927/1658718642627-V4RGSU3SYWLI1G4OXK9X/Pay+or+Request+%5BPay+Selected%5D+%2B+Submit+%281%29.png)
![LumaPay Pay or Request [Request Selected] + Submit (1).png](https://images.squarespace-cdn.com/content/v1/62de09b13683300aae23e927/1658718642660-P16PLVIGRDITN6AWIKXK/LumaPay+Pay+or+Request+%5BRequest+Selected%5D+%2B+Submit+%281%29.png)
View Card Transactions
View Card Transactions - Low Fidelity
View Card Transactions - Mid Fidelity
View Card Transactions - High Fidelity
Mobile Wireframes
In addition to desktop wireframes, I also created some mobile browser wireframes to show the responsiveness of LumaPay and how it would look like on a mobile device. Afterwards, I created wireframes for a native mobile app version of LumaPay to show the difference between the responsive web app. With the native app I was able to add additional features that the desktop version does not have, such as a QR code scanning.
Pay or Request - Mobile Browser
Pay or Request - Native App
View Card Transactions - Native App
TEST
Usability Testing
With a prototype ready in hand, I moved on to usability testing. First, I started with drafting a detailed test plan. Having a test plan helped established the variables I will need to take into account for my user testing phase.
Goals
The goal of the study was to assess the learnability for new users interacting with LumaPay for the first time on desktop and to identify any areas that could be improved.
Test Objectives
Measure the learnability of the primary feature
Observe how users navigate LumaPay and how participants interact with it
Find answers to the following questions:
Can participants successfully find what they’re looking for?
How intuitive are the tasks for the participants?
Is the flow comfortable, user friendly, straightforward?
Is there any friction? What can be done to remedy the friction?
Methodology
Moderated in-person and moderated remote test
Tasks & Scenarios
Create a LumaPay account to get started and complete the onboarding
You are looking for convenient way to send and request money to and from friends. You recently got recommended LumaPay by one of your coworkers and want to try it out.
Send $10 to Jeff
Jeff, yourself and a couple of other friends organized a pizza party yesterday night to get away from the routine of the work week. Jeff paid for the pizza and you want to pay back your share of $10.
Request $15 from Jack
You and your friend, Jack, had lunch together at Olive Garden. You helped cover Jack’s meal and now you want to send a request to him for $15.
Select one of your credit cards and view its transactions
You have 3 credit cards added to your LumaPay account. You would like to look at transactions for one of your cards to see if all charges were correct.
Transfer funds from your LumaPay balance to your bank account
You have received payments from friends and now you would like to transfer some of those funds back to your bank account.
Affinity Mapping
With the usability testing completed and a plethora of notes, quotes, & observations - it was then time to analyze my findings. I organized my data into an affinity map using FigJam. Each participant was assigned a colored note and I wrote down any interesting observations, thoughts, quotes - for each participant & task. For each task, there were 4 different categories that I would group each note to. As a bonus, I also took notes on the participant’s thoughts about the landing page & main dashboard/homepage.
After analyzing my user testing results, I learned that most of my feedback were either positive or suggestions on what I can add to improve the app. The suggestions were primarily cosmetic, and not so much addressing any significant errors as all participants were ultimately able to complete tasks without any serious issues. Given that my participants did not experience major errors, I came up with some points of interest to make LumaPay more user friendly based on some of the user feedback I received from others.
Design Iterations
Issue 1: Participant didn't see option to select bank account from drop down menu when sending money
Severity: Medium
Suggested Change: Provide Users with Ability to Add Bank Account To Drop Down Menu
If the user does not have a balance and does not have an option to select from their bank account, then an error would certainly occur as they will not be able to pay any recipient. To make the app seem more realistic, I am
going to create an overlay that will pop up that will allow users to select a bank account. This reiteration, however, does not change the overall navigation/flow of the feature as the prototype already has a balance.
Evidence: On the prototype, for the ‘Pay’ feature, when user is prompted to select which account to send money from, the default is the $100 LumaPay balance. From there, user would just click ‘Submit’ to complete the task. However, Participant 4, brought up a hypothetical idea of allowing a user to select their bank account when sending funds since they will not always have a balance on their account.
Before
After
Issue 2: Participant was confused why bank account was not part of 'My Wallet' section of left-side navigation
Severity: Small
Suggested Change: Change ‘My Wallet’ to ‘My Cards’
Evidence: One participant made an observation when navigating the ‘Transfer Balance’ feature. When the participant is prompted to select which account to send funds to, the default is the Bank of America account. From there, user would just click Submit to complete the task. [Which all participants successfully completed]. However, where the friction occurred wasn't necessarily completing the task, but the technicalities behind the wording.
He looked at the ‘My Wallet’ section and didn't see the Bank of America account there. This is because the ‘My Wallet’ section primarily only has the user's cards to select & view their transactions. I believe changing the 'My Wallet' title to ‘My Cards’ will make it easier for users to differentiate cards from bank accounts.
Before
After
Issue 3: Lack of timestamps for transactions
Severity: Small
Suggested Change: Add time stamps to transactions
Evidence: During user testing, one participant pointed out how adding a timestamp to each transaction can help serve as another source of reference when a user browses their transactions either with a friend on the main dashboard or their
credit/debit cards from the 'My Cards' section. Similar to the previous reiterations, this change doesn't change the overall flow of viewing transactions, but will provide an extra set of details for users who click on it.
Side Navigation - 1st Iteration
27% of users preferred this screen
Side Navigation - 2nd Iteration
73% of users preferred this screen
Side Navigation - Final Iteration
Preference Testing
After having completed the usability testing & iterations I was ready to move onto the final step of preference testing. Preference testing helped provide me the chance of considering alternative pages to my prototype. I hosted my preference test on UsabilityHub and received responses from 41 total participants. I learned that it is a good idea to consider different variations to see if there is a better solution to the one already established. I selected three different screens from my prototype and asked users to select which option they liked better. The following 3 screens were selected:
Login Screen
The side navigation bar
The pay or request page
After the preference test, I moved forward with the screens that received the most votes. I then collaborated with other UX Designers to receive feedback on how I can further improve the screen I selected. After receiving feedback from others, I iterated a final screen for the final prototype.
Login Screen - 1st Iteration
41% of users preferred this screen
Login Screen - 2nd Iteration
59% of users preferred this screen
Login Screen - Final Iteration
Pay or Request - 1st Iteration
49% of users preferred this screen
Pay or Request - 2nd Iteration
51% of users preferred this screen
Pay or Request - Final Iteration
Final Design
Having gone through three levels of fidelity (wireframe sketches to clickable prototype in Figma), user testing, and iterating on my designs - I landed on a final version of LumaPay.
Design System
With the user testing finished, in this phase, I focused on the UI elements of my app. I established typography, imagery, iconography, color palette and finalized a final look of the app. Additionally, I established my app’s style guide and design language by creating a Design System. The Design System is what governs the design and user experience of a product across various platforms and devices. Creating a design language system allows my app to have a cohesive user experience - regardless of which platform the user is using
Logotype
The LumaPay logo is represented by two stars and “lumapay” in all lowercase letters. The “Luma” is short for luminous and what shines in the dark? Stars! The two stars represent the interaction and connection that the user creates with another user. With friendship being one of the themes of LumaPay, I wanted to represent it in a fun way that will attract the user’s attention. LumaPay’s logo also has two different type mark variations.
Color Palette
As someone who is a strong advocate for “less is more”, I wanted to apply this philosophy for LumaPay’s color palette by keeping it simple. Given that the “Luma” in LumaPay, is short for luminous, I selected color Han Purple, #5330E1, as the primary color. A bright while simultaneously calm color that easily pops and catches the user’s attention when contrasted against white. By keeping the colors simple, users can focus on the primary tasks without feeling too overwhelmed.
Typography
For LumaPay’s font, I decided to use Quicksand. A sans serif font that is simple, but fun style that matches the aesthetic of the app.
Component Library
The component library consists of all the styled designs/parts of LumaPay such as buttons, banners, and input fields. By using a component library, it allows me to standardize certain elements and keep them consistent throughout various pages. Additionally, a component library can also reduce the time developers duplicating code and can improve overall collaboration.
Accessibility
Accessibility was another important factor to consider when designing LumaPay. As a UX Designer, I need to be mindful that there will be different users who use my app. Some examples, would be users with visual or auditory impairments.
To accommodate users with visual impairments, I ran my colors through the WCAG contrast guidelines. I realized there were a few colors that did not pass the WCAG contrast guidelines and made adjustments based on the results.
Placeholder text for input fields were changed from Cinereous (#948080) to Davys Grey (#545960). The green and red dollar amounts on the homepage transaction feed also needed to adjusted. Emerald (#4BD37B) was changed to Forest Green (#078132) & Red (#FF0000) was changed to Rosso Corsa (#E00000).
Progressive Disclosure
When designing LumaPay I factored the two stages a user will experience when using its service. The first being signing up for an account and the second being an existing user.
First impressions matter and it starts with a smooth onboarding process. I wanted to capture and emulate what it is like to sign up for a LumaPay account as it is unrealistic for a first time user of LumaPay, (let alone any service) to jump into their account without actually creating one first.
When creating the onboarding process, I used the progressive disclosure technique, guiding the user page by page, step by step, so that the user doesn’t have a stressful experience. I kept in mind that users do not want to deal with a load of new things at once.
Similarly, another feature that I used progressive disclosure was the pay or request feature. Given the importance of ensuring users pay the correct recipients, I wanted to make the flow as simple as possible to avoid any accidental payments.
By disclosing things progressively, I am able to separate the information into chunks so users can advance in a way that is more comfortable and simple. With that being said, progressive disclosure helps prevent cognitive overload.
What I Learned
I learned that usability testing is a significant part in the design process. The experience really helped me grow as a designer by allowing me to gauge how user friendly my app is and how well my participants did in completing the tasks.
In addition, it was also great to learn about my participants’ thoughts and opinions about the app as their recommendations helped me figure out ways to improve LumaPay. It just goes to show how important feedback is to help with the growth of an app!
