Context

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

VivaReal is the largest 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.

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.

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 abandon the site. The mobile site also was slow and buggy, providing a terrible UX. The conversion rate was also lower than 1%.

Hypothesis

My assumption was that we had plenty of users that access the site via mobile, and most of them are not installing the app nor using the mobile site. I’ve proposed to the PM to design and code a new mobile site, in order to increase the conversion rate.

Also, we decided to make an A/B test to evaluate 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

The mobile team didn’t have an available front-end dev, but as I have these skills I could do both design and code for this experiment.

I’ve decided to make the simplest and lightest design as possible as we had a one-week deadline. First, I’ve mocked up the screens on Balsamiq and went directly to code, making the final design 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 a similar effect of a full-width interstitial, but with no significant impact on the lead conversion rate. Most users were landing on the site actually in the list and detail views, and we needed to make them behave as a landing page.

The conversion rate increased 800%, becoming very similar 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.

Currently, most of the leads in VivaReal come 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.