Navigate back to the homepage
WriteReadMe
★ VN
Perfecting the location picker

Carousell

Perfecting the location picker

Rethinking location filter when browsing for the classified marketplace in Southeast Asia
Platform

iOS, Android, Web

Country

Philippines, Singapore, and others in SEA+

Duration

6 months and continue


Started in 2012, Carousell launched the first mobile app in Singapore. In 2020, Carousell transformed into the biggest classifieds marketplace in Southeast Asia, with 20+ million users across 7 major markets.

In 2019, after acquired and migrated OLX Philippines, Carousell became the biggest classified marketplace in the Philippines.

The app was primarily designed for Singapore, a small country, struggled to scale to multi-city countries like the Philippines, Malaysia, Indonesia.

Rebuilding the location while browsing and searching for items is one of the most important things we need to improve.

image intro
The Challenge

A better location treatment works across all countries and categories

High-level goals were to:

  • Make it easy to understand and easy to use for everyone, in different countries
  • Increase content relevance on discovering and search journey
  • Give buyers a more engaging and relevant content

My role

I led the design of the new location picker across iOS, Android, mobile, and desktop Web since the outset of the project in May 2020.

Insights & Ideation

I partnered with three product managers and two other designers to uncover insights, ideate, and translate concepts into features.

Planning & Scope Definition

I defined the product with my product manager. I prioritized and negotiated features for launch and beyond.

Design Execution & Validation

I designed for iOS, Android, mobile Web, and desktop Web. I executed journeys, wireframes, prototypes, usability test, design specs, and collaborate with Engineers.

Leadership

I presented works to gain buy‐in from executives, senior stakeholders, and many other teams throughout the project lifecycle.

Early insights

The current location approach

The app was first designed for Singapore so we took the radius approach. When searching items, buyers pick a location and use a radius to expand or collapse the area to filter the items.

This approach works for countries like Singapore, Hong Kong, and Taiwan where the transport is convenient and small. People can go anywhere with convenient public transport.

When bringing it to bigger countries like the Philippines, Malaysia, Indonesia, people don’t understand it. In another word, the radius is not useful there, where 1km from a location could mean in a different city or an inaccessible area.

Feedback from users

We reached to our Customer Voice colleagues frequently to ask them for feedback from our users. After migrated OLX to Carousell, we got a lot of feedback about the location.

Many people don’t know how to use the radius location picker:

image location 1

Some people don’t they know can filter by locations

image location 2

Not only getting insights from Customer Voice, but I also dived into some user researches that other colleagues did in the Philippines to get a deeper understanding

image location 3
image location 4
A deeper understanding

Backup with data

Qualitative insights from users are not enough to convince stakeholders to invest in this project. I worked with a PM and Data Analyst to pull out some data to cover for our assumption. We know that:

  • If people use the location filter, the View listings to Transaction conversion is 50% higher than without using the location.
  • The further away listing from the user’s location, the lesser chance of being transacted.
  • The usage of location picker is very high in multi-city state countries (15%), but very small in Taiwan, Singapore, and Hong Kong (2%).

Note: For confidentiality reasons, I have omitted the actual values for these metrics.

Frame the solution

The importance of location

Carousell is a classified marketplace, more than half of the listings are used ones. People usually do meet-ups to check the item before buying it. So knowing the location around their areas is very important.

To make it easier to communicate our ideas to other people, we created a storyboard to convey our understanding.

image location 5
image location 6
image location 7
image location 8
image location 9
image location 10
Thanks to Felipe and Mag for those amazing storyboards
Explore ideas

How we built it

After everyone was on the same page and got a common understanding of the problem and the importance of location. With two Product Managers and two other designers, we did brainstorm to find ideas and prioritized what we should do for the new location pickers.

(Pssst: Thanks for Miro that we can do online brainstorming in the pandemic period).

image location 11

Rough wireframes/mockup to communicate ideas

In a big organization, the earlier we share, the smoother process.

To communicate our ideas early, I started with wireframes (web) and rough mockup (app) then share with other designers to get feedback. It’s also a good deliverable to share with people outside of product teams about the solution.

image location 12
image location 13

Narrow down ideas and usability test

Many times, designers have many ideas and don’t know which one is better. The same thing happened to me. But it’s a soft headache.

First, I tried to come up with many ideas as possible. Then I picked some and share it with the whole Product Designer team to discuss designs.

Then I updated the design and shared it with stakeholders, including PMs from other teams, category managers, and country managers to get aligned with the direction.

After that, there were still two ideas that we can’t agree on. So I used both two ideas to do a usability test to see how people interact.

image location 14
Which one is better? I don't know

The good thing during the pandemic period is that we don’t have to limit the participant physically. So we can recruit people in the Philippines without going there. With a bit of preparation, we did it very smoothly.

With the insights from the test, we are more confident with the solution and get alignment from the team. And I’m confident to spend more time in the detail and refinement.

Details

Introduce new location picker

Browse by location areas

Moving out from radius location, replace it with location areas.

They can search for the most common administrative areas. And it is localised for different countries.

In the Philippines, people can search by Province, City, or Baranggay. In Singapore, people can browse by MRT, Estate, or District.

Multiple locations

People can select multiple locations when searching for listings. They are usually where they work and where they live.

Useful shortcuts

Quickly filter listings by personal locations

image location shortcuts

For Property

In Singapore, people can browse by District, MRT, or Estate.

Listing card

For property, we created a different listing card, list view, to show more information. Location of a house is an important information to help people find suitable houses easier.

Clearer system feedback

Number of item indicators to show the system state as a guide for people to decide if they should use filter to narrow down or change to a bigger area to see more available items.

We didn't have it before because we didn't want our competitors to know where we are in the market. But it’s useful info for buyers while search. So we have to find a way to balance it.

And it works across all platforms

iOS, Android, Mobile Web and Desktop Web

New location picker on Android
Desktop Web

What next?

We’re going to launch this feature first in the Philippines, then Singapore, Hong Kong, Taiwan, and other countries in Southeast Asia. But it should not become just a one-time delivery. In Carousell, we always iterate the product with data and post-launch research.

Credit

My role: Design Owner

Thanks for the design feedbacks and discussion from designer and PM folks: Felipe, Mag, Keith, Huiyi, Ashutosh, Jianyuan.

Thanks to all engineers who worked hard on this project: Beemo & Darren (iOS); Tim & Lance Wang (Android); Jenny, Chenghau & Andrew (Web); and genius back-end guys Steven, Tuan.

© 2018–2021 Trong Nguyen: tantrongtt@gmail.com
Link to $https://twitter.com/trongawesomeLink to $https://medium.com/@trongawesomeLink to $https://www.instagram.com/trongawesome