Square Cash is the newest addition to Square’s family of products. It is a super simple but effective app that allows users to send one time cash payments.
I will be walking you through my design process for a recurring payments feature. This new feature would allow users to set up automatic recurring payments to other users.
Personas
The purpose of the persona is to help me visualize who the ideal user is and to think about how I can solve their needs and goals.
Meet Daniel
Daniel is a very busy guy working at an early stage startup.
Facts
Age: 28
Location: New York
Income: $90k+
Occupation: Engineer
Marital Status: Single
Behaviors
Works 70+ hours a week
Always forgets to pay his rent
Often forgets to pay his roommates the cable bill
Has an app for everything
Needs & Goals
Remember to pay his landlord every month
Remember to pay his roommates for the Internet/Cable bills
Not worry about missing payments
Doesn’t want to go out of his way to pay his bills
Meet Mindy
Mindy has a family with two kids and she works full time. She also owns multiple properties that she rents out to tenants.
Facts
Age: 35
Location: New York
Income: $80k+
Occupation: Accountant and Landord
Behaviors
Works 50+ hours a week
Manages multiple rental properties
Always busy with her two kids
Needs & Goals
Wants to know whenever her tenants deposit rent into her account
Wants to not worry about reminding her tenants to pay rent
How can Daniel not spend his time worrying about missing payments to his landlord and roommates? How can Mindy not worry about keeping track of if her tenants paid rent or not? There’s an app for that: Square Cash- Recurring Payments.
Solving Needs: Design Stories
Before I jump into designing the feature, I need to write some Design Stories. Design stories are crucial because it helps me think through and define all the use cases for my feature.
Design stories are broken out into two parts: Epics, which are the high level fuctions, and Main Flows, which are the common ways a user would navigate through that function.
Aside from designing through the main flow, it is also my responsibility to consider all the possible things that could go wrong in the process. These are called Edge and Corner Cases.
Example of an edge case: Since this feature is making automatic payments, the biggest issue the sender could encounter is if their bank account had insufficient funds. To prevent this, multiple emails/notifications are sent to them prior to the scheduled payment date. In the email/notification, it would also alert the sender if they did not have enough money in their bank accounts. These alerts are designed to prevent over-withdrawal charges from their banks.
In the next section, I will focus on solving one of these needs: The user can set up a new recurring cash payment.
Designing the product: Task Flows
Drafting a task flow will be the first thing I do before I start building my product. This will help me think about how a user would go through the feature.
Summary: The user starts off by entering a security password which will lead them to the home screen. The user can set up a new payment stream and input relevant information such as the frequency and amount of the payment. The user then adds a description for the payment and sends it to the recipient’s email.
While I was creating this task flow, my biggest concern was fitting the feature into the app without drastically changing the current flow. Creating this task flow helped me plan out an efficient system and gave me a better idea of the screens I need to design.
Visualizing the Flow: Wireframes and Prototyping
The next step is to visualize the task flow I mapped out. I created a low fidelity wireframe and ran a few usability tests on the new feature to see if people had trouble going through the flow. It is ideal to test your app on lower fidelity screens because this will make the user focus on the functionality rather than aesthetics.
When testing the feature, there were not any major issues and people easily navigated through the feature. Now its time to create a higher fidelity prototype.
You can click through the prototype or watch the demo of the final feature below.
Next Steps: Work with the engineers on my team to create a functional front-end prototype, test it with users, then iterate until it’s shippable.
I am not affiliated with Square. I am here to explore the design process of adding a new feature. I am currently shipping UX projects under Laura Klein & Kate Rutter @Tradecraft in San Francisco and I will be sourcing new opportunities at the end of June.
