A mobile search experience
Aiding in the search portion of a consumer's home buying or selling journey, the native apps connect consumer users to a brand's home inventory, companies, and agents. In the apps consumer users can search for homes by location, view up to date home details, contact agents, and sync with their web accounts.
A major product goal of the native apps was Agent and Company branding within the Brand app. Manifesting as conditional UI, these branding elements are triggered by users through search and a larger referral experience. Instead of building separate apps for Agents, Companies, and Brands the native apps offer four different brand experiences with one application.
Learn more about the relationship between the Agents, Companies, Brands, and Consumers by click here.
The mobile referral experience
Creating a tailored user experience based on who referred you to the native app was an interesting challenge. An integral part of the consumer user experience, the native apps needed to accommodate multiple referral traffic use cases. Did a consumer find the app organically through an app store or did they find it through a companies mobile website? How does the user experience of the app change based on these conditions?
How the referral works
To successfully activate the referral experience a consumer user must first click on a referral link which is embedded as dropdown banners and widgets on a brand, company, and agent's mobile website. After clicking on one of these links, a user is redirected to the App Store or the Google Play Store to download the app.
Once downloaded, the app will launch with referral logic and UI elements that are specific to that Brand, Company, or Agent app experience. These slight differences in each app experience are unified by the overall app design, creating a cohesive product experience regardless of how the app was downloaded.
Displaying company and agent branding
Part of the product value proposition, Agent and Company branding manifests as conditional UI elements based on the area a user searches in. The branded search experience is also dependent on the referral experience, and how a user downloaded the app.
Importance of the referral experience
Besides being used to brand Companies, Agents, and the Brands the referral experience plays a critical role in lead (consumer) allocation for Companies and Agents. On the Agent level, if a lead (consumer) downloads the app from an agent's website and searches in an area serviced by that agent on the app, the lead will be assigned to that Agent. This prioritizes agents from the same company over each other based on where a user came from. Companies are allocated leads in a similar way.
The entire referral experience is an integral part of gaining business for Companies and Agents, and connects consumers across the website native app platforms.
Acessing key features
Serving the consumer user, the app hones in on the search part of a home buyers journey. To aid in this type of home search we prioritized certain user tasks of the website and translated those functionalities to the native apps. These core tasks for a home buyer break down into roughly three main feature groups: searching, saving homes, and contacting agents.
Problems of the map search experience
Vital to the search experience we were concerned when we received a multitude of feedback that users had trouble searching for homes on our map view. We kept seeing comments like:
"The map doesn't work & homes aren't showing up."
"I'm searching in an area on the map but I don't see any results."
" The map isn't displaying homes :("
From our perspective we couldn't figure out why. The code was correct based on the parameters we had set for the app. Reaching out to some of these users we found that although the app was functioning properly, the search parameters we had built didn't make sense to them. Probing further we learned that while on the map view users expected search to behave in two basic ways.
User expectations on map search
1. Panning around a map would let you see homes (search results.)
2. When you entered a manual search, the map would center around that location. Then panning around that area would still produce homes (search results.)
After hearing this we realized we weren't providing the visual feedback users needed to understand how our map search worked. In the case of #2 when a user manually enters a search they are actually generating a search within a specific area defined by an invisible polygon. So if a user panned outside of this invisible polygon they wouldn't see any results, because they technically weren't searching in the area they entered.
A two phase solution
To remedy this we decided on a two phase solution. The first would display this polygon to users so they could understand that this method of search produces a specific type of search. The second phase would get rid of this type of search entirely. This means that when a user enters a manual search, the map will center around that polygon area, but will not limit its search results to it. Are hope is that this will create a more natural map search behavior for users.
Phase 1
Phase 2
Fine-tuning the contact flows
Contacting an agent is a critical user goal in the native apps. Unfortunately we found that this was also a low performing feature. We wondered was it because of the registration walls we had set up, the user-flow, or something else?
As a user I just want to contact an agent, but as a business I want to capture user registration before I allow a user to do this. Re-accessing previous contact/registration user follows we found that although we had two CTAs that both sent messages, they had two separate flows. To improve this feature we consolidated the the flows, and updated the UI and interactions.
Old user flows
Revised user flow
Providing user feeback
To further refine the contact and registration process I developed a new set of form UI and interactions to better assist users. In this UI forms fields are broken up to clearly segment and organize fields to increase their legibility. As part of a standard interaction pattern I introduced dynamic error messaging. In this pattern users receive live feedback for fields they have entered. This means that a user will know if a field is in error and why, before they submit the entire form. Paired with appropriate hint text the goal was to eliminate errors before they were submitted.
Foundations of a usable interface
Standardizing the UI and Interactions
After re-evaluating the major app functions we decided to take a more granular look. After auditing the app UI and interaction patterns I came to the conclusion that they were all over the place. We needed a consistent set of UI and interaction patterns to make tasks easier for our users.
To standardize the interface and create consistency I created a GUI with specs for our native apps. This served as a guide for the rest of our design and development team, so we could begin to use a consistent set of UI.
Creating meaningful interactions
In addition to developing the GUI I created a guide to standardize major interaction patterns. Using animations built in Keynote, the guide is a set of animations and descriptions. The animations were an invaluable tool to communicate with our development team. They were able to see complex interactions in action and respond with more accurate questions, concerns, and comments.
Testing the product
Constantly motivated to improve the product and user experience we incorporate research into all of our products. One example of this was our efforts to analyze consumer search patterns on the native apps. The goal of this study was to document current consumer search behaviors and use that to rethink key userflows like contacting an agent. Set up through Usertesting.com, we created a set of remote unmoderated user tests. Each test comprised of a series of tasks, follow up questions, SUS questions, and NPS questions.
Collecting and analyzing results
Watching the test results I recorded user actions, search behaviors, delights, frustrations, and thoughts. Analyzing these records I created a series of recommended changes which included revised userflows for contacting an agent. These userflow recommendations were generated from a diagram record of user actions, and a casual map based on these user actions.
Conveying the results
From the record of iOS User Actions I noticed a huge difference in actions between the Engaged Users and the New Users. Engaged Users displayed an overwhelming behavior to almost immediately enter a search > filter that search > view search results > and then view details about a property. From this pattern of behavior I created a Casual Map documenting this ideal series of actions, leading to the major goal of contacting an agent. Bellow you can see a revised sitemap and set of userflows for iOS, that are based on this casual map and the user research.