UX-ing the Real Estate Transaction Process: A Case Study
If you’ve ever tried to buy residential property, then you’ve experienced firsthand how difficult it can be to secure a home. Real estate transactions in the state of New York can be especially daunting, messy, and burdened by miscommunication. Furthermore, the amount of documents and conversations that exist between multiple parties can easily make for a harrowing process — and this is all without considering the increasingly common problem of wire fraud.
What can be done to improve the user experience of going through a real estate transaction? Our client had a particular solution — this responsive web application would be a one-stop shop kind of communication platform.
All parties involved in a transaction could interact on the app: buyers and sellers, real estate agents, mortgage lenders, and any other service providers. Because all documents and sensitive information would be in one place, there would be far less risks involved on our platform than are included in sending chains of emails with important information within them.
As UX designers at General Assembly, my team and I worked with our client to achieve their goal of making the presently formidable real estate transaction more safe, simple, and effortless.
Scope
Within a 3-week design sprint, our team (consisting of Jessica Chin, Marilyn Shi, Valeria Lebedeva, and yours truly) was tasked with creating a responsive minimum viable product (MVP) prototype for how our client’s app would appear to real estate agents. Additionally, a “real estate transaction” was defined as the very beginning of the process — looking at properties to buy — to the end, receiving the keys for a new property.
The dive into real estate agent research
Our team interviewed 6 real estate agents working within the New York City metropolitan area. We discovered that real estate agents were often given very few resources as they were starting out, and that the only times the real estate agent is involved is at the beginning and end of the transaction — lawyers handled a vast majority of all the things in between.
However, real estate agents need to be the go-to expert for their clients. As one agent put it:
“Your role as an agent is to be a mentor to your client… make sure you are an expert as to how the transaction works, so you can act in their best interest.”
As one can imagine, this can be a bit overwhelming if you, as the new agent, are learning things alongside the client — which can sometimes be the case.
Our team also discovered that real estate agents have to accountable, responsible, and dependable during every step of the process, and agents also emphasized communication’s importance during the transaction. One agent highlighted the importance of staying on top of things:
“You cannot miss any step. You have a file, and you put everything there.”
With the priorities and frustrations of real estate agents in mind, our team moved onto synthesizing our research.
Synthesizing our data
Using the data acquired from 6 interviews, our team went through affinity mapping to create strong “I” statements for our primary user, the real estate agent. The primary statements we focused on are as follows:
- I am an advocate for my client.
- I depend on my lawyer to take care of most of the transaction process.
- I need to document every step of the transaction process.
We moved on with our primary user persona, who we named Olive. She is a real estate agent in Hoboken, NJ, and she only just started out in the real estate industry.
Once we identified the goals, needs, pain points, and behaviors of Olive, we mapped her journey through the real estate transaction process.
The opportunity our team focused on — and also the goal of our client — was the third and final one: find a more secure way to communicate.
(Both the persona and journey map were designed by the wonderful Jessica Chin.)
Besides our journey map and persona, we also created a competitive landscape analysis, a MoSCoW map, and a feature prioritization matrix. (We also briefly worked on a feature analysis for our client’s competitors.)
The competitive analyses helped our team understand where our client’s app would fall in the market of currently available real estate transaction management apps, while the MoSCoW map and feature prioritization matrix helped us decide which features we should focus on in our MVP.
Finally, we distilled our primary user’s pain points and journey into a problem statement.
When real estate agents start the transaction process, they don’t understand how to complete it.
Olive is a real estate agent who does not know how to complete the transaction process. How might we help Olive understand the transaction process?
With our problem statement established, our team moved onto designing the app.
Designing an app to simplify and secure transactions
Our team first created a user flow for a real estate agent. Afterwards, we went through a few design studios to generate the low-fidelity prototype, and we relied on the insights we gained from our competitive landscape analysis, MoSCoW map, and feature prioritization matrix to decide what features to include.
Our lo-fi prototype consisted of 4 different screens and follows this user flow: a real estate agent would login, check on the status of a contract, and send a message to an important contact about the contract. (These were also the scenarios and tasks during our usability tests.) Throughout all our usability tests, we made sure to find participants who had actually worked in the real estate field as agents before.
We conducted 3 usability tests on our lo-fi to collect feedback, and we moved onto our mid-fidelity prototype. Our changes from lo-fi to mid-fi were focused on what a real estate agent would actually like to see information-wise to ensure that our client’s app would definitely be helpful to one of its primary users. Additionally, we aimed to make the navigation of our app clear, understandable, and findable, as there were many tabs in our primary navigation, and we wanted all of the options to be helpful and straightforward to our users.
We conducted 5 usability tests on our mid-fi as well; we then integrated feedback into our high-fidelity prototype. More on our changes from mid-fi into hi-fi will follow shortly after this walkthrough of one complete user flow in our MVP:
Now, the most important changes from our mid-fi into our hi-fi are shown below.
Transactions (Agent View) Landing Page
On the “Transactions” landing page, we found that showing closed transactions was unnecessary and unhelpful. We modified the hi-fi so that users would see only their active listings.
Specific Transaction Page
Copy on the page was made clearer through typography and layout changes, especially within the “Deadlines” feature. Additionally, more information — such as facts about the property itself — were included onto the page. (Some margins were also tweaked to refine the visual layout.)
Message Center Page
Proportions of the typing field and message bubbles were modified to better utilize the screen space available on a desktop screen.
As an important note, while there were no changes from the mid-fi contract viewing page to its hi-fi version, the PIN code and the viewability of the contract within the platform were there to tackle the problem of having to use unsecure email communications. Furthermore, the extra step to require a PIN code is meant to ensure that users know their security is always a priority.
How did our hi-fi usability tests go?
Our team is happy to say our hi-fi app was received very well by our participants! (This was the one test where we did not make sure our participants had worked in the real estate field; at this stage, we were more focused on making sure the hi-fi was visually cohesive and understandable instead of making sure content was satisfying.)
Some key quotes of support are shown here:
- “This is super useful… You have no idea. I usually carry a little folder with each client’s information.”
- “In the field, I need to mentally recall where we are in each transaction. So, this is great.”
- “Oh yeah, I like that [PIN code] for sure. Especially for a client’s personal and financial information.”
- “I like that I can see who I’m involved with. It’s much easier than keeping a spreadsheet for my contacts and transactions.”
Some of our users’ favorite features were the timeline — where users could sort to see deadlines by various filters — and the ability to see and chat with whoever was in the specific transaction, thanks to the right sidebar displaying parties within the listing. Some users also explicitly appreciated requiring a PIN code to view sensitive documents.
Because our web app would be responsive, we also designed the hi-fi mobile breakpoints for our client’s app. Some screens are shown below:
And last but not least, we made a sitemap of the navigation on our hi-fi prototype.
What’s important to note about the sitemap is that the “Transactions” tab has steps that are variable depending on what kind of transaction the agent is partaking in. For example, an apartment rental will have different transaction steps than a house purchase.
Furthermore, we hope to address a starting real estate agent’s lack of guidance with a “Resources” tab underneath a user’s profile. In fact, that brings us to our next steps.
What comes next?
Besides continuing to iterate on our hi-fi wireframes, our team would hope to design and flesh out the rest of the web app’s functionalities and pages within the real estate agent’s view. Consequently, we would also conduct user research on buyers and sellers as well as service providers; from there, we would aim to design wireframes and user flows for those parties.
What were the main takeaways from this project?
I believe the biggest lesson from this project was just how important it is to have a subject matter expert in or with the team. Having someone on hand who could clarify certain industry questions was invaluable to our process. It was also important for us to dive deeply into researching this industry, especially because this was a problem space every team member was unfamiliar with. We went into the project knowing nothing about real estate and emerged learning a lot more — we definitely had to in order to achieve real depth and value within our client’s app.
Ultimately, this project taught us how to properly immerse ourselves into a problem space in order to create something of true worth.
Want to learn more?
If you’d like to become an expert in UX Design, Design Thinking, UI Design, or another related design topic, then consider to take an online UX course from the Interaction Design Foundation. For example, Design Thinking, Become a UX Designer from Scratch, Conducting Usability Testing or User Research — Methods and Best Practices. Good luck on your learning journey!
