New Door Website For Finding Rented  Apartment

The product: 

New Door is a platform to find rental apartments that offers range of places. The typical user is between 19-80 years old, and most users are college students  career professionals and families. New Door goal is to make finding apartment engaging, fast, and easy for all types of users.

Project duration:

October 2021 to  December 2021

The problem: 

Available platforms have minimum to no scope for socialising to put forth the requirements. New Door website for rental apartment will provide lists of rentals and platform and engage with respective owners socially.

My role: 

UX designer designing a responsive website for finding a rented apartment (New Door) from conception to delivery.

The goal: 

Design a website to find rental places with ease by listing properties and providing opportunities to users by allowing them to engage socially.

Responsibilities:

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.

Understanding the user

  • User research

  • Personas

  • Problem statements

  • User journey maps

Project Overview

User Research Summary: 

I conducted user interviews, which I then turned into empathy maps to better understand the target user and their needs. I discovered that many target users prefer online hunt for rental places when they need to relocate within the city or intercity. However, many rental websites are overwhelming, confusing at times due to unresponsive contacts or properties posted and involvement of middle-men/brokers which frustrates many target users. Hence, it becomes challenging for them, defeating the purpose of authentic information about the vacant places or tenants ending up paying more than required.

User Research: Pain Points
Frame 2.png
Persona: Ishan Sarkar

Problem Statement:

Ishan Sarkar is a busy employee who needs a rented apartment online which is affordable brokerage free & located nearby office because of lesser options online due to unresponsive contacts mentioned.

Google UX Design Certificate - Persona [Template].png
User Journey Maps

I created a user journey map of Ishan’s experience using offline/online hunt for homes to help identify possible pain points and improvement opportunities.

User journey website design.PNG

Starting the Design

  • Sitemap

  • Paper wireframes

  • Digital wireframes

  • Low-fidelity prototype

  • Usability studies

Site Map

Difficulty with website experience was a primary pain point.

 

My goal here is to make strategic information architecture decisions that would improve the overall website experience. The structure I chose was designed to make things easy & engaging.

Facebook post - 1.png
Paper Wireframes

Next, I sketched out paper wireframes for each screen in my app, keeping the user pain points about interaction & engagement flow in mind.

 

The home screen paper wireframe variations to the right focus on optimizing the browsing experience for users.

1641754425510 (2).jpg
1641743235090.jpg
Paper Wireframes Screen Size Variation

Because New Door customers access the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.

1641743174385.jpg
Digital Wireframes

Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience. 

 

Prioritizing useful button locations, search, feed and visual element placement on the home page was a key part of my strategy.

Easy access to search location to stay.

Web Digital Wireframe 1.png

To increase engagement of tenants and owners for minimising misinformation

Digital Wireframes Screen Size Variations
iPhone Pro Max digital wireframe - Dark.png
Low-fidelity prototype

To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of accessing feed and browsing properties listed and contact owner and tenants on the platform.

 

At this point, I had received feedback on my designs from friends and mentors about things like placement of buttons and page organization. I made sure to listen to their feedback, and I implemented several suggestions in places that addressed user pain points.

Low-fi.PNG
Usability study: parameters
parameters usability.png
Usability study: Findings
Frame 3.png

Refining the Design

  • Mockups

  • High-fidelity prototype

  • Accessibility

Mockups

Goal is to increase trust and engagement on the platform. Based on the insights from the usability study, I made changes to improve experience by hiding messages on overlay from home page. Introduced additional filters. I got feedback from peers not to include social feed but it’s my decision to put social feed to make property search fun and engaging.

Before Usability Study

Web Digital Wireframe 1.png

After Usability Study

MacBook Pro 13.png

To make the communication be authentic i have introduced the rating based on the number of calls answered or rejected/unavailable below the owner.

Before Usability Study

before.png

After Usability Study

after.png
Mockups: Original Screen Size
2.png
1.png
4 hifi.png
3.png
Mockups: Screen Size Variation

I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users access from a variety of devices, I felt it was important to optimize the browsing experience for mobile as well so users have the smoothest experience possible.

COVER.png
High-Fidelity Prototype

My hi-fi prototype followed the same user flow as the lo-fi prototype, and included the design changes made after the usability study, as well as several changes suggested by members of my team. 

 

View New door’s Hi-Fi prototype

Hifi prototype.PNG
Accessibility Considerations
  • I used headings with different sized text for clear visual hierarchy

  • I designed the site with alt text available on each page for smooth screen reader access

Going Forward

  • Takeaways

  • Next steps

Takeaways

What I learned:

I learned that even a small design change can have a huge impact on the user experience. The most important takeaway for me is to always focus on the real needs of the user when coming up with design ideas and solutions.

Impact: 

Our target users shared that the design was intuitive to navigate through, more engaging with the images, and demonstrated a clear visual hierarchy.

Next Steps
  • Conduct follow-up usability testing on the new website

  • Identify any additional areas of need and ideate on new features