Explicit Profile: Accelerating Personalization Through User-Driven Preferences for a Better Shopping Experience

Explicit Profile: Accelerating Personalization Through User-Driven Preferences for a Better Shopping Experience

Tokopedia’s recommendation engine relied heavily on behavioral signals, requiring up to 197 product views, 20 add-to-carts, and 5 chats to generate useful personalization for a single user. That level of data takes time, causing users to miss relevant product discovery moments early on.

To solve this, we explored an explicit profile approach asking users directly about their shopping preferences. This provided faster, more accurate inputs for Recommendations, Personalization, and Search, without waiting for long behavioral build-up.

Tokopedia’s recommendation engine relied heavily on behavioral signals, requiring up to 197 product views, 20 add-to-carts, and 5 chats to generate useful personalization for a single user. That level of data takes time, causing users to miss relevant product discovery moments early on.

To solve this, we explored an explicit profile approach asking users directly about their shopping preferences. This provided faster, more accurate inputs for Recommendations, Personalization, and Search, without waiting for long behavioral build-up.

COMPANY

Tokopedia

ROLE

Product Designer

SCOPE

UI Design, UX Design, Design System

PERIOD

Q1-Q2 2022

COMPANY

Tokopedia

ROLE

Product Designer

SCOPE

UI Design, UX Design, Design System

PERIOD

Q1-Q2 2022

Disclaimer: This is a high-level project overview. For the full case study or more details, feel free to reach out at olehabib98@gmail.com.

Disclaimer: This is a high-level project overview. For the full case study or more details, feel free to reach out at olehabib98@gmail.com.

Key Challenges

Key Challenges

The value was clear, but the execution was full of complexity from platform constraints to ownership gaps across teams. I had to lead the design not just as a flow, but as a long-term, scalable system.

The value was clear, but the execution was full of complexity from platform constraints to ownership gaps across teams. I had to lead the design not just as a flow, but as a long-term, scalable system.

01

01

How do we place the widget where it feels natural, contextual, and visible to users?

How do we place the widget where it feels natural, contextual, and visible to users?

02

02

How do we design around platform limitations while maintaining a quality experience?

How do we design around platform limitations while maintaining a quality experience?

03

03

How do we ensure this feature is scalable, sustainable, and easy to evolve?

How do we ensure this feature is scalable, sustainable, and easy to evolve?

Design Process

Design Process

01

Define behavioral limitations

01

Define behavioral limitations

02

Explore entry points & early ideas

03

Test concepts for team buy-in

04

Co-design with cross-teams (related with their page module)

05

Create widget component, design and its interaction logic

06

Validate with usability testing

07

Handle themes & interaction states

08

Finalize components, design flow & documentation

02

Explore entry points & early ideas

03

Test concepts for team buy-in

04

Co-design with cross-teams (related with their page module)

05

Create widget component, design and its interaction logic

06

Validate with usability testing

07

Handle themes & interaction states

08

Finalize components, design flow & documentation

Key strategy

Key strategy

We designed beyond the feature, building a scalable system that balances user context, platform constraints, and future personalization needs.

We designed beyond the feature, building a scalable system that balances user context, platform constraints, and future personalization needs.

Key Solutions

Key Solutions

01

01

Contextual placement in NYAM (Food page)

After facing visibility issues on Home and technical limits on Discovery page, we chose NYAM as the most contextual and timely surface for this feature, improving its discoverability and perceived relevance.

After facing visibility issues on Home and technical limits on Discovery page, we chose NYAM as the most contextual and timely surface for this feature, improving its discoverability and perceived relevance.

02

02

New widget component with system-level thinking

Instead of adjusting existing UI, we built a fully custom component free from legacy constraints. It’s responsive, supports light and dark themes, and introduces microinteractions for smoother UX.

Instead of adjusting existing UI, we built a fully custom component free from legacy constraints. It’s responsive, supports light and dark themes, and introduces microinteractions for smoother UX.

03

03

Thoughtful interaction states

We designed all major states intentionally:

  • Start state to invite users

  • Click animations and microinteractions to make input feel responsive

  • Finish state that thanks users and guides them on how to edit preferences

  • Error state to handle server issues gracefully

04

04

Persistent preference management in Settings

A dedicated section in Settings > Shopping Preferences lets users view, edit, or disable their explicit profile. It’s also where new preference categories can be added and maintained over time.

05

05

Scalable questionnaire structure

To ensure smooth updates and future adaptability, we designed a flexible question format that supports adding, removing, or modifying preferences with minimal redesign.

06

06

Deep cross-team collaboration

I initiated and led co-design sessions with four different teams to align both UX and platform capabilities. This helped unblock long-standing implementation challenges and accelerated decision-making.

Questioner Component - Large

Lignt Theme Component

Questioner Component - Small

Dark Theme Component

Entry point of questioner within relevant page

Personalized filter after getting profile preference

Preferences Setting - Culinary

Preferences Setting - Fashion

Preferences Setting - Skin

Preferences Setting - Other categories are still in progress

Outcome Highlights

Outcome Highlights

~2.5× Potential Conversion

~2.5× Potential Conversion

Once launched, users who fill out their Explicit Profile are expected to convert up to 2.5x better in Recom, Search, and Personalization based on internal behavior benchmarks.

Once launched, users who fill out their Explicit Profile are expected to convert up to 2.5x better in Recom, Search, and Personalization based on internal behavior benchmarks.

Scalable Component

Scalable Component

The new widget and Shopping Preferences Page were designed with future growth in mind reducing future rework and supporting continuous product evolution.

The new widget and Shopping Preferences Page were designed with future growth in mind reducing future rework and supporting continuous product evolution.

Collaborator

Collaborator

Product Manager (Alman, Glenn)

UX Writer (Nona)

Engineering Team

Product Manager (Alman, Glenn)

UX Writer (Nona)

Engineering Team

About Me

Project

Service

Testimony

Contact

Let's collaborate

olehabib98@gmail.com

Every project is a chance to grow, learn from diverse challenges, and build meaningful, long-term partnerships.

Product & Web Designer

2025 © olehabib

Let's collaborate

olehabib98@gmail.com

Every project is a chance to grow, learn from diverse challenges, and build meaningful, long-term partnerships.

Product & Web Designer

2025 © olehabib

Let's collaborate

olehabib98@gmail.com

Every project is a chance to grow, learn from diverse challenges, and build meaningful, long-term partnerships.

Product & Web Designer

2025 © olehabib

Create a free website with Framer, the website builder loved by startups, designers and agencies.