Zojirushi Indonesia E-Commerce Redesign

The Problem

From the Business Side
Third-party marketplace fees were becoming unsustainable. Zojirushi needed a branded D2C experience that they could control, their own platform to build customer relationships, gather data, and protect margins long-term.

From the User Side
The existing website had character. outdated visuals, confusing navigation, and a checkout flow. Users were struggling with basic tasks, and the site didn't reflect the premium quality Zojirushi products are known for.

The Solution

The redesign centers on conversion where every path users take, from discovery to checkout, was mapped and optimized to eliminate dead ends and friction. Visually, the new design follows Zojirushi's Japandi brand direction, where Japanese precision meets Scandinavian simplicity. To make sure nothing got lost between design and development, I built a robust design system with proper tokens, components, and documentation so the dev team could move fast without sacrificing fidelity.

Research Deep Dive

Before jumping into design, we needed clarity on two features that had us scratching our heads:

1. The Compare Feature: Did users actually want this? How would they use it?

2. Delivery Fulfillment: The old flow was a mess. How could we simplify it?

Methodology
We used an Atomic UX Research approach, moving from Experiments → Facts → Insights → Opportunities. This gave us a clear chain from what we did, to what we found, to what we learned, and finally to how we could improve.

We ran user interviews with two key groups:

• Homemaker mothers: Primary household decision-makers shopping for quality appliances

• Young students & professionals living away from home: They often buy for themselves or family back home

To support findings, desk research with available data (primarily from Baymard Institute) and competitive analysis against other e-commerce sites were conducted too.

Key Designs

1. Delivery Fulfillment: From Confusing to Clear

Insight → Users don't think in "warehouses" but they think in "when will I get it?" and "what will it cost?" The old system exposed warehouse selection to users, which only increased cognitive load and led to frustrating error messages late in checkout.

Solution → We reframed the entire model around user outcomes, not logistics. Now there are three clear shipping options:

1. Fastest Arrival: Priority is speed; items may arrive in multiple shipments. Highest cost, but everything arrives ASAP.

2. Single Delivery: All items ship together as soon as they're ready. One tracking number, slightly lower cost.

3. Arrive Together: Economy option where items are held and combined into one shipment. Lowest cost, shows estimated delivery window.

The warehouse logic happens behind the scenes. Users just pick what matters to them, whether it is speed, timing, or efficiency.

2. Compare Feature

Insight → During research, we uncovered distinct comparison behaviors between our user groups. Both groups were manually building their own comparison systems because nothing existed and this "apple-to-apple" framing was crucial for building purchase confidence.

We also learned that for the younger group, this friction was tolerable. But for the 40-50 y/o moms, keeping tasks on one page significantly reduces dropout.

Solution → We built a dedicated compare feature with multiple entry points throughout the site via PLP and PDP, where user can compare up to 3 products max.

Wireframing with AI

To move faster and validate ideas early, we used Figma's Make AI to generate initial wireframes. This let us:

• Explore multiple layout directions quickly

• Get something tangible in front of developers early

• Focus our energy on refining rather than starting from scratch

Design System & Hi-Fi Mockups

With wireframes validated, I built out a comprehensive design system:

• Design tokens for responsive breakpoints (Desktop 1440px, Tablet 768px, Mobile 390px)

• Component and variants library

• Variables in Figma structured for easy developer reference

The Navigation Crisis

After presenting the first round to stakeholders, we hit a wall. The information architecture, which stakeholders had defined themselves early on wasn't working, but they weren't sure what to change.

I recommended additional research to answer this properly:

• Survey with 25 participants from our primary user group

• Moderated tree testing with 2 participants for deeper qualitative insight

The findings were clear, which is users needed more concrete category names, and a two-level navigation structure would help them find products faster. I synthesized everything into a slide deck with detailed recommendations and multiple options. After reviewing together, we landed on a revised IA with two navigation levels.

Key Pages

Here's a sampling of the final designs:

• Product Listing Page (PLP) → Clean grid layout with smart filtering, so users can scan quickly and drill down based on their needs.

• Product Detail Page (PDP) → All the information a customer needs to make a decision (specs, reviews, comparison hooks) without overwhelming the page

• Checkout Flow → Streamlined steps, clear progress indication, and the simplified delivery selection we designed from research.

• Homepage → First impression matters, so I designed the homepage to balance brand storytelling with clear paths to products.

Impact

The project is still in development, so hard metrics will come later. But here's what we've achieved so far:

• With a lean team, we delivered a complete e-commerce redesign with just two designers and the client's dev team.

• AI became part of our workflow, from wireframing to data analysis, we used AI tools strategically to accelerate work.

• Research uncovered insights stakeholders didn't have, such as the navigation issues, the compare feature needs, the delivery flow frustrations.

• The dev team can implement components accurately because we invested in proper design documentation and communication.