Categories
Case Studies

Designing a Website for Finding Apartments — A UX Case Study

View the original post

Designing a Website for Finding Apartments — A UX Case Study

Image of the website’s home page in three sizes — desktop, tablet and mobile.
Responsive web design

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.

The Problem

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.

The Goal

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:

  1. People need an easy way to search for apartments, with basic information such as price, location, size and facilities.
  2. People prefer to know all the costs associated with the apartment upfront — no hidden charges.
  3. 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.

Site map
Site map

Paper Wireframes

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.

Digital Wireframes

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.

An image of the website’s digital wireframes
Digital wireframes (desktop)

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:

  1. Users could not tell the purpose of the website at first glance.
  2. 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:

  1. I adjusted the UI text to give users a clear description of the site’s purpose.
A before and after image of the homescreen. The header text was changed from "Let's help you find your dream home” to “Let’s help you find your dream apartment”.
The header and button texts were adjusted

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.

Design Solution

View the high-fidelity prototype here.

  1. 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

Tablet and mobile

Accessibility Considerations

  1. I used high contrasting colours and appropriate font sizes to ensure that the website’s content can be read by everyone.
  2. To ensure compatibility with assistive technology such as screen readers, I used appropriate hierarchy and emphasis throughout the design.

Takeaways

  1. 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.
  2. 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 cuzegbu@gmail.com. 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.