Usually, when you want to find a product on the internet, you face complex forms with many filters. Let’s take the example of Zillow, the real-estate marketplace website. This is how their interface looks:
It seems pretty simple, which is great. Things become a little complicated when we click on “more“ and see extended form
This still doesn’t look complicated. In my opinion, Zillow has a great UI/UX design.
Many users find filling out multiple filters frustrating and time-consuming. My idea for this article is to provide an option to the user to have it much simpler using AI. Instead of all these fields, we can have only one, where the user can provide a free text, and all those parameters can be extracted from this field. The design for this can look like this:
This is a good alternative for the complex forms. Yes, the user still needs to write all the details to provide the best match, but it will be much faster than selecting all the fields in the forms.
Technical part
Implementing an AI algorithm can be a challenge and can cost some time/money. But what if we keep the old structure of existing search functionality and just parse the free text into filter fields?
I got this challenge for one of my clients, and I am providing you with an adapted version of using OpenAI to do that job:
openai.chat.completions.create({
model: "gpt-4-turbo",
messages: [
{
role: "system",
content: `You are a helpful assistant that parses real-estate related text into a strict JSON format. JSON format should be just a simple string without any addition symbols, for example { "property_type": ["house"] }`
},
{
role: "user",
content: `Parse the following real-estate related text into strict JSON format with the following structure:
{
"location": "Extract the mentioned city, neighborhood, or region. Set empty string if none found.",
"price_range": "Extract the mentioned price range or budget. Return as an object {min: number, max: number}. Set null if none found.",
"property_type": "Extract the type of property (e.g., apartment, house, studio, condo). Set empty array if none found.",
"bedrooms": "Extract the number of bedrooms. Set null if none found.",
"bathrooms": "Extract the number of bathrooms. Set null if none found.",
"amenities": "Extract key amenities mentioned (e.g., parking, balcony, pool, pet-friendly). Set empty array if none found.",
"keywords": "Extract any additional keywords relevant to the real estate context. Set empty array if none found."
}
Text: "${userFreeTextInput}"`
}
],
max_tokens: 500
});
In this example, I am using the gpt-4-turbo model, which will return strict JSON that I can use as filters. For an MVP, using OpenAI’s API is ideal. However, for a production setting with high traffic, a fine-tuned or self-hosted model may be more cost-effective in the long run. The result of the AI request can be configured to have the same as the user can select in traditional filters UI (first image). We can also improve that by adding exceptions, for example, when the user types something like this
Looking for a 2-bedroom apartment in Texas under $2,500/month, pet-friendly, with a balcony and parking.
I am not considering Austin or Dallas.
To exclude specific locations, we modify the JSON structure to include an except_location
key. The AI should extract places users don’t want and store them in an array.
{
"except_location": "Extract the cities, neighborhoods, or regions the user wants to exclude. Set empty array if none found.",
}
And here we go with obvious benefits by using AI. The user can even ask to exclude all big cities from the list, and the AI can find all big cities in Texas and does the job.
Instead of traditional forms, we can give users the possibility to use a chat, the next level of communication with services. Chat can ask additional questions in case some required information for searching is not found in the free text.
This is similar to real communication with the agent when users come to the office of the real-estate agency. Having more natural interaction improves user experience.
Since user preferences are different, I recommend introducing this as a beta option and allowing users to choose their preferred method. In our case, we will run an A/B test comparing AI-powered search against traditional filters. Metrics like time-to-search, conversion rate, and user satisfaction scores will determine which method performs better. In my opinion, in the future, as more people will use AI Chats, they will become more familiar with those types of interfaces and will prefer this option.
The main benefit of using this approach is that we can simply add voice recognition to the input, and this will look very similar to talking to a real agent. Search results can be easily extended by adding more details to the filters.
By collecting anonymized user queries, we can analyze patterns and fine-tune a model to provide better recommendations over time.
I hope this article will help your business to provide your customers with a modern idea of communication.