Empowering you to find your first dream home
Welcome to the design documentation website for HomeBuddy! If you would like to skip ahead and see our final Figma prototype, click here. Otherwise, we provide a detailed explanation of our journey through the following stages in our design:
This project was developed by Aaron Huang, Brooklyn Wakefield, Dre Hilton, Gabby Blake, and Vedaant Kuchhal.
First time home buyers have a lot of trouble finding the right home and buying a house is a very complicated and potentially life-changing decision. It is really hard to find basic information about a home such as the crime rate, education, price range in a neighborhood.
Making the home search experience more friendly for first-time buyers will change the status quo by empowering people who maybe haven’t purchased a home because they think they can’t, despite a desire to. Especially for individuals who have no human resources to help them navigate the home-buying world because perhaps they would be the first in their family to buy a house.
One solution we came up with is a google extension (like honey) that interfaces with Zillow. Our extension will provide relevant information depending on what you are looking at in Zillow (neighborhood or home) and gives you all the information you need in a convenient place like crime rate, education, etc. It will also give you a price breakdown, including taxes, realty fees, and federal tax benefits.
We will need to collect information on houses and how the pricing is created, the process of buying a home from the perspective of a first-time home buyer, what goes into calculating property value, what goes into making a house eligible for first time home buyer loan, and essentially what information about a home is most useful for a prospective buyer to know in order to make an educated decision.
The first phase of our design process focused on identifying and articulating the needs of our target user group: first-time homebuyers. This section contains multiple, diverse, artifacts that capture our process in this phase. Here's an overview, with each individual design artifact or tool in bold.
Using our Consent Narrative, we interviewed first-time and experienced home-buyers. With the information gathered from those meetings, we re-examined our Project Brief and refined it into our Design Brief, from our new lens of what pain points are for home-buyers and what problems they would actually want solved. Two contextual models helped frame our problem: a Flow Model of the home-buying process with all the entities and processes involved, and a Cultural Model of the pressures exerted on the home-buyer by the other stakeholders during the process. From our interviews, we summarized our data by Experience Mapping first-time home buyers' overall journey from searching to signing off on their homes, addressing their goals, touchpoints, and feelings along the way.
Next, we created two personas based on the themes we saw emerging from the people we spoke to highlighting, among other things, the difference in intent between home buyers: those who want to live in the home they buy versus those who are using the home as an investment. Finally, we fleshed out our Narrative Grounding Approach, making the problem (of an unpredictable and complicated home-buying process) explicit and outlining how our solution will counter the pain points expressed through our personas.
Lastly, the Effort Chart summarizes the work we did as a team. For this phase, it might be evident that we each took the lead on separate parts of the process and developing the relevant deliverables.
This is the document we would provide users before interviews to reach frame our relationship relative to them and help them be more comfortable speaking with us. Our Consent Narrative can be viewed here.
In order to situate our users in the broader context that they exist in, we created two models to understand their relationships with factors outside of them. One of these is a flow model, and the other is a culture model. These can be seen below:
We refined our initial project brief to specify the problem we're solving and our proposed solution to it. We structured it through a few key questions:
We are trying to reduce stress and uncertainty in the complicated, long, and uncertain process of buying a home, including single-family houses, townhouses, multi-family houses, and condominiums. Although the people we spoke to with more experience buying a house understandably feel more confident in buying a house over time, it's almost always a long, winding, and frustrating process for all buyers, old and new.
From our interviews, we discovered a few pain points that were common across multiple interviewees: hidden fees, an overwhelming web of property, lending, and housing regulations, difficulty finding reliable information about niche needs, understanding if the price being paid for a house was fair, and a lack of clarity in the overall process.
The pain point of actually finding a house, which we were initially looking at, seemed to be pretty well-covered by Zillow and countless other sites. Often, the larger issue in this step was the speed at which houses would sell out - all our interviewees reported frustration about how quickly houses they liked would be sold before they got to tour the house and place an offer. We don't aim to solve the problem of the pace of a market, but we hope that our solution will provide packaged information and clarity on process more quickly so that buyers are generally more confident placing an offer.
The home-buyers are our primary users, particularly inexperienced home-buyers who need to be more expert on the minute ins and outs of the home-buying process and have never purchased a property. This is the user group we will be designing for. Other stakeholder groups that will be important in this interaction will be realtors (since the solution we are proposing, in many ways, is what homebuyers rely on realtors for) and external regulatory bodies (from which we will need local information to accurately outline the process and calculate hidden fees).
Home-buyers have said that they retrospectively wished they had more clarity on what to expect in the process of buying a house. Knowing about the hidden fees from the beginning and having access to detailed information that is less obviously related to choosing the right home would have saved them quite a lot of stress or money. Homebuyers also talk about relying on their realtors a lot, which in some cases is beneficial if they get a great realtor but in other cases has added to stress if the realtor is trying to upsell or has incomplete knowledge about the process.
Our older stakeholders (e.g.- people looking to buy a retirement home) spoke about how the solution must be a website/have a website option since phone screens are too small for them. All stakeholders relied on current popular home-hunting websites like Zillow and felt that our product should integrate well with them. Our solution should have executive summaries for a lot of the information since people said that the problem wasn't not enough information, but too much. It should certainly account for stat-bystate differences in housing rules and processes. Lastly, it should have a comprehensive checklist/progress tracker of all the tasks within homebuying so that users know what to expect, regulatory bodies/banks know that rules are being followed, and supporting service providers (like realtors) have accountability.
Homebuyers of all levels of experience can go through the process without surprises that could be prevented within their control. There will be no fees they weren’t expecting or disappointments they weren’t prepared for. It will be clear how various processes work and they will effectively be able to find and use the information they are looking for. Overall, the solution will empower and center homebuyers in the web of stakeholders in the messy world of housing markets. It will provide transparency in the process, and reduce a lot of stress for people who are in the process of buying a house.
As part of identifying needs, we also realized that it would be helpful to understand the journey of a customer using our potential project. Here's a diagram to summarize that information.
A key part of identifying needs was to build out personas that we could design for. We came up with two personas that effectively summarized our user group: Newbie Ned and Investor Ivy
Once we had our personas, we started making the problem (of an unpredictable and complicated home-buying process) explicit and outlining how our solution will counter the pain points expressed through our persona. Here are some key questions we asked:
Lastly, we documented the relative effort everyone put into the project in different areas. We tried to make our own version of this effort chart, with circles to specify the work we did and our initials written in relative sizes to indicate how much we contributed to that task.
Our findings from Needs Analysis informed our next phase: Design Development. Here we present a portfolio of our design ideas, followed by various supporting design and process artifacts that outline our journey to those ideas.
Once we had identified our user's needs in our Needs Analysis phase, we had a meandering, slightly chaotic journey to our current prototype. In the process, we considered a wide range of design ideas en route to the idea we committed to.
One of the most important design ideas in our portfolio (that we ultimately pivoted away from), was to have the home-buying journey laid out like a visual road map, with details about each step of the journey and a checklist of important tasks for them to record and follow. Here's an example of a representation:
The intent was to focus on the user's need of wanting to be more informed about the flow of the home buying process and more prepared for the bumps and inevitable surprises inherent to the process, but we moved away from this idea, retaining elements in our final idea (which will be revealed soon). We did not proceed with this idea for two reasons:
Another idea we considered was an extension for Zillow. We understood that Zillow is already a great tool for finding homes and it would not make much sense to try to build a whole new home-finding site to compete with it. Depending on what page of Zillow the user was looking at, the extension would provide helpful information.
The homebuying process is very complicated for first time homebuyers. We would take information like location, relevant documents, and type of house to make a personalized tracker. The main feature would be the personalized tracker where it will tell the user the current step they are at, but will include other important features, such as a checklist and important messages. This will help keep buyers informed and on top of the process.
We sketched out each of these ideas as part of the process of specifying and eliminating to narrow down on a single, refined concept.
Full sketches can be found here
After comparing our ideas against our brief and validating that our ideas create some form of new value that does not already exist we came to the conclusion that the personalized tracker would best meet our users’ needs and add value even in the case that the user already has the help and guidance of a realtor.
Now that we were gradually narrowing down on our product idea, we attempted to chart out a user's journey through our product in an interaction flow diagram. Here is the external link to our Interaction Flow
Next, we created a low-fidelity paper prototype of our proposed product to better understand its features and test with users in co-designs. Images of all the interfaces of the full prototype can be found here
So far we have conducted 1 co-design session and scheduled for a second one later this week. See interview notes (externally linked) here.
With everything we learned so far, we produced a report for our presumed client for this product:
"Home Buddy," is a website tailored for first-time home buyers. It operates as a personalized assistant, helping users navigate the often intricate process of purchasing their first home. With a focus on organization, Home Buddy enables users to easily track important documents, notes, and specific information relevant to home buying policies in their specific area. What sets it apart is its engaging and interactive approach, complete with a personalized avatar and a custom progress bar to represent the user's position on their home buying journey, making the experience both enjoyable and motivating.
Moreover, the website incorporates unique features, including an AI chatbot. This AI chatbot serves as a specialized assistant, providing answers to home-buying questions within the context of the user's account and readily available internet information. It's important to note that the chatbot is designed to complement rather than replace the guidance of a real estate agent, offering users a secondary advisory resource. In essence, Home Buddy aims to streamline and personalize the home buying experience, making it more user-friendly, engaging, and informative for first-time buyers.
Home Buddy works in two different ways. First, it acts as a generalized timeline for folks who don't have an account. In this case, the website is click based and doesn’t contain any of the user’s personal information. In the other case, the user will be prompted with a login button at the top right of the screen. By clicking this, it brings them to a page that allows them to either sign up or log in. If someone is signing up, there will be a set of questions that the website gives to start personalizing the tracker. Once an account is made and the user has answered all the questions, they will be greeted with our dashboard which contains basic information as well as the tracker. From here, there are three possible places to click that will take you to another section of the website. First, by clicking on the tracker, you will be taken to a page that has more in depth details about the current step as well as access to other steps through a click. Next, there is a documents page which holds all relevant documents that a person needs to actually purchase a house successfully. Here the documents will be separated and summarized. Lastly, the user will be able to chat with our personalized chatbot which knows the information and can help make decisions.
More than one user has told us that there was just so much they didn’t know about looking back on the process. They wished they had more knowledge going into home buying then they did at the time. And especially when they had a realtor, a big component of the process that they had to have was trust in their realtor as a professional who had their best interests in mind. It was hard to build that confidence on their own and have that understanding such that they could be working with their agent rather than only being able to trust their agent to guide them.
Our design gives our users that confidence and control over their personal process by providing knowledge about the general process and a way to acquire knowledge unique to them and to store that personalized information all in one place. Our site explains the entire process at a high-level so users can familiarize themselves before they really start and have that prior knowledge coming in. In addition to having access to important information all in one place, they can also save and document their progress and specific information and media (signed forms and documents) all in one place for ebay reference in the future.
However, users not only mentioned lack of knowledge, but also that the information they were gaining came in fast and was hard to understand. Our site presents relevant information in a way that is not overwhelming and is easy for anyone to understand not only about the general process but about forms and which agreements to expect when along with a summary of those forms and what sections are important in those documents, so users can also feel like they know what’s going and how each paper they sign fits into the process.
Overall, our design meets user needs by empowering them through the process with information and easy tracking of their progress. However, it does fall short in some areas such that it cannot help them find an exact house, but instead provides prompting questions for users to know what they should look out for. Multiple users mentioned wishing they had more information about the surroundings of the house, be it natural or social. For instance one user said they wanted to find information about data for floodplains in the area they were interested in. Rather than the site providing that information or even a link to where they can find it, instead we would ask them a question like, “Is your area susceptible to certain natural disasters? If so, which ones? Which areas are safest?” There is too much weather information out there that is always changing for our site to always have that data on hand for a specific user, but we can help users know that climate in their desired area is important to consider and that they should take steps to know that information.
We considered many designs before we reached our current version. Here are some small but impactful designs we considered before arriving where we are now.
We found many key insights as we have iterated on our design. We made our first insight early on in our design, which was don’t create solutions to problems that have already been solved. Our first idea helped first time homebuyers by helping them find the right home. This sounds awfully familiar to Zillow and other real estate websites and they do a pretty good job at helping buyers find the right home.
After pivoting to our current design idea, we encountered our second insight: realtors are a good resource already. We kept that in mind while designing our website so that we are providing the knowledge and tools that keep buyers informed rather than outright replacing a realtor. Through our research, we found a surprisingly large amount of resources that are out there describing the process. However, there aren’t any that are both detailed and comprehensive. Because of this, we added features such as the blog and FAQ sections to provide a knowledge hub for our user group.
Lastly, our effort chart reflects our individual effort in this phase. We chose a different chart type than last time to better present our overall contributions over that period.
During this phase, we took our website prototype from paper and still images to an interactive, digital prototype. We structured our digital prototype based on the user journey we developed during the previous phase, as shown below.
Our website helps first-time homebuyers navigate the homebuying process. The website contains a few key features to achieve this aim:
The above features all exist without the user needing to log in to the website. However, once the user has logged into the website (and is therefore able to save information between sessions), they can access the most important page of this site: the dashboard.
The dashboard is a single place where the user can track and manage information regarding the homebuying process. This includes checklists to keep track of tasks, a progress tracker to indicate the position of the user in the overall journey, and features like a finance calculator.
Additionally, once the user is logged in, we also have a set of features such as allowing users to pick their avatar, review their privacy settings, and perform actions such as changing passwords.
We made the following key changes to our prototype as we transitioned into Figma, all using feedback from co-designs in the Design Development phase:
When moving our prototype from paper screens to Figma, we expectedly had to trade-off and downscope certain features that would be significantly more difficult within the constraints of our limited Figma experience. For example, our dashboard progress tracker is stagnant (since it isn't easy to have movable icons in Figma). Additionally, we had to create multiple variations of each page to account for signing in, and other features like the ability to change the layout of the dashboard is lost. In terms of iteration, because everything has shifted into being focused on detail, in order to make the functions look correct, we have to spend more time on the smaller things. This slowed down the process of working on feedback as opposed to purely speaking through and capturing the process on paper.
Through our cognitive walkthroughs we found many bugs and we also received great feedback about what feature flows were unclear or unexpected and will be really useful for the next phase.
Our heuristic evaluation and cognitive walkthrough proved to be fruitful in identifying our assumptions and biases about our projects. For example, multiple people stated that they did not understand the purpose of entering a location on the home page. They expected a list of results rather than a new page with a scrollable walkthrough of the homebuying journey. This showed that mental connections between pages that seem clear to us are not always clear to a user.
Additionally, we needed to think beyond our initial vision of our website and make sure everything is accessible for the user when they want it and not when we intended. For example, for the user journey page, we thought of it as a quick view of what the website was about before committing to sign up, which is not what users interpreted it as.
Lastly, we were surprised by how powerful words are as mental model influencers and word choice can drastically change the function of an element a user expects. For example, as we mentioned earlier, the resources page was originally called the blog page and this also created misunderstandings about what this page had to offer. The feedback from heuristic evaluations and cognitive walkthroughs only confirmed this insight.
We were able to act on some feedback from the heuristice evaluations, although the bulk of that work will occur in the next, and final phase of the project. Here are some of the highlights:
Homepage: removing the confusing search bar for something more clear
Home-buying Journey Page: adding a more detailed and explanatory format of the journey
Dashboard page: adding labels for relevant icons and add functionality of adding a house
Resources page: adding scrollability and improved labels and readability
FAQ (Frequently Asked Questions) page: correctingt the text consistency
Avatar page: making better customization images
Through our design refinement and associated feedback (cognitive walkthroughs and heuristic evaluations), we encountered deeper questions about our product that are as yet unresolved. Our current prototypes don't address these concerns yet, but we want to be transparent about the fact that these came up and that we are keeping them under consideration.
Lastly, here is an account of our respective contributions to this phase, in the form of written accounts.
Gabby - I developed the User Journey page, and helped refine the dashboard, resources, landing, and FAQ pages and conducting cognitive walkthroughs
Aaron - I focused on refining the sign up page, dashboard, resources, account settings, vehicle selection, and chatbot and conducting cognitive walkthroughs
Vedaant - I mainly worked on collating and formatting the deliverables for the submission of this phase. I didn't really work on Figma, but helped with the Heuristic Evaluation and project management.
Brooklyn - Worked on Figma dashboard, homepage, and FAQ. Interactive buttons on the homepage. Heuristic Evaluation combining, feedback discussion and figma revision.
Dre- Worked on Figma resources, avatar, ai chatbot, writeup deliverables, and converting into html.
In the final phase of our project, we developed the final version of our website. We incorporated all the feedback from the previous phase to make appropriate adjustments, conducted a pilot of a formal usability study using A/B testing, and produced our final product.
In order to further refine our website design, we examined the feedback given to us by test users during the Heuristic Evaluation process. Our heuristic violation breakdown is:We had one heuristic violation of severity 4, nine violations of severity 3, seventeen severity 2 violations, fourteen severity 1 violations, and one severity 0 violation. First we addressed all of the violations of severity 3 and 4, making changes where we could. Many of the stated violations had to do with the Nielsen Heuristic #3, User Freedom and Control, as we were missing many exits and ways for users to get to any page they want without having to follow a very specific user path. The exact changes we made for each violation can be found in this document.
In addition, we conducted a pilot of a Formal Usability Study, chosing to A/B test the user journey map page, on which we had received some mixed opinions. We learned a lot from this study, and this is now described.
Summary hypothesis: If we change the layout of the home-buying journey page from scrollable to clickable overlays on one page, then the user will have higher scores on our quiz to check their understanding of the purpose of our site.
Description: Our study is an A/B test of the User Journey Map page, and it would allow us to test the usability of the site specifically as it relates to its purpose - do users understand what the website is supposed to be for? This is motivated by feedback from our previous phase where we were told that this was not immediately clear. Since it's beyond the scope of this phase to test the entire website, we will be focusing on the webpage that users found to be the most ambiguous - the User Journey Map page. The User Journey Map page is the first page that the users would interact with that provides them information, therefore it is essential that the purpose of this page helps the user understand the purpose of the site.
Currently, the User Journey Map page is shown as a scrolling menu that contains each step of the user's journey. The change that we will make allows all of the information to exist on one page. Each step of the journey will be represented as a button which when clicked pops up an overlay of the details of the step. For the purpose of this study, we will call the current scroll-based page Version 1, and the proposed click-based variant Version 2.
Between the two variants of the page, the information and order of steps remain constant but the package in which the information is delivered is different.
By changing between scroll-based and click-based functionality, we are testing the condition of how information is stored. By having a button layout, all of the information is stored on the same page which could allow for easy access whereas with a scrolling menu, you'll need to scroll to access the information.
Separate from the factors that we are changing, we want the actual information and the order of steps to remain constant. In doing this, we are hoping to observe how the user digests the information and content within the website between Version 1 and Version 2.
By shifting the container of information, we will be able to gauge how users are actually interacting with the information and what they perceive the purpose of the journey map and thereby, our site to be. We will do this by asking the following specific multiple-choice questions and aggregating a score.
We expect that in Version 2 of the webpage, the purpose of the website will be easier to understand since all the information is presented in the same place. Instead of scrolling through multiple steps, it will be more evident that the website is a guide to support users through the entirety of the home-buying process. In other words, participants interacting with Version 2 will score higher than those interacting with Version 1.
Since this is a pilot study, we are not going to try to enroll hundreds of participants. Instead, we will try to enroll four users with no prior knowledge of our design (i.e. not the teaching team or team that reviewed us for Heuristic Evaluation) and split them into groups of two - one pair independently testing Version 1 (scrolling menu), and the other pair independently testing Version 2 (clicking menu). Our users will most likely be Olin College students, once again for convenience given that this is a pilot study.
Overall, we observed the following from our usability study:
We calculated a numerical aggregate score based on the responses of the participants, summing the values for all the questions that we asked. We made sure that we mapped every question to a 1-5 scale (for example, if the respondent got the number of steps (6) correct, they got a score of 5. If they got the number off by one (5 or 7) they got a score of 4 and so on). The following graph shows the average score for each version:
Overall, click-able Version 2 had a higher aggregate score, however, the difference between the two was very close, less than 10%. Therefore, given the small sample size it is not enough to conclude that Version 2 is definitely better than Version 1. In fact, when taking into account the comments users gave about the product during the studies, multiple users stated that they liked the scrolling aspect of the site and that they could visually see all the steps and navigate them easily. As a result, we are in fact deciding to use the scrolling interface instead of using the clickable one.
If this had been the result of a larger study and we had the same result with, for example, a hundred people testing each version, we would probably have chosen the clickable version since the difference in score, however small, would be significant.
However improvements in the professional quality of the scrolling page need to be made, such as making it more visually appealing and organized, fine-tuning colors, fonts, and more. A more granular look at the data we collected showed that multiple participants felt that we should modify the layout for the website, so this is something that we could incorporate.
To bring the website to a fully functioning state we would need to research into Zillow integrations or integrations with APIs to be able to pull important information we need for the user, for example, when the user is on the home page and searches a specific house or region we need to present data on the home-buying journey page around the average cost, interest rate, average market selling price - this data will also feed the data points for the financial information section of the dashboard and the “your home” section.
We presented an overview of our design journey in a final presentation (in the form of a skit). The recording can be viewed here.
With all the prior design work, here is our final prototype, embedded in our website. Feel free to explore! (Note that you can expand to full screen on the top left corner of the protype frame if you would like to).
(Click here to return to the top.)