Perfect Properties is a responsive web app that provides property buyers with information on properties of interest. The app's minimalistic, yet modern design provides users quick access to recommended listings, property information, and allows them to set their unique search criteria.
Finding the perfect property shouldn't be hard.
I started the project by creating user flows for the user stories provided.
As a user, I want to create a profile containing all my property criteria, so that I am recommended results most relevant to me.
As a user, I want to be able to search and filter properties, so that I can find good matches based on my needs.
As a user, I want access to as much written and visual information as possible about properties I’m interested in, so that I can make an informed decision.
I created a sitemap to help organize the screens/pages of my app better.
Next, I created my low-fidelity wireframes using pen and paper.
Before developing my mid-fidelity wireframes, I tested my paper prototypes and created revised wireframes.
Grid & Spacing
I worked on the grid and spacing so it could help me structure and align the elements on my app better.
I moved forward to develop my mid-fidelity wireframes.
I created 2 moodboards 1) bright shades 2)pastel shades (both of blues and greens). I think the first moodboard can be used to create a more lively app whereas the second moodboard can be used to create an app with a more peaceful and relaxing tone. I chose to go with moodboard one because fonts and colors are more visually appealing and engaging for this app.
After working on the color scheme, imagery, and creating icons from scratch I worked on deciding the gestures and created an animation (sideways scrolling of pictures).
After a few iterations, I finalized my mockups.
Please check out my prototype on the mobile platform.
I created a style guide to maintain consistency in the design and for future reference.