PRECIOUS UKACHUKWU

UI/UX designer

ALL IDEAL HOMES

A Responsive Website for Finding Apartments

Project Overview

All Ideal Homes is a responsive website that allows users to locate and contact apartments to rent quickly, in Lagos, Nigeria. Ideal Homes is an online home rental marketplace that caters for the housing needs of their users, be it students, families, working adults e.t.c.

All Ideal Homes provides fully-furnished/semi-furnished/unfurnished well-maintained rooms and apartments for rent without any brokerage fee.

The Challenge

By estimate, Lagos now has a population of 23 million people. At least, about 86 persons migrate into the state every hour (vanguard). Searching for a house physically, could be challenging and frustrating, with agents trying to exploit you and most times not meeting expectations. Getting a clean, safe and affordable apartment in a cool location in Lagos, is a serious struggle and in your search for an apartment, you’ll probably meet a crazy agent, who’ll introduce you to a difficult landlord and his poorly maintained house.

These unending challenges associated with finding apartments also ranges 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 an easy to use, yet responsive website that allows individuals to search for apartments easily and provides them with adequate information to help them make well-informed decisions.

Project Duration

March 2022 - (3 weeks)

My Role

I was the only designer for this project and I functioned as the UI Designer and UX Researcher.

My Responsibilities

My responsibilities includes but was not limited to the following: UX Research, Competitive Analysis, Creating User Personas, User flow, Information Architecture, Wireframes, Prototypes and conducting Usability Testing.

Design Process Used - Double Diamond Principle

Discover

User Research Summary

At this stage, Primary research (user survey and user interview) were used as the research method.

Firstly, I conducted the user survey to have a broad, yet in-depth knowledge of the challenges, after which I went ahead to conduct user interviews with selected participants that represents my target audience to increase my knowledge of the users' challenges which afforded me the opportunity to empathize more with the users I am designing for. A primary user group identified through research were working class adults, students and families within the age range of 18 to 50 years who wanted to relocate or have used an apartment finder app or website in the past, to understand their pain points and frustrations. My research findings was summarized as users pain points.

Users Pain Points

No easy way to search for apartments, with basic information such as price, location, size and facilities.
Users prefer to know all the costs associated with the apartment upfront — no hidden charges.
I need to know about the environment I will be living in from people who already live there.
Users wants to know if the apartment is fully furnished, Partly furnished or not furnished and need to be able to save apartments they are interested in, and add to their Wishlist.
Users wants to see proper high definition images for improved decision making.

Ideal Homes Competitors

Competitive Analysis

In a bid to better understand the market, competitive analysis was carried out to identify both direct and indirect competitors, examine their strengths and weaknesses so as to create a website that really solves the need of the users.

Some of the competitors (direct and indirect) identified includes:

Airbnb
Flatfy
Renting.ng
Nigeria property center

Define

Empathy Map

During the interviews, I collected a lot of raw data, which I sorted these interview data into an empathy map. I created an aggregate empathy map and made used of Maxwell to represent the target group.

Creating an empathy map helped me understand the users’ needs and pain points.

User Persona - Maxwell

User Persona

Based on the survey/interviews, I created a persona. I referred to it throughout the entire product development process.

User Story

I created a user story based on the research made and the story was in line with the persona created.

As a busy investment banker, who recently got a new job, I want to rent a house close to my new office, so that commuting to the office will be less stressful.

Problem Statement

I defined the problem statement based on the research.

Maxwell Uche is a busy investment banker who needs an apartment finder website, with proper imagery and description of the property and cost implication because he wants to get a new apartment for easy commuting to his new place of work.

Site Map

I created a site map which is an information architecture to help with the organization and labelling of content. The sitemap serves as a guide to where each content would be placed on the website.

Develop

Paper Sketches

I usually start the design process with paper sketches to get my thoughts and ideas out. This is the way I iterate through many design options quickly on what the actual design might look like. and also get an idea of how I want the information architecture to look and feel.

I sketched the way I wanted the website to look like when viewed on different screen sizes, since I was designing a responsive website.

Screens of the Homepage on Desktop, Mobile and Tablet

Wireframes (Low Fidelity)

After getting an idea and sketching some screens on paper, I then transition into creating low fidelity wireframes so as to focus solely on the structure and the user flow of the website.

During this phase of developing, I ensure to base screen designs on feedback gotten from users (primary and secondary research) during the discover and define phase.

Adobe XD was used for creating the low fidelity wireframe of Ideal Homes and also for prototyping of the wireframes.

once I was done with the prototype of the low fidelity wireframes, I went on to conduct the first round of usability testing

First Round of Usability Testing

For this round of usability testing, The method used was moderated usability studies, before creating the high fidelity wireframes of the product, in order to reveal possible usability problems.

Research goals:

To determine if users can complete core tasks or navigate the apartment finder website (All Ideal Homes) with minimal or no assistance using the low fidelity prototype.
To determine the ease of use by the user.

A total of 5 participants were recruited for this stage of testing. Three males and two females between the ages of 18 and 50. One participant is a person with visual impairment.

All participants were asked same set of questions and observed as they carried out and completed tasks on the website which helped identify possible usability problems. These findings were grouped and categorized by placing similar observations in a group using affinity diagram.

Adjustment were made both to the user flow and also some of the wireframes (screens) were redesigned to simplify the flow there by creating a better experience for the users based on the insights gotten from the study.

Mock Up

Wireframes (High Fidelity/Mock ups)

After the first round of usability testing with the low fidelity prototype, I proceeded in designing the mock ups (high fidelity) screens and I ensured, I used high contrasting colors and appropriate font sizes to ensure that the website’s content can be read by everyone.

Tool used for this design is Adobe XD

Deliver

Second Round of Usability Testing

Before designing the final screens of the product, I did another testing round in order to reveal possible usability problems. By testing the design at this stage, I could observe an interaction that most closely resembles a real-life interaction with the final product.

Final Screens

Accessibility Consideration

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.

Learning and Takeaways

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.

Next Steps

Continue the iteration process to ensure that all the users needs have been properly addressed and also come up with best possible ways to better improve their experience.