Website of UAE real estate rental agency
About the project
It’s nice when customers come back. It is even more pleasant to realize that Webnauts solutions move the business forward and motivate clients to improve their product together with us.
We are talking about the Sezavi luxury real estate project. The result of our first cooperation was a simple and attractive website on WordPress.
Read more:
Website of a Real Estate Agency in the UAE
This time the client was ready for an uncompromising solution, and expected from our team an impressive site for luxury segment of luxury real estate rentals in the UAE and specifically Dubai with an easily customizable admin panel. In its structure, the site was to look like a lending site, but with a separate page for catalog of properties.
We solved this problem in several steps:
- projected a unique and aesthetically pleasing design, targeting clients with a high level of affordability;
- provided an immersive user experience through animations;
- created a finely customized admin panel with a unique feature;
- optimized the site for different types of devices;
- filled the prepared pages with quality content.
What guided us and what tools we used to realize the project, read more in our case study.
Design
Home page
We paid special attention to the first screen with its animations. It must be said that it underwent a great number of variations. According to our designer, the final version of the first screen was preceded by layout variants called “Final”, “Final Final” and “Well definitely final”.
Here are the variants of the first screen at the beginning of the work:
And this is what the final animated version of it looks like:
The design of the first screen is not simple, but still we managed to achieve lightness and airiness with the help of white color. The feeling of abundance of free space is added by competently structured information about the agency, Dubai surroundings and luxury vacation opportunities in the form of a smooth slideshow.
We achieved the perfect balance between visibility and information: typography, photos and other design elements seem to float in a weightless visual environment. All of this gives the impression of elegance and sophistication, just as the client requested:
Pages of villas and apartments
User friendliness and site conversion is facilitated by a button to go to the property listing. It is fixed together with the top menu of the site and is always available when scrolling down the page:
We decided to move away from the usual product card with a brief description and design each villa as a separate page. When a visitor gets on it, it’s like traveling through the future apartments. Bright photos and short descriptions familiarize with all the necessary information in an interesting and convenient way.
At the end of the description visitors are invited to contact the manager:
Separate page with offers for the client
When a client contacts the company with a request to find suitable accommodation options for him, the manager can easily generate a selection of offers for him directly in the admin area of the site:
As a result, the client receives an individual link to the selection of apartments in the form of a separate web page:
Creating a customized villa selection page in 1 minute
Let’s imagine that Sezavi manager received a request from a client Yulia for a selection of villas in Palm Jumeirah with a pool, 2 garages, 4 bedrooms and bathrooms. Thanks to the built-in builder you can literally in a minute create a page with offers within a given style of the site.
Individual approach and efficiency of managers pleasantly surprise any client. And in the highly competitive real state environment they play a decisive role: while other managers are just starting to process the order, Sezavi’s client is already looking through the personalized offer.
Let’s see how the process of forming a personalized selection goes:
Layout and animation
Only serious technology can turn elegant design solutions into a soft delightful presentation:
- Nuxt 3 – the framework with which the project was written;
- useFetch – technology in Nuxt 3 for working with the backend of the site;
- Pinia – library for working with data storage.
Individual interactive elements animated with such tools add brightness and dynamism to the pages:
- Splide – library for creating spectacular sliders;
- FullPage.js – library for creating on-screen scrolling;
- GSAP – library for creating animations.
Administration
The following tools were used in the development of the server part of the site to realize all the intended functions:
- PHP 8.2 programming language;
- PHP framework using Laravel 10 MVC architectural model;
- Docker technology to run the site on the server.
Our developers have successfully realized several unique admin development challenges, i.e.:
- Implemented the function of individual selection of villas and apartments. Now managers can create a personalized page with a separate link in a matter of minutes to meet the buyer’s specific needs:
- Integrated the site with the client CRM so that requests go straight to the administrator.
- Set up Google reviews uploading:
This is how testimonials are displayed on the site:
Developed an interactive map displaying each object by its own coordinates:
Automated the conversion of all images as they are uploaded into the webp format, which is easy and acceptable for Google, which helped speed up the loading of pages with a large number of photos.
Provided wide opportunities for self-editing content.
Content
Once the admin panel was fully functional, the content department started filling the pages, i.e.:
- generation and translation of object descriptions,
- uploading photos of apartments and villas,
- preparing catchy headlines and inspirational texts for the homepage, etc.
As a result, the client received a fully ready-to-launch website, which is easy and simple to manage independently by filling in the required fields: adding new objects, editing existing content and creating customized pages for each client.
Adaptability
We paid a lot of attention to the mobile version of the site, as real estate rentals in the UAE are often done from a phone. Taking into account the peculiarities of the small touch screen of smartphones and tablets, we managed to keep the general concept: to organically place and animate all the elements.
To be honest, we had to sweat a lot over the playback of animations and screen scrolling. But this result was worth the developer’s efforts: the mobile version is not worse than the desktop version in the efficiency and smoothness of interactions.
Conclusions
As a result of cooperation between designers, content managers and developers, we got a refined and beautiful product with a simple administration and easy management.
Today, the site not only provides users with a list of its offers. Thanks to a convenient feedback form, it collects information from visitors like a full-fledged lending site:
Comments