AR Digi Mart
A single-page cash-on-delivery storefront for a Pakistani retailer, built around an open-box-before-you-pay flow to solve the trust problem COD sellers face.
A Trust-First Storefront for Pakistan's COD Market
Cash-on-delivery is the default way most Pakistani shoppers buy online, and it comes with a built-in skepticism problem: buyers have been burned by sellers who take a COD order and ship the wrong item, a damaged one, or nothing close to what was advertised. AR Digi Mart needed a storefront that addressed that skepticism directly rather than designing around it.
The retailer already had a print warranty card with an established visual identity. Rather than starting from a blank design system, that brand system was carried faithfully into the digital storefront — same typographic feel, same trust marks — so the online page reads as a continuation of a business the customer can already vouch for offline.
Built and shipped by Muhammad Ramzan with Next.js and TypeScript as a single, fast-loading page.
The Storefront in Action
The hero leads with the shield-badge price reveal — the discounted price sitting next to the trust marks that back it up.
Hero section: price reveal, shield trust badges, and the open-box-before-pay promise up top.
Further down the page, the product detail section carries the same photography and trust-mark language as the retailer's print warranty card, paired with bilingual English/Urdu copy for the local buyer.
Product detail section: the print warranty card's photography and guarantees, carried into the digital storefront.
Built Around the Order Flow, Not Just the Page
Every piece on the page exists to move a skeptical buyer through a specific, low-friction order flow — from first landing to a confirmed delivery address.
Open-Box-Before-Pay Flow
The order flow leads with the promise that buyers can inspect the product before paying — the specific mechanism used to defuse COD trust concerns.
Google Maps Location Capture
Delivery address capture is backed by the Google Maps API, letting buyers drop a pin instead of typing an address that couriers can't find.
Province / City Order Form
A structured order form scoped to Pakistan's province and city breakdown, keeping checkout short while still capturing what dispatch needs.
Mobile-Tuned Animation
Motion on the page was deliberately kept light and tuned for slower mobile connections — the channel most of the site's traffic actually arrives through.
Print-to-Digital Brand System
The retailer's existing print warranty card set the type, color, and trust-mark language that the storefront was built to match.
Cash-on-Delivery Checkout
No payment gateway in the loop — checkout is built entirely around COD, matching how the target buyer actually pays.
Solving COD Trust Without Adding Friction
The obvious way to fight COD skepticism is to add reassurance: more badges, more copy, more testimonials. The risk is that all of that adds friction and still doesn't answer the buyer's real question, which is "what happens if the product isn't what I ordered?"
The site answers that question with a mechanism, not a message: the order flow is built around letting the buyer open the box and check the product before handing over payment. That single flow does the trust-building work that a page full of badges usually tries and fails to do.
Our Approach
The open-box-before-pay flow was made the center of the page's narrative rather than a line item in the FAQ — it's what the hero section leads with, and what the order form reinforces at the point of commitment.
Combined with Google Maps-based location capture and a province/city form, the flow keeps the deciding moment simple: confirm where to deliver, and only pay once the product is in hand and checked.
Live at ar-digi-mart.mhdramzan.com
AR Digi Mart is live and taking cash-on-delivery orders. Visit the storefront to see the open-box-before-pay flow, the Maps-based delivery capture, and the order form in action.
Developed by Muhammad Ramzan
Next.js · TypeScript · Google Maps API