PropQuest
A home & real estate aid for professionals on the go.
Project Overview
Propquest was created as a capstone project to showcase skills developed through the duration of the Career Foundry UX Design course. Using popular apps like Zillow & Redfin as guides, I wanted to create a similar experience that offered simple, digestible information that would ease the process of prospecting for places to live. Real estate investment is an increasingly popular way to achieve financial security and it can be an exciting and emotional experience, but often complicated. While there are plenty of websites and agencies providing information & assistance, often new buyers struggle to get started without professional guidance. PropQuest provides home seekers the tools and info they need to make quick but informed decisions. This case study will outline the process of creating project deliverables and how they helped with the conception of Propquest.
Product: Propquest
Role: UX/UI Designer
Duration: 7 weeks
Deliverables: Competitive analysis, Persona, User flows, Wireframes, Usability testing, High fidelity design, Prototype
Tools: Adobe XD, Balsamiq, Lucidchart, Moqups
The Challenge
I needed to figure out what platforms like Trulia & Zillow did well so I could emulate certain aspects of their success in a different way. At the same time figuring out inefficiencies in the competitor product and improving those in Propquest. So I decided to perform a competitor analysis that would provide the project with a more focused direction and explore where I could improve the digital home buying experience.
Competitor Analysis
A competitor analysis is a good tool to bring yourself up to speed on products in the same space. Learning what they do well and identifying areas of improvement can be valuable insights when creating an experience like Propquest. To summarize the experience, mainly I looked at Trulia, Zillow, Redfin, Homesnap & others with the approach of first figuring out how & why they display the information they do. Is there a strategy behind this? Does this help me if I was in a home buying situation? What Am I being nudged to do & why this direction? These are examples of question I asked myself while exploring these apps. Second phase & more important was areas for improvement. The approach with this phase was critiquing the products and identifying areas where the experience could be improved. I found that some of the nudges to schedule home or virtual tours was a little too frequent & could benefit from a more subtle approach. I also recognized that some of the less popular apps dump a lot of information on users at once & was coupled with a confusing info hierarchy. Inexperienced home buyers could find this frustrating and could influence them to use other apps or quit all together.
In conclusion of my analysis I found that there’s a pretty commercial & generic way of presenting property information, which I don’t think needs to change but could be modified in certain interactions. Moving forward I’ll follow a similar approach in presenting my information to users. The major takeaway that I plan on implementing through design is the tiering of information in relation to customer interest. What I mean by this is the more interest the user shows in the property through their actions, the more information will be revealed. So instead of dumping a lot info at one time, I can trickle the information to the user as they become more interested instead overwhelming them with housing specs they may not consider important for a given stage in the process.
Persona
Crafting a persona of our ideal user helped provide direction for later stages in the design process. Our ideal user is a professional in between the ages of 25-40, that has been saving money for some time, on top of having an established job where they’ve been able to save their money and are now looking to grow it through safe investments outside of retirement options. With that being said, Rashida was created.
She’s a 37 year old IT consultant for a successful tech company. She’s frequently on the go and uses her phone for everything, from scheduling & holding meetings, to grocery shopping. She’s good at multitasking and relies heavily on technology to help her with all of her daily task. Its essential that Rashida gets the reliable information fast with a presentation that is clean and digestible.
User Goals
After crafting a persona I began to make user goals that would fall in line with the needs of our persona. These tasks are meant to ultimately represent the goals users want to accomplish while using the app.
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 to be able to save or mark properties I’m interested in, so that I can easily revisit them.
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.
As a user, I want to be able to contact the right people if I’m interested in viewing a property, so that I can schedule a viewing.
User Flow
This flow diagram basically served as a blueprint of the entire user experience & a skeleton the app will be built around. It was helpful to visualize the possible pathways users may take through the experience and have it in one place. It really eased the transition between ideation & conception in the coming project phases. To make the diagram I started by going over my user objectives when using the app and worked backwards. Once I reverse engineered my core processes, for the product I started going over & refining the necessary steps for users to have a frictionless & enjoyable experience.
Wireframing
Using Moqups, I started my design process with low fidelity wireframes to help visualize what the app will look like and if it fits the needs of the end user. The goal was to craft a basic outline of the experience using simple shapes that will represent screen elements. Here I needed to visually confirm that my layout was in line with the overall design approach. I used these early in the design process to establish the basic structure of a page before visual design and content is added. It also allows for an opportunity to test some usability features & navigation.
Usability Testing
After completing the wireframe I began to add color and visual elements that would closer resemble the final product. Following the completion of wireframing, I put together a small usability test for some colleagues to get some feedback on the progress. In short, I had participants navigate through the wireframe to reach a certain destination in the app (e.g. property viewing page). I wasn’t able to test with as many people as I would’ve liked but was able to gain valuable feedback that inspired the coming iterations.
Tasks
Sign up and view a property listing
Sign In and find 2 homes to compare & contrast
Sign in and contact a realtor for a property of interest
Testing Feedback
They noticed that the visual hierarchy wasn’t consistent & confusing in some areas.
The sizing of the buttons was inconsistent and the font in some areas of the app was to small making and bogged down the experience. A few explained how they had to squint to see what the property details were before proceeding to following test steps.
The green that I used for the main color of the app was too similar to the CTA buttons.
Headers that were similar in size and font weight which made it confusing as to where the focus should be on the screen.
The participants that reviewed my wireframes pointed out somethings that I had overlooked in my work. I made a lot of elements small in an effort to fit everything I needed on the screen, but ended up putting too much information which took away from the more important aspects of the property details. It was also a challenge to execute proper hierarchy with out different fonts & detailed visual elements that help with establishing page element hierarchy but something to consider in the coming iterations.
Iterations
In the previous testing phase, participants were able to complete the simple navigation task laid out for them but the ease of the task varied between participants. The insights they pointed out would help me sure up the final details of the product. Once I was able to consistently apply all of the changes across the app, I linked elements up using Adobe XD and put together a prototype to showcase the completion of my capstone. I’ve briefly detailed below some of the iterations that took place.
Reduced the amount of information in the property preview details and only listed a few essential details (sq.ft, rooms, bath, location & property picture) as opposed to the property description along with the other details previously in its place.
With more space I was able to expand the text size of the details listed in the property preview and add small visual cues (room, bath, sq ft icons) to aid the user in scanning for specific details.
Added a lighter teal green as a new call to action color for buttons to help separate buttons from other green elements of the app.
Adjusted the visual hierarchy to a more comfortable and predictable feel.
In order to further improve the visual info hierarchy, I added cards to make more relevant information stand out a bit more than the other text information that has the same font size & weight.
Reflections & Takeaways
This experience was very helpful in learning the design process from ideation to creation. I learned that the early foundational steps were essential in the later phases of the project. In retrospect I wish I had more time to do more thorough testing of the app but I was limited by the time I could allocate to the project with my other life obligations. Nevertheless it was a valuable first experience that I can build on in future projects. To the left is a short video of the finished design & some of the apps features. Feel free to share your thoughts and feedback. Thanks for reading!