Dwellr

Framing the Problem

Reinventing the Property Search - Zoopla

How might we gamify a personalised property search to make it more fun, interactive, and efficient?

Idea Explanation

Dwellr - The housing market's Tindr because finding a home is like finding a relationship. Find your perfect dwelling!

The aim is to make whittling down listings more interesting and less overwhelming than just a list. We have two interactions to make the experience more interesting. The more properties you swipe on, the better the app gets at suggesting properties which are right for you.

1. The well known swipe left or right on properties that take your fancy

   1. Look appealing

   2. Meet very basic preferences - chosen on log on and prompted to update if we're not showing you the right thing.

2. Every 5-10 houses, an interactive lifestyle question pops up to help narrow down which houses would be a good fit, some examples based on the following:

   • Transportation links

   • Schools

   • Green spaces

   • Restaurants / Nightlife

   • Sports and Leisure

Implementation

Stuck to the technologies we all use at work so that we could better help each other.

Frontend

• React, Vite, React Hook Form, Chakra UI, Framer Motion, React Query (for talking to the backend once that is ready).

  • Used Vite for speedy, simple development.

  • Should be easy to build and deploy.

• Use colours from Zoopla's website and modified the Chakra UI theme to use these.

• Focused on creating an interactive demo frontend to communicate our ideas.

  • Main page is the property swiper, built with Framer Motion.

  • The property card could in future have a carousel of the images or have the best image picked.

Backend

• Docker Container to deploy the database and the Python to create rest APIs

• This was so it can easily be deployed so that other people could develop the backend

• Have the Zoopla property database and have a search algorithm that will find properties based on the locations

• Create users and preferences table so that a given user has been persisted preferences

Data

• Decided a basic structure that would best feed the backend requirements

  • Listings, Customers, Preference filters, Pop Up Questions

• Built the database with Python code to convert csv files to SQL code

Design

• Any proof of concepts for future changes and features were designed in Figma.

Logo development

Challenges

What did you struggle with? How did you overcome it?

• Implementing the property swipe-able cards in the limited timeframe as this required animation, being able to actually swipe, and reading from a long list.

  • Modified a Framer Motion example to save time.

  • Only render a property's image when it is the one ready to swipe. In a real implementation, the whole list wouldn't be loaded upfront.

  • Focusing on making the demo work, rather than pretty perfect code!

• The data side has never done database creation itself before so had to find a workaround via Python

• We were conscious of time at the start of the project so did not do the level of data quality review we would normally do o the listing file received

• Struggled initially to get the database changes reflected on other peoples machines so had to implement a quick migration function so that the data could be replicated on all the screens

Accomplishments

We learnt we can start a project from scratch and that we don't need to be perfect in all skills to make something that works. We figured out each other strengths and ways of working early but didn't create silos so the whole team got the opportunity to try new skills. We also were really open to hearing each others ideas and working in a collaborative way.

The web app UI is clean and we've thought in detail about how it would be expanded and improved, as well as modified for different sized screens and hardware. We've also built a working API and database which can be accessed to store and persist users and their preferences, as well as thinking again about how they can be expanded and improved.

Next Steps

• Link in estate agent information so customers can book viewings from their wish list

• Introduce a session share link so if yourself and your partner or roommates all swipe right on the same property

  • it gets prioritised in the wish list

  • their profile pic can be seen next to it

• An avatar that can walk around the floor plan, which can be personalised with more interaction and achievements.

• Being able to drag and drop furniture in to see if it will fit in rooms, as well as the ability to see if a sofa of your colour and style would fit in the room design of your choice.

• If the user doesn't want to swipe on properties, they can take their avatar on a walk around a neighbourhood they are interested in. Similar to Sims, they can pretend to live in a house and do normal things like that.

• Offer rmnionsecommendations to prepare the customer for buying a property. What monthly payments look like, how to save for a deposit, government schemes to join.

Designs we'd love to build - given unlimited time and funding!