eBay Classifieds Responsive Design

eBay Classifieds makes Craigslist-like sites, with multiple brands worldwide. One of those brands is Gumtree, which is South Africa’s number one classifieds site.

Working as a front-end developer, I helped build a responsive web redesign that increased Gumtree’s monthly active users by 60%.

Timeframe
April 2013 – April 2015

Role
Front-End Development

 
eBay Classifieds.jpg
 

Problem

In 2013, Gumtree had been losing market share to competitors in the South African classifieds ads space. Its desktop-only experience was painful to use for ~50% of people whose only access to the internet was through their mobile phones and expensive data plans.

Our challenge was to update Gumtree to serve a rapidly-growing market, without alienating its existing user base.

 
The microscopic experience Gumtree users saw on mobile devices in 2013, via the  Wayback Machine .

The microscopic experience Gumtree users saw on mobile devices in 2013, via the Wayback Machine.

 
 

Solution

eBay Classifieds consulted the Filament Group to redesign Gumtree as a mobile-friendly site. As one of 7 front-end developers on the Gumtree team, I coded various designs on both the buyer and seller sides of the Gumtree experience.

Homepage

We condensed the 100-item category list into an accordion for mobile web users. Larger, touch-friendly targets helped people browse second-level categories by expanding the top-level ones.

Desktop and tablet users saw a familiar layout, in three-column and two-column forms.

 
The redesigned homepage in mobile and desktop sizes, February 2017.

The redesigned homepage in mobile and desktop sizes, February 2017.

 

Search Results Page (SRP)

We took a similar approach to adapt the SRP’s filters to phone and tablet screens, grouping and nesting a variety of filter controls into a modal-like view.

 
Search result filters, tucked into a dropdown menu on smaller screens.

Search result filters, tucked into a dropdown menu on smaller screens.

 

The desktop view retained its layout; the majority of changes here were purely cosmetic.

 
The SRP, on a “desktop” sized screen.

The SRP, on a “desktop” sized screen.

 

An interesting technical challenge was to vertically reorder two elements — a display ad and the search results pagination — between the smaller screen layouts and their desktop equivalent. Since CSS Grid wasn’t yet available, the best cross-browser solution was to use a <table> hack.

 

Listing View

The Listing View went using three columns to two, a solid solution that gave more focus to the user-uploaded photos while being easy to implement for its desktop and tablet layouts.

 
The Listing View, in the “tablet” layout.

The Listing View, in the “tablet” layout.

The old  View Listing  page, from 2013.

The old View Listing page, from 2013.

 

Phone users now browsed listings far more easily, thanks to a single-column layout with legibly-sized text.

 
The Listing View, in the “mobile” layout.

The Listing View, in the “mobile” layout.

 

Outcome

We rolled out the new site in November 2013 and made big gains on engagement over the next two years. Though Gumtree saw another rebrand in 2017, it still uses the same responsive layouts that I helped code during my stay.

 
Metrics.jpg
 
 

Retrospective

Looking back, I had one wish for our design process, and one point of praise for the team.

 

Designing around content, rather than screen sizes

Though we improved our experience across the board for people on smaller screens, our implementation of responsive design left some users with awkward layouts. Furthermore, some people with smaller tablets would see a totally different layout, depending on if they were in portrait or landscape orientation mode.

This happened because we lumped our three layouts — "mobile", "tablet", and "desktop" — into a fixed set of breakpoints, instead of defining those breakpoints based on the content of each page.

My guess is that the team took this tradeoff to make our Gumtree code easier to adapt to other eCG sites.

 

True team effort

Redesigning Gumtree for the responsive web design was a big technical effort, but our success would be impossible without product managers, marketers, and SEO experts.

Our South Africa based business team was especially important. Without them, how could we possibly understand the local market?

 

 
Max was a standout teammate because everyone liked working with him, from fellow developers to QA engineers and product managers. Even when business priorities shifted, he stayed positive and kept treating his code as craft.
— Moises Romero
 

Want to see more of my work?