PlutoPay
Role: Project Lead, UX/UI Design, User Research, Usability Testing + Analysis, Creative Direction, Visual Direction
Client: CareerFoundry
PlutoPay is a hypothetical payment app that allows its users to shop, transfer, and save money without the hassle of managing or using multiple debit or credit cards.
Process
For this project, I utilized a User-Centered Design process to gather research through three phases. The discovery phase was used to perform competitor analysis, conducting user interviews. The second phase of concepting included developing user stories and process flows, building a sitemap, creating wireframes, and beginning the design of the product. The third and final stage, prototyping and user testing, was used to do just that, and review the overall iteration for approval.
The Problem Statement
Our users need a way to quickly and safely pay with a single payment platform because they are tired of using multiple different ones. We will know this to be true when we see how many spenders are using our app to manage their multi-platform transactions in a singular app.
Discovery
Competitive Analysis: PayPal
First, we wanted to get a sense of what type of products in the payment industry already existed and ascertain what they do and don’t do well. That information will help gauge what we do with our developing product. We focused on one of the bigger names in the payment industry, PayPal. They provide a product that offers a simple and secure way to manage and use money in a multitude of ways, whether it be shopping, paying someone, or even getting paid. Through our competitive analysis, we created a SWOT profile.
User Interviews + Research
The interview process consisted of interviewing participants with varying degrees of experience using payment apps. To develop questions for the interviews, research goals were established to keep our questions focused on what we wanted to know.
Research Goals
Identify and understand potential user needs, behaviors, motivations, and contexts in which users would use a secure payment app.
To understand the type of tasks users would like to perform within a payment app.
Documenting user pain points within existing payment apps on the market.
Gain an understanding of how users perceive saving money with deals and offers.
Research Analysis
After interviewing, we reviewed the sessions and organized the notes for each participant, looking at behaviors, their needs, frustrations, and things they may have said.
Here are some takeaways from those interviews:
Users want the payments to be easy, simple, and convenient.
Saving money is important in order to live a comfortable life.
The main use of payment apps is peer to peer use between friends and family.
Users want to feel secure when making payments through an app.
Concepting
In this phase, we began using the information found from our user interviews and created some personas to help us further understand our users. We also developed user journey maps that would predict how our personas would experience the product, as well as user flows of specific tasks the personas might want to complete in the app. Our target demographic is young and old adults, so we wanted to make sure our personas reflected that.
User Personas
Click images to enlarge and view details
Sitemap
The sitemap went through a few iterations based on a content audit of Cash App’s website. Also, an open card sort activity of six participants was also held to gain more insight into the organization of the sitemap.
Original Sitemap
Final Sitemap
Prototyping
Focus
After forming the information architecture into a sitemap, my next step was to begin development of some of PlutoPay’s important functions. Based on the research gathered from user interviews, persona creation, and task flows, I decided to focus and begin with three functions that would help users achieve their goals.
These functions are as follows:
Send and Request money from other users
Transfer an in-app balance to a bank account
Save money later by storing deals in a saved list
Low Fidelity Wireframes
Mid Fidelity Wireframes
User Testing Phase
Prototype Usability testing
I began recruiting participants for usability testing the main core features of the app, Cashing out to your bank account, sending someone money, and saving a deal from the deals page. The usability test also allowed me to ascertain any friction points or roadblocks that prevented or made completing the tasks difficult for the users. We tested six participants, remotely and in person, recording sessions for both with a setup in a streaming program, OBS. To screen record the mobile device, the program Reflector was used as well. The usability test provided many insights and some improvements/changes that could be made to this iteration of the prototype, but we needed to organize it.
Affinity Mapping
The next step after testing users was to organize and analyze the data we obtained. First, I reviewed the recorded sessions and wrote notes and quotes down for each participant. Then, I began to use affinity mapping with a digital sticky note tool to organize this data into 4 different categories: observation, positive quotes, negative quotes, and errors. To further organize the data, I took similar or repeated observations from each participant and combined them into one organized item, citing which participants expressed the same observation (example: P1,P2,etc.). This method allowed me to understand the observations and gauge what pain points may have come up as well as what was strong in the prototype.
Rainbow Spreadsheet
To further organize and analyze the data gathered, and to envision next steps and priorities, a rainbow sheet was made. Using the rainbow sheet painted a clearer picture of the affinity map. We were able to see the frequency of errors and observations, and ascertain if the severity of each one to engage in possible solutions and next steps.
Design Iterations
Based on the rainbow sheet findings, the participants found PlutoPay easy to use, and had a positive experience within the application. However, there were some issues that had to be considered and revised based on the frequency of observations made by the participants.
Issues
Participants took awhile to find their in-app cash balance
Location of the Saved Deals List was unclear
The ‘ABC’ option in the number pad of payment section served no purpose
Users could not determine if a recipient for payment or payment request was the correct person
Navigation was difficult because the icons are not universal
High Fidelity Wireframes
Visual Design Language
After making revisions to the mid fidelity prototype, we began working on the visual design language for the app, setting rules and guidelines to follow when designing PlutoPay’s interface.
Design for Accessibility
We realize that making the product as accessible as it can be to the visually or hearing impaired is important, which could also fall into our demographic of older adults, so these things were added to make it easier.
Design Collaboration
After making adjustments and developing the visual design, it was time to get feedback from fellow peers to collaborate and improve the product before a final handoff to developers. Collaboration with peers is very important to gather productive and constructive criticism and allow another perspective to see problems that I as the lead designer cannot or may not be able to catch or see. Below are some examples of feedback that I had received and my conclusions with justification for agreement and disagreement.
High Fidelity Prototype
The product is far from being finished!
However, with iterative design, we will be able to improve upon the current version, making a better experience for our users and enabling the power to manage and save their money in a smooth, secure, and easy way.
