Real Estate Website

Front End Development | UI / UX

HTML, CSS, JavaScript, Bootstrap, Node.js, EJS
Sketch

tl;dr

Building real estate website which helps users easily browse, buy, or sell houses as well as listing agents to promote properties and provide consultant services. In a team of 6 students at SFSU, I am the front end lead and will be bringing my design perspective into the product as we make implementation decisions. Check out the screenshots of the final website below!

Image description

Setting Up Tools

For frontend, we decide to use Bootstrap (a great Frontend framework for building responsive websites) and EJS (template engine to make dynamic content). As for backend, we use Node.js (JavaScript runtime environment for executing server side code in JavaScript) and Express.js (web framework for Node.js). Lastly, we have MySQL as the relational database management system.

Creating Use Cases

A good product should always start with users in mind. I came up with 5 different use cases to reflect what primary purposes and scenarios would users intend to do when they visit the website.

    The high level breakdown of use cases:
  • Unregisted User
  • Registered User (as a buyer)
  • Registered User (as a seller)
  • Listing Agent
  • Admin

Sketching Logo

My conceptual idea for the logo came from combining the location pin and a birdhouse silhouette.

Image description

Logo Iterations

Using Sketch, I created different color palettes as well as flat/shadowed versions for the logos. We are working on deciding which one to go with to make us more memorable and strongly convey our missions.

Image description

Final Product

Check out the screenshots of the final product. Please feel free to leave any comments and continue to look out for my future projects !

Home Page

Image description

Home Page

Image description

Log In/Sign Up Form

Image description

User Signing Up

Image description

User Signed Up

Image description

Home Page for Registered User

Image description

Listing Agent's Dashboard

Image description

Listing Agent's Dashboard

Image description

Inbox

Image description

Create A Listing

Image description

Create A Listing

Image description

Create A Listing

Image description

Search Page

Image description

Search Page

Image description

Search Page

Image description

Listing Page

Image description

Contact Listing Agent

Image description

Contact Listing Agent

Image description