Real Estate Investing Web App
Objective: A responsive web app that provides property buyers with information on properties of interest.
Context: Real estate investing is a very popular way for people to achieve financial security, however, buyers new to the market may struggle getting started without professional guidance. I designed this web app for a clean, quick, and smart way to provide small-scale property buyers with comprehensive information about properties and access to agents. 
User Flows
I created tasks and user flow diagram to decide what pages I must include in my web app in order for my user persona to achieve their goals.​
User Stories
Task 1: As a user, I want to be able to contact the right people if I am interested in viewing a property, so that I can schedule a viewing.

Task 2: As a user, I want to create a profile containing all my property criteria, so that I am recommended results most relevant to me. 

Task 3: As a user, I want to be able to search and filter properties, so that I can find good matches based on my needs.

Task 4: As a user, I want to be able to save properties I am interested in, so that I can easily revisit them.
Low-fidelity Wireframes
Having my user stories and user flows in mind I created low-fidelity wireframes using pen and paper.
Usability Testing
Changes Implemented
Task 1: Filter Properties so that you can find good matches based on your needs.
Change: Make filter feature accessible on both home and search screen.
During Test: Participant wanted to access filter on home screen as well.
Task 2: Save property that you are interested in, so that you can easily revisit them in your profile.
Change: Save property button on the filters top right of the applied screen not necessary.
During Test: Participant was confused different between the heart favorites and saved properties do not need both.
Task 3: Contact an agent to schedule a viewing of the property you desire to invest in.
Change: Button on send message screen to say Send to agent so they know who they are sending to. Schedule viewing should have tab bar to organize property information.
Task 4: Go to your profile to see your recommended and favorite property 
Change: make the screen have a cleaner look. Remove saved searches just have favorites.
During Test: Participant was able to access profile and see favorite properties but thought saved searches was unnecessary.
Task 3 Button on send message screen changed to "Send to agent. Schedule viewing changed to tab bar.
Task 1 filter feature accessible on both home and search screen.
Task 2 Save property button on the filters top right of the applied screen removed
Task 4 Clean look. Remove saved searches just have favorites.
I conducted in-person usability tests with 4 potential users using InVision for the low-fidelity prototype.
Mobile-first Design Approach
Grid: 12 Columns
Gutter Width: 10px
Column Width: 21px
iPhone 6,7,8
Responsive Layouts
Welcome Screens
Mid-fidelity Wireframes
Home Screen
Schedule Viewing
Mood Boards
I created two distinctive mood boards to present the feelings targeting two different user groups. The first one is has a clean, contemporary modern look with an overall lighter feel, while the second has a modern yet rustic look with darker tones.
I chose to go with the visual direction of the first mood board because it goes more with the branding guidelines to have a clean, clear and simple look.
The lighter shades of blue and green and modern look of the black and white are more inviting and less sophisticated since this app is geared towards new small-scale property buyers.
Mock Ups
Style Guide
Responsive Design 
Loading Screen