My Design Process - Real Estate Agent Landing Page

Real Estate Agent Landing Page on Behance

After I finished my latest passion project for my portfolio (Pawer Cat Rescue Mobile App), which helped me practice my user research, wireframing, prototyping, UI design and testing skills, I decided to start a project which mainly focuses on UI design.

I had some exciting ideas, but in the end I decided to go with this one: design a landing page for a character from one of my favourite TV shows, Phil Dunphy from Modern Family. If you watched the show, you know that Phil is a real estate agent working together with two other agents, but starts to work on his own later in the show.

The reason why I decided to do this project is that I wanted to create something a little more serious and practice putting together a site for a company or agency.

Those who know the show know that Phil is a middle aged gentleman living and working in LA as a real estate agent. He is always very professional and takes his job very seriously, even though outside of work he is a very funny, almost childish person. He helps the client sell a home and also works as a buyer’s agent. He is mainly seen working with luxurious houses, big family homes and his client varies from young families to older couples or even celebrities.

Based on my knowledge and observations on the show, I created a brief:

Client: Phil Dunphy, real estate agent from LA, California

Primary objectives: To create a homepage for potential clients to learn more about Phil, book appointment or get in touch with him.

Target audience: Housebuyers or sellers in their 30s-60s with good financial background. Could be families, couples or people living on their own.

Research Agent

To begin, I went to google map and google pictures to look up houses in LA and California in general, so I can get the feeling of it. Seeing some houses that the clients could possibly buy or sell helped me imagining their lifestyle and I got some idea about what they might like to see on their realtor’s website. I imagined that they would like to see Phil’s website to be something simple, sophisticated and easy to understand and navigate on. So no illustrations or animations.

With this in mind, I went to Pinterest to gather some inspiration. I love Pinterest for getting ideas for basicly everything. I often browse here in my free time even if there is nothing specific I am searching for. I have a board named „UI Design Ideas” and I save everything UI related there. So I went there searching for website designs for real estate agencies, realtors or any personal websites just to see ideas to introduce Phil.

My UI Design board on Pinterest

Sketching time

After I saved 10-15 pins I already had some ideas in mind, so I opened up Invision Freehand to sketch them up. I only recently started using Freehand, and I usually prefer sketching on paper, but Freehand lets me draw nice circles, lines or rectagles and also lets me edit them (it would be even better to have a tablet to draw with, but I currently only have my mouse).

I usually prefer sketching on paper, but Freehand lets me draw nice circles, lines or rectagles and also lets me edit them

So in Freehand I draw everything I liked in the websites I saved on Pinterest (and also Behance). I also checked real, working sites of real estate agents to see actual content. With analysing some realtor sites, I started to see what features Phil’s site will need: a hero image, CTA to book an appointment, an about section, information for buyers and for sellers (separate pages), testimonials and a contact me form.

Colors, Typography and Logo

I gathered the ideas I liked and created a mid-fidelity wireframe. I choose Adobe XD as my design tool for this project, so I used that for the wireframe as well. I like to create the wireframe with the software I am going to use for the final design, because I can easily turn the wireframe to the finished design.

After I finished the gray-white wireframe I started to think about the colors and pictures. Considering Phil’s character in the show, he is a very cheerful person so I definitely wanted to use some fun colors, but still keep the page on the professional side. The first color I thought of was green, because it is a fun, happy color but also very calming and symbolizes renewal which is an important part of buying or selling a house.

I tried some color combinations with the color green, but after I failed a couple of times, I decided to go to a very useful Instagram account called Colour.cafe. There are hundreds of color combinations and after a little browsing I found a nice green-light yellow combination which I really liked.

In the end I decided to go with a dark shade of green, a light green and a gold-like yellowish color. I found that these colors look luxurious enough for the wealthy customers of Phil, but the site still looks calming and trustworthy.

In the meantime I wanted to try creating a basic logo for Phil. I have to say that I have no experience in creating logos at all, so I wanted to keep is simple. After 20-30 tries, this is the thing I came up with:

After creating some sketches, I chose this simple logo, and after some changes, the finished design is the one in the bottom-right corner.

After creating the logo, I wanted the typography to be something similar. A simple sans-serif font. For some help, I went to a site called Fonts in use. This site is great because it shows how each fonts works in actual use, as the name suggests. After some brawsing I decided to use Josefin Sans, because it is modern, simple but still a bit playful (as Phil himself).

So after I had the colors and gathered some stock photos from Unsplash, I started to play with them in XD. I wanted to create a simple, minimalist style with some geometrical shape. This is the style I originally very much like so I had fun with this.

As for the layout of the website, I tried to put all the sections in a logical order, so first start with a hero image with a pretty house and Phil’s photo to show the client who they are going to work with. Right below this, there is a CTA to book an appointment with Phil, where the button would lead to a new page to f(ph)ill a form.

Below this, there are two buttons, one for clients wanting to sell a house, the other is for house buyers. These would lead to a page with all the useful information about the process.

Scrolling down, there are a couple of words about Phil Dunphy, together with a photo of him. Again, a CTA offers the user to learn a little more about him.

Below that, I chose 3 of Phil’s best skills to show the client why is he the best choice. It is important to show some feedback from clients who worked with Phil in the past. as well. Their opinion can help new clients to click on that Contact me button!

To the buttom of the page, I put a Contact me form, and a simple footer.

Overall, I am satisfied with the site (for now), but probably will think differently when I come back to it a few days later. However I still think it was a nice experience as I tried to pay more attention to choosing colors and typography, and I really enjoyed playing with geometrical shapes this time.

You can see my work on my Behance profile here.