Redesign Tokopedia

Case Study

2026

Category Project

Internship Project

Duration

08 Weeks

Year

2024

Participant

Daffa Nazhiiff Muttahar

Role

UX/UI Designer

This redesign focuses on making the shopping experience feel simpler and more intuitive. By cleaning up the homepage, improving how product information is presented, and simplifying the checkout flow, users can browse, and complete transactions with less effort and confusion.

Overview

2026

Problem

Visual Overload

Excessive promotional banners and cluttered homepage elements distract from the primary product discovery path.

Information Hierarchy

Poorly structured product details and inconsistent hierarchy slow down price and variant comparisons, causing user hesitation.

Transaction Friction

A complex checkout sequence forces repeated verification of costs and discounts, inducing high cognitive load and reducing purchase confidence.

Solution

Visual Clutter

-80%

Info Scannability

2x

Checkout Steps

03

Interface Architecture

Simplifying layout structures reduces visual cognitive load while highlighting primary features. Reorganizing critical product details allows seamless scanning of prices variants, enabling immediate user decision-making.

Transaction Optimization

Redesigning the payment flow establishes a linear and transparent user journey. Eliminating unnecessary friction points ensures full visibility of total costs.

Research

Design Journey

Gathering Requirements

At the beginning of this project, I focused on understanding how users interact with the Tokopedia app, especially during product discovery and checkout. The goal was to identify friction points that slow down decision-making and reduce transaction confidence.

Through initial observation, several issues became clear, including a cluttered homepage, unclear product information structure, and a complex checkout flow that requires users to re-evaluate details multiple times.

These findings helped define the main objective of the redesign: to create a cleaner, more structured, and user-friendly shopping experience.

Navigation Bar

Abstract blue shapes create an interesting pattern.

Quick Access Menu

Today’s Deals

Browse Categories

Price Overview

Research Discovery

From further analysis, I found that the current experience relies heavily on promotional content, which often overshadows essential features and creates visual overload.

Users also struggle to quickly scan product details due to inconsistent hierarchy, making it harder to compare products efficiently. In the checkout process, the lack of a clear flow leads to repeated verification of pricing, shipping, and discounts.

To validate these insights, I identified key user needs:

From further analysis, I found that the current experience relies heavily on promotional content, which often overshadows essential features and creates visual overload.

To validate these insights, I identified key user needs:

Navigation Bar

Quick Access Menu

Today’s Deals

Browse Categories

Price Overview

Ideation

To better understand user behavior, I mapped out what users think, feel, and do during their shopping journey.

Users often feel overwhelmed by excessive content on the homepage and want a faster way to find relevant products without distractions.

This highlights the need to reduce cognitive load and build user confidence throughout the transaction process.

To better understand user behavior, I mapped out what users think, feel, and do during their shopping journey.

Users often feel overwhelmed by excessive content on the homepage and want a faster way to find relevant products without distractions.

This highlights the need to reduce cognitive load and build user confidence throughout the transaction process.

Wireframing

I translated initial ideas into low-fidelity wireframes to define the core structure of the experience. The focus was on establishing a clear layout hierarchy, simplifying navigation, and mapping out the main user flows without visual distractions.

By removing unnecessary details, I was able to focus on how users interact with key elements such as product browsing, wishlist, and checkout. This helped ensure that the foundation of the design was functional, structured, and easy to navigate before moving into visual de sign.

Prototyping

Instead of spending too much time on mid-fidelity iterations, I moved directly into high-fidelity prototyping to better simulate the real product experience. This allowed me to test how users navigate through the app.

High Fidelity Mockups

In this stage, I refined the visual design by applying a consistent system across typography, spacing, and component behavior. The goal was to create a cleaner and more focused interface, reducing visual clutter while improving readability.

Special attention was given to product presentation and pricing clarity, ensuring users can quickly scan important information.

These high-fidelity designs serve as a foundation for building a consistent and scalable UI system for the platform.

Special attention was given to product presentation and pricing clarity, ensuring users can quickly scan important information.

These high-fidelity designs serve as a foundation for building a consistent and scalable UI system for the platform.

User Testing

To ensure the design worked well for users, I conducted usability tests with a small group of each. The feedback helped refine navigation and clarified how announcements and events were displayed.

Documented

2026

Design System

Be A Vietnam Pro

Primary Font

Ensures maximum legibility and a modern aesthetic across digital interfaces. Applied systematically to primary headlines, labels, and critical components for instant scannability.

Satoshi

Secondary Font

Optimized for dense body copy, metadata, and product descriptions. Its clean geometric proportions maintain a strong typographic hierarchy and reduce visual clutter.

Purple

Primary Color

Serves as the core brand anchor to drive user engagement. Applied systematically to primary call-to-actions (CTAs), active states, and key interactive touchpoints.

Grey

Neutral Color

Provides structural balance and accessible contrast across the layout. Used for backgrounds, borders, and secondary text levels to establish clean visual boundaries.

Closing

2026

Reflection

Critical evaluation and guidance from senior designers provided fresh perspectives on structural weaknesses within initial iterations

Simplicity Improves Decision Making

Reducing unnecessary elements and focusing on key information like price significantly improves how users make decisions. A simpler interface helps users reduces cognitive load during checkout.

Simplicity Improves Decision Making

Reducing unnecessary elements and focusing on key information like price significantly improves how users make decisions. A simpler interface helps users reduces cognitive load during checkout.

Simplicity Improves Decision Making

Reducing unnecessary elements and focusing on key information like price significantly improves how users make decisions. A simpler interface helps users reduces cognitive load during checkout.

Hierarchy Conflict Resolution

Integrating the shoppable feed concept initially disrupted the primary e-commerce navigation flow. The early architecture created competing visual hierarchies between entertainment content and core transactional pathways, necessitating a strict reconfiguration of the navigation bar to isolate distinct user intents.