Project Case StudyLive product

Waroong App Sales & Driver App

A mobile app for Alamui, the distributor of Joyday products. It connects store visits, Odoo checks, delivery, payment, and return handling in one workflow.

Client
Joyday & Alamui Distributor
Business owner
Distribution Operations
My role
Product Designer & Developer Handoff
Team
SA/BA, Mobile, Odoo, QA, PM, Tech Lead
Status
Live product, used in the field
Scope
Sales & delivery workflow

Background

Alamui distributes Joyday products to retail stores. Waroong supports the field work around each order, while Odoo keeps the operational record.

Distribution work

One order moves across three teams.

Sales visits a store and creates the order. Odoo Admin checks the data. Drivers deliver goods and record payment.

Return cases stay linked to the same transaction, so the next person can see what needs to happen.

Sales visit Choose the store, product, unit, and quantity in one order flow.
Admin check Review and validate order data in Odoo.
Delivery Deliver items and record payment in the same task.

Problem & Goals

Every handoff needs enough context for the next person to continue the same order.

01

Complete order details

Sales needs store, product, unit, and quantity details in one flow.

02

Show the next step

Admin and Drivers need the right order details at handoff.

03

Record delivery and payment

Drivers confirm items and payment within the same task.

04

Keep returns visible

Return reasons, approval, and pickup stay tied to the order.

Key Users

Sales and Drivers work in Waroong. Odoo Admin checks and prepares the same order in Odoo.

Waroong
App
Selected role

Sales

Creates orders during store visits.

Handles store and customer details, product, unit, quantity, cart, order history, and returns.

Approach

I mapped the work around one transaction before turning it into mobile tasks.

Checkpoint 01

Map the process

I mapped the path from store visit to order, Odoo check, delivery, payment, and returns.

Click a checkpoint to view its detail.

Flows

Mapped user paths and handoffs.

Wireframes

Turned flows into mobile screens.

UI & prototype

Built high-fidelity UI in Figma.

Team review

Joined development, QA, and UAT.

Solution & Impact

Each flow gives the right person the information needed for the task in front of them.

01

Create order

Sales selects the store, adds products, checks quantity, reviews the cart, and submits the order.

Impact

Sales can create orders on mobile. Scanning the store QR code speeds up each visit.

StoreCatalogQuantityCart
Waroong mobile order creation and product selection screens
02

Delivery & payment

Drivers see their task list, confirm delivered items, record payment, and complete the task.

Impact

Delivery and payment stay in one task.

Task listChecklistPayment
Waroong driver delivery task and vehicle summary interface
03

Return handling

Users add a return reason. Admin reviews it, then Drivers receive a pickup task when approved.

Impact

Returns remain visible from request to pickup.

RequestAdmin reviewPickup
Waroong return selection and return-reason interface
04

Design system

Core UI tokens and components for the order workflow.

Impact

Keeps screens consistent and faster to build.

Color systemTypography
Design system

Typography
& colors

Aa
Inter
Heading18 px / BoldBuat Pesanan
Body16 px / RegularPilih produk
Amount14 px / BoldRp142.000
Primary#5FC6FF
Action#43B4F3
Text#2C2C2C
Background#F3F3F3
Surface#FFFFFF