Disclaimer: I am not affiliated with Square. I am here to explore the design process of adding a new feature.
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 to each other.
I will be walking you through my design process for a recurring payments feature. This new feature would allow users to set up multiple automatic recurring payment streams to other users.
Daniel is a very busy guy working at an early stage startup.
Location: New York
Marital Status: Single
Works 70+ hours a week
Always forgets to pay his rent
Often forgets to pay his roommates the cable bill
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
Mindy has a family with two kids and she works full time. She also owns multiple properties that she rents out to tenants.
Location: New York
Occupation: Accountant and Landord
Marital Status: Married
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
Solving Needs: Design Stories
Before I jump into designing the feature, I need to write some Design Stories to think about what features I need to design.
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, I also need to consider all the possible things that could go wrong in the process (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.
There were not any major issues and people easily navigated through the feature. I proceded 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.
You can also view this post on Medium!