Responsive Web App Design

Responsive Web App Design

Responsive Web App Design
UX Case Study
UX Case Study

  1. About

What is

ApartRent is an apartment listing website which provides users with numerous features like extensive filters, virtual tours, booking physical tour appointments and giving accurate neighborhood information to the users.

Problem Statement

Existing house rental websites often irk the user with inaccurate pictures/description and misleading information. User’s also usually have to do extensive research about the locations on other platforms.

Goal and Objective

A quick and easy way to look for houses to live in, with accurate and up to date information, making the user’s experience as smooth and less time consuming as possible.

My Role and Responsibilities

• Performing user research
• Conducting user interviews
• Doing competitive analysis

• Creating user personas
• Performing competitive analysis
• Building empathy and journey maps

• Leading usability studies
• Iterating on designs
• Accounting for accessibility

• Sketching wireframes
• Drawing mockups
• Implementing low and hi fidelity

Design Process

  1. Empathize Stage

During the first phase of the process, the user’s needs, wants, priorities, pain points and frustrations were identified, using qualitative and quantative research methods. This research helped deliver key insights and findings, which were used throughout the design process.

User Research

The user research was conducted via 5 one-on-one interviews via Zoom. During the interview, opinions about experiences with apartment listing websites, user wants, needs and other relevant queries were taken from the interviewees.

From these interviews, pain points for users were identified, along with the creation of empathy maps, user personas and problem statements.

Pain Points

  1. Inaccurate Information

Apartment rental websites often contain inaccurate pictures, insufficient descriptions and hidden costs.

  1. Lack of Location Information

Users have to use other platforms to gain information regarding neighborhoods, like nearby transportation, grocery stores, schools etc.

  1. Time Consuming

Dealing with real estate agents, agreeing on a time and place to meet and then physically going to inspect the house takes up a lot of time.

  1. Outdated User Interfaces

Existing websites possess a non-modern look, which while not easy on the eye, also hampers the user experience.

Competitor Analysis

Primary and secondary competitors providing comparable solutions were studied and examined, concentrating on their responsiveness, approachability, holistic user experience, functionality, and the user interface.

User Empathy Map


• Online websites have been a godsend but often they’re filled with misleading information.

• I want to see accurate pictures, proper details and location of the apartment mentioned.

• I should know what the neighborhood atmosphere is like.

• I would prefer an alternative to a physical inspection, since I don’t have much time to spare.


• Inaccurate information is a big problem.

• Realistic images and descriptions will do wonders.

• Should have information about nearby facilities.

• Physically searching for an apartment is time consuming.


• Searches for apartment location on Google Maps.

• Looks for nearby facilities available on other platforms.

• If not online, then finds apartment ads in newspapers or goes to real estate agent’s office.


• Peeved at inaccurate or lack of information.

• Irritated that he has to search separately.

• Uneasy about potentially moving to a dangerous neighborhood.

• Annoyed at real estate agents looking out for themselves.

• Frustrated that an apartment search is extremely time consuming

  1. Define Stage

During the second phase of the process, the user’s availble information about their wants and frustrations was analyzed and were used to construct two user personas, as well as a user journey map.

User Personas

User Journey Map

A chart that demonstrates the user flow of renting an apartment through an existing apartment listing website, and the user’s feeling and suggested improvements that will be offereed through

User Journey Map

A chart that demonstrates the user flow of renting an apartment through an existing apartment listing website, and the user’s feeling and suggested improvements that will be offereed through

(Expand screen width or "Request Desktop Site" to view User Journey Map Chart)

Persona: Bilal Mushtaq

Goal: Browse and finalize a contract for an apartment for rent


Open apartment listing website

Select an apartment

Research location and apartment details

Call and ask to set up a time to see the apartment

Finalize Booking


A. Go to URL

B.Open “rent” section

A. Filter/sort results according to preference

B. Click on the preferred apartment’s thumbnail

A. Enter address on Google maps

B. Read online reviews about the neighbourhood

C. Search for nearby stores and facilities

A. Look for the ad poster’s phone number

B. Decide on a place and time

C. Meet the ad poster

A. Sign the contract

B. Pay security deposit and agent fee in cash


Excited to look for a new apartment

Overwhelmed by the various options

Frustrated that all information was not available in one place

Annoyed because of the lack of feasibility of time and location in meeting the ad poster

Relieved that he was finally able to get an apartment


A responsive ad listing website dedicated to rental apartments

An interface with a smooth experience, without any clutter.

All relevant pictures shown

All key information about neighbourhood, nearby facilities, public transport mentioned with an embedded map.

Virtual tour of the apartment.

“Book an Appointment” option which mentions available time and date slots for meeting, as set in advance by the ad poster.

Option to pay through secure channel of website for an added fee.

  1. Ideate Stage

During the third phase of the process, there were several brainstorming activities performed, and the emphasis was on quantity over quality. Among these activities were How Might We, Crazy 8’s and drafting big picture and close up story boards.

Information Architecture Diagram

Information architecture is a discipline that focuses on organizing information within digital products clearly and logically.

  1. Design Stage

During the fourth phase of the process, the number of design ideas for the responsive webssite were shortened down and to the designs with the most efficent, user centric, accessible and the most beneficial user experience. This was done through the sketching of paper wireframes, which were then converted to a digital wireframe. Low-fidelity prototyping followed, on which there was a usability study conducted, which paved way for improvements and the eventual final mock up design and high-fidelity prototyping.

Paper Wireframes

Digital Wireframes - Responsive

Web, Tablet and Mobile

All Listings Page
Web, Tablet and Mobile

Usability Study

After the initial wireframing and low fidelity prototyping, a Usability Study was conducted. During the study, the main user flow of searching for an apartment, applying a search filter and then selecting an apartment was observed.

As a consequence of the study, further iterations were made on the wireframes which were eventually built upon to create the high-fidelity mockups and prototype.

Study Type: Unmoderated Usability Study
Location: Turkey, Remote
Participants: 5 participants
Length: 10 minutes
Results: Users complained about a missing search button on the homepage hero image, as well as the lack of ability to cancel the “apply filter” overlay. Some users also had issues with the size of the filter overlay - all of which were fixed in the next iteration of the wireframes and consequently the final mockups.

Affinity Mapping

From the usability study conducted on the low fidelity prototype, all observations were laid out on a board in the form of an affinity map. The different colors represent different aspects of the study.

Orange: Opinion on the overall user experience.
Pink: Completing prompts, for Searching, Selecting a Listing and using filters.
Green: Overall tone and attitude of the participant.

  1. High Fidelity Mockups and Prototype

Utilizing the findings from the usability study, a final User Interface was designed, keeping in line with the wireframes designed before. The user interface design included the use of Gestalt Principles and accounts for accessiblity as per the WCAG standards.

Homepage Mockup
Web, Tablet and Mobile

All Listings, Selected Listing and Filter Popup Mockup

High Fidelity Intractable Prototype

If you don’t know where to click, please click anywhere and look for the blue highlights. The prototype below is scrollable and clickable.

Major Product Features


Connect to Content

Add layers or components to make infinite auto-playing slideshows.

  1. Book An Appointment

Customers can utilize the Book An Appointment/Tour option to arrange an in-person tour of the featured site straight from the Listing page. The client simply has to choose a date and time from the open slots, and the seller/representative will be immediately informed of the appointment.

  1. Virtual Tour

When available, visitors can experience a virtual tour of the apartment using video, 360-degree photos, and augmented reality. This enables them to gain a solid understanding of the property without needing to be present on-site.

  1. Detailed Neighborhood Information

Every listing page features comprehensive data about the area, such as crime statistics, local schools, nearby supermarkets, proximate transit routes, and close shopping centers. All represented on an interactive, embedded map.

  1. Easy-to-use Filter System

The user friendly filtering function aims to assist individuals in tailoring search outcomes to their unique requirements, concentrating on cost bracket, property dimensions, property classification, facilities, and lifestyle factors.

  1. UI Kit and Design System


Roboto Bold
Roboto Medium
Roboto Regular

Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
0 1 2 3 4 5 6 7 8 9

Color Palette











Sticker Sheet

  1. Design Validation

  1. Usability Study

Iterative user experience evaluations and usability testing, together with A/B testing, must be carried out with cooperative test subjects, who will engage with the website and provide feedback regarding their experiences utilizing the platform.

Recurring usability studies and tests, along would need to be conducted with willing participants, who will use the website and give opinion about their experience using the application.

Recurring usability studies and tests, along would need to be conducted with willing participants, who will use the website and give opinion about their experience using the application.

  1. Heatmaps

To examine user behavior during the use of the software, heatmap analytics tools such as Hotjar or Smartlook to be employed to gather valuable knowledge, enhance comprehension of user behavior and flow, and empathize with users after the production stage.

  1. Accessibility Considerations

  1. Hierarchical Text

Utilizing various heading sizes to establish a distinct visual hierarchy in text

  1. WCAG Compliant Color Palette

  1. WCAG Compliant Color

Utilization of an accessible and inclusive color scheme, ensuring the design preserves a WCAG ratio of 7.29:1

  1. Screen Reader Allowance

Every primary area features labels beside them for screen reader usage

  1. Iconography

Utilizing widely recognized icons to enhance user experience and simplify navigation.

Daniyal Admaney Portfolio

UX and Product Design

Daniyal Admaney Portfolio

UX and Product Design