Apartment Match - A responsive website for an apartment finding platform
A solo project by Gopa Shahane. It was made as a part of Google's UX Design Certificate from June 2022 - August 2022.
(APARTMENT MATCH is a fictional website.)
Designing a responsive website for APARTMENT MATCH, a platform for rental apartments.
All of us have been apartment/house hunting at some point in our lives. I have plenty of experience doing this, courtesy of my 15 years of expat living across the world.
The process is tiring and stressful, trying to find a place to live and call home is no small task. This project prompt in my course was an opportunity for me to make an effort to create a better experience for all of us out here.
Apartment Match strives to provide an easy and useful experience for users.
Their primary goal is to ensure user satisfaction by providing the users with clear navigation and designing a smooth user flow.
Since this was a solo project my role included -
User research
Ideation
Visual Design
Prototyping
Usability testing
Interaction Design
Tools used -
Adobe XD
Mural
Figjam
Google Slides/Docs
Zoom
THE PROBLEM
Apartment hunting can be complicated. With so many agents, and websites to choose from the user feels pretty overwhelmed. Online apartment search is sometimes misleading and leads to disappointment and frustrations when the property is viewed in person.
There is also the problem of unsolicited emails and calls because the user has to enter all their information before they can begin the search.
With the pandemic and changing world, more users prefer to do their apartment search online, but it’s essential to make their experience easy and fruitful.
THE RESEARCH
To begin with, I started the foundational research with one on one interviews. The participants were from the urban and suburban areas, keeping in mind the demographic for apartment living. The interviews were conversational but with a set of open-ended questions, the main goal here was to understand the experiences, expectations, and problems faced by the users during the apartment search process.
After this foundational research, I could empathize better with the user and understand their pain points.
I used the information and feedback from this research to develop the following key research deliverables -
Empathy Maps
User stories
User Personas
User journeys
( Coming soon below - the detailed research case study where you can delve deeper into the research, the deliverables, and more)
QUOTES FROM THE FOUNDATIONAL RESEARCH INTERVIEWS -
Since this project was for the certification course, it was fictional. This made it essential to conduct a Competitive Audit and get a clear perspective of the existing products and their strengths & weaknesses. The Competitive Audit enabled me to get a clear picture of the offerings of the competitors’ and identify the basics of my product.
After the initial user flow was defined, it was time to build the information architecture for the website. I started with organizing the content, labeling and then grouping the content accordingly. The information architecture was created keeping in mind the user-product interactions and the different ways the user could access the content/flow.
THE DESIGN PROCESS
I started with How Might We’s and Crazy 8’s, and finally began wireframing. The web and mobile wireframes had to be done separately and obviously, there were numerous iterations.
Finally, the digital wireframes were ready and I created my lo-fi prototype.
The first usability study was conducted through zoom and link sharing. I recorded the reactions of the participants, and also received valuable feedback on the user’s mindsets and expectations.
The insights gained shed light on many things I needed to improve on. I used affinity mapping to organize the feedback and identify the core insights.
QUOTES & INSIGHTS FROM THE FIRST USABILITY STUDY
“The map wasn't real so I couldn't really use it or see many features.”
“I chose to create an account and it took me to user page which was too detailed.”
"I liked how the home page had an ADD property navigation for property owners like me. I couldn't find the payment page for listing the property."
"I liked the home page layout and the large search bar. It was easy to find and continue from there."
“The map wasn't real so I couldn't really use it or see many features.” “I chose to create an account and it took me to user page which was too detailed.” "I liked how the home page had an ADD property navigation for property owners like me. I couldn't find the payment page for listing the property." "I liked the home page layout and the large search bar. It was easy to find and continue from there."
70% of users expected an interactive map, even though this was a lo-fi prototype.
50% of users wanted to list properties and wanted to see the complete flow to complete that task
35% of users found the user account creation too detailed and tedious.
These and some more insights sent me straight back to the drawing board, aka XD. In addition to the iterations indicated in the study, I also discovered some other improvements that I implemented further into my hi-fi mockups—
I kept in mind to have an interactive map with as many details as possible.
I included a payment page in the hi-fi mockup that I hadn’t in the lo-fi mockups.
I changed the location of the chatbot from left bottom to right bottom (above the fold)
I tried to streamline the user details on the create account page but the nature of renting apartments is such that it required more than average information.
Hi-fi prototype with interactive map and changed chatbot location
Lo-fi prototype
Then it was again time for the second usability study with my hi-fi prototype. This time I sent the participants a link and set tasks, with a document where the participants could enter their feedback after each task.
I followed up with a zoom call interview with a set of open-ended questions to get overall feedback after the test was completed. (I preferred to not use zoom for the actual test as I realized being on call with the participants could lead to social desirability bias, and that was hampering the purpose of this test.)
Again the feedback and insights obtained led me back to the design. It is actually very exciting to receive feedback and have the “eureka” moment where small improvements or additions make a huge difference.
QUOTES & INSIGHTS FROM THE SECOND USABILITY STUDY
"It’s a nice homepage, nothing special but couldnt read the text on the first image as it was lost on that colorful image."
“The large search bar on the home page makes it very easy to start the search.”
“Simple and easy, but I wish they had a call back time selector when we send a message to any property. Sometimes calls come at annoying times.”
“I liked that we could search without having to create an account, and only had to submit details when we wanted to communicate with the property.”
“It’s nice to be able to pay for listing properties weekly, sometimes the property gets rented quick and paying for the whole month is a waste.”
“I like that the property details shows the commute and has the option to check those details on google maps.”
"It’s a nice homepage, nothing special but couldnt read the text on the first image as it was lost on that colorful image." “The large search bar on the home page makes it very easy to start the search.” “Simple and easy, but I wish they had a call back time selector when we send a message to any property. Sometimes calls come at annoying times.” “I liked that we could search without having to create an account, and only had to submit details when we wanted to communicate with the property.” “It’s nice to be able to pay for listing properties weekly, sometimes the property gets rented quick and paying for the whole month is a waste.” “I like that the property details shows the commute and has the option to check those details on google maps.”
50% of users found the text on the hero image tough to read.
40% of users said they don’t like unsolicited calls and emails and would like there to be a way to select call-back times.
60% of users liked that they did not have to sign in before starting the search.
30% of users who were property listers said they liked the option of weekly payments or monthly payments.
60% of users liked the option of being able to check commute times under the apartment details.
100% found the homepage very clean and loved the large search bar!!
The 100% positive feedback for the search bar was very motivating, but the other insights again shed light on more iterations -
The contrast of the text on the hero image was obviously not in line with the WCAG standards, I introduced a blue banner background under the white text and sure enough, it passed the WebAim standards.
I added the call-back selection option in the flow of submitting a request or scheduling a tour.
Before
Iteration with the blue banner behind the white text.
Overlay Before
Overlay after adding the call back time selector option
View the Final Prototype below
My thoughts
I treated this as a real-world project and tried to think of every possible difficulty the user could encounter, I learned that there is always room for improvement. Time is another essential aspect, and sometimes tight timelines can create difficulties.
What I would like to do is be able to participate in a Design Sprint and work with a team, as I believe that is a great way to optimize all resources and achieve goals in a limited time.
I always considered myself an empathetic person, but this whole learning process has helped me further develop my empathy and listening/observing abilities. Understanding the behavioral aspect of the user is very essential in order to realize their needs, desires and motivations. Empathy truly helps define the problems that we as UX designers need to provide the solution to.
Learnings
Design thinking is a non-linear process. There is constant back and forth between the various steps, and the more I practice the more I love doing it. Going back to the board to redesign or edit some features after receiving feedback is very interesting and motivating for me.
This product APARTMENT MATCH could be further tested and iterated upon multiple times, I’m sure I will be updating versions and making more additions as I progress. Learning ADOBE XD also led me to Anima, and as I learn more about that, I will upload the truly interactive versions of all my designs.
Assumptions are the worst thing for UX. My marketing background makes me think from the business and stakeholder’s point of view. The initial competitive audit and getting an idea of similar businesses out there, their products, users, and the market scenario was essential and I think this should always be included.
Research is the foundation of the product. Thorough, regular research before, during, and after this entire process helped me overcome impostor syndrome and boosted my confidence with each step.
Building a portfolio and writing case studies is the toughest job. With all the advice out there, it is extremely difficult to decide what is right or wrong. Hence this is a permanent ongoing iteration.
What I would do differently & next steps
Accessibility is something I want to learn more about and implement better in the future. I would love to be able to have a more varied participant pool for my research.
I would keep refining my design, as more things come to mind. You will see newer versions here soon.
Please feel free to reach out and connect, or leave a comment on email or LinkedIn.
Coming soon