The Goal:
The rental marketplace startup caters to the new generation
of renters with a mission to make renting and living safer, easier
and more attainable.
The task assigned to me was to streamline the sign up flow
on their website from the very beginning all through
the browsing units, booking a tour and applying for
a unit process.
of renters with a mission to make renting and living safer, easier
and more attainable.
The task assigned to me was to streamline the sign up flow
on their website from the very beginning all through
the browsing units, booking a tour and applying for
a unit process.
UX Research Methods outlined in the brief (by my supervisor):
- User Journey Map of the current competitors & the real-estate startup
- User Interface Wireframes of the current competitors in the real-estate market
- First Person Research (Signing up to the website to understand the user flow
from my own perspective)
from my own perspective)
- Second Person Research - creating UX flow after observing the similarities
& pitfalls of the workflows of the competition
& pitfalls of the workflows of the competition
Design Process
Method 1: Competitive Analysis through User Journey Maps
& UI Wireframes
The list of the competitors were chosen by the start-up founder with the objective of comparing
and analysing the good and bad experience of renting units online. The UX/UI design lead
and I mapped user journeys for 6 hot websites in the market -
& UI Wireframes
The list of the competitors were chosen by the start-up founder with the objective of comparing
and analysing the good and bad experience of renting units online. The UX/UI design lead
and I mapped user journeys for 6 hot websites in the market -
Bob.ai, Airbnb.com, Sublet.com, Zillow.com,
Apartmentlist.com and kopa.co
Apartmentlist.com and kopa.co
Below, are the user journey maps of three websites I worked on:
1. Zillow.com - The leading real estate marketplace in the US. Search millions of for-sale and
rental listings, compare Zestimate® home values and connect with local professionals.
rental listings, compare Zestimate® home values and connect with local professionals.
Overview of the Journey Map - Shows the journey of the user from the moment they enter the location for their rental unit search until the time they take the step to contact the broker or apply for the unit
Thinking Section - Highlighted - Lists down the first few thoughts of the user
Customer Experience section Highlighted - noted down how some features stand out
and how some could be done better
Rough wireframes outlining the navigation, models, ordinary and extra-ordinary features of the UI of Zillow.com
2. Apartmentlist.com: Apartment List is an American online marketplace for apartment listings.
Overview of the Journey Map - Shows the journey of the user from the moment they enter the location for their rental unit search until the time they take the step to contact the broker or apply for the unit
Thinking Section - Highlighted - Lists down the first few thoughts of the user
Customer Experience section Highlighted - noted down how the features could be done better
Lo-fidelity wireframes - outlining the navigation, models, ordinary and extra-ordinary features
of the Landing Page, Questionnaire Page and Search Results Page
Zoomed In View
Zoomed In View
3. Kopa.co: Kopa is a marketplace for monthly rentals and roommates that inspires renters to get out of their comfort zones, form lasting relationships, and live richer lives
Overview of the Journey Map - Shows the journey of the user from the moment they enter the location for their rental unit search until the time they take the step to contact the broker or apply for the unit
Thinking Section - Highlighted - Lists down the first few thoughts of the user
Customer Experience section Highlighted - noted down how the features could be done better
Lo-fidelity wireframes - outlining the navigation, models, ordinary and extra-ordinary features
of the Landing Page, Search Result Page and Individual listing Page
Common UX & UI elements I found in each website:
All the websites had familiar user interface on first glance
- search bar to enter the location, Sign up button on top right corner and listings pages with maps and listings in rows & columns format
All the websites have two Sign up user flows:
- one that starts with Sign Up button placed on top right corner in main navigation
- Another Sign Up option shows up as a pop-window when the user clicks the button to schedule a tour of the rental they are interested in or to contact the
agent to inquire more about the rental unit
agent to inquire more about the rental unit
Users can access the listings page without signing up
- You just have to enter one crucial piece of information - the city / location / zipcodeTwo of those five websites had a list of filter questions for the user to help them see customised rental listing options
- one gave user the choice to opt for it and the other had endless list of questions
with skip option
with skip option
Method 2: First Person Research
I signed up to the real estate startup website and followed the process to rent a unit of my choice
to understand the user flow firsthand. I took note of the responsive components, confirmation texts that gave me reassurance, areas that confused me, components that didn't respond the way
I thought they would and process that I felt were redundant.
to understand the user flow firsthand. I took note of the responsive components, confirmation texts that gave me reassurance, areas that confused me, components that didn't respond the way
I thought they would and process that I felt were redundant.
And I made a User Journey Map of these findings:
Method 3: Second Person Research
I made comments on the current user flow of the website in regards to the pitfalls that I experienced
as a user and made a new UX flow with the suggestions based on my research:
as a user and made a new UX flow with the suggestions based on my research:
Crucial Pain Points I stumbled upon:
- Once the user clicks on the city button >> the button converts into
a tenant inquiry form which is a bit misleading to the user
a tenant inquiry form which is a bit misleading to the user
- There are a few questions asked in the inquiry form about users gender
and their roommate gender preference that I felt were unnecessary.
These questions could be avoided and can be added in the separate roommate questionnaire form already available on the website
and their roommate gender preference that I felt were unnecessary.
These questions could be avoided and can be added in the separate roommate questionnaire form already available on the website
- Question like asking for users their phone no. - made me uncomfortable
- Once the user fills out the form a pop asks to Sign Up to get access
to the listing page which I and other users might find frustrating
to the listing page which I and other users might find frustrating
Due to NDA, I am not able to share the current user flow of the
real-estate website.
real-estate website.
Below is the new sign up user flow that I created in Figjam
with my suggestions:
with my suggestions:
There are two sign up flows that user can choose from to Sign up. You'll see both chalked
out below. One is through the Sign Up button on the top right corner of the website. The other
is accessible indirectly through Choose your city buttons on the homepage. I have made the
changes to the latter user flow.
out below. One is through the Sign Up button on the top right corner of the website. The other
is accessible indirectly through Choose your city buttons on the homepage. I have made the
changes to the latter user flow.
* I reduced the no. of questions to 7 that were previously 11 in all. Removed all the unnecessary questions that I made a note of under pain point section.
New Addition - Before hitting the user with the questions a prompt shows up that
asks them to fill tenant inquiry form. This prompt gives the website a more
user friendly tone as opposed to hitting them directly with a series of questions.
asks them to fill tenant inquiry form. This prompt gives the website a more
user friendly tone as opposed to hitting them directly with a series of questions.
The user is taken through a series of questions if they select YES.
On selecting NO they are taken to the listing page.
On selecting NO they are taken to the listing page.
New Addition - I added a question that asks the user what kind of apartment they want to stay
in to filter in the correct options for rental units.
in to filter in the correct options for rental units.
New Subtraction - I removed the question that asks about the no. of roommates as it
can be included in the separate inquiry form available on the website to find compatible roommates
can be included in the separate inquiry form available on the website to find compatible roommates
New Subtraction - In the original user flow, user needs to sign up before they are
presented with the rental unit options. In the new user flow, I removed the Sign Up
action since there are more chances the user will get annoyed and give up the search
at this stage.
presented with the rental unit options. In the new user flow, I removed the Sign Up
action since there are more chances the user will get annoyed and give up the search
at this stage.
Listings page - Keeping all other things the same, I added the essential detail - No. of Beds
and Baths in the Property Card. It is an important piece of information that the user would like
to see upfront usually.
and Baths in the Property Card. It is an important piece of information that the user would like
to see upfront usually.
New Addition - I added the Sign Up button at this step when the user takes the action
to call an agent or start application. Sign up is enabled through Sign Up Form and
Google Sign in window. Reason being, the user has made up their mind about seeking
more info on the rental units. So they're more likely to sign up to the website without any
hesitation or second thoughts.
to call an agent or start application. Sign up is enabled through Sign Up Form and
Google Sign in window. Reason being, the user has made up their mind about seeking
more info on the rental units. So they're more likely to sign up to the website without any
hesitation or second thoughts.
Result - I was able to streamline the sign up user flow by:
1. Adding a YES or NO prompt before pulling up the questionnaire for the users, keeps the user in control of the user experience.
2.including only essential questions in the tenant inquiry form that lead
to filtering in the right renting options for the user.
to filtering in the right renting options for the user.
3. removing random questions about no. of roommates and their gender
in the tenant inquiry form will allow users to stay focused on their goal of finding the right rental units and would not throw them off-guard and make them wonder why they are being asked this question.
in the tenant inquiry form will allow users to stay focused on their goal of finding the right rental units and would not throw them off-guard and make them wonder why they are being asked this question.
4. adding the sign up action at the point of least resistance, this would help the startup sign on more users to its website.
What did I learn:
1. Always ask WHY when working on streamlining the user flow. It'll eliminate
a lot of user unnecessary stuff and help in accomplishing the goal faster.
a lot of user unnecessary stuff and help in accomplishing the goal faster.
2. Always make precise user flows with detailed information. It helps the designer answer all the questions asked by other members of the team and stakeholders later on.
