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%.
April 2013 – April 2015
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.
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.
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.
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.
The desktop view retained its layout; the majority of changes here were purely cosmetic.
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.
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.
Phone users now browsed listings far more easily, thanks to a single-column layout with legibly-sized text.
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.
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?