Web app for real estate

A web application for people to buy, rent, and sell properties online in Spain, Panama, and Costa Rica.
image

Challenge

The client turned to IntexSoft to create a web application that allows carrying out real estate operations online and directly with the homeowner. We developed an MVP of the service, which was successfully tested and approved by stakeholders. 

 

Shortly after, the client requested scaling the app: adding new functionality and redesign. So our task was to add the ability to sell property with a real estate agent (new user role), integrate Google calendar, and organically update the design of the app сonsidering new features.

Technologies

Team Composition

  • UX/UI Designer

  • Project Manager

  • Business Analyst

  • 9 Developers

  • 2 QA Engineers

14

IT experts

7

microservices

12

month project duration

Tech Solution

The developed web application has a microservice architecture. All microservices are deployed in a Docker container. When the load increases, it’s possible to easily switch to Kubernetes by launching several instances of loaded microservices to improve performance.

 

The application uses the following microservices:

 

  • API-gateway: entry point to the backend of the application; to reduce the number of requests and limit the return of data to the end-user, the GraphQL query language is used.

 

  • User-microservice: designed to work with users, appointments, integration with Google Calendar.

 

  • Product-microservice: designed to work with ads (CRUD – create, read, update, delete); ElasticSearch is used to search the application quickly.

 

  • Billing-microservice: integration of the web application with the Stripe electronic payment processing system.

 

  • Cloud-microservice: used for saving images and ads to AWS S3 (or Amazon S3) cloud object storage and adding watermarks.

 

  • Notification-microservice: serves for users notification – mail service and Twilio system for SMS notifications.

 

  • Common-be: contains functionality that is used across all backend microservices.

 

For the frontend of the application, the Next.js framework was used. This is a high-performance framework that increases the efficiency of SEO optimization.

 

To ensure data security, our team set up the system to check the user’s role before giving access to the information. The database and all configuration parameters of the application are stored on the server where the web application is deployed, making it impossible to get external direct access to information.

UX/UI Design

Based on the existing design (logo and corporate colors) we had to redesign a web application considering the usability gaps and upcoming functionality extension. Our designers suggested the UX audit. The client agreed on the UX audit of the Home Page and Registration flow.

 

UX Audit & Redesign

 

On the first stage we discussed and described in detail the goals and profits of the audit and agreed the estimate with the customer. Our team suggested working on the following activities: Discover, Define, UX & Visual design updates.

 

The team actively discussed the audit results and identified the main criteria important for assessing, expanding, and popularizing the service.

 

  1. Discovery stage
    Within this stage the team performed general analysis of the web app, heuristic evaluation, and components expertise.
  2. Definition stage
    On this stage we defined the criticality extent of UX gaps, prioritized them and provided the client with recommendations.
  3. UX & Visual design updates
    This stage included implementation of recommendations within the development process and next stages of architecturing.

 

To find the optimal solution for complex screens with a large amount of information, the specialists designed several screen options with different amounts of visible and hidden content. For such pages, designers additionally were working out intermediate versions for various resolutions of mobile devices.

 

When developing registration flow for a user, or for property publishing, we got rid of big and long pages with input fields, checkboxes, and dropouts, in favor of instantly and automatically changing screens. They contain simple questions and large buttons to select the desired option. Focusing on one question and interacting with large interface elements makes it easier to fill in monotonous registration forms and reduces the error rate.

 

Supplementary Researches

 

In the course of the redesign process, our team conducted competitors research: analyzed local and regional real estate websites, defined their strengths and weaknesses to prevent typical mistakes, and to find something to stand out with.

 

Based on the analytics provided by the customer the team identified the peculiarities of the target audience: for example, the fact that property is sold or leased more often by 55+ year-old users, and it’s sold to or rented by 25+ year-old users. This data served as a basis for the development of a simple interface clear for different age groups.

 

”Mobile-First” Approach

 

Based on Google Analytics’ data we identified that 72% of visitors use the web application on their smartphones. That is why we followed the Mobile First approach – a development methodology where the optimization of the mobile version is critical. The detailed property descriptions had to be optimized for mobile versions. It was vital to meet the balance between big volumes of information, user convenience, and limited space of the mobile screen.

 

While redesigning, the specialists worked on the images optimization, since they are a large array of data for the service. This helped to improve the page’s loading speed.

 

New Functionality

 

While redesigning, the customer requested adding a new feature – the ability to sell property through a real estate agent.

 

The team needed to think about how to organically introduce interaction scenarios. With a new user role, there was a need for such functions as registration of a realtor in the app, advanced search for a realtor by company, location, or name.

 

Separately, it was necessary to establish communication between the property owner and the agent by phone, e-mail, and WhatsApp. We have worked out the scenario in such a way that the agent can offer his services to the property owner, and vice versa, when the owner can invite a realtor to cooperate. Also in the application, it’s possible to sign a contract online.

Methodology & Transparency

The project is carried out following the Agile methodology with two-week sprints. The team performs sprint planning which is agreed with the client. IntexSoft specialists are always in touch to resolve urgent issues.

 

The client has access to the Jira project, where they can track the progress and the status of ongoing and planned tasks. Also, the customer has access to the project’s Confluence to review and confirm the project documentation.

 

Access to the client’s services is provided by the client personally and passed to the team members by the project manager.

Key Features

  • User roles

    3 roles: homeowner (property owner), client, realtor, personal accounts with different capabilities depending on the role

  • In-app communication and notifications

    the ability to book a visit in one click, confirmation notifications and synchronization with Google calendar; opportunity to contact the realtor by phone, email or WhatsApp; signing a contract online

  • Property search & overview

    search filters (by location, property type, rooms, price), overview of real estate details and ability to share them via email, link, and WhatsApp, favorites section

  • Payments

    currency choice and payments within the system

  • Multilingualism

    English and Spanish languages are available

  • Other

    statistics on concluded deals, response rate and conversion in the personal account of realtors, statistics of visits for real estate owners, integration with Google Maps

Need a similar app? We can help!

Drop us a line