Creating a First-Time Home Buyers Guide. A UX Design Case Study.
I created a digital publication that is intended as a guide to the first-time home buyer where the home buying process is explained in simple bite-sized pieces that are easy to understand. My digital publication “12 Steps to Buying Your First Home” was created with a piece of publishing software called ‘Magplus’ that leverages HTML and InDesign to make content that can be beautifully laid out as well as interactive.
One of many challenges
I’ve been working with a real estate agent on this project which began as an idea to showcase home’s that were on the market through her real estate brokerage. However, the real estate company she works with already has a website dedicated as a catalog for their home inventory and it really didn’t need any additional work. I wouldn’t be solving any problem by creating a duplicate avenue for their clients to view their inventory — what they have already works well and serves its intended purpose. It was time to pivot…
At the time I was involved with this project, my wife and I were currently in the final stages of purchasing a home ourselves. This is where we found the process to be a bit grueling and somewhat complicated. We were given information in the form of paperwork, which was supposedly there to aid us in understanding the home buying process, but it didn’t really speak to the first-time home buyer in a way that was easy to understand. This was the perfect opportunity to create something for my client that would solve a problem and actually be a useful tool in comfortably transitioning their clients to the home buying process. I knew the main challenge would be taking a bucket-load of information and condensing it down into digestible chunks.
Laying the foundation
I first wanted to account for how the information was going to be laid out within the app. So a very basic sketch of the layout was completed.
It was here that I determined the best way to condense the multitude of information I was given would be to categorize it into 3 main sections — Finding Your New Home, Financing Your New Home and Closing on Your New Home. Each section would cover a portion of the 12 step process. (It should be noted that there can be far more than just 12 steps to the home buying process, so a more accurate description would be 12 categories to the home buying process — but that doesn’t sound as catchy.)
Designing the Menu
I went through many iterations of how I wanted the menu to look and feel and finally ended up on a static overlay menu across all pages. My first iteration was a horizontal menu that would lay across the top of the page. It was meant to act as a kind of progress bar that would show the user how far along they were in the home buying process. I initially designed for a horizontal menu because I figured it would make your progress feel more linear as you swiped across each page. However, as I worked on the body of the app, it ended up being a more vertical experience where the user would scroll down to reveal each step. Therefore, the horizontal menu didn’t feel right so I instead designed for the standard vertical menu.
The final iteration ended up looking similar to the last few, but instead of using a highlighted circle to indicate user progress, I went with a numbered menu (this is partially what inspired making it a 12 step guide). In the spirit of making the publication ‘easy to digest’, I decided a numbered system would more clearly show the users progress. This made the navigation easy to understand and helped solidify the guide as a 12 step process.
Adding checklist animations to enhance the experience
Once the informational portion of the guide started to come together, I was noticing that the overall experience felt a little bit dry. Although I believe that the information the guide provides the home-buyer is the most essential part of the experience, I wanted to add something that made it a bit more distinguished from the static reading experience you’d expect to find from a guide. This is where the HTML portion of the app really made a difference.
Part of the home-buying process involves deciding which things are important to you in your home before you decide to make the big purchase. My wife and I didn’t realize this until after, but if we would have first created a detailed list of what we were looking for, it would have drastically reduced the time it took to find our ideal home. Knowing your needs before you look will save a great deal of time — this is what helped pave the way to the checklists being born. Many of the steps include a checklist at the end. These checklists cover things such as: “Your Ideal Home Checklist”, “Your Perfect Neighborhood Checklist”, “Moving in Checklist”, and so on.
Behind the checklist design
Every checklist designed for the app was created using animation software powered by HTML 5. I felt that using subtle animated transitions such as the check mark being revealed helped make it a bit more engaging. Each checklist is essentially a pop-up and is accessible in the form of a button at the end of each step. Although they aren’t necessary to explain the home-buying process, they do act as a great tool for further committing the home-buyer to the purchase of their next home. Ultimately, this will save my client time.
The ‘digestible chunks’
The toughest design challenge for this project was taking stacks of information and trying to condense it down. I wanted to keep each step under 2 paragraphs for fear that anything longer would lose the focus of the potential home-buyer. However, most of the ‘digestible chunks’ do include more information through the use of progressive disclosure. If the reader would like to know more on the subject, they can tap the button which will trigger a pop-up. Slowly revealing more information as the user moves along the experience, will help to avoid the “this is too much” response and keep them engaged throughout the guide. This also meant I didn’t have to sacrifice any critical information that may be beneficial for the purposes of the home-buyers guide.
Using color to distinguish each category.
Each vertical (this is what a page is referred to in the software used in building this app) represents a different part of the home buying process. As I stated earlier, the entirety of the app was categorized into three main parts: finding, financing, and closing on your new home. I wanted to separate each experience with a color theme to show that these categories are three different functions of the home buying process. However, at the same time, I didn’t want to make each page so different from each other that the guide felt inconsistent and each vertical unrelated. My solution was to use essentially the same set of colors for each vertical but I would assign a different hierarchy to them on each page. This would provide a different enough experience to each category yet keep an order of consistency as to not detract from the overall theme and purpose of the guide.
Final Thoughts
In a nutshell, this was a challenging project that posed many problems without an obvious solution but I’m glad I took it on. As of now, this is the 1st iteration of the “12 step guide” which has now become somewhat of a passion project for me. It hasn’t yet been validated through user testing and I’m sure there’s plenty of room for improvement, but I feel this project has shown me how to become a smarter UX designer. I believe finding the right problems and implementing the correct solutions, is the main reason why my client is so happy with the final product, or at least the 1st iteration of the final product.
The full walk-through
Although this project was done for an actual client, I was not paid to do so. This was done to complete required objectives for a Digital Media course at Utah Valley University.
