CROSS STREET MOBILE APP
A mobile app to empower real estate agents with smart searching, automated scheduling, and streamlined messaging. Realtors can freely meet with clients in the field instead of being stuck at the office tied to a desktop based workflow.
I was the sole designer for this project and was responsible for the full design process from research through design, prototyping, and user testing.
Agents, also known as realtors have to traverse through repetitive tasks to meet the needs of their clients and when working with other agents. Much of the problem stems from the MLS (Mulitple Listing Service) system, where all properties in the US are listed for sale. The system itself is fragmented with 856 different MLS boards that represent different regions within the 50 states, which affects database architecture and how data is stored and shared. The lack of standardization causes loss of time and business with missing house data and agent information.
In between juggling their CRM, text messages, emails, phone calls, MLS data, realtors each have to establish their own workflow or system across multiple products and services to manage their business. There were a significant amount of problems we discovered realtors had to deal with on a daily basis for buying and selling houses for their clients. The problems we felt were most strategic to tackle were: scheduling showings, communicating with clients and other agents, and managing updates to client data. How we decided on these problems specifically will be elaborated in the User Research & Competitive Analysis sections.
Build and validate a MVP mobile app that empowers real estate agents to streamline their daily workflow of searching for homes, scheduling showings, communicating with clients and other agents, and managing client data so that agents can close more deals.
Cross Street (mobile app) was a second iteration product after building and testing Avenue. Many of the decisions made across the project were influenced by the feedback and learning gained from Avenue. At a high level, we needed to go from a webapp to native mobile apps in order leverage more of the interaction and performance expectations from our users.
In order to build an MVP for both iOS & Android, we had to prioritize features that were more unique in value to acquire users and then build the more standard real estate app features like search by filter and saved searches later on.
USER RESEARCH & ASSUMPTIONS
Where a decade ago agents were in control of sending properties to their clients, realtors no longer feel that they're perceived as necessary and knowledgable to their clients since sites like Zillow, Redfin, and Realtor.com publicly offer property data. They had to pivot from being the gatekeepers of knowledge to becoming the middleman to get their clients every showing they request.
I conducted user interviews with real estate agents, brokers, buyers, and sellers to understand their pain points and processes when dealing with buying and selling homes. From speaking with these 20 individuals, I distilled our learning into user personas, specifying each type of user's goals and needs were. But ultimately focusing on building the app around the buying agent persona because they were the most burdened and desperate for a solution. (A real estate agent actually handles both roles and responsibilities of buying and selling agents, it just depends on if their client is a buyer or seller. Working with buyers is more common since it’s much more difficult to ‘win’ a listing and represent a seller.)
Some assumptions we wanted to validate with agents were:
Scheduling showings for clients is tedious and should be automated as it would save them hours per week to find and service more clients instead.
Communication with their clients and other agents is chaotic since they interact with a lot of different parties without saving their contact information.
Agents would like to have a digital assistant to help them with administrative tasks such as prospecting potential homes, coordinating their schedule and corresponding client notes, and following up with existing clients.
Popular real estate platforms such as Redfin, Zillow, and Open Listings are geared towards consumers and certain MLS boards have their own app for agents specifically such as HomeSpotter, HomeSnap, and MLS Touch. They have all the house data that agents need as some of it is private to only realtors, however outside of holding data and having a basic CRM where clients can react to properties, they lack the heavy lifting required of scheduling multiple showings for a client.
ShowingTime and AgentInbox are the most direct competitors as they are apps that focus on the phase of scheduling & communication with each one focusing on one more than the other. The vision of Cross Street was to work with the existing mental model that agents held that their client communications were centralized around the homes they wanted to see and they would also be messaging other agents for those same properties they are requesting to show.
DINKs, white collar, household income of \$150k+
Thoughts/Feelings: Excited to buy their first home, but it's the biggest transaction of their lives. They're anxious don't want to make any bad financial mistakes or decisions. Want to be truthfully informed as they're wary of being taken advantage of due to their inexperience
Pains: Fear of missing out on their dream home. Stress of overpaying for the value of the home. Stress of shopping around for the best lender or loan rate and realtor that will help them negotiate and close on the deal. not getting approved enough for a loan. Anxiety for waiting on hearing back on offer, dealing with counter offers and unexpected costs.
Gains: Their dream home that they have been saving up for over the last few years. A new start and place to settle down for the next 5-10 years. They're building equity and investing into a property that will give them a greater return than paying rent without any return.
Cross Street empowers realtors with automated scheduling, streamlined messaging, synchronized client management, and a digital assistant to follow up with your contacts in a single mobile app.
SOLUTIONS - “HOW MIGHT WE…”
Solutions to these problems we considered were:
Automated scheduling for agents, starting from a concierge service to fully automated on the backend.
Provide MLS access on their mobile devices that is redesigned specifically for how agents utilize and search through listings.
Organized and threaded messaging for agents so that each conversation has context to the property that is being discussed along with the client who is interested in buying or selling the property.
We prioritized our build and design in this order (scheduling first) because of the legalities of accessing and displaying MLS data, which we had to go through an application process. Also the threaded messaging needed more time to figure out how create the architecture with the Avenue app and the Twilio API.
Simplify the home buying process to make it a single transactional experience instead of a fragmented one
Provide the buyer with a single point or place of contact eliminating any unnecessary communication channels.
Significantly reduce the amount of time and steps to get a loan approved.
Incentivize buyers to use Cross Street from a financial savings standpoint and not just a better user experience
Guarantee that the realtors buyers work with thru Cross Street will receive a 35% commission rebate.
Provide more transparency to the process of getting approved for a mortgage as well as the rate they're being offered.
Educate and disclose the full process of how they will be evaluated and show the current rates across the most popular lenders.
Increase the quality of lead, or readiness of buyers for loan officers and realtors
Educating buyers is an critical step that every loan officer and realtor takes up valuable time that can be used to service more clients.
When buying a house are a ton of questions especially for first timers, so we need an FAQ section for easy accessibility.
In order to validate our MVP we had to backlog many of our ideas that were valuable to a holistic and refined platform experience for all users, specifically the loan officers and realtors. These were not critical to strategically acquire buyer and borrower customers first and these service providers would be continuing their regular workflow, just with an influx of qualified leads.
With a majority of buyers and sellers avidly using Zillow, Zedfin, and Trulia to find homes, we decided that
Create a full dashboard/CRM for loan officers to manage all clients, documents, and operations processing for loan approvals.
Integrate OCR technology so that documents uploaded by clients do not have to be manually inputted by loan officers or realtors.
Allow buyers to change their assigned realtor/loan officer.
Allow buyers to shop and search for their homes through Cross Street instead of leaving to other platforms.
Above are some examples of sketches and wireframes for our two early core features: scheduling and clients.
The goal was to define the user flow and to see what elements on each page users would need to interact with. We revised how an agent would create showings multiple times because of the different situations of where agents would be coming from before the app and entering in properties. The other situation we ran into was whether agents would be showing properties they've shown before a second or third time to a client. Since then we've iterated on this challenge and I've explained it in the scheduling section below.
With an experienced realtor and lender on our team, we were able to leverage his domain knowledge by providing educational content in short articles or Q&A blurbs. Our strategy was to supply information that translates the financial and business jargon to reduce the anxiety and overwhelming feeling of learning all the ins and outs of buying a home. This also enables better SEO and thus customer acquisition as there's different paths for our funnels.
As a service oriented platform I mapped out the full buyer's journey and experience so that we knew all of the touch points they would have with the product throughout the lifecycle of their home ownership. We then identified what was the most valuable to the buyer which was the pre-approval process. The existing pre-approval process was the point of friction for loan officers and buyers and it's required for new home loans and refinancing existing mortgages.
BUILD & PROTOTYPE
BRAnd & STYLE GUIDELINES
Our design principles drove much of the style guidelines for our typography, layouts, colors, and copy tone. I gravitated towards a minimal and open aesthetic with line icons, concise captions, and plenty of negative space in order to convey the simplicity and transparency users longed for in such an arduous process.
My decisions for the visual design was influenced by a branding exercise I held with the founders regarding "Who we are, Who we're trying to be, Who we're not". This gave me insight to choose the typography (Roboto family) and color palette (Slate blue, bluish grays) that was aligned with our brand styling of classy, modern, reliable, and accommodating.
Much of these designs came about 6 weeks after development as our team's priority was to ship functionality over stylized design and so UI was put on hold until we had validated the value with our users.
Since we knew that this was going to be a native mobile app, I utilized iOS' Human Interface Design Principles for the UI. I revised much of where the main action buttons are to follow iOS guidelines in the left and right corners of the Navigation Bar. I also started to iterate with using cards as part of the design patterns for Avenue for the purpose of giving users more visual separation between sections across all pages. The Messages, Clients, and Search pages have more white space between separate entities. I'm looking to implement this consistently on each of the different views.
TEST & LEARN
Through our initial testing period, the unique value proposition was rather unclear for many of our users. Some of them who use Redfin and Open Listings struggled to see the differences Cross Street offered. Thus our landing page needed rework in the copy to clarify what distinguishes this platform from other real estate tech giants.
As for the pre-approval loan process, there was significant positive feedback in the reduced amount of time and effort to complete the form. Users appreciated that they had a status update throughout each stage of the review process. Though it was in a very basic form, they indicated if they could get email updates on new changes to their pre-approval.
There wasn’t any substantial feedback regarding the FAQs and Knowledge Center, but we will be tracking these pages with Google Analytics moving forward.
We wanted to test the experience agents had when we had them create showing requests as quickly as possible and to give us feedback compared to their manual workflow as demonstrated in this flowchart.
We had 5 users making real requests through our app within three weeks of the start of the project, and though it was bare bones functional, it fulfilled their goals for scheduling properties and saving time. What usually took 1-2 hours for them to schedule, now only took them 3 minutes.
Even with good results, what I found when getting feedback with how they used the app was that there were a lot of usability problems. We built out as many necessary features as we could to get agents to schedule, however we didn't have proper deleting, editing, and canceling functions built in for their requests. These user stories were in our backlog to be built, but this is where business goals vs usability had tradeoffs to learn and validate quickly.
I iterated a few times on how agents would schedule showings for their clients as this was a complicated process that we wanted to streamline, yet maintain flexibility to different kind of agent preferences of their workflows.
Before committing to full-on development, I did some user testing with the InVision prototype to get feedback and validate my assumptions. Instead of one long form, in our team's design studio, I felt that utilizing a card based wizard system would be more simple and clear for agents who aren't as tech savvy to focus on one task per card.
The feedback for the revised scheduling flow and UI was positive especially since I included richer details when agents add in properties such as the showing type along with an agenda view for upcoming listings. The revision I had to make was on the empty state, in that users would tap the center image, thinking it was a button instead of tapping the + button in the upper right corner. I then added a CTA button to create a new tour in the center of the content area from this observation.
For the second core feature, we were able to get access to MLS data after a month into the project and my focus shifted from the scheduling showings user flow, to understanding the scope of the data in each property listing.
Property listings usually take a realtor 2-3 hours to complete because there's over 200 field inputs to list and describe a property. I took an inventory of all the contents in the listing and took several days to complete the information architecture for a property listing.
This is an example of a property listing agents look at everyday. Fields that do not have data are still in view.
The structure and hierarchy that I established in Avenue's listing page was derived from the user research of what agents interact with most frequently for each listing and also analyzing over 200 listings to discover patterns. I observed how agents input data in detail for some sections, and some where they do not complete at all. In the revised mobile design above, I had each section collapsible so that the property data was not overwhelming and cluttered upon opening the page.
The task surely felt like it was completing a 1000 piece jigsaw puzzle since every piece of information, no matter how infrequent agents fill out that field had to be displayed. At the same time, the design challenge was interesting in that though there are some required fields, each agent fills out property listings the uniquely, so the system I architected also had to be flexible.
We tested the redesigned property listing view with our users and received overall positive feedback with the categorization and hierarchy of the data. They appreciated how my approach was agent-focused by including small details like displaying property status upfront, along with the days on market, and showing type for active properties.
I asked them to find specific data fields (HOA fees, Pool, Remarks) that agents frequently visit to test the usability of collapsible containers as well as the reorganization of specific data fields that originally had no parent category in how the MLS form was designed.
Aside from pulling and simply displaying property data from the MLS, we learned that agents heavily value richer functionality to integrate with their daily interactions with property listings. Specifically, having contact buttons to reach the listing agent quickly and getting comparables data of nearby properties. This amplifies the value of having mobile access to the MLS, where normally they'd need to be at the office in front of their desktop.
Searching for properties for buyers is not a revolutionary experience for agents, but we wanted to integrate their search needs with their frequent actions of scheduling and sharing properties with their clients.
I designed a property tray interaction with the intention that agents will be temporarily saving multiple properties they come across in their searches, almost like a cart system, and then eventually the 'checkout' action would be to either schedule these properties immediately or to send and save them to their client to review.
Knowing that agents are not as tech savvy and needed as much affordance as possible, I wanted to keep the tray fixed to the bottom of the screen so that it was always visible, giving additional guidance with the primary action color. In order to be as clear as possible how the interaction worked, I included in the empty states specific instructions as well as a 'Show Me' button when they opened the property tray with no properties added. Also on-long press, users would be prompted with how to drag and remove properties from the tray, with the number of properties changing whether opened or closed.
Through user testing, the feedback we received was that it was intuitive and easy. When they didn't know what to do, users were able to read the instructions of what actions to do. I asked them if they'd prefer if the interaction was a swipe from either left or right instead, but they said that the dragging was fine. Though the total interaction distance for finger travel would be more when dragging from the top property card to the tray, compared to a left or right swipe like Amazon's add to cart, I believe there's more cognitive connection when the user sees the property actually touches the tray to be added. Since the interaction is the same when adding and removing with actual targets, these micro interactions allow for greater satisfaction for task completion.
TAKEAWAYS & NEXT STEPS
The most exciting parts of the project was always getting out of the building to conduct user testing with the prototypes. Interacting with the agents to listen about what else they'd like to see on top or in exchange of what they experience from the prototype gave invaluable insight to build the right tool for their needs and goals and I was glad to have done in person testing multiple times to witness it.
If I were to redo the project, I would have requested more time to think through different user flows for scheduling showing requests as we did not anticipate the different instances of how agents would come into the app looking to show a home. The core scheduling task was detailed out in the workflow diagram, however I needed to consider if agents are already in the middle of a showing tour, and how that user experience be different. I've been working on crafting this separate user flow and the current solution is to provide a contact button for buying agents to reach listing agents to immediately request to see the property if they're already showing clients other properties.