Designing Photostories

A single feature that doubled Conversions & Engagement on Housing.com’s new App


BACKGROUND

It was March 2015, at Housing.com’s HQ we were all heads-down focussing on our “Mobile-only” approach to build the future suite of our products. We stumbled upon very peculiar usage pattern in our existing apps. People visiting the app’s Rentals product only cared for the Photos, Rent and Neighborhood while browsing on smartphones.

We’d found from our user feedback that people make pretty accurate decisions about the homes they want to live in from photographs alone. But the metrics of our photo usage showed a completely different story.

Less than 40% of our users on the Listing Details page ever saw more than 2 photos!

The engagement numbers were abysmal. We tried adding tooltips to teach users about that gallery. Didn’t work.

Our Old Listing Details UX.

It was clear that we had to be extremely bold in our attempt to surface more pictures to our users. This was because

  1. Housing has only high quality verified photographs taken by our field agents. No user clicked photos at all.
  2. Our user interviews and conversion pattern suggested people only lean on photos in order to make a final decision.

ENTER PHOTOSTORIES

Hence after many iterations ranging from the obvious Photo grids to the hideous like “Tap for 15 more photos” CTAs, I reached this particular clever interaction.

Our New Listing Details UX with Photostories.
Check out a Framer prototype by Kushagra to really experience it.

The simple philosophy behind this UX strategy was to leave users at a point where they can easily make a choice to either A) Scroll up and read all the details, or B) Swipe down to Browse all our photos in a single scroll.

This helped teach our user’s we actually had more than 1 photograph of each home on our platform. Also, user’s could frictionlessly switch back and forth between reading about the flat and watching photos easily.

We called it a “Photostory”, because it narrates a story of the home through photographs and captions.

Within a couple of months, we polished and launched this interaction on our apps.


THE DATA

We looked at our analytics in a few weeks to check on the performance of our new feature. The numbers were astounding!

NOTE: The following are a few charts which compare the week-on-week performance of our Listing Details page before and after our Photostory launch. This helps reaffirm the consistency of these results. Also the launch was not part of an A/B test, since it was recorded on separate months for our rentals product.

Photo engagement

We first measured the percentage of traffic on the Listing Detail View which viewed more than 1 photo over a period of 3 weeks.

We achieved a more than 2X jump in engagement on the Photostories. Also nearly 94% of the users who reached the Details view used Photostories, ergo they understood it without needing tooltips! #Win

Shortlist Conversions

Next, We compared the percent of traffic which tapped the Shortlist ‘heart’ button. User’s normally shortlist homes they plan to compare or call later. Hence, this is a very important metric to our business.

This chart clearly shows an average of 4% increase in people shortlisting and showing their interest with Photostories.

Pro tip: If you look closely, NOTHING about the Shortlist button had changed in both strategies. The placement, the size and the affordance of the little ‘heart’ button on the top bar were exactly identical!

Phone Call Conversions

Finally, we compared the metric which each lead generating platform closely measures; The percentage of traffic that finally converts into a lead via a phone call.

This is the best part. We doubled the traffic that converted to a Lead!

BONUS: Let’s also compare another form of lead conversion we have on Housing which happens without a phone call. Essentially, our user’s can ask for a Call back by submitting their contact details in a simple form.

We doubled this metric too. :)


BOTTOMLINE

This experiment taught me quite a few things.

  1. Never underestimate the power of making things obvious.
  2. Images create a story you can never create with stats, numbers or text.
  3. Gently present the various options you have to your users. Make them damn simple to access.
  4. Measure your key metrics closely.
  5. No amount of tooltips can solve your UX problems.

ABOUT ME

I’m a Lead designer at Housing.com on their apps. Love doing side projects. You can find me tweetin’ @aditsgupta on Twitter.

Please do leave a response or a recommendation if you learnt something or want to have a conversation about this post.

Published in Startups, Wanderlust, and Life Hacking

-