Perfect Properties
My role: UI Design
Tools used: Sketch, InVision, Flinto
Overview
Perfect Properties is a web app that is designed for people who want to buy property as an investment. It should be designed for users to quickly browse properties and find out basic information to help them decide if they are interested in the property before making too much of a time commitment! Based on the User Personas for the project, the users are educated and tech friendly and want to be able to use a product like this on the go.
The 5ws from the project brief below helped me get started.
Who: This web app is made primarily for new, small-scale property buyers who are looking to invest for additional income or financial security.
What: This will be a user-friendly, responsive web app containing a database of available residential properties and land, and comprehensive information on each listing.
When: Buyers will use this tool when conducting property searches, and making a decision about where to invest.
Where: Buyers will use this tool at home or on the go. Users can search for properties anywhere, as long as they’re logged in on a device.
Why: Unseasoned buyers need access to reliable, uncomplicated information about their potential property investments. Buyers get a feel for a place by viewing comprehensive information about the property and its neighborhood before spending time on-site.
Why Perfect Properties?
As a UX Designer, I choose Perfect Properties as my project for my UI Specialization of the CareerFoundry Course because it lends itself so well to responsive design. It gave me the challenge of designing for other devices other than mobile!
Initial Design
Using Sketch, I began creating low fidelity wireframes and created a few different flows for the mobile version of Perfect Properties. The limited screen size made me realize the need for an additional filters page for the mobile web app.
Mood Board
I created a couple of mood boards for perfect properties and ended up following the visual direction similar to the mood board below. My goal was that the visual design of Perfect Properties would be clean and professional with a few pops of color.
Bringing Perfect Properties to Life
I selected Typography for Perfect Properties and applied my selected color palette. Additionally I designed a logo and some basic iconography (general and home icons shown in style guide below). My biggest challenge was creating a visually consistent set of icons. However, once my set of icons was in a good place I could tell how much those little details improve the look and feel of Perfect Properties!
Finalized Mobile Designs shown below...
Responsive Design
With my mobile wireframes completed I began the task of adapting them to tablet and desktop sizes. Shown below are my designs for the home screen with the grid applied.
Final Mockups
I enjoyed learning to present my mockups in a dynamic way! The image below is from SmartMockups. The Angle plugin for sketch was also a huge help during this process.
Retrospective
Since this was my first UI project I wanted to stick to the basics to make sure my visual design skills improved as a whole. Although my design is very simple I think it is effective at not distracting from the purpose of the app (to allow users to search for properties and gather information), while still being visually appealing! I am proud of the result.
I learned that a mood-board doesn't have to be a definitive choice of color palette, text etc-- rather it's a brainstorm of inspiration that serves as a starting point for visual design! I look forward to further projects that will further challenge me and help me develop my own unique visual design style.
View my prototype here.