Time period
1 month
platform
Desktop & mobile
Project
Framer web developement
Overview
Overview
The goal of this project was to create an interactive and minimal website for real estate agencies. I wanted to give the website a clean and modern look which matches the brand identity of the client. Ultimately, the design reflects our commitment to delivering top-notch service.
Problem
Problem #1
Bad market positioning
Since most real estate companies' landing sites don't effectively express their commitment to quality, they mostly fail in conveying it. In order to demonstrate their expertise in modern architecture, companies that specialize in this field must provide modern flair to their landing page.
Problem #2
Establishing trust with potential customers
It can be difficult to gain clients' trust when a website uses poor design language all over it. If someone were to hire a business to build them a minimalist home, they would eventually reject that company after visiting a website with mediocre designs, out-of-date imagery, and a poor user experience.
goals
Increase Conversion Rate
The primary goal of this landing page is to convert visitors into possible leads. One way to do this is by establishing trust with the visitors.
Establish a good design language
Using eye-catching fonts, colors, images, and other visual elements to create a modern design language that communicates to customers that our business doesn't cut corners on quality.
Interactive and friendly experience
Make sure users have an incredible experience because they will likely remember the impression you left on them.
user persona
Lets understand who are our ideal users are and what do they usually do.
We focused on identifying what is the job that our customers do and how they can use our product to enhance productivity.
USER 1- FIRST TIME BUYERS
A hardworking person who has saved enough money to begin building their dream home and lead an ideal life.
job-to-be-done
I need a friendly service that will help me with all the necessary preparations and information during construction.
USER 2- REAL ESTATE INVESTORS
investors who intend to make investments in the future for returns.
job-to-be-done
I should diversify my investments in my portfolio. In order to maximize my financial returns, I would want the assistance of a real estate expert.
USER 3- COMMERCIAL PROPERTY OWNERS
Individual or group who buy properties and rent them to other people
job-to-be-done
In order to attract renters, I want to build well-furnished and established houses.
Design process
Market Research
What are the necessary and expected sections in a real estate landing page? is a question I answered throughout my market analysis of different real estate agencies. looked at a number of templates in this subject to obtain more ideas. I used chatGPT to obtain further information.
Creating Mood board
The majority of the mood board was assembled from real websites and templates that were carefully considered during the creation process, minimizing the possibility of poor design decisions.
Design System
developed a design system that complemented the modern look I was aiming for. I created an elegant impression by using a fashionable and modern font.
Wireframing
Designed a lo-fi design to articulate my design decisions.
High-Fidelity Design
once I had an overall idea of the design I wanted for this website. The moment had come to create this website. I was able to design from scratch and even construct complex components with FIGMA's expertise.
Prototype
developed a few microinteractions for certain elements and prototyped the website to see how it will appear.
Development using Figma-to-framer
to create a working website using this design. Using figma-to-framer plugin, I was able to transfer my prebuilt auto-layouted frames from Figma to Framer, thanks to the no-code tool Framer.
Making the design responsive
after every section had been brought into Framer. I began to work on making the website more responsive. enabling cross-platform accessibility. Using important responsive design techniques and the Framer breakpoint feature, I was able to deliver a seamless experience on all devices.
final designs
Full view of the website
next project
