View the original post
Designing a Website for Finding Apartments — A UX Case Study
I recently moved into a new apartment. Today makes it exactly three weeks since I started living in my new home, but I’m yet to recover from the stress of moving.
Moving house is not something I particularly look forward to. Let’s face it, finding (and moving into) a new apartment can be stressful — from the multiple tours of countless apartments to packing and moving all your stuff. And when you finally think the hard work is over, you’re then faced with the not-so-easy task of trying to familiarise yourself with your new neighbourhood. But it’s all part of growth, right?
Well, speaking of things I did recently, I also recently completed course 6 of the Google UX Design certificate program. When it came to choosing a design challenge for my course project, it had to be a website for finding apartments. Having been through the hassles of trying to find an apartment, I was determined to make the process of finding an apartment easier for people.
This case study describes my process of creating CribHunt — a responsive website for finding apartments in Nigeria.
Finding a new apartment can be very stressful — from the countless apartment tours to the enormous costs associated with the process. Little wonder most people dread the experience. The challenge was to find an easy and stress-free way for individuals to find their dream apartments.
My goal was to create a website that allows individuals to search for apartments easily and provides them with adequate information to help them make well-informed decisions.
My Design Process
Phase 1: Understanding the user
I started by conducting foundational research. My research findings can be summarized as follows:
- People need an easy way to search for apartments, with basic information such as price, location, size and facilities.
- People prefer to know all the costs associated with the apartment upfront — no hidden charges.
- People want to know about the environment they will be living in from people who already live there.
Phase 2: Ideation and Wireframing
This phase involved coming up with ideas on how to meet the user needs I identified. I started by browsing through similar websites to identify content themes and formats that work well in the industry.
Next, I created a site map to help with the organization and labelling of content.
At this stage, I had a good idea of how to organise the website. It was time to start sketching. I started by sketching for larger screen sizes eg. desktops.
With the basic layout of the site established, I began sketching for smaller screen sizes eg. tablet and mobile, while trying to maintain a consistent structure across all devices.
The next step was to create a digital version of the wireframes in Adobe XD. Again, I started with the larger screen sizes before proceeding to smaller screens.
Phase 3: Prototype and Testing
I connected the digital wireframes to create a low-fidelity prototype and recruited five participants to test the prototype.
The findings are as follows:
- Users could not tell the purpose of the website at first glance.
- Users could not easily locate the reviews section, which is an important feature of the website.
See the low-fidelity prototype here.
Based on my findings, I made the following changes to improve the site’s usability:
- I adjusted the UI text to give users a clear description of the site’s purpose.
2. To make it easier for users to locate the reviews sections, I linked it to the top of the page. This way, users would not have any trouble locating it.
View the high-fidelity prototype here.
- Search for an apartment in your chosen location quickly and easily
2. Well-defined categories for easier navigation
3. Know the exact location of the apartment with a location map
4. Save yourself the stress of countless physical tours with a virtual tour option
5. Know what the current residents think about the neighbourhood by reading reviews
6. Book an apartment tour in 3 easy steps
Other screen sizes
- I used high contrasting colours and appropriate font sizes to ensure that the website’s content can be read by everyone.
- To ensure compatibility with assistive technology such as screen readers, I used appropriate hierarchy and emphasis throughout the design.
- Taking account of factors such as screen size, interaction, functionality and content layout while designing for the web is key to ensuring an optimal user experience across all devices.
- Always be open to feedback at every stage of the design process.
Thank you for reading!🤗 This is my first attempt at designing for the web. So I would appreciate your feedback, comments and suggestions.
You can connect with me on LinkedIn or simply say hello at firstname.lastname@example.org. I’d love to hear from you.
Designing a Website for Finding Apartments — A UX Case Study was originally published in Muzli – Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.