Streamlining the agent-client communication experience for better transaction tracking
A story on how I transformed a heavily under-utilized messaging system that has helped the company avert huge potential losses in the millions.
Project overview
A poorly implemented messaging system was negatively impacting Nobul's financial success
In recent years, we have realized that the messaging system that was supposed to help the company keep track of the transactions was heavily under-utilized.
Due to the messaging system being extremely ineffective, as the number of transactions on the platform grew, our finance team has observed that an alarming number of our partnering agents were closing deals with the clients we have connected them with without informing us; between Jan 22 to Jun 2022 alone, the number of deals we missed out on was in the low two digits.
.png)
Half of the user were either actively asking for or agreeing to the usage of alternative communication methods.
Only a small portion of our agents were actively reaching out to potential new clients using our messaging system.
Begin with an usability audit
I kickstarted the revamp project by first, performing a full review of the existing product to find out what was working and what wasn't
The audit lasted for around a week and involved a round of feature comparison to all similar products on the market and a round of user journey analysis.
Step 1
Compared Nobul’s messaging system to other popular tools used by our users
Our messaging system was missing a lot of the essential features that form the foundation of a modern communication tool.
Lacking unique features to distinguish itself as a specialized tool for real estate communication.
Step 2
Mapped out all relevant user journeys and highlighted all of the points of concern
I mapped out separate messaging system user journeys for each of our four main types of users and highlighted all of the moments that our users would leave the messaging system to perform a task; to have an easier time referring to these moments throughout the project, I named these moments Points Of Exit (POEs).
Formulate hypotheses
I came up with two hypotheses by looking at the result from the usability audit to explain why the messaging system was heavily underutilized
Realistically speaking, the chance to conduct qualitative research is not something that a designer can get for every project they come across. Therefore, I believe that it is fairly important for me to come up with some reasoning to explain why the product was underperforming independent of whether I get to talk to the user or not, and just treat any user research I may conduct later on as a way to validate my hypotheses.
Hypothesis #1
A massive amount of POEs observed across the user journey was causing a heavily disjointed user experience
Nobul's messaging system lacked many essential features so it was nearly impossible for users to go through a typical real estate journey without having to leave the messaging constantly.
With some tasks, the user may still return to the messaging system after completing them. However when the user starts to use a different messaging tool altogether, more often than not, they may never return back to Nobul.
Hypothesis #2
The current messaging system does not have enough values to differentiate itself from other communication tools
Some of the agents who completed a previous round of surveys claimed that “It would have made absolutely no difference, if not easier, for a real estate agent to just use another messaging tool to communicate with their clients in the first place.”
Unexpected constraints
Add support to send and receive files and call it a day? Not so fast! The reasoning behind why those functions weren't there in the first place was more complicated than we had anticipated
So after engaging in some extensive conversation with the head of product and the technical team that would be responsible for implementing the design of this project, we found out that there were two main reasons for why the communication system never included basic functions like sending or receiving photos or documents.
Reason #1
Upper-level management was hesitant to introduce the support to send and receive files
Initially, some of the higher-level stakeholders in the company believed that if agents were unable to send contracts to their clients to establish working relationships outside of the platform, it would demotivate them from taking transactions off our platform because their clients, in this case, could easily replace them due to the absence of a formal offline contract.
However, it was obvious to us that this assumption was completely false since most of our partnering agents had already found ways around this obstacle and had been directing their clients away from Nobul for quite some time.
Reason #2
The potentially costly investment in file storage and security was deemed to be not worthwhile
When the messaging system was first introduced, the decision to not include the function to send or receive files was also made on the basis that implementing such a function would have necessitated the creation of an expensive file storage system due to the high-security requirements that came with storying sensitive documents such as real estate contracts.
However, as the Nobul marketplace grew, the number of transactions being facilitated through it also increased drastically. Considering the problem we were facing, the product team believed that adding a file storage system now might help us prevent losses that are greater than the cost of having such a system.
We need more user data to better support our request for adding a file-transferring feature to our messaging system
We thought that it would be wise to gather more solid evidence before attempting to persuade stakeholders that including a new file transfer feature as part of this redesign project is a worthwhile investment.
Qualitative user research
We interviewed a mixed group of randomly selected users to validate the hypotheses while narrowing down the list of items to focus on
We interviewed 20 of our existing users made up of agents, home buyers, and sellers to gather insights that help inform the next step of the design process.
The process lasted for a week and the goal of the interview was to first confirm the validity of the two hypotheses I came up with while also narrowing down the list of items we should focus on fixing within the scope of this project by finding out what mattered to our users the most.
Insigh #1
The disjointed experience that users experienced when using the messaging system was affecting both the agent user and their clients
18/20 the participants we spoke to were hesitant to use the messaging system for communication due to the need to constantly switch in and out of the chat interface for the purpose of completing various tasks.
Insigh #2
The tool’s inability to enhance agent-client communication efficiency was also a key reason that was steering agents away
All 6 of the agents we talked to mentioned the inconvenience of typing out progress updates to their clients word by word, when Nobul could have potentially sent out these updates automatically considering that we have already implemented a basic real estate progress tracker, which has been actively used by our partnering agents to send out progress updates.
Insigh #3
The small usability problems discovered during the audit were more noticeable to our users than we had previously anticipated
12/20 participants we talked to mentioned problems related to visual cluttering, unintuitive information presentation, and unthoughtful feature implementation. Considering the result, it was clear to me that these usability issues were no longer something we could ignore.
Setting design goals
Lots of problems to be fixed but we had to focus of our effort on things that mattered the most since we were under a fixed time frame
By looking at the insights gathered from the usability audit and the user interview, it was quite clear that there was a lot to be fixed. After talking with the technical team, we decided to focus our effort on tackling problems that were the most impactful to the overall user experience while finding ways to fit in smaller quality-of-life fixes that were more technically achievable.
In addition, after discussing with the development team about the possibility of incorporating a new file storage system, we realized that this task might be more management than we had previously anticipated. Therefore, by presenting the user data we gathered and the development estimation from the dev team, we have also managed to successfully convince the upper-level stakeholders to approve the inclusion of a file-transfer system as part of this project's scope.
Design goal #1
Provide a more immersive communication experience by reducing the number of points of exit across all the user journeys to increase the number of users using our messaging system actively in the future
We hoped that by providing users with ways to complete more tasks directly within our messaging system, more of them would reconsider using the new messaging system as their main communication tool.
Design goal #2
Improve agent-client communication efficiency by introducing basic automation to our agent users’ current workflow so that more of them would start using Nobul's messaging system to communicate with their clients
We hope that, by introducing basic automation to agents’ workflow, more agents would feel encouraged to use our messaging system more actively in the future as their main channel of communication between them and their clients.
Design goal #3
Provide a more intuitive and clutter-free operating environment by refining the UI and adding quality-of-life improvements so that users could feel less frustrated when communicating with each other using the new messaging system
We thought taking the opportunity now to clear up some design debt, so to speak, could greatly extend the new messaging system’s usefulness to our users before it needs another round of improvements.
Crafting the solutions
Ideate and come up with different designs to tackle each of the three project goals mentioned earlier one at a time
After going through the insights and deciding on the goals that this redesign project would need to achieve, I proceeded with crafting design solutions that aim to achieve each goal individually.
Tackling the disjointed UX
Creating a place for users to do most of everything they need from directly within the messaging system
The objective here was to discover an innovative approach that would prevent our users from leaving the Nobul messaging system throughout their entire real estate journey. This approach should offer a more immersive communication experience that enables users to smoothly transition from one task to another without any hindrances during their real estate journey.
Begin by choosing the "points of exit" that we want to focus on eliminating
As mentioned before, our user encounters a lot of points of exit throughout their entire real estate journey. However, it was not realistic to find solutions to resolve all of them within a reasonable scope.
Upon reviewing the user journey charts for home buyers and sellers, considering the time frame allowed for this project, we have identified five points of exit as our main focus with this approach.
Exploring the best approach for creating an immersive communication user experience
Approach 1 - New page / Tab
Rejected
This approach would allow the user to at least quickly navigate to all the places that would allow them to accomplish the various things they would need to do along their real estate journey.
However, while this approach was the easiest to execute technically speaking, the downside was that the users would clearly be forced to leave the messaging system which was the opposite of allowing users to accomplish things from directly within the system. Hence, this approach was rejected in the end.
Approach 2 - Overlay
Acceptable
This approach was much better as it permits users to still remain somewhat connected to the previous interface when interacting with the action hub.
In addition, this approach would also have next to no delay between the moment when a user requested for the hub and the hub showing up therefore the overall user experience for this approach was later deemed to be acceptable.
Approach 3 - Side panel
Perfered
This approach was deemed to be the best because it enables users to navigate multiple panels concurrently without forfeiting control of any panel. It would have allowed users to do everything from within the chat UI without ever breaking the immersive communication experience we were trying to craft here.
Introducing the new "Quick action hub" A slide-in side panel that offers users a quicker way to accomplish their goals along their journey
Our final approach was to create a hub that enables users to compare agents, hire them, book new tours, reschedule tours, and leave reviews all in one place by utilizing the slide-in side panel format to minimize potential disruptions to the user's experience.
Tackling the problem of users exiting during profile comparison & agent hiring by fitting a "mini" agent profile page in the new hub killing two birds with one stone
Typically, users would need to leave the messaging system in two separate instances. Once when comparing profiles of different agents and once when proceeding with hiring the ideal agent to work with. However, in both instances, the user would be heading to the agent's profile page.
The goal here was to design a page that would allow home buyers/sellers to get a quick glance at an agent's background and proceed with hiring if needed. This design was not meant to fully replace the more detailed agent profile page.
I worked closely with the product manager to sort out a list of "must have" information that would be placed on this page based on the user research results obtained previously.
Tackling the problem of users exiting when trying to schedule a new home tour with their agent by fitting a slightly modified home tour scheduling experience in the new hub
Previously, users would have to head to the property detail page and go through the home tour booking flow there if they wanted to book a property tour with the agent they were working with.
So, to eliminate the need to leave the messaging system and book the tour elsewhere, my solution was to design a slightly modified home booking tour that is more tailored towards booking with agents you are currently having a conversation with.
To guarantee that our development team had adequate time to implement the new feature, a significant portion of the elements used in this modified tour booking page, such as the date selector and the property cards, were created using existing design components with minor adjustments.
Tackling the problem of users leaving Nobul when requesting rescheduling of home tours with their agent by creating a new home tour rescheduling experience specifically for the new hub
When users want to reschedule a tour, they usually ask the agent in chat to see if they can change the date and time of the tour for them; since users can achieve their goal from within the message system, this was not necessarily a typical POE.
Unfortunately, we have observed that many home buyers and sellers were being ignored by their agents because their requests, typed out in the chat window, would not trigger any email notifications. As a result, many of them would end up abandoning their agents and searching for new ones elsewhere.
To resolve this issue, the solution I arrived at was to add a way for users to reschedule their tours using the new Quick action hub so agents can receive more timely notifications informing them to reschedule tours with their clients.
Once again, I reused existing design components with minor adjustments to minimize the potential development time.
Tackling the problem of home buyers and sellers not leaving an agent review after the deals are closed by bringing agent review directly to the new quick action hub
Leaving a review has always been such a hassle. The fact that users would have to leave the chat UI and find where they could leave a review for their agent was
To resolve this issue, the solution I arrived at was to bring the agent review page directly to the messaging system so that home buyers and sellers can leave reviews for their agents without navigating to another page.
The final design was done but not without design trade-offs
Due to time constraints, I was unable to fully explore alternative design options for all the pages. For example, the side panel on the desktop resolution was kept to the same width as it would be on mobile because I only had enough time to design one version for all possible breakpoints. In addition, the approach of design I went for was also more practical since it should also minimize the required developmental effort for implementation.
Nevertheless, the final deliverable represents the best possible work that I could have accomplished within the given timeframe.
Tackling efficiency
Improve agent-client communication efficiency by adding a one-click progress update feature for agent user
I came up with a version of the quick action hub that provides an agent with some basic information on the stage that he/she is currently in and another fully editable system-generated message that would be sent out to the client as part of the progress update.
Users would see this update in the form of a special message that the agent sent out. On top of seeing the special message, the user would also receive an email notification informing him/her of the progress update at the same time.
Desktop layout optimizatin
More compact and functional than before
I adjusted the % of screen real estate occupied by the contact list and the chat UI to make room for more information to be displayed on the right side of the screen. As a result, users would now be able to gain access to more features and functions on one screen without the need to navigate away from the messaging system due to the more effective utilization of screen real estate.
UI fixes & optimization
Fixed a list of usability issues while adding quality-of-life optimization at the same time
According to the feedback we got from interviewing users earlier, the old user interface had many issues that were causing a lot of frustration to users. Therefore, it was decided that we would need to address most of these issues through this redesign problem. Below is the before & after comparison demonstrating some of the more notable changes I have made during this project.
1. Inconvenient access to the search function
To gain access to the search function, a user would need to tap twice.
2. No contract photo, just initials
The lack of avatar photos being used for each of the contacts made it difficult for users to tell who is who after the list got longer; especially when more contacts on the list started to have the same initial for their first and last names.
3. Only displaying initials for last names
This problem also made it difficult for the user to tell their contacts apart after more of their contacts started to have the same first name and same initials for their last name.
4. No easy way to block a contact or delete a conversation
Users would need to contact our customer support to block a contact or delete a conversation.
1. One tap accessible search bar
Just one tap to search for a contact instead of the two we had before.
2. Displaying photo and full names for contacts
A portrait photo will be displayed for all contacts that have one and the list will also display full user names.
3. Easy access to block, delete and the new pin to top feature
Users can now block a contact and delete a conversation by themselves without the need to contact Nobul customer support. In addition, users can also pin contacts to the top of their group for quicker access with the new design.
4. Visual divider providing users with more intuitive ways to tell contacts apart
Compared to before, users can now more easily tell the contacts that belong to different groups apart from each other.
1. Shared Property UI was messy
The design of the card was filled with unnecessary information, such as an uneditable default message at the top followed by the full link to the page of the property below, causing a major visual cluttering issue when multiple properties were shared at once.
2. No quick access to voice/video chat on mobile UI
While the desktop breakpoint's design had quicker access to voice/video chat, the mobile breakpoint's design did not have the same consistency in design.
3. Msg time stamp was poorly implemented
The display format for all message time stamps included the date/month/year and the exact time for when the message was sent; it was unnecessarily lengthy and unintuitive. The old design also did not include a divider to visually separate out conversations that happened on two different dates making it even harder for users to keep track of or resume a conversation not to mention it was also really difficult for them to tell just how long ago was a message sent or received.
1. A cleaner and more modern looking property card design
I cleaned up the design of the property card by removing all nonessential information from the card to greatly reduce visual clutter. I also reprioritized the property information presentation to help users extract useful property information more quickly.
2. Added access to voice/video chat on mobile
Most of the home buyers and sellers we had were mobile users and adding this access greatly improved their mobile user experience.
3. More intuitive msg time stamp
For messages that were sent within 5 mins, it will display just 5 now. For anything between 5 mins to 1 hr, it will display X mins ago. For anything beyond 1 hr to 1 day, it will display X hr ago. For anything beyond a day, the format will change from "Yesterday" to displaying the exact date where the message was sent.
4. Added divider between messages sent on different days
Users can now more easily tell messages that were sent/received on different days.
5. Added the ability to easily send or receive photos and documents
Yes, we have FINALLY included the feature that almost everyone has asked for.
Final design validation
More professional-looking and easier to use than before
Due to project time constraints towards the end of November, I was able to conduct one short round of validation testing involving only 5 participants selected from the round of interviews we had at the beginning of the project.
By asking the participants to go through a full user journey as home buyers, all of the participants claimed that not only does the new UI look cleaner and more professional, they also see themselves using the new messaging system more frequently in the future. In the end, an average usability score of around 80/100 was given to the new messaging by the people we interviewed.
Post implementation result
Massive improvement in key user metrics and also a big drop in the number of transaction closures we would experience during the 6 months after the new version was launched
In the number of home buyers and sellers either actively asking for or agreeing to the usage of alternative communication methods
The percentage of people using alternative methods to talk dropped from the 50% we had before to only 12% now indicating that most of our non-agent users were quite satisfied with the new messaging system.
In the number of agent actively using the messaging system to connect with new home buyers and sellers
The percentage increased from 15% we had before to around 27% after the launch, indicating that more agent users have started to view our messaging system as an effective way of communication.
In the number of agents continuing using the messaging system after starting a working relationship with a home buyer or home seller
The percentage increased from ~25% to ~87% indicating that most agents who connected with a client through the messaging system will continue to use the system for communication afterward.
In the number of real estate transaction closures missed by Nobul (observed & reported by Nobul financial team)
The number of deals missed by us went from low two digits to mid single digit indicating that the improved user engagement obtained by the introduction of the new messaging system was successful in helping the company to better keep track of deals closed through us.
