devket
Start a project
devket
Theme
Start a project

Goat Pure

A connected mobile experience for recurring milk delivery, account control, payments, bottle returns, address management, and real-time order progress.

Industry
Mobile Commerce · Organic Delivery
Project type
Mobile App · Recurring Delivery
Services
Product strategy, Information architecture, UX/UI design, Mobile product design, Design system, Mobile application development, Quality assurance, Launch support
Technology
Flutter, Node.js, Next.js, Elasticsearch, MongoDB, Vercel
Three Goat Pure phones on a marble surface against bottle and delivery-rider line art, order tracking with its four-stage progress, the cart with goat milk bottles and subtotal, and the order-received confirmation.A Goat Pure layout of order history, address editing and selection, the cart with Checkout and Continue Shopping, order tracking, and an enlarged Goat Milk 1.0 ltr product card.Payments and reusable packaging in one account, the transactions table, the wallet with balance, available credit, add funds and payment methods, the bottle-return redemption panel, and a saved Visa card.A grid of fourteen Goat Pure screens covering profile, delivery scheduling, cart, wallet and transactions, address management, order tracking, bottle returns, order history, and support chat.
Overview

Goat Pure is a mobile ordering and delivery experience built around repeat purchasing rather than one-time checkout. Customers can manage recurring milk schedules, review previous orders, update account settings, control saved addresses, manage payment methods, view wallet activity, redeem returned bottles, follow delivery progress, and contact support.

The product brings several operational tasks into one consistent account experience. Instead of separating subscription management, payments, delivery status, and support into disconnected journeys, the interface keeps them accessible through a familiar mobile navigation system.

Challenge

Recurring product delivery creates more complexity than a standard ecommerce order. Customers need to manage quantity, frequency, delivery date, addresses, payment methods, order history, bottle-return credit, and delivery progress without repeatedly contacting support.

The experience also needed to make operational information easy to understand. Tracking states had to communicate whether an order was confirmed, dispatched, nearby, or delivered. Account and payment controls needed to remain clear while still matching Goat Pure’s simple green-and-white visual identity.

A further challenge was keeping long forms and management screens usable on mobile. Address editing, password changes, wallet details, and customer-support forms all needed clear hierarchy, readable spacing, and persistent navigation.

Devket’s role
Product strategyInformation architectureUX/UI designMobile product designDesign systemMobile application developmentQuality assuranceLaunch support
Solution

Devket organized the product around the complete recurring-delivery lifecycle, account setup, scheduled orders, payment and wallet management, reusable-bottle redemption, address control, order tracking, and support, so the customer can move between tasks without losing context.

Profile as the operational hub

Schedule management, previous orders, shipping addresses, wallet and payment, settings, and favourites are all reachable from one account screen.

Recurring delivery at a glance

A compact active-order card shows product, quantity, frequency, and next delivery, so repeat purchasing needs no repeated setup.

A wallet that includes returns

Available credit, payment methods, transaction history, and reusable-bottle redemption sit together instead of in separate account areas.

Four clear tracking states

Confirmed, dispatched, near-you, and delivered are communicated through one consistent progress system, with support reachable during active stages.

Consistent interface patterns

Shared headers, forms, status components, action buttons, and bottom navigation carry across every management flow.

Product experience

Inside the product

Three Goat Pure phones showing the wallet with payment methods and bottle returns, an Active subscription card for Goat Milk 1 ltr at ten units every day, and the order-tracking screen.

Recurring delivery without repeated setup

The active schedule sits beside the wallet and tracking so repeat delivery needs no re-ordering: product, quantity, frequency and next delivery are shown on one card, with Edit and Deactivate as the only two decisions.

The Goat Pure wallet screen with available credit, a primary Visa card, transaction history and the Redeem by Returning Bottle panel, with those modules and the order list called out alongside it.

Wallet, payments, and reusable-bottle returns

The wallet is more than stored payment. One long management screen combines available credit, a primary card, transactions, top-up actions, and bottle-return redemption, so returning packaging becomes account credit rather than a separate errand.

Five Goat Pure tracking screens in sequence, order confirmed, dispatched, rider nearby, delivered, and the contact-support state, each with the same four-stage progress indicator.

Live order progress and support

One four-stage system carries every delivery state, confirmed, dispatched, near you, delivered, with contact support attached to the same screen so a question never means leaving the order.

Five Goat Pure account screens, the profile hub, settings with change password, Select Address with map and Home entry, Add New Address, and Edit Address with labels.

Address and account control

Profile, settings, password changes, saved addresses, current location, and labelled address entry are handled through one consistent set of form and confirmation states.

Four Goat Pure Rider App screens, the Deliveries queue listing orders with CHARGED and COD states, a map of drop-off pins across Karachi, the full order detail with cash to collect and bottle counts, and the Order Delivery is Confirmed state.

The rider’s delivery run

Riders work from one queue: assigned orders with their payment state, a map of the day’s drop-offs across the city, and an order view carrying the address, contact, cash to collect, bottle counts and any special instructions, with Delivered, Get Help With Order and Not Delivered as the only three actions at the bottom.

Goat Pure Rider App order details beside the empty-bottle entry screen asking for 1 ltr and 1/2 ltr counts with Click To Confirm, an Are you sure? confirmation dialog, and the confirmed delivery state.

Bottle returns collected at the door

Marking an order delivered is also the moment the empties come back. The rider enters the 1 ltr and 1/2 ltr bottles received from the customer, confirms through a deliberate Are you sure? step, and the return posts straight to the customer’s redeemable credit.

The Goat Pure Rider App Delivered, Get Help With Order and Not Delivered actions, the Reason For Not Delivered screen with its four options and free-text field, and the Order History list.

When a delivery cannot be completed

A failed drop-off is captured rather than left as a gap: the rider picks a reason, customer unavailable, wrong address, out of reach, or a written note, and every attempt, charged or COD, lands in an order history the operations team can work from.

Key features

What makes it work

Recurring delivery schedule

Customers can view active delivery details including product, quantity, frequency, and upcoming delivery timing.

Order history

Previous orders remain available through a dedicated account area for quick reference.

Wallet and available credit

A consolidated wallet shows available credit, top-up controls, transaction history, and payment options.

Payment-method management

Customers can view and change a primary payment method without leaving the account flow.

Reusable-bottle redemption

Returned bottles are represented as redeemable value, connecting delivery and reuse within the customer account.

Saved addresses

Customers can select, add, label, and edit delivery locations through map and form-based screens.

Delivery tracking

The interface communicates confirmed, dispatched, near-you, and delivered states through one consistent progress system.

Customer support

Users can send a message, attach a file, and receive visible submission confirmation.

Account and password settings

Personal details and password updates are managed through a structured settings screen.

Persistent mobile navigation

Home, profile, wishlist, and cart remain accessible through a consistent bottom navigation pattern.

Technology

The stack behind it

Experience
FlutterNext.js
Application
Node.js
Data
MongoDBElasticsearch
Infrastructure
Vercel
Outcome

What changed

Recurring delivery, payments, bottle returns, addresses, tracking, and support organized into one coherent mobile account system
Clearer customer control over repeat orders and delivery status
Operational information made legible through consistent status components
Long management screens kept usable on mobile through clear hierarchy and spacing
Reusable interface patterns that can support additional products and payment options
A foundation that can extend to further delivery regions and account tools

Related work

Building something with similar complexity?

Start a project