Agree Mart — UI Design Case Study

Project Overview

Agree Mart is an online B2C grocery platform built for Agreeculture, a subsidiary of Telkom Indonesia. The app enables merchants to sell fresh produce directly to buyers who want to fulfill their daily household needs — bridging the gap between local farmers and urban consumers through a streamlined mobile experience.

As a UI Designer (Internship), I was embedded in a cross-functional team responsible for translating product backlog requirements into high-fidelity, prototype-ready designs. My work spanned from collaborating with UX designers and UX writers on wireframes, to producing final design assets that could be handed directly to software engineers as a development reference.

The design challenge was not merely visual — it required balancing the expectations of two distinct user groups: merchants who needed clear tools to list and manage fresh inventory, and buyers who required an intuitive, confidence-building grocery shopping experience — all within a single, cohesive interface.

Mobile Design Web Design Wireframing Prototyping Figma · Miro · Telkom Indonesia

Project Brief

Product Agree Mart Buyer App

Role UI Designer (Internship)

Company Agreeculture · Telkom Indonesia

Timeline Jan 3 – Dec 30, 2022

Platform Android & iOS

Skills UI Design · Wireframing · Prototyping

Tools Figma, Miro

Design Process

Understand

→

Collaborating

→

Grooming

→

Deliver

→

Maintain

The team followed a structured five-phase process — from understanding the product backlog to maintaining design accuracy through development. Each phase was grounded in close collaboration between UI designers, UX designers, UX writers, product owners, and software engineers.

Phase 1 — Understand

Product Backlog Intake & Alignment

Reviewed and internalized the product backlog created by the Product Owner. Participated in early product backlog discussions with the UX Designer to ensure design scope and priorities were clearly understood before any visual work began.

Phase 2 — Collaborating

Ideation & Wireframing

Brainstormed solutions using the Crazy Eight method to rapidly explore multiple layout directions. Collaborated closely with UX Designer and UX Writer to translate ideas into structured wireframes, ensuring copy, flow, and visual hierarchy were aligned from the start.

Phase 3 — High-Fidelity Design

Converting Wireframes to High-Fidelity UI

Converted approved wireframes into multiple high-fidelity design candidates. Each hi-fi was evaluated against the backlog's Acceptance Criteria to select the strongest design direction. The chosen design was then tidied up and prepared as a proper design handover template for engineering.

Phase 4 — Grooming

First-Stage Engineering Handoff

Delivered design to software engineers in the Grooming stage — the first formal delivery checkpoint. Incorporated feedback from the Grooming session into the design through revisions before finalizing and delivering the definitive design output.

Phase 5 — Deliver & Maintain

Final Delivery & Implementation Oversight

Delivered the final design and worked closely with developers during implementation to ensure the design was built correctly. Maintained an active role to resolve visual discrepancies and uphold design fidelity throughout the development cycle.

Role & Responsibilities

As a UI Designer intern at Agreeculture, my core responsibility was to develop high-fidelity designs that could serve as a direct reference for software engineers — from initial wireframe collaboration all the way through to production-ready handoff.

Design Workflow

01Understand product backlog from Product Owner

02Early backlog discussion with UX Designer

03Brainstorm ideas via Crazy Eight method

04Collaborate on wireframe with UX Designer & Writer

05Convert wireframe to multiple high-fidelity options

Delivery & Handoff

06Select best hi-fi against Acceptance Criteria

07Tidy design into handover template

08Grooming — deliver design to engineers

09Revise design based on Grooming feedback

10Deliver final design output

Implementation Support

11Work closely with developers during build phase

◆Resolve visual discrepancies in production

◆Maintain design fidelity across components

◆Uphold Acceptance Criteria through delivery

◆Coordinate with UX writer on copy alignment

Design Philosophy

"Create UI design that can be easily implemented by developers while meeting user expectations and capability — bridging the gap between vision and execution."

Screen Results

The final UI design spanned the full buyer journey — from onboarding through checkout — with each screen designed to meet specific product backlog requirements and user needs.

📱

Onboarding — Splash Screen & Login Entry point screens designed to orient users and enable secure, frictionless account access with multi-language support.

Screen 01 Login screen supports email or phone number entry, account recovery for forgotten passwords, and a language toggle — enabling access for users across different regions.

🏠

Home Screen — Discovery & Merchant Browsing The primary destination screen designed to drive purchase intent through promotions, category navigation, and nearby merchant discovery.

Agree Mart Home Screen — carousel promotions, fresh product category icons, nearby seller listings (Fresh Market, NuFresh, B Farm), and all-products grid with buy buttons

Screen 02 Carousel promotions drive purchase persuasion. Fresh product categories make navigation effortless. Nearby merchant listings with wide product selections empower buyers to make informed, local purchases.

Merchant Page

🏪

Merchant product listing with grid layout

Merchant info: rating, operating hours, distance

Product grid with price and availability

Quantity input for manual order control

Floating cart badge shows active order count

Merchant Page — Active Order

🛒

Merchant page with active order summary visible

Active order summary shown inline

Shipping capability displayed per merchant

Seamless transition to checkout without losing cart state

Checkout Page

📋

Checkout page with delivery and payment summary

Displays buyer location, shipping method, ordered items

Gift order toggle — send order to another recipient

Notes field to clarify orders to merchant and courier

Total payment detail expandable via rincion badge

📍

Location & Shipping Method Selection Screens enabling buyers to configure delivery address and courier preference with full flexibility and transparency.

🗺️

Choose Location — map search, pin drop, saved addresses, location history

🚚

Choose Shipping Method — courier options with price and duration

Screen 03–04 Buyers can search delivery addresses via map search or direct pin drop. Favorite locations and order history are saved for repeat convenience. Multiple shipping options — including Same Day — are displayed with delivery duration and transparent pricing.

💳

Payment Flow — E-Wallet & Final Checkout A complete payment experience covering method selection, e-wallet integration, and real-time payment status.

💳

Final Checkout Page — payment method summary and bill breakdown

📲

E-Wallet Options — LinkAja, GoPay, OVO, Dana, ShopeePay

⏳

Waiting Page — payment processing status with redirect confirmation

Screen 05–07 Payment supports e-wallet and virtual account methods with T-Money loyalty integration. E-wallet selection covers all major Indonesian platforms. A redirect confirmation and real-time waiting page communicate payment processing status clearly to buyers.

Design Principles

Throughout the project, design decisions were guided by a set of core principles that shaped how screens were structured, how edge cases were handled, and how the team collaborated across disciplines.

Business–User Balance

Every design decision was made with dual accountability — fulfilling business requirements without compromising the user's mental model or expectations. Feature requirements were treated as constraints to design within, not at the expense of usability.

Critical Thinking Over Convention

Rather than defaulting to familiar UI patterns, the team constantly interrogated design choices by asking "why" — ensuring each element served a clear user need or business goal rather than existing purely out of habit or convention.

Empathy-Driven Design (Both Sides)

The "try to put yourself in their shoes" mindset was applied to two distinct groups simultaneously: developers who needed technically implementable assets, and users who needed intuitive, capability-matched experiences. Design quality was measured by how well it served both.

Communication as a Design Deliverable

Effective communication with developers was treated as a design responsibility, not an afterthought. Clear handover templates, annotated specs, and active grooming participation ensured that design intent was preserved through to production — making communication itself a product quality lever.

Core Belief

Thinking outside the box is not a creative luxury — it is a professional requirement when designing systems that must serve both technical and human complexity simultaneously.

Key Takeaways

Design Must Serve Two Masters Simultaneously

The most valuable lesson from Agree Mart was learning to hold business requirements and user expectations in tension — not resolving one at the expense of the other. The best designs were the ones that fulfilled the backlog's Acceptance Criteria while remaining intuitive and trustworthy for the buyer.

Critical Thinking Is the Most Underrated Design Skill

Consistently asking "why" before "how" prevented the team from designing features that looked complete but solved the wrong problem. Interrogating every design requirement with a critical lens — rather than building immediately — consistently produced better-scoped, more purposeful solutions.

Implementability Is Part of Design Quality

A design is only as good as its implementation. Working closely with software engineers and actively maintaining design intent through the development cycle taught me that implementation feasibility must be considered during ideation — not after handoff. Designs that developers can build cleanly are better designs.

Think Outside the Box — Actively

Conventional UI patterns provided a starting point, but the most impactful design decisions came from stepping outside familiar templates. The Crazy Eight brainstorming method forced the team to explore edge cases and unexpected layouts that ultimately informed stronger final designs than the first-instinct approaches.

Effective Communication Multiplies Design Value

Delivering a high-fidelity design file is not the end of the designer's responsibility. The Grooming process and ongoing developer collaboration proved that clear, proactive communication — through templates, annotations, and active review — is what transforms a strong design into a strong product. Communication is the last mile of UI design.

UI Designer Portfolio · Agree Mart · Telkom Indonesia

I design for
clarity on both sides.

Agree Mart was not simply a visual design exercise. It was a multi-stakeholder design problem — one that required simultaneous fluency in business requirements, user mental models, and engineering constraints. The internship at Agreeculture sharpened my ability to move across all three dimensions without losing sight of any one of them.

The resulting approach — backlog-grounded design thinking, Crazy Eight ideation, acceptance-criteria-driven hi-fi selection, and handoff-first documentation discipline — is transferable to any product context where design must translate between strategic intent and technical execution.

🎯

Backlog-
Grounded Design

💡

Crazy Eight
Ideation

📐

High-Fidelity
Prototyping

🤝

Dev-Ready
Handoff

UI Design Mobile Design Web Design Wireframing Prototyping Product Management Figma · Miro B2C · Agreeculture · Jakarta

Fresh Produce,Designed to Deliver