
99.co has been running its business for a decade in Singapore by enabling buyers, renters, and owners to search property listings and access the latest transaction data. Since 2016, I began helping the company build nine different data products to assist agents in researching data. We decided to unify these nine different informative products into a single and cohesive experience, creating a powerful real estate pitching tool
We started by interviewing 10 different agents who were the most active users of our data products to gather their insights and observe their daily workflow in researching data and pitching to clients. We set up a camera to capture how they operated their systems and provided them with a property buyer scenario. The agents walked us through how they used different apps and features to complete their tasks.
After consolidated all the user feedback and observation, I then mapping the core features and function to a product flow and defined the “aha-moment”
Putting the feature into mockup for presenting the high level product vision. Here are few major screens
Given the complexity of the user experience, it was unlikely that it could be adequately tested with a Figma prototype. To make the experience more realistic, we decided to build a beta version for usability testing. This also gave the engineering team time to start the foundational work and prepare the necessary data. After the beta version was prepared, I scheduled usability testing with 10 users to observe their interactions and gather feedback.
Reminding myself - Presentation! Presentation! Presentation! This is the core value of this tool. We need to balance researching the data with presenting it effectively, ensuring strong visual cues, clear information hierarchy, and readability.
After the usability findings, we further refined the UX and UI. Here are some of the changes:
Before: As we learned from the agents, they need more space to display the most important data. The side panel was taking up about most of the space.
After: Considering the side panel are second-tier information, so I moved the side panel to the top left corner and collapsed it. This change freed up space and made the second-tier information less distracting.
Before: The information card was placed on both the side panel and the map, leading to redundancy and taking up too much space on the left-hand side. Additionally, the data presented on the map cards lacked clarity and did not provide a clear reading hierarchy or focus.
After: To improve readability and prevent users from jumping between different sections to find related data, I moved the cards from the side panel directly onto the map. This change also allowed us to present more relevant real estate data on the cards themselves. Additionally, we increased the font size to highlight the important data that agents want to emphasise.
Before: The map appeared very empty and took up 3/4 of the space without displaying any information. We missed a significant opportunity to populate the data.
After: We combined the table view with the map, giving users the flexibility to switch between full map view, split view, and full table view. By adding the table view, we can better present data on nearby properties and aggregated data from nearby districts. This is considered a new feature, as the data can now also be pinned on the map.
New Feature: Spotlight Mode - Allows users to spotlight information either on the map or on the table.
New Feature: Given the improvements to the overall map and table experience, we enabled users to pinpoint nearby stations, schools, and clinics. These are the most important factors for buyers when considering a property.
Before we started, as a product manager and designer, I recognized the limited resources available to our team. There were only four of us: one backend engineer, one iOS mobile engineer, one data operations specialist, and myself. Despite running numerous grooming sessions with prototypes and estimating the scope of each feature, we still ended up overrunning by two months. This was mainly because we needed to thoroughly test all the datasets we were presenting to agents and their clients. We had to take an extra month to fix the data and complete QA, which cost us time and caused us to lose momentum with our beta users.
In future projects, we should factor in time for testing and learning into our planning, and consider breaking the product into smaller phases to address each feature incrementally.
What I mean is that I typically run usability testing with Figma prototypes (clickable) and let users navigate through them. However, given the nature of this tool and this user group, there were challenges:
Therefore, investing time to build a functional beta version can be more effective for real user testing and evaluating the presentation flow. Agents are a unique user group, and putting myself in their shoes helps me understand their needs better. Even if you alert them that the data is just a sample, they still need to interact with realistic data to assess the tool properly. The core user behavior observed is that presenting accurate data, along with clear labeling and explanations, is always a top priority for this tool.