Agent App

Research | Information Architecture | UX/UI Design

Background

The average real estate agent leads a hectic life - from following up with prospective leads to scheduling tours with current buyers, they are forced to juggle dozens of tasks while on the go. The more efficiently they are able to communicate with clients, the more houses they are able to sell. At Owners.com, our agents were managing their clients through an app that was wildly outdated. They struggled to find workarounds while dealing with issues such as inconsistent design language and irrelevant, outdated features. In fall of 2019, I worked with our Product team to redesign the Owners.com agent app from the ground up.

Research

After conducting a thorough audit of the current agent app, we began interviewing some of our real estate agents. We asked them to describe how they use the agent app on a daily basis, in order to learn more about their user journey and discover common pain points.

Information Architecture

We began by exploring different ways to structure information. Through the use of low-fidelity wireframes and more user interviews, we were able to create an organizational structure that was more streamlined and intuitive.

Inbox

We created a dedicated inbox, which allowed agents to message their clients in-app (essentially replacing "Requests")

Notifications

A new notifications tab gave agents a single location to view all their important alerts, rather than picking through a crowded home screen to find time-sensitive information.

Tasks

As we talked to the agents, we were surprised to find that they rarely visited the "Tasks" page. Instead, most of them just used their Google Calendar to view their schedule for that day. We decided it would be counterproductive to try to replace a tool that was already working well for our users. For this reason, we made "Tasks" a secondary page, and moved it deeper in the navigation, in order to leave room for more commonly used functionalities.

Profile

Although our agents displayed a clear understanding of the hamburger menu, we questioned whether it was the best solution, given its hard-to-reach location in the top corner of the screen. We decided that a total app teardown was the perfect time to get rid of the hamburger menu, and group all of the secondary pages under a new "Profile" tab.

Wireframing

After settling on the navigation and overall structure, we created our first full set of high-fidelity wireframes. These wireframes went through multiple iterations as we discussed how to tackle specific problems within the app. Two of the pages we focused on were the Client List Page (CLP) and the Client Details Page (CDP).

Client List Page

To communicate with clients, agents typically navigate through the CLP to the CDP (three clicks). In order to facilitate quick communication, we added a gestural swipe-to-contact feature on the CLP. All the agent has to do is swipe the client's name, and the "call", "text", or "email" options will appear. To avoid having a negative impact on usability, we ensured that the contact buttons were still available on the CDP (where the agents are used to finding them). While some agents may choose not to use the new swipe feature, all agents would be trained on how to use the new app, and would hopefully be motivated to use this shortcut.

Client Details Page

The CDP posed unique challenges, as it contains more information than any other screen in the app (the client's budget, financing information, search preferences, previously viewed and "favorited" properties, miscellaneous notes, and more). Agents visit this screen constantly, so it was imperative for us to reorganize these contents in a way that made it easier for agents to quickly find the information they were looking for. Our first iteration was essentially just a UI update. In our second iteration, the top half of the screen was reserved for often-referenced client details (such as budget, pre-approval status, and contact buttons), while the bottom half used a tabbed approach to display "Tasks", "Notes" and "Properties". The benefit to using the tabbed approach was that it drastically reduced the amount of scrolling necessary to view certain sections, such as "Notes" (previously located at the bottom of the page), while ensuring that the most crucial information would always remain visible at the top.

User Testing

After creating a clickable prototype from the wireframes, we put that prototype in front of five different agents in order to get their feedback. We had them perform basic tasks such as "add a tour" and "suggest a property", and narrate their thoughts aloud. Certain parts of the app, such as the CLP, CDP, and tour/task features, received primarily positive feedback. However, agents had issues finding the Inbox and Templates pages, now located under "Profile". One agent commented that he missed the hamburger menu, and that having that icon present would help alert him that there were secondary pages to explore. Other feedback included confusion over certain labels and CTA's, as well as suggestions for additional features. Before moving into high-fidelity designs, we worked to address these issues.

Designs

When creating the high-fidelity designs, I relied on the design system created for the website, which featured clean lines and a white & blue color palette. I worked to keep the design language consistent throughout the app, and establish a clear hierarchy of information on each page using colors, fonts, and spacing. In light of the fact that many of our users are older and less tech savvy, I tried to replace ambiguous icon with text wherever possible. Overall, my goal was to create a simple, clean UI that would allow busy agents to complete tasks as quickly as possible.