Work       About


Real Estate Platform

Role: UI/UX Designer
Team: Product Manager, Lead Engineer, UX Researcher
Duration: 6 months
Client: Kokodoor
Deliverables
- Stakeholder Research
- Market Research
- User Interviews
- Persona
- User Journey
- Information Hierarchy

- Card Sorting
- Prototype
- Usability Testing

Background

Kokodoor is a technology real estate platform connecting home buyers/sellers with real estate brokers. It helps user to find the best matched brokers by providing objective crowd-sourced reviews and recommendations.

I joined the project as a lead designer to improve user experience and design mobile version of the platform, which was already developed and tested for 2 months by client. It’s an exciting opportunity for us to solve problems such as heavy information load and complex flows for an existing platform.






Stakeholder research and data showed that drop off rate is as high as 76% .


To kickoff the project, stakeholder research was conducted to understand problems and needs on Kokodoor’s original platform. My team and I reviewed each page of the platform and pulled data from Google Analytics to make a full list of requirements and brainstormed product roadmap afterwards.

After prioritizing items on the requirement list, I found that there was a big and urgent problem needed to solve as soon as possible: the search flow. Google Analytics showed us that search flow’s drop off rate reached 76%, which is much higher than the industry benchmark.

To better study users’ behavior pattern, I spent some time on market research, targeting competitors in the same industry and similar platforms in other fields.

Search Flow

Original search flow: 7 steps, broker information displayed afterwards.


Then I interviewed home buyers and sellers how they find and contact brokers on the platform. In original search flow, users need to identify user type and enter search location on home page, and then they will fill out a 5-step survey including a contact form before seeing brokers’ information - 7 steps in total.


After analyzing user journey and Google analytics across steps, I gained insights:

  • 72% of users drop off after filling out the first survey question.
  • Users find it inconvenient to go through the whole process every time they search for a broker. 

Approach: Display broker information after step 1.


To ensure users can review brokers’ information ahead of flow and avoid repetitive survey submissions, I redesigned search flow that brokers’ information will display immediately after users enter search location on home page. User type identification was moved to be part of the survey, which users only fill out after choosing a broker to contact.

Search flow iterarion 1: Users were more satisfied, but still a high drop off rate.


I conducted a usability test to see how the new flow works. Result showed that users were more satisfied with the process. However, drop off rate still doesn’t reach our expectation, and user feedback told us that:

  • Users find the beginning of survey is easy and reasonable, but the later questions are time consuming and needed further explanation.
  • 70% of users think questions of timeline and mortgage status are not related to broker search. They prefer to answer these questions after talking to a broker.

Approach: Remove irrelevant survey questions and reduce 7-step search flow to 4 steps.


To decrease user drop off rate, it’s necessary to simplify search flow and remove indirect steps. After looking at quantitative user feedback and consulting several brokers, I decided to remove survey questions of property type, timeline and mortgage status, which are considered without much to do with broker search. It made search flow from 7 steps to 4 steps.



Search flow iterarion 2: User drop off rate drops 32% and receive positive feedback.


To validate design, another usability test was conducted, and the result showed drop off rate decreased from 76% to 44%, which reaches planned metrics and makes client happy to confirm on the update.


Broker Information Display

Unorganized information was not helpful at all.


Since search flow was refreshed, we targeted broker information display as another redesign focus. I conducted a user interview with 15 users, including home buyers, home sellers and real estate brokers, with age range from 25 to 55. Many users said that original information display was confusing and not very helpful:

  • Users think there is a lot of information, but not organized nor in hierarchy.
  • Users find some information is not meaningful to help to compare brokers.

Use personas and card sorting to redefine information priority.


Personas were created to show what broker information users care and concern the most. According to persona insight, I coordinated a card sorting exercise with 6 targeting users for further investigation on information hierarchy. Exercise result showed that information of:

  • Broker star ranking, years of experience and transition numbers are valued as important by most people. 
  • Self introduction, contact message and detailed reviews are considered “not that important”.

Recreate hierarchy with card design and tabs.


I reorganized information and gave it a new look of display layout. After several concept revisions and team review, we decided to move forward with a new design:

  • Besides broker’s photo and name, star ranking, years of experience and transition numbers serve as the primary focus.
  • 3 sections including contact message, self introduction and detailed reviews are moved into tabs, triggered by selecting a broker. 
  • Information is displayed in a more organized and consistent look.



I used an online eye tracking simulator to check all concept versions, and it indicated that the new design is more effective and consolidated compared to the original one.

Mobile Hierarchy

The same information hierarchy result was used to design mobile version. Since mobile screens are much smaller and I want to keep most font sizes the same across devices for legibility, I categorized information into groups and prioritized them with options to show and hide.


Approach: Prioritize information with collapse/reveal functionality in card design.


Implementing with card design, I organized more influential information in the main card, while the rest information will be shown when user clicks drop down buttons or tabs.

I created a low fidelity wireframe to conduct quick usability test with 5 users to validate assumption. Users’ feedback include:

  • Information card is helpful to compare brokers while scrolling the page.
  • There are too many tabs and layers of information are a little complex.
  • Some text is repetitive.

Approach: Remove collapse functionality and make profile page.


  • Make sure users focus on content without distraction.
  • Optimize space and make content coherent.

Mock-up


Impact 

Going through 6 months of hard work and team effort on this project, we finished updating and relaunched Kokodoor’s platform in September 2019. After a month of testing, we collected Google Analytics data and user feedback on platform performance. Comparing to past data, both client and my team are very happy to see the big progress and read delightful and positive feedback from real users.


Platform
Total Traffic

+68%


Contact Form
Submit Rate

+52%


Mobile
Traffic  

+67%


Search Flow
Drop Off Rate

-32%



“  

Information is clear and helpful, and I can always use tags to read details! - Jason, Home Seller

“  

It’s easy to find and contact brokers, compared to other real estate searching sites. - Ian, Home Buyer


Takeaway

I enjoy redesigning and improving an existing platform. It involved a lot of meetings, quick turnarounds and iterations with user feedback.

One of the most valuable things I have learned: conducting quick usability test to validate design assumptions is very helpful to find the north star and consolidate work for later steps.

After collaborating with my team for 6 months, Kokodoor is very happy with platform performance and decided to continue to work with us on future features design and marketing campaigns.


Mark