top of page
CHRISTINA YAU
Basil
AN EASIER WAY TO PAY AND BE PAID
A payment app that can transfer money instantly with no fees and easily split payments among friends.
The goal was to design a payment app that allowed for quick payment and social connection in an organic way.
Overview
Users usually use payment apps to split the bill. However, it is hard to keep track of who pays you back, especially when users request money from multiple people. Basil allows the user to create groups to help split the bill and keep track of whether the bill has been paid by every group member.
Users also do not like payment apps charging a fee for instant transfers. It bothers them that it takes 1-3 business days before processing money transfers. Sometimes, users can't afford to wait that long for their money to transfer due to financial reasons.
This case study walks through the design process of designing Basil, a mobile payment app, and the design decisions that I made through it. This is a personal project created as a User Experience Design student at CareerFoundry.
-
Tools: Adobe XD, Balsamiq, Usability Hub, Optimal Card Sort
-
Project Duration: ~8 months
-
Role: Sole Designer
Addressing Painpoints
The following pain points are from user interviews and personal experience using payment apps:
-
It is hard for users keep track of the people who pay them back.
-
Users either need to individually request money from people in their payment app or send an additional communication to ask people to pay them back.
-
Some users do not like paying a fee to instantly transfer funds from their balance to the bank.
The Design Process
Empathized with users' experiences of payment apps through research.
Competitive Analysis
User Interviews
User Personas
User Journey Map
User Flow
Empathized with users' experiences of payment apps through research.
Site Map/Card Sort
Wireframes
Empathized with users' experiences of payment apps through research.
Prototypes
Usability Testing
User Interface
Research
Competitive Analysis
First, I conducted a competitive analysis of top payment apps, We Chat Pay and Apple Pay, to generally understand who my competitors were and the quality level of their existing products. However, if I could do a competitive analysis again, I would conduct the analysis after conducting user interviews and creating user personas.
-
Why conduct a competitive analysis after conducting user interviews and creating user personas?
I would have better insights to help me know what I specifically want to analyze among other applications with my target audience in mind. I would analyze PayPal and Apple Pay to specifically find out how easy it is for users to split payments and transfer funds instantly.
-
Why choose to analyze PayPal instead of WeChat Pay?
PayPal is a global payment application; whereas, WeChat Pay is tailored to a specific ethnic group. Given that my payment application is meant to be used globally and one of my user personas lives in Mexico City, Mexico, it makes more sense to analyze PayPal instead of WeChat Pay.
Research
User Interviews
I interviewed three participants to see how Basil could better meet user goals and needs and address the problems they experience with payment apps.
User interview with a participant
Conducting user interviews was one of my favorite parts of this process! I enjoyed interviewing and interacting with participants. (I guess research🔍 is in my blood being a Psychology major and all 💁🏻♀️)
Some key findings from my user interviews were:
-
Users liked the convenience and speed of using payment apps when they were out with friends and needed to split the bill.
-
Users did not like paying fees to instantly transfer money.
-
Users liked the simplicity and convenience of using a payment app in comparison to paying with cash.
Interview manuscripts with personal notes and highlighted patterns
User Personas
My main target audience was Millennials and Generation Z users because they most likely had some income, used payment apps regularly in their social circles, and used payment apps as their main payment method compared to older generations.
Claudia, the Millenial who uses her payment app mainly to split the bill with friends
when they go out to restaurants and bars
Bailey, the Generation Z College Student who wants instant transactions and social connection with their friends
User Flow
To better visualize the navigation process and understand the user, I created user flows based on the three goals the user persona would want to accomplish. This was an eye-opening process as to what users' experience would be like using a payment app and taught me that a user process is not as easy and simple as I had assumed, but takes a lot of thought and consideration of possible scenarios the user might experience.
This is a user flow of how Claudia might send money to her friend after her friend paid the bill
This is a user flow of how Bailey might send money to her friend and post her activity on her newsfeed
Analyze
Site Map & Card Sort
I created site maps to organize the hierarchy of the application screens.
Then, I created a card sort test using the screen labels with OptimalSort and recruited 5 participants to participate.
However, OptimalSort was not as adept in identifying overlapping categories like I had hoped.
For instance, some categories participants created were essentially the same except for slight wording or capitalization differences. So, I did an impromptu manual card sort by writing down how people sorted and categorized the labels to make changes to the site map to ensure user-centered design to the application.
Using the data from the manual card sort, I changed the various labels to better match users' mental model when categorizing app features.
Original site map
Video: Card sort test results on Usability Hub
Updated site map after applying card sort test results
Low-Fidelity Wireframes
Wireframe sketches
Mid-Fidelity Wireframes
Mid-Fidelity wireframes (Balsamiq)
Analyze
Design & Test
Design & Test
Mid-Fidelity Prototype
High-Fidelity prototype (Adobe XD)
Usability Testing
I tested my mid-fidelity prototype by developing a test plan and script. After receiving some feedback, I revised my test objectives to be more specific so I could better evaluate how well the application design helped the user accomplish their goals.
Usability test plan and script
Then, I conducted remote moderated usability tests with 6 participants using Zoom to facilitate and record the testing sessions.
Participant sharing their thoughts as they're using Basil during the test session
Top Issues:
-
Unsure about what "Group Pay" is
-
Did not know what function the "Newsfeed" icon symbolized
-
Did not know it was a payment application from the application screen
-
Clicked the "back" button instead of "x" when wanting to go back to the homepage
-
Felt confused and wondered if the logo was a drop-down arrow
Top Problem:
Users were uncertain about what "Group Pay" was and what they should use it for. When users tried to make group requests, they would select "Send/Request Money" instead because they were used to requesting money individually rather than as a group.
Through testing, I realized I had wrongly assumed users would know what "Group Pay" was by the name. I considered including more onboarding to introduce the function or changing the name of the feature but instead decided to just simplify the two main features on the homepage to "Send" and "Request". The "Request" feature would incorporate the functionality of "Group Pay" by providing the option of requesting money to multiple people without introducing a new feature name.
The result was that it made my application more intuitive and easy for users to use.
Before
After
Updated Basil Homepage after addressing some of the top issues found from user testing:
1) Simplified the two main feature buttons to "Send Money" and "Request Money"
2) Updated "Newsfeed" icon to a globe icon to symbolize staying connected with other Basil users
3) Removed the original Basil logo and name from the homepage.
UI Integration
Next, I started focusing on the UI of Basil.
I conducted two preference tests from 10 participants using Usability Hub.
I tested the launch screen and login page of Basil to test which user interface participants preferred more and why.
The participants preferred the warm colored background photo on the launch screen because it looked warm and inviting.
They also preferred having less screens to click through to log in to the app.
I also created a design pattern library as I designed my mobile screens and components to make sure my designs were consistent throughout the app. It was an eye-opening experience as I realized just how many components were needed to design an app!
I conducted iterations of the overall UI design based on peer and mentor feedback. This was the most challenging part for me-to get out of my fixed mindset of the original design and find new ways to redesign the app for a better user experience. However, through this process, I learned how to design the interface in a more simple and clean manner.
UI Evolution (Launch Screen)
Updated logo and branding process (left to right)
UI Evolution (Homepage)
.png)
Updated homepage design process (left to right)
Future Steps
Overall, this project was eye-opening in terms of determining what went well with users.
If given more time, I would consider accessible design particularly for those who are color-blind, adjusting the UI, and continue iterating to streamline the payment process more.
bottom of page