A responsive web application for finding, saving, and comparing properties.
VIEW PROTOTYPEReal estate investment is often complicated and first-time buyers struggle to get started and waste time viewing properties outside their budget. They need an app to quickly match them with relevant properties that fit their criteria.
UX/UI Designer
July - August 2021
User Survey
User Flows
Information Architecture
Wireframes
Prototypes
Preference Test
Figma
InVision
Balsamiq
Proto.io
Typeform
Usability Hub
“I’ve been considering buying property, but need a tool that can help me find exactly what I’m looking for, quickly!”
Creating a Property Profile
Homepage
Property Listing
Property Comparison
Before refining the design, I conducted a survey to understand which filtering criteria is most important and which aspects of existing apps are confusing or unnecessary.
Size and neighborhood features ranked as the top 2 criteria, so they are shown at the top where they are easy to find.
It is difficult to find the location on the map and to understand the layout of space from photos, so I included a Google Maps integration and a link to the floorplan above the fold.
Another pain point is switching back and forth looking at multiple properties, so I needed to address this with my compare feature.
The Challenge:
Show 2 or more properties on the same screen, but they need to be legible.
1. The tiny thumbnail images and dense text don’t create an easy at-a-glance comparison.
2. Here users can scroll to see the third property, and the visual hierarchy is improved for easier reading.
3. Shared labels, larger/shorter text, and the addition of CTAs make this feature much more useful.
Rashida can create a detailed profile to receive relevant reccomendations.
A percentage match quickly shows how closely a property fits her criteria.
Rashida can easily compare properties side-by-side.
Mobile
Tablet
1. Navigation is expanded.
2. Textlinks overlay the images they reference.
3. Verticle scroll is shown as horizonal tab bar.
Desktop
4. Users can select properties to compare right from the listing screen.
5. The full contact form appears below the fold.