Apartment search listings dashbaord redesign
Background
Sonos is a wireless home sound system connected through WiFi or bluetooth that fills your home with brilliant sound, room by room. It is controlled by a mobile application with customization of music by room, sound controls, and settings.
specs
Background
SparkAPT helps brokers and real estate agents search for and send apartment listings to prospective renters. Spark has cut the clutter of the searching process for agents, removing many filters and extra “fluff” so that agents can focus on the task at hand, finding their clients their next home more quickly and efficiently.
Specs
Duration: 4 week design sprint November 2021-December 2021
Team: 4 UX designers
My main roles: Contributed throughout the entire design process, but emphasis on sketches and wireframes
Tools used: Figma, Figjam, Miro
Current SparkAPT Website
The current SparkAPT website was built without any UX input. The goal was to redesign the apartment search listings dashboard with user-research backed design recommendations so that listing agents can quickly, efficiently, and accurately send apartment lists to renters.
To create visual cohesion of the interface and streamline existing methods of property searching and generating and sending reports, so users can accomplish these tasks in less than 20 seconds. Then, as more property communities integrate with SparkAPT, we will see data updated in real-time, resulting in more accurate information about available listings. This will lead to an increase in use by several hundred new users in numerous markets, including Austin and Chicago.
Objective
Design solution
The Final Prototype
Log in and onboarding
Once you log in (or create an account), you will be taken through an onboarding process to explain the new features. This is new, as SparkAPT had no onboarding process. One main new feature is highlighted where once you add in a client's preferences, you can pull up that client on the dashboard and their preferences will automatically pre-load and filter apartments for you.
Adding a new client
A feature we added is the ability to sort by column on your client list, for example if you want to arrange by your list by follow up date to see who you should follow up with next you may now do so in the new design. We made adding a client quick and easy - you can add your client's preferences right when you create their profile which shows up in the dropdown accordion on the patient list.
Map Functions
Instead of filtering neighborhoods to search for apartments, you can search for apartments with the map tool. You can still draw boundaries on the map like you could on SparkAPT however we increased the size and visibility of the icons and reset functions. We also added a feature to be able to filter by radius from a point on the map.
Search and send properties
We simplified the filter section to the most important and commonly used filters with the added dropdown to load a client's preferences. We kept SparkAPT's list view mode of viewing listings, but also added a more visual card view with the ability to view more details about each property. We combined the map view and listing view on the same page so that the listing agent's do not need to go back and forth between pages to compare. With the current SparkAPT site, there is no preview or customization for apartment list reports before being sent to the client. We have added the client preferences, which properties are being sent, the option to send via text or email (with option to CC or BCC) and a pre-loaded message with the option to customize it.
The Design Process
User Research
Heuristics
We first needed to evaluate to what level the current SparkAPT interface abided to best practices set by the Nielsen Norman Group. We completed a site heuristic evaluation, noting what was done well and made suggestions for improvement. By completing this analysis, we were able to uncover potential blockers that users may encounter when trying to complete their tasks. Our suggestions would prove valuable when it came time to redesigning the interface, as we were able to validate some of our suggestions by user research.
Contexual Inquiry
After conducting our own evaluation of the site, we needed to understand how current users use SparkAPT, uncovering what features were necessary, missing, or confusing. We completed four contextual inquiries with Spark users, and found trends around pain points including confusing icons, frustrating experiences using the map, and which filters were necessary. By completing a contextual inquiry, we were able to craft specific user interview questions around common pain points.
User Interviews
We interviewed 5 real estate agents and brokers and were able to pull common insights and trends:
Feature Analysis
After talking to users about their experience with SparkAPT and other real estate platforms, we needed to understand the industry and how SparkAPT compares. We created a feature analysis chart which identified Apartment Data, Rental Beast and Smart Apartment Data as three direct competitors because they offer similar services to licensing agents. We also identified APTamigo and Street Easy as two indirect competitors because they offer similar services but the information can be accessed by anyone instead of solely licensing agents. In comparison, SparkAPT is going in the right direction by offering mostly all features competitors are offering on their platforms.
Competitive Analysis
Many users mentioned that Apartments.com had a concise filtering system. We used their interface as inspiration in our sketches and designs in order to alleviate filters crowding the page.
Comparative Analysis
Many users also mentioned that SparkAPT should model Zillow because they believed it has one of the top user experiences compared to other platforms. We pulled inspiration from Zillow's clean, yet visually appealing interface.
Persona
After synthesizing all of our research, we were able to personify our users as Jessie Miller.
Journey Map
Jessie has a new client that would like help finding a luxury apartment in downtown Austin. He has to quickly send a list of apartments personalized for his client. To get an idea of Jessie’s journey when using SparkAPT currently for locating, we can see the pain points occurs when trying to search using unclear filters, CTA buttons and icons. We can also see that he has difficulty locating the map draw icon to search within a boundary. He is also frustrated by the amount of time he has to spend cross-referencing other sites to make sure data is correct.
What we learned:
What we learned is that time is money. If brokers and real estate agents are spending the majority of their time fact checking listings, they can’t utilize their time acquiring new leads or scheduling tours. Additionally, success comes in the form of commissions and referrals from satisfied clients. We realized that users are so used to quality issues with the searching process. As soon as they find a method that works for them, they stick to it - therefore there’s an opportunity to gain user loyalty.
Ideation & Design
User Flows
1. Log in / sign up
The first step in the design phase was creating our user flows, while most user flows remained the same, we added certain points in the user journey to help the overall user experience. For example, after our user goes through the normal steps of signing up, we added a confirmation screen so that they are aware that their information has been submitted and will be reviewed.
2. Onboarding
After our user has received confirmation and has logged in, they will then be greeted with an onboarding experience. This was a necessary step in the users journey, so that we may introduce all newcomers to the site to all of the exciting features that SparkAPT has to offer.
3. Add a New Client: Preferences + Amenities
In our next flow, our user can not only add a client but we gave them the ability to pick specific preferences and provided additional amenities as well.
4. Search Listings for Client
After our user has added their new client, they then have the ability to search the SparkAPT website through the client with their specific preferences already preloaded. They also have the ability to change those preferences mid search, should they choose to.
5. Send Report to Client
Once our user has selected the properties that they feel are best suited for their client they can then send their report. In this flow, we gave our user the ability to send this list via text or email. They can write a personalized message, and if they send by email, they now have the ability to CC or BCC someone else as well.
Sketches
We were able to start sketching solutions after laying down the framework with the user flows.
Style Guide
We then took on the task of creating a style guide. This style guide will improve communication to the user by ensuring consistency across the SparkAPT website.
Usability Testing & Iterations
Phase 1
We performed 2 rounds of moderated usability testing to validate our designs but to also uncover pain-points or confusions to further iterate on.
Participants:
3 Real Estate Agents located in Austin
Tasks:
Sign Up, Sign In, Complete Onboarding, Add New Client, Search Results by Client + Generate Report
Success Metrics:
Less than 20 seconds to complete each task. 1 error or less per task
Results Round 1
The results found on the table gave us an idea of what all we need to iterate on for round 2 of testing.
Iterations Round 1
Users were confused by “Map View” vs. “List View.” We rephrased our task for the second round of testing, changed the name to “Card View” vs “List View” and moved the toggle on top of the cards.
This decreased the time to completion from 28 seconds to 1 second.
Users also had a difficult time collapsing the dropdown menu once they selected amenity options. We made the hit area larger on the “X” and prototyped the option to return by clicking off the overlay, or clicking the dropdown menu arrow.
This decreased time to completion from 66 seconds to 39 seconds.
Users also had a difficult time collapsing the dropdown menu once they selected amenity options. We made the hit area larger on the “X” and prototyped the option to return by clicking off the overlay, or clicking the dropdown menu arrow.
Phase 2
Participants:
3 Real Estate Agents located in Austin and Chicago
Tasks:
Sign Up, Sign In, Complete Onboarding, Add New Client, Search Results by Client + Generate Report, Draw boundary on map and filter radius on map
Success Metrics:
Less than 20 seconds to complete each task. 1 error or less per task
Results Round 2
The results found on the table gave us an idea of what all we need to iterate on further.
Iterations Round 2
During onboarding, users would read about the new feature in which they can choose a client with the client drop down menu, which pre-loads filter preferences for that client, and updates the apartment list. However once it came time for that task, they could not quickly locate the client drop down menu, or had forgotten about that feature and tried to manually input the clients filters again. We moved the client dropdown to the left so that it’s the first filter the users will see. We also increased visibility during onboarding with an arrow and highlight box. We’re hoping that in the next round of testing, the users will easily locate and use this new feature, which drastically cuts down on time.
The users also found that the icons were not as intuitive for drawing boundaries on the map and for filtering apartments by radius. This was an easy fix where we added label signifiers clear up any ambiguity.
Next steps
We already started designing a responsive mobile version. Next steps would be to continue to build out that prototype as well as a tablet responsive version of the SparkAPT website. We would then continue the design process by conducting usability testing on the responsive designs to further iterate based on the users.
Client Report
Consider evaluating and re-designing the client report based off of user-centered research from both agents and renters. The success of effective UX implementation can be measured by monitoring appointment-set-rate from the list sent to clients.
Consider going through the UX process to re-design the landing page of sparkapt.com. The success of effective UX implementation can be measured by rate of new agents signed up per month.
Landing Page