Rent Collection Invite Flow
About SingleKey
SingleKey is a risk-management software aiming to give property managers and small landlords the tools and expertise to find the right tenants and mitigate risks in the rental market. They do this through their three primary products, a Tenant Report (a credit & background check in one), Rent Collection (automated & reported rent payments), and Rent Guarantee (renter’s insurance).
Project Summary
When SingleKey's new app look launched in early 2024, the existing Rent Collection invite flow was still using the old app’s appearance. I worked on a solution to seamless integrate the existing quick and easy flow with the app's updated UI, with a strong focus on the setting up a bank account manually. I participated in multiple review and feedback sessions with designer Melissa O., and the SingleKey CEO & head of the product team.
Process
Round 1: Defining the flow
I started by defining the existing flow to understand the project scope. These were the user's steps within the flow:
Landlords initiate a Rent Collection (automated rent payments) in their account. The landlord invites the tenant to complete their banking information so the rent can we withdrawn from their account each month.
The tenant receives an invite email
From the email, tenants are taken to the Rent Collection invite. The first step is to confirm the displayed rental details
Tenants can set up a payment account via
a) linking their account through VoPay, or
b) entering their account details manually
If entering account details manually, the tenant will receive a micro-deposit in their account, and must confirm the amount they received to proceed.
This is so that we can confirm that the right account details were entered before charging the account
Tenants see a thank you/confirmation page
Looking at the existing flow, I noticed a few problems in the user experience:
Micro-deposit is confusing
On the initial page, the third micro-deposit card is confusing for users who choose to link their account via VoPay, because it only applies to tenants who enter account information manually. It also takes up a reasonable amount of real estate on the page and could instead be more compact if it was dynamic.
Content moves on the page unnecessarily
The FAQ section initially appears at the bottom but then shifts up to the 3 column section above once a payment setup method is selected. When linking manually, the ‘Set up payment account’ heading and description fully disappear and are replaced with the micro-deposit, which was initially the third card. The unnecessary movement of elements on the page is confusing to the user experience.
No back buttons
If a tenant selected 'Manually enter account information', then changed their mind and wanted to link their bank account via VoPay instead, they would have to rely on the browser’s back buttons.
Disabled continue button
A better approach would be to enable the button and display an error state if necessary actions aren’t completed. This clarity helps users understand why they can’t proceed to the next step. This is something we consistently do within the app.
Round 1
I came up with a multi-step flow with a progress tracker at the top of the page, so that flow was more clear and less information overloading. I also introduced some actions buttons that gave users more freedom to alter their selections when setting up an account:
a back button on both the 'Connect via online banking' and 'Enter account details manually' modals, so users could switch their account set up selection
'Change account details' and 'Connect via bank instead' buttons on the micro-deposit confirmation, if the tenant believes they entered the wrong account information or changed their mind and wanted to switch to connecting via VoPay instead
View the design and prototype below:
Round 2: Reducing number of clicks
The feedback I got from the team was to think of a way to simplify the flow and reduce the number of clicks to get to the thank you page.
V1: I combined the two steps (Review details, and set up payment account) back on to a single page. I also moved the 'Connect via online banking (recommended' and 'Enter account details manually' selection buttons directly on the page, as opposed to within a modal triggered by clicking on 'Add bank account'.
View the design and prototype below:
V2: I also tried eliminating the introduction page, since users already got informed about the Rent Collection in the invite email. I placed the introduction banner and the two steps all into one page instead.
This is also when I worked on refining the functionality of the micro-deposit confirmation. I thought about how it could take up to 20 minutes to appear in the tenant's bank account, and noticed two key issues in the first flow I worked on:
The micro-deposit confirmation was housed within a modal, preventing us from returning users to that modal if they left the page or accidentally closed it while waiting for the deposit. We needed a solution where the confirmation could live directly on the page
We also wanted to allow users who were experiencing a longer delay in receiving the micro-deposit to switch to linking their account via VoPay if they grew inpatient
As a solution, I added in a dynamic micro-deposit confirmation section that would replace the account set up options if the bank account was set up manually.
View the design and prototype below:
Highlighting the 'Connect via online banking' method
Next, I refined how we could highlight the 'Connect via online banking' selection. The initial card just had the text '(recommended)' in it, but we wanted to really drive more users opting for that set up method, since it was much quicker as it did not require a micro-deposit confirmation.
I added a subheading above the card, put a blue border around it, and added the Plaid and Flinks logos on it to call out the security of this option. This was inspired by the styling we used for the price cards on the Tenant Report page.
This was the final functionality of setting up an account:
These were the final error states I worked on for an incorrect micro-deposit amount:
If the incorrect amount was input, the user would get 2 more attempts, and the ability to change the bank account information in case of a mistake made in their account details. After 3 attempts or bank account changes, the user would be redirected to an error page for security reasons.
Final result
View the final result on mobile and desktop below: