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.
2-week DEV SPRINT
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
