Mobile Optimizing SingleKey's Index Pages
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
SingleKey's index page tables were not optimized for mobile. The mobile platform was using the same format as desktop, causing users to have to scroll horizontally through the table to view all the columns of information. It was very easy for users to lose track of the row they were currently viewing and wanted to see more information about and/or perform an action for that row of data.
My role
I worked alongside another designer, Melissa O. to find a painless and elegant way to present the index tables and improve user's mobile experience on the index pages.
Project Goals
🌟 To improve the mobile experience of the index pages
🌟 To make it easy for the user's eye to find and perform an action on a specific Tenant Report/Rent Collection/Rent Guarantee on the mobile index page
Process
In the first round of design, I laid out all my ideas on the table and experimented with a multitude of different cards. I created some expandable cards, some non expandable cards, some with the actions in the top header, some at the bottom of the card, and horizontal rows vs. vertically stacked rows within the cards. These were my findings:
These were my findings:
Although expandable cards are ideal for reducing page height, they might not be ideal solution because of the importance of all the different data points in the card. We foresaw property managers with a ton of reports anyway expanding the cards. Expandable cards would also add some functional and visual complexity. Pressing on a card would have to open the product (i.e John Doe's tenant report) so we would require adding a dropdown button to expand the card (as opposed to open the product), taking away important space from where the tenant's name would go.
How can I present the information on the cards so they always stay in the same place, making it easy for the user to find - while simultaneously being cognizant of the vertical height and not making the page too long?
Horizontally aligning the data (ie. Property and 123 Main Street) was the ideal solution to minimizing vertical height while dividing up the data points in a clean and easy-to-scan way
We also experimented with where to put the 'Rent Guarantee Pre-Approved' message on the cards and what would make the most sense, seeing as how it is not the most key piece of information on the card, but is also a revenue driver for the company.
I then explored different ways of stacking the index cards on a mobile page, keeping in mind vertical height and the limited space we had to work with.
The solution we were comfortable with was stacking the cards directly on the page separately from the search and filter, with rounded 12px borders and 16px padding in between, then placing the filters into a slide out drawer to minimize height.
After multiple feedback sessions and iterations, we landed on a style that we were comfortable with. The design was a functional and compact mobile optimization of the index. I added the statuses to our UI kit for the development team to begin implementing.
Rent Collection Transactions Optimizations
The next task at hand was to optimize the rent transaction transactions for mobile. I experimented with a couple ways to display them - by keeping the dropdown experience or by showing the transactions within a pop-up modal. We also explored different layouts for the transaction cards.
Final design
All of the index pages mobile cards were adaptable to this design. In the header, the status, tenant name, and email - and in the second section of the card, the supplementary information of the product. I created all those variations for the UI kit. See the final result applied to all the index pages below: