A Conceptual Real Estate Web Application



Project Overview





Perfect Properties is a web application created for users entering into the world of investment real estate. Made for the everyday investor on the go, Perfect Properties is a responsive application with full functionality on both mobile and large devices.


The primarily features of the app are to allow users to save and return to favorite listings, compare properties, provide extensive information on each property listing, and to filter searches by various criteria.


My roles for this project focused on the design of the user interface as the app requirements, persona, and user stories were provided. Tools used for the project include:

  • Balsamiq Wireframing
  • Sketch with Craft, Angle, and Marvel Plug-ins
  • Affinity Designer
  • Affinity Photo


Low & Mid Fidelity Wireframes





Beginning with a Mobile First mentality, I began to create low-fidelity wireframes using Balsamiq. By focusing on the most important elements, such as photo, price, and house size on the search results page, I could ensure that the user was confident in the amount of information provided to them even on the mobile sizes.



Search Results



Listing Page



Results Filter



Listing Page w/ Viewing Request



Compare Screen



Launch Screen





Following the low-fidelity wireframes, I created designs utilizing proper typography and spacing before moving on to creating mood-boards and branding for the app.



Search Results



Saved Properties



Results Filter



Listing Page w/ Viewing Request



Results Map/Listing Preview



Search History/Preview



Mood-Boards & Color Scheme





With relatively loose requirements on the brand guidelines and some inspiration provided by the project brief, I began brainstorm two ideas for the mood of the app. Since the focus of the application is to provide aid in users who want to create wealth through investing in real estate, I focused my mood boards on both the rustic idea of "growing" and the polished feel that comes from the word "investing".



"Growth" - Rustic Earth Tone Mood Board



"Invest" - Refined, Luxurious Mood Board





After compiling the two mood boards, I decided that the Rustic mood board provided the most unique and inviting mood that also promotes excitement in the user's personal growth. The colors from that mood board were based on an analogous color scheme that was tweak and refined to the color choices below:





In addition to the colors, organic shapes and floral illustrations were compiled to be used as accent and background shapes throughout the app.



Floral Background Accents



Organic Accent Shapes



Logo Design





To complete the identity of the app, I created a logo based on the P alliteration in the name: Perfect Properties. Wanting to ensure that the mark was legible but also making sure there was a subtle nod to the double P, I landed on the design below that features a P with a double stem.



Perfect Properties Primary Logo



Logo Color Variations



Mobile App Icon



Iconography





After completing the base of my app's identity and before designing the final high-fidelity screens, I took the time to create an icon system that would be used throughout the rest of the design. Tab navigation, social, share, and tool icons were created for the benefit of the end users.



Responsive Breakpoints





Upon completing the mobile first designs and the base of our app's identity, I moved on to creating responsive breakpoints for larger screens and devices. Beginning with the base of the mobile designs, I focused on adding content that made the most sense to include with the larger screen real estate (pun intended).


With Search Results page, I was able to add more of each listing's description on the tablet breakpoint. Similarly, I designed the desktop screen to include a filter window on the right side in addition to the expanded listing description.



Search Results - Tablet



Search Results - Desktop



Listing Page - Tablet



Listing Page - Desktop



High Fidelity Designs





Finally, with the rounds of low and mid fidelity designs created and the rest of the identity ready, I began to create the final, high fidelity designs with the new style. Beginning first with the mobile breakpoints before moving on to larger devices.


Below are the final designs for the Perfect Properties web application.



Launch Screen - Mobile



Results Page - Mobile



Map View - Mobile



Listing Page - Mobile



Filter Results - Mobile



Photo Viewer - Mobile



Share Property - Mobile



Compare Screen - Mobile



Compare Empty State - Mobile



Map Results & Filter - Tablet



Search Results & Filter - Desktop



Perfect Properties - Responsive Home Screen



nicklewisartanddesign@gmail.com