Property Management Owner's Portal

Description

Some rental property owners hire companies to manage their properties. Even though the owners have hired a company to find and secure tenants and manage repairs, they are often able to access and view income, expenses, and documents about their rentals, however accessing the information is not very user friendly.

Since I've been using a property management company for my rental home for the past 6 years I've come across many issues with their current system. I get frustrated trying to switch between viewing maintenance work orders and its associated bills, getting useful information from inspection reports, and needing to speak with the property management team for other information that should easily be accessible to me. Therefore, I decided to make an unsolicited redesign of their owner's portal and then develop the project.

Solution

My list of the current design's problems:

The opening page after logging in doesn't show important or useful information.
The user must change the date range to view the monthly statements.
Some navigational links are rarely used or poorly named.
Some information is only accessible by downloading and opening a PDF document.
Some tables show more information than necessary for a property owner.
Bills and work orders are not linked across pages.
Table data cannot be reordered.
There is no visual representation of data.

I did some competitive analysis between PropertyWare, the software my property management company uses, and other property management software companies (Buildium, Total Management, AppFolio Property Manager, Rent Post, and 123Landlord). All of these software programs were designed for the landlord rather than the owner or tenant. I found that not all of the these even have an online portal for owners and those that do generally lack raw data and customization.

User Personas

Design

When an owner logs in to his portal he should be able to see items needing his attention plus a snapshot of other useful information. If a work order has been requested, the owner will see this work order request on the opening page so that he can approve or reject it without having to navigate through the system. He should also be able to download his monthly statement and view the recent income and expenses regarding his properties.

Opening Page Wireframe Progression

Usability Research and Testing

After designing new pages and features I ran usability tests. I found that on the opening page, users preferred to see the pending work order in a larger box than the other information. Users also didn't seem to understand the different between Maintenance Work Orders and Bills. I tested some different graphs.

User Testing Methods

1 Five Second
3 Click
3 Preference
4 Navigation Flow
1 Question
3 Remote User
2 One-on-One
1 Remote Peek

Usability Testing

I created a remote user test with 10 tasks and tested it with 3 users. These 3 tests ran from 14 to 19 minutes in length. Since my previous tests showed that users didn't understand the difference between work orders and bills I asked my new testers, in Task 5, to explain the difference. These testers were able to understand the difference since they had spent a few minutes already exploring other parts of the owner's portal. One of my testers noticed that some of my sections didn't specify property location so I added that during this testing phase.

Remote User Testing

Remote User Test #1 Clip of Task #4

Remote User Test #2 Clip of Task #7

Remote User Test #3 Clip of Task #9

View the design in a clickable prototype:

mobile (InVision)

desktop (Marvel)

Front End Development

After getting my initial design determined I began development of the project. I ran a few more tests during this process and even made some design changes based on features that I was able to develop. One tester told me that the transactions page was hard to read and suggested I change the color of item costs. I also realized that I needed to display more information regarding the current lease rather than looking through the lease document.

Usability Testing on developed project

Peek Test

Conclusion

After using my property management company's current owner portal for several years I had a good understanding of the features that are useful, what was frustrating, and what would be good to see. I spent a lot of time designing the pages and had some doubts at how easily I would be able to develop the pages with data and graphs. I was surprised to find a JavaScript library, CanvasJS, that easily created graphs, although I had difficulty pushing my data into the graphs. I created this portal for an owner that only has one property and to accommodate multiple properties I would probably change a few of the pages and the scripts. Based on time constraints for this project while a Bloc student, I designed, researched, tested, and developed the experience for an owner. A total software redesign and overhaul would really improve the user experience.

Developed project screenshots

Use the App