Saving for conversion

Creating a saving function that enables users to control more details about why they saved and help users achieve their goals

scroll

SCREENS.jpg

This was an independent project where I was tasked with recreating the Saved UI of a real estate listings platform. The goal was to create a more usable UI. 

The problem

The current state of the Saved tab is very minimal and not very usable. The only functionality it
currently includes is to save a listing and to delete a listing. Users go through a long and sometimes
complicated journey when buying a home and they need a better way to manage this process and
keep track of their progress.


The Saved tab should enable management, organization, and help users take the next step with a listing.

original saved.jpg

Original mobile saved tab

User research

I conducted several user interviews to understand better why users saved certain listings and how they used the Saved tab later in their user journey.

 

Users were from many different groups ranging in age, gender, family status, current living situation, and financial status. There were some differences I observed in the way they used the platform but the feedback regarding the Saved function was nearly unanimous. 

Users all reported that saving is a critical function for such a platform so that they could easily come back to listings that they were interested in and decide whether or not they wanted to move forward. However, the current Saved tab didn't include many features to help walk them through the user journey. They had no way to sort listings according to listing details that would inevitably be deciding factors for them. 

sketches 2.jpg
sketches.jpg

Early sketches and notes following user interviews

new saved.jpg
baseline_view_carousel_black_24dp.png
baseline_view_list_black_24dp.png

The new UI

request.png

Switch View:
Give users an easier way to view their listings. Some people want to view them as rows of cards that scroll both horizontal and vertical in order to get a wider view of all their listings. Some viewers may prefer a list view that only shows one listing on the screen at a time.

Sort:
Allow order of listings to be sorted in order to better prioritize what matters to the user. Shown in design:


Neighborhood- therefore each row is a different neighborhood. If the user chooses to sort by My Status, each row would be for a different stage,
for instance 1- Saved, 2- Contacted, 3- Toured, etc. Sorting can also be reversed in order (ascending to descending, A-Z or Z-A, Saved-Not interested or Not interested- Saved, etc).

Confirm delete:
Instead of simply clicking the bookmark icon to delete a listing, include a dialog to confirm that a user wants to remove this listing. Some users may accidentally click this icon, without intention on mobile. Additionally, they need to understand that this will erase all the status and notes
associated with a saved listing.

CTA for next steps:
Encourage users to move forward with listings by including a call-to-action on the listing card indicating what the next step would be depending on their current status.

Listing amount:
Show clearly at the top of the screen how many total listings a user has saved.

Filter:

The same filters used when searching

can be used to further refine your Saved listings. I would suggest adding on-off market filter options as well as My Status (contacted, toured, etc. in the filters). Design shows “3 beds” is the only selected filter, so only 5 listings showing 3 beds appear,
even though the total amount of saved listings is 6.

Component 9 – 1.png

My status:

A dropdown selection allowing people to mark where in they are in buying journey.

Collapse details:

Don’t overwhelm users with too many details about each listing in initial view. Allow them to expand
and view the details of a listing if they choose.

Component 5 – 1.png
Component 6 – 1.png

Add note:

Allow users to add notes and clearly indicate when a listing has notes associated with it. This customizes their experience with each listing allowing them to come back to a listing at a later time and recall issues, advantages, etc.

Component 7 – 1.png
new saved.jpg

Iterations

The design includes several new features. I don't suggest rolling out all features at once. Prioritize features and test them first before adding more. This will enable you to understand what was helpful to users and what wasn't before spending more resources on development that could have been better utilized.