Context

VivaReal was the largest online real estate marketplace in Brazil, with over 5 million active listings across 1000 cities, and about 14 million unique visitors per month. I was responsible for native and web mobile experience from 2014 to 2015.

The challenge

Fig. 1 – VivaReal mobile site in 2014. The users were welcomed by a full-screen interstitial.

Based on the metric that native app users are more engaged and generate more leads, the mobile site wasn’t a priority. Instead, every time a user enters the mobile site, he was welcomed with full-screen interstitial inviting him to download the app.

The initial goal was to increase the number of app downloads from the mobile site. Less than 2% of users would click to download the app, and only about 5% would choose to continue to site, what means that more than 90% of users abandoned the site.

The mobile site also was slow and buggy, providing a terrible UX. Its conversion rate was lower than 1%, 10x lower than desktop and mobile apps.

Hypothesis

I believed that the conversion rate of the mobile site could be higher as plenty of the users (45%) accessed the site via mobile. To make things worse, the full page interstitial wasn’t effective. I’ve suggested the PM to design and code a new mobile site, in order to increase the conversion rate.

Also, we decided to A/B test the impact of full-width interstitials and smart banners against a mobile site without banners.

Fig. 2 – Mobile site mockups made on Balsamiq Mockups.

Experiment

I’ve spent 2 weeks building the design and code. First, I’ve mocked up the screens on Balsamiq and went directly to code, making the final design purely on CSS.

Fig. 3 – Making a lightweight mobile site.

Results

Fig. 4 – Excerpt from the data report from the redesign experiment.

We had great learnings on the behavior of our users on mobile site and the impact of interstitials, compiled in a series of flows made in Omnigraffle. For instance, a small smart banner had the same conversion of a full-screen interstitial, but had no significant impact on the mobile site conversion rate. Also, we learned that most users were landing on the site directly in a search result list and detail views, and we needed to make them behave as a landing page.

The conversion rate increased 800%, becoming very close to the level of the desktop site. The impact was so big that company’s strategy pivoted from focusing on native apps to go into a completely redesigned responsive website, which I was later responsible for the design.

By the end of 2015, most of the leads in VivaReal came from the mobile web.

Responsive Site

Here are some examples of the mobile version of some responsive pages after the redesign:

Fig. 5 – Home, List, Filter and Detail view.
Fig. 6 – Detail, Lead and Post Lead view.