HomeSearch
Course: UX Design Professional Certificate, Google
Duration: January 2023 - February 2023
Team members: Solo project
My roles: User Research, Interaction Design, Visual Design, Motion Design
Overview
HomeSearch is an online real estate marketplace dedicated to helping people find their dream home. The website is designed with accuracy, simplicity, and transparency in mind.
​
The goals for this project were to build on what I learned in the first course project, and showcase my ability to complete an end-to-end design project of a responsive website using Adobe XD.
Project Background
In an ever changing world, one thing is certainly never going away and that is real estate. If anything this field is expanding with the growth of digital and virtual real estate. People are always going to be looking to buy or sell their home and thus will need a marketplace to help them do that. I created HomeSearch to help make the experience of buying or selling homes easier and more enjoyable.
This was the second project of a UX Design professional certificate course offered by Google. The purpose of this project was to build on concepts that I learned earlier in the course, and showcase my ability to design a responsive website. This was a solo project to be completed in Adobe XD.
​
Some key achievements have been listed below:
-
Improved design efficiency. I took what I learned about design tools and applied it during this project to complete it in significantly less time than the first course project. For example, I used components and overlays to minimize the amount of artboards on screen.
​
-
Created responsive designs This was my first time designing a responsive website, so I couldn't just think of one device when creating the designs. I had to ensure the elements on screen fit devices of all sizes.
​
-
Established a design system. I utilized Adobe XD's assets panel to save elements like colors, text styles, and icons that I used. This helped maintain consistency in the look and feel across the entire product.
"I believe that it is very intuitive and meticulously thought out. It enhances my experience as a user when a site is laid out so well." Adam S, 23
Process
What's the problem?
Prospects often get frustrated when there is a lack of transparency in the home-searching process. This includes sellers withholding information, properties not being available at the intended move-in date, or being forced to make an account to view complete listings.
Why HomeSearch?
HomeSearch allows users to browse homes easily, view information and communicate with sellers transparently, and schedule a showing efficiently. Many products in the market currently lack in transparency and I created HomeSearch in an effort to resolve this issue.
The goal:
Design a responsive website that allows users to search for, view, and save complete listings, as well as communicate with sellers on next steps in the renting/buying process.
Understanding the user
Preliminary research was conducted through interviews with potential HomeSearch users. These included people who have experience renting, buying, and selling properties; people currently in the market for a new home; and people who have used real estate marketplaces to find a home in the past 6 months.
I developed personas, user stories, and user journey maps to further understand the different behaviors, needs, and motivations of these users, as well as discover pain points.
Through this research I was able to identify a main user group of hard-working individuals looking to move homes for themselves or with their families.
​
The persona for this user group is listed below:
Persona (Craig)
User story​​
-
"As a 27-year-old software engineer who works long hours at my desk, I want to use filters to narrow my search scope, and maintain a direct line of communication with the seller so that I can find the exact home I am looking for, and have it be ready by my move-in date."​
User journey map (Craig)
Pain points
-
Transparency. Prospects get frustrated when sellers withhold information, and when it is unclear what information is needed from them.
​
-
Accuracy. Properties are often different than advertised when viewed in person, and are sometimes unavailable at the agreed upon move-in date.
​
-
Simplicity. Being forced to create an account to view complete listings frustrates users, and there is often irrelevant or unnecessary "fluff" about listings which takes away from the important information.
​
-
Accessibility. Real estate marketplaces are not universally accessible. Users with any and all disabilities should be considered, whether they're permanent, temporary, or situational.
Understanding the competition
I conducted a competitive audit of other products in this market in order to identify key competitors, both direct and indirect, and to gain strategic insights into their approach to designing the products they offer. The results from this audit were used to inform design decisions going forward.
​
-
Direct competitors: Zillow, apartments.com, realtor.com
-
Indirect competitors: Redfin, Remax, craigslist
Ideating the solution
After analyzing and synthesizing the findings from the research, I drafted a problem statement for the main user type in order to define the problem I am trying to solve. This helped me figure out which user problem to focus on during the ideation stage.
"Craig is a hardworking young adult who needs to find the exact apartment he's looking for, and ensure that it will be ready by his intended move-in date because he and his fiancée want to move into their dream home after they get married."
Creating the designs
I completed several sketching sessions to bring the product to life and inform the designs of my wireframes and mockups. I used the "crazy eights" exercise to quickly sketch multiple versions of each screen in the main user flow in order to consolidate the best features into one final design sketch.
​
Based on the sketching sessions, several key features were revealed that aligned with the product vision:
​
-
Accurate search results. Users should be able to use as many filters as needed to narrow the search scope in order to yield only the results they're interested in.
​
-
Seller communication. Users should be able to maintain a direct line of communication with the seller throughout the entire process, whether it's to get next steps on the moving process, lease information, or answers to any general questions.
​
-
Clear directions. Sellers should make it clear what information is needed from the prospect. There shouldn't be any confusion about what the user is required to present to the seller.
Wireframes & Mockups
With a clear direction in mind, I began drafting wireframes of the main user flow before refining those into mockups to use for the high-fidelity prototype. Once completed, I created wireframes for the other pages within the website. I opted for an overall simple feel with an accessible color palette.
Login Screen
This screen is simply to onboard users to the website by asking them to sign into their account. This isn't the start of the flow as users can view plenty of the website without signing in, but to access the full range of features, such as favoriting a property, they will be prompted to sign into their account.
Landing Page
This is the first page users will see upon entering the website. The hero image is large enough to draw people in but not so large that there is no more room for other content. Users are greeted with helpful home buying tips, and call to action buttons to either sign in or begin searching for homes.
Homepage
The homepage begins the main user flow of searching for a home and contacting the seller for next steps. Users can search for a home, view property details, and travel to any other page in the website using the navigational elements on this page.
List View Page
This is the page users see after searching for a home. Users can move around the map to search different areas and vertical scroll the list of properties within their search radius.
Home Details Page
Users can view extensive details of a property including pricing, floor plans, amenities, nearby places of interest, reviews, etc. Users can also read reviews and contact the seller directly from this page.
Testing the designs
Two rounds of unmoderated usability studies were conducted with potential users to reveal additional pain points that weren’t recognized in preliminary research. The first round was completed using the low-fidelity prototype to test functionality, which helped guide the designs for the mockups. The second study used the high-fidelity prototype to get feedback on any smaller details that needed refining, like visual elements and accessibility.
Round 1 Findings
-
Users need more navigation options on the homepage
-
Users need a way to favorite listings
-
Users need larger buttons and text boxes
Round 2 Findings
-
Users need a way to go back and forth within the flow
-
Users need an option to create a new message from the messages page
Accessibility considerations
Designing with accessibility in mind remained at the forefront of my design process. Those with any permanent, temporary, or situational disabilities were considered in order to create a more inclusive product.
Some key accessibility considerations are listed below:
​
-
Increased button and text size. I increased the size of buttons and text boxes to improve readability for visually impaired users.
​
-
Used accessible colors. I double checked that my color palette complies with AA and AAA guidelines.
​
-
Emphasized universal iconography. I included icons and high quality images to aid navigation, and help all users better understand the designs.
Takeaways
Impact
HomeSearch provides a positive experience for its users and almost all user needs revealed in foundational and design research were considered in the designs. All of the users included in the research studies felt this website was designed very intuitively, and with them in mind.
​
One quote from user feedback:
"Overall, I found the website to be intuitive, friendly, and easy to navigate."
Next steps
-
Conduct additional usability studies to validate whether user needs have been effectively considered, and address any additional pain points that have emerged post launch.
-
Test the final high-fidelity prototype with different users to discover any needs from additional user groups that weren’t included in the preliminary and design research.
-
Consider ways to improve the website's accessibility, usability, and features.
-
Add minor UI touches like the ability to favorite a property from the list view page.
Key takeaways
I enjoyed working on this project. It's so rewarding seeing my ideas go from sketches on paper to a fully functional product. Since this was the second course project, I was able to have more fun and experiment with more design features. I found Adobe XD incredibly intuitive which made everything even easier.
​
Some key takeaways from this project are:
​
-
It's all in the approach. It's important to look at the problem from all angles to ensure I understand it completely so that I can create an effective game plan. This helps guide my design process, leading to a better end product.
​
-
User-centered design is key to a great product. Understanding how to balance business objectives and user needs is critical in designing a high quality end product. It's easy to forget the user when designing and do what I think looks good but remembering who I'm designing for at all stages is key.
​
-
It's okay to make mistakes. Designing a product is a highly iterative process, and no design is ever really complete. I was learning Adobe XD while creating my designs so there were several times I had to go back in and update major parts of the design, or change a page completely. It's disheartening to have to start over but I have to remember I'm far from perfect and it's just part of the process.