PERFECT PROPERTIES is a responsive real estate web app that provides property buyers with information on properties of interest. The app will also connect people with real estate agents to make the process of buying a new home as easy as possible.
User Flows
I created this web app in the course "UI for UX Designers" from CareerFoundry and the focus of the course was on User Interface design. So for this app, a persona had already been created, the design criteria, user stories, and feature requirements were given to me, and I did not need to conduct any surveys or interviews before starting to design. With that being said, I started off by researching other real estate apps, and created user flows to help make my design more user-centered. Click the image below to view the user flows.
Wireframes
After creating the user flows, the next step was to sketch out low fidelity wireframes. Once I had completed them, I made a prototype out of the low fidelity wireframes, conducted user testing, and made revisions as necessary. After that I created mid fidelity wireframes.
Mood Board
After creating low and mid fidelity wireframes, I made a mood board which helped me to communicate a distinct style and visual direction without needing to spend a lot of time on establishing the screen designs.
Style Guide
After I created the mood board, I put together a style guide to help me transition from mid fidelity prototypes to high fidelity prototypes. Click the images below to view the style guide.
Final Mockups
Below are the screens of the final mockups. Click on one of the thumbnails below to view the full size images.
Breakpoints
Once I finished creating the high fidelity wireframes, I versioned a few screens at different break points to show how the design would look on an ipad and desktop/laptop.
Presentation Mockups
Below are the presentation mockups. I created these to help visualize how the project will look on actual devices, how it will crop within devices, and to make sure that the important parts of the design are visible.
Try out the prototype!
https://xd.adobe.com/view/cac89338-215e-4639-770c-bc8d7558b029-bcf9/
Below is a video presentation of the prototype.