Responsive Web Design
FlatFinder is a website focused on helping Indian adults find apartments/flats to rent/buy
PROJECT DURATION
2 weeks
MY ROLE
Independent UX designer, designing FlatFinder's responsive website from concept to delivery
RESPONSIBILITIES
- Conducting research & interviews
- Ideating solutions
- Paper and digital wireframing
- Low and high-fidelity prototyping
- Conducting usability studies
- Iterating on designs
- Responsive website design
TOOLS
- Adobe XD
- Notion
- Photoshop
- Google Suite
THE CHALLENGE
While current Indian apartment/flat listing portals in the market do offer convenience and a wide range of property options, they also have some major downfalls. With the presence of fake listings, inaccurate or incomplete information, lack of verification, hidden costs, lack of trust of broker/agents and cluttered website designs, users are more often than not left frustrated with their experience on these platforms, but are without an alternate solution.
THE GOAL
The goal of this project is to design a user-centric responsive website called FlatFinder. By putting the user at the center of the apartment listing portal, we aim to create a platform that not only meets their needs but also builds trust, fosters engagement, and establishes a competitive edge in the market.
UNDERSTANDING THE USER
I started the project by doing a competitor analysis of current listing websites in the market to familiarize myself with the competition and their offerings.
I conducted user interviews, which I then turned into empathy maps and user personas to better understand the target user and their needs. I discovered that most target users check multiple websites when searching for an flat to rent/buy which is very time consuming.
Additionally a majority of the target users were frustrated by the lack of accurate and updated information, fraudulent listings intended to influence users to choose more expensive properties, and poor mobile responsive experiences.
The overall insight gained during research was that "the target audience wants to save time and effort and make well informed decisions."
Through the primary and secondary research, I uncovered some common user pain points to address in my designs.
1
Navigation
Users are frustrated with clunky, non responsive UI and navigation flows of existing platforms in the market.
2
Information
Incorrect/missing information and outdated property listings causes distrust among users.
3
Trust & Transaprency
Users want to find properties within their budget. There are often hidden costs and aggressive upselling in property rentals.
4
Time
The entire search process is time consuming and good properties get rented out fast.
CREATING THE SITEMAP
For the website sitemap, my goal was to create a straightforward navigational flow which focused on simplicity and efficiency.
WIREFRAMING
I created paper wireframes to help me quickly sketch down various possible layouts for the website.
The refined paper wireframe on the extreme right provided the most efficient layout keeping user pain points in mind.
As non-responsive UI was a major pain point across users, I created paper wireframes for different size screens to highlight how the elements would be laid out across devices.
Based on the users’ need for a simplified flow, the homepage of the website was designed to highlight the website’s primary call-to-action which is finding a flat. Users have a second entry point into the user flow with the rent a flat option in the navigation bar.
In addition, easy access buttons like shortlisted, location detector, and profile were introduced.
According to user research, the majority of users had little knowledge with the area before relocating. In the digital wireframes, users were given the ability to explore the area by using the map view, which helped them make a better educated choice.
Since many users found transparency to be a problem, I introduced a price breakup option so that users could easily view all the information they needed.
LOW-FIDELITY MOCKUPS & PROTOTYPE
I connected the digital wireframes to create a prototype for the find an apartment/flat flow.
The prototype has clear navigational cues to guide the user through the flow. The user is also able to move forwards and backward easily through the screens.
View the FlatFinder low-fidelity prototype
USABILITY TESTING
I conducted an unmoderated usability study with 5 participants in different parts of India. The aim of the study was to evaluate how easy/difficult the prototype was to use and if I missed out on any important features.
These were the usability study findings
1
Listings
-
Confusing information hierarchy and emphasis
-
Option for virtual tours to verify flats before site visits
2
Map View
-
Users found the map view very helpful
3
Search Filter
-
Users need an additional filter to check flat availability status
4
Chat Feature
-
Need for direct online communication with owners and agents to keep track of conversations, viewings and manage follow ups
Design decisions and iterations.
Based on user research, there was a need for a simplified flat filtering system. I have placed the search and filter in a central position on the navigation bar for quick access at any point during the user journey.
Additionally, in order not to miss out on new listings, I have added a notification icon to alert users of new flat listings matching their search.
Based on user research, it was revealed that users could benefit from both a list and map view when reviewing listings. List view provides a semi-detailed property overview, while the map view helps with proximity/landmark based searches..
Based on user research, users want to be able to find accommodation in proximity to a certain address which could be a place of work, a relatives place etc.
The Map view allows users to drop a pin via the landmark filter in the top navigation bar.
Available flats in the area are shown as dots which can be connected to the dropped pin to check the distance.
Based on user research, it was revealed that users could benefit from both a list and map view when reviewing listings. List view provides a semi-detailed property overview, while the map view helps with proximity/landmark based searches..
Based on the usability findings and WCAG accessibility standards, the hex of the primary brand color was changed to a darker shade to provide sufficient color contrast.
HIGH-FIDELITY PROTOTYPE
(Interactive)
The high-fidelity prototype followed the same user flow of finding a flat as the low-fidelity prototype. This prototype highlights FlatFinder’s branding and includes the design changes made after the usability study.
Click the above image to interact with the prototype
ACCESSIBILITY CONSIDERATIONS
1. Use of landmarks to help users who rely on assistive technology to navigate the site.
2. Foreground, background and text colors have been updated to meet WCAG accessibility standards
3. Alt text used for images to provide context for screen readers
LESSONS LEARNED
This project taught me the value of having a user-centric design. FlatFinder's user-centric design helps both the user and the company by enhancing user satisfaction and credibility. Currently, platforms in India place a greater emphasis on business objectives, which leads to customer unhappiness and mistrust of both the company and the brokers/landowners that advertise on these websites.
Another lesson was the importance of using a mobile-first strategy given the widespread use of mobile devices in India. The user experience was improved by the website's design, which made it easy for users to access and use the platform on devices with different screen sizes.
NEXT STEPS
The possible next steps would be to explore additional website features like direct online communication between users and brokers/landlords, property visit scheduling and broker profile pages with ratings and reviews to build trust with users.
