Sayurbox  |  2024-2025  |  Full-time

Designing for Discovery and Retention: +2% ATC, +7% Orders, and +34% M1 Retention with Min Development Effort

About the Project:  Homepage Redesign 🎨
A data-driven homepage redesign combining Endless Scroll and a Deep Hook Banner: improving product visibility, price perception, and engagement while delivering measurable business impact with minimal engineering effort.

My Role
Senior designer, with cross-team collaboration.

Sayurbox Team
1 PM, 1 Researcher, 2 FE, 2 BE, 1 VP product, Business & Marketing (category managers, creatives, content).

Methods
Benchmarking, IA, Wireframe, Hi-Fi & Weekly Sync via Design Critique, Usability Testing, A/B Test

Tools
Figma, Figjam.

Design Timeline
2+ months.

About the Company:  Sayurbox 🥕
Indonesia's leading farm to table e-grocery, serving 1M customers with 5K+ SKUs from 10K+ farmers. Design is a core growth driver that drive clarity and conversion.

Overview

Sayurbox’s homepage was overloaded with promotional banners and inconsistent layouts. While visually busy, it didn’t help users find value quickly, or trust pricing, especially for semi-planned buyers who shop by category but decide products on the go.

We set out to make the homepage a front door for effortless exploration and conversion, focusing on behavioral insight rather than heavy engineering work.

I led a two-phase homepage redesign through two key design improvements:
1. The Homepage Endless Scroll,
2. And an extended header featuring a Deep Hook Banner

We made discovery smoother, reinforced value perception, and unlocked measurable business gains:

🌱 +2 % Add-to-Cart rate, by improving visibility of promoted items.
🌱 +7 % total monthly orders, supported by clearer product hierarchy and pricing.
🌱 –48 % unimpressed items, after optimizing square banners for marketing categories.
🌱 +34 % M1 retention (all-time high), combining the Deep Hook Banner with targeted checkout vouchers.
(M1 retention = users who returned and made another purchase within their first month.)

These outcomes proved that focused, low-effort design changes can meaningfully shift user behavior and drive long-term retention.

Background

User behavior:
Sayurbox’s core users are semi-planned buyers: they plan categories (“fruits”, “veggies”, “fish”) but not the exact products.

They look for convenience, clarity, and trying to get a fair price.

Before redesign:

• 80% of homepage space was filled with static promotions.
• Users felt overwhelmed and struggled to find relevant products.
• Early-session drop-offs were high (most left within the 6th section).
  
• Engagement with marketing sections and featured SKUs was low.
• Pricing signals lacked clarity, hurting value perception.
• The homepage felt transactional, not inspiring.
  

Business goal:
Reposition the homepage as both an entry point and a conversion driver: improve discoverability, price perception, and retention with minimal engineering effort.

💡 Based on data, most interactions drop after the 6th section. (This is the old design)

Design Goals

1. Enhance discoverability by improving content hierarchy and flow.
2. Strengthen price perception with clearer presentation and contextual deals.
3. Boost Add-to-Cart and total orders via better visibility of key items.
4. Support retention through design that scalable for future campaigns.
   

Phase 1 — Homepage Revamp + Endless Scroll: Building the Foundation

💡 One of many homepage explorations

The first phase focused on improving user focus and effortless exploration. 

Key design:

• Reduced banner clutter by 60%, focusing on essential categories and relevant promotions.
• Introduced Endless Scroll allowing users to browse continuously without cognitive breaks.
• Repurposed square banners for marketing categories, so they felt more integrated and useful.
• Standardized spacing, type hierarchy, and pricing layout to build consistency and reliability.
• Enhanced price communication through compact cards (“Sayur Buah di Bawah 20ribu”).
  

THE RESULTS:

• Users browsed deeper into the homepage rather than leaving after the first few sections ✅
• Scroll recordings showed smoother navigation and fewer sudden stops ✅
• Higher visibility for seasonal and promotional categories ✅
• In user feedback sessions, participants described the new homepage as “cleaner,” “inspiring,” and “easier to explore” ✅

Phase 1 turned random browsing into a guided experience.
The homepage now encouraged inspirations:

💡 Homepage revamp release before creating Deep Hook Banner

💡 Homepage Endless Scroll

Phase 2 — Introducing a Longer Header and Deep Hook Banner: Small Change, Big Impact

After the structural revamp, our data revealed a clear behavioral pattern:
most homepage conversions happened within the first 10 seconds of a session.
This insight pointed to the arrival moment: the very top of the page, as our next leverage point.


Key design:

• We extended the header area to create a stronger focal entry zone, balancing storytelling (SKU + promo) and direct conversion. It provided breathing space for key promotions and helped frame the first scroll.
• Within this new header, we embedded a Deep Hook Banner inside: two high-value SKUs with prices and direct Add to Cart buttons.
  It reused existing product-card components, keeping engineering work minimal.
• Value communication pairing with concise copy and discount labels.
• Balanced attention and trust: the header felt editorial, not pushy. Guiding users without overwhelm.
  

THE RESULTS:

• Users engaging immediately with the 2 featured items instead of scrolling past the hero section ✅
• Early-session conversions increased, validating the first-view carried the highest purchase intent ✅
• Marketing teams adopted the banner pattern for bi-weekly offers because it required no new development ✅
• Combined with contextual checkout vouchers, this change helped deliver the +34 % M1 retention (ATH) reported earlier ✅
  

The combination of an Extended Header and Deep Hook Banner achieved results with minimal engineering: a precise, low-effort improvement that maximized business impact.

Exploration: Revamp -> Action: Deep Hook Banner

The homepage redesign made exploration effortless, while the focused header innovation turned that engagement into action.

Key Learnings

1. Small moves can create big outcomes.
   The Deep Hook Banner required minimal design and development effort, yet it became one of the homepage’s highest-converting elements.
2. Attention is leverage.
   By understanding that the first 10 seconds of user attention hold the highest intent, we were able to design a header experience that converted curiosity into action.
3. System thinking scales impact.
   The Endless Scroll built a foundation of continuous discovery; the Extended Header and Deep Hook Banner turned that flow into measurable business results.
4. Design and growth alignment drive ROI.
   When design decisions are anchored to behavioral data and business metrics, even small improvements can have compounding effects across retention and revenue.

💡 A hypothesis breakdown of user perspection towards marketing section

Process & Collaboration

Collaboration: Worked closely with PM, VP Product and analytics to ensure business return.

⭐️   Research & Analysis

1. Gather context, stakeholder insights
   - Behavioral insight: scroll tracking revealed engagement drop-off zones (user drop-off after 6 section).
   - CTR analysis.
   
2. See previous user interviews
   To understand perception of price vs value.
3. Information architecture, competitve analysis
   Benchmarking grocery and retail apps.
   

⭐️   Design

1. Wireframe, hi-fi design, copywriting
   Wireframes → prototype testing with returning and new users.
   
2. Design critique with stakeholders
   Weekly design critiques with designers and stakeholders to absorb feedback & new perspectives. Stakeholders can suggest better input.
3. Prototype for UT
   Explored header proportions and banner placement through A/B options.
   

⭐️   Testing & Validation

1. Usability Testing (UT) and design revision
   UT homepage endless scroll by UX researcher.
2. Homepage guideline (for marketing)
   Making sure the marketing team align with each section purpose and sizing.
   

💡 Usability Testing flow for homepage revamp

💡 Homepage guideline for marketing team

Key Results

KPI
Add-to-Cart Rate
Total Monthly Orders  (Improved price perception)
Unimpressed Items 
M1 Retention 
Price Perception

Outcome
+2%    (By improving visibility of promoted items)
+7%    (Supported by clearer product hierarchy and pricing)
-48%   (After optimizing square banners for marketing categories)
+34%  (All-Time High. Combining Deep Hook Banner w/ targeted checkout vouchers)
Improved through stronger item visibility and value communication

Price perception on Telur Ayam (Eggs) that placed on Deep Hook Banner or SHI Section, shows strong value perception:
Despite being priced 45% higher than the cheapest online competitor, Telur Ayam consistently drives high Basket ATC (18.8%), growing +2.9% vs the 4-week average. This indicates customers trust our quality and are willing to pay a premium.

By helping users see, decide, and act faster, we improved both short-term conversion and long-term retention. The new header design and Deep Hook Banner turned the first 10 seconds of browsing into the most valuable part of the session:

BEFORE   ->  AFTER DESIGN

💡 In centered is homepage when normal state: instant and terjadwal — To the right is when there's event going on this month.

💡 Deep Hook Banner, with different events: normal state, independence day, and mangoes month

Reflection

This project reflect a core belief:

Impactful design isn’t about doing more — it’s about doing what matters most.

By focusing on two small but high-leverage changes (Endless Scroll and the Deep Hook Banner), we were able to move key business metrics without heavy engineering work. Thoughtful design can boost user trust and engagement while keeping development simple.
 
Ultimately, the redesign turned Sayurbox’s homepage from a static promotion board into a dynamic space for discovery and action, benefiting both users and the business.

The result: +2% Add-to-Cart rate, +7% monthly orders that improved price perception, -48% of unimpressed items, and +34% All-time high M1 Retention.

Robertha Dayu 〰️ 2025 

Product Designer

Contacts
e. roberthadayupasa@gmail.com
linked in