Project Background

Currently realtors are paying designers to create slideshow / e-brochures that display a better perspective of what it is like to live in the home. While this is a great idea, it can cost $500 per brochure as it is created by a human.

DEV Sprint

Form -> Website MVP

I set out to create an application with the MEAN stack to prove the MVP.
The specifications for the application must support inputting listing details, outputting a site, public & private page routes.
  • Why might someone use this application?
  • What are the minimum features needed?
  • What are the competitors doing?

Design Process

I used the well known double diamond process.
Since I was the developer I could anticipate the quickiest UI to create and minimize iterations during the implementation.

Understanding the Problem

I conducted research to find out more about the problems facing realtors, current tools to solve this problem and other apps that home buyers use.
  • Apps like MLS show listing details, home photos and a brief description
  • Details of nearby ammenities like groceries, restaurants, sports centers, daycare etc. are not included
  • Lack of an experience when looking for homes and fragmented tools

User Analysis

Realtors & Marketing Staff
“I pay about $500 per brochure to the designer. I think it could be easily automated, I give the same type of details everytime”
  • Already spending $$$ on e-brochures created by designers
  • Requires tech knowledge most realtors don’t have (operating design software, publishing to web)
  • Similar details are inputted each time - address, bed, bath, amenities nearby etc.

Product Vision

From these findings I outlined some key goals for the application to accomplish.
  • Automate brochure & website design to save expensive human time.
  • Simplify website creation process as much as possible - no fancy design tools or layout options
  • Clearly defined site sections - nature nearby, virtual tour, floorplans etc.

Defining the MVP

From these goals I outlined specific features for the application.
  • Input details about the listing: address, photos, amenities, page sections
  • View details as a one-page website.
  • Share website link as a QR-code or create PDF feature sheet.

Hifi Mockups

From these wireframes I prototyped the screens required.
  • Create user
  • Login user
  • Upload listing details
  • View all active listings
  • View listing website
  • Share unique QR-code and link


MVP Implementation

I began with a kanban board categorized by implementation area.
This allowed me to create features with a fullstack approach: writing the necessary code to service requests, display, and store data.
Angular Frontend & UI
Node Backend Server & Sevice routes
Mongo & Mongoose
DevOps & Production features

Project Takeaways

  • We are often lured by attractive, eye-catching designs. But, it is important to always remember why a design is being created.
  • The primary goal is to understand the user, their problems and then come up with a design that delights them with a solved problem, everything else is secondary.

Realtor Tool

Project Summary

This app was a great way to refresh on market analysis, UI/UX, frontend & backend development.
I practiced collborating with real users by reaching out to realtors and marketing associates in my network.
Logo, branding and design system
UX and business case
Frontend functionality and UI.
Backend routes to service app functionality