Giulia Bins

Work / OLX

Rethinking the navigation

OLX had grown feature by feature, and its navigation hadn't kept up. Web, Android and iOS each had a different menu, with different names for the same things. I led the redesign of the global navigation, from the sitemap to a tested bottom navigation.

Role
UX Strategy Lead, Global Experience
When
2021 to 2024
Product
OLX Brasil, web, Android and iOS
Status
Tested with users and in A/B
  • +430%clicks on Explore in the A/B test
  • +51.9%clicks on Account
  • +23.3%clicks to post an ad
  • 10private and professional users in the usability test

Context

I led the Global Experience team at OLX Brasil. Our mission was to look after the experience across devices and categories, and create guidelines so every vertical, from cars to real estate, felt like one product.

The main navigation had never been designed for how much the product had grown:

  • A hamburger menu on web and Android, a tab bar on iOS, and different shortcuts in each header.
  • The menu kept growing, and nobody owned it.
  • Features for professional sellers and for OLX Pay sat next to everything else, with no distinction.
  • Searching meant going back to the Home, and moving between categories was hard.
  • Every new header version had to be updated by hand in every instance.

One navigation, built on how people think, for every platform.

Understanding the problem

  • Pain points along the journeys. We started from our research library and mapped pains along the buyer and seller journeys, private and professional. A forum with the designers chose which ones to tackle.
  • Sitemaps as they were. We mapped web, mobile web, iOS and Android. The map alone showed people couldn't find the same item in the same place.
  • Words. A taxonomy study found the same feature with different names on each platform.

Where the old menus broke basic rules

  • More than 7 itemsin a single menu
  • Repeated wordsacross items
  • More than 2 wordsper item
  • More than 25 charactersper item
The UX writing checks we ran on every platform's menu.

Designing and testing

With a group of designers, we built the ideal sitemap. Then I ran ideation workshops, mobile first, since a small screen was the hardest constraint for the new structure. Two rounds of critique with every team the navigation would touch brought in risks, data and ideas before we went to users.

We tested words and structure with card sorting, interviews and cloze tests. Then ten private and professional sellers and buyers went through a usability test of the concept.

  • Tab navigation, and the names of the five tabs
  • Messages and notifications in one place
  • A Home split between listings and services for sellers
  • Account as a showcase, with quick actions
  • One place for payments
Redrawn: the five tabs, and what the usability test validated.

From test to code

After refining the visuals with the design system team, we delivered in waves, starting with a responsive navigation on the web. New components went into the design system: bottom navigation, header 2.0, nav bar, a new account page and the ad card.

For the A/B test to be fair, the new navigation had to go live on every page at the same time. That's where it got hard. A corporate restructure dissolved our team, key stakeholders were laid off, and some teams weren't ready to update their pages. The test ran with experience flaws we couldn't fix.

What the test showed

Even so, the numbers moved. In the apps, every tab went up: clicks on Explore grew 430%, Account 51.9%, posting an ad 23.3% and Chat 17.8%. On the web Home, the new nav bar raised use of the global navigation by 23%.

One number needed care: posting an ad from the web Home dropped 25%, with no impact on ad posting across the whole site. It was the main metric to stabilize before rolling out.

The navigation never shipped the way we tested it. But OLX later adopted the bottom navigation we designed across its apps and mobile web.

What I took with me: a navigation change touches every team's page at once, so getting every team on board is as much a part of the work as the design.