Hafiz Juice Corner
An editorial, animated digital storefront for Hafiz Juice Corner — bold typography, realistic product visuals, interactive menu browsing and a direct WhatsApp ordering flow. Built and deployed live.
What is this project?
An editorial digital storefront for Hafiz Juice Corner on Mall Road, Anarkali Bazaar, Lahore. Combining bold typography, realistic product visuals, interactive menu browsing, client-side cart state, and a direct WhatsApp ordering flow — fully deployed and live.
What needed to be solved?
Traditional local juice shops rely on static printed menus or unstructured messaging conversations, leading to order confusion, manual back-and-forth, and slow checkout during rush hours.
What was the intended outcome?
Create a memorable, mobile-first storefront where customers can explore categorized juices and milkshakes, customize sizes, review order subtotals, and send a pre-filled order directly to WhatsApp in one tap.
Execution & Implementation
MY ROLE: UI/UX Designer + Full-Stack Web Developer
Custom responsive design system — warm orange (#F36A2F), golden yellow (#F4C343), cream (#FFF2D8), and deep plum (#241621) contrast accents.
High-energy animated Hero section with editorial line-by-line reveals and realistic product photography.
Interactive menu browser with category filtering across Fresh Juices, Signature Milkshakes, Special Coolers, and Fruit Chaat.
Customization modal for selecting serving sizes (Regular, Large, 1L Pitcher) with dynamic price calculation.
Client-side Cart Drawer & Bottom Sheet with live quantity adjustments, item removal, and persistent state.
Automated WhatsApp order generator that formats customer contact details, itemized totals in PKR (Rs.), and delivery/pickup preferences.
System & Process Workflow
Menu Discovery
Customer browses categorized drinks with live prices, ingredients, and flavor profiles.
Serving Customization
Customer selects portion sizes and quantities which dynamically update the cart subtotal.
Order Review
Slide-out cart drawer summarizes the item list and collects customer name, phone, and pickup/delivery preference.
WhatsApp Handoff
One tap compiles a clean, structured order message and opens WhatsApp with zero re-typing required.
Why I Built It This Way
Specific choices made during the project — and the reasoning behind each.
Photographic Product Imagery
Used real drink photography instead of illustrations or icons throughout the entire menu.
Visuals that look delicious sell better. Illustrated icons communicate 'cheap app' rather than premium juice brand.
WhatsApp Ordering Instead of Checkout
Routed all orders to WhatsApp with pre-filled message templates instead of building a payment gateway.
The business already operates via WhatsApp. Adding a payment layer would require setup costs and complicate the existing workflow the owner is comfortable with.
Static Site Generation (SSG)
Built on Next.js 15 with full SSG — no backend, no database, zero server costs.
A juice shop menu doesn't need real-time data. SSG delivers instant loads on mobile with zero hosting costs on Vercel.
Technologies & Software
Results & Impact
Interested in a Similar Project?
Let's discuss your goals, requirements, and timeline. I'll help you define the next step.
Start Project Discussion
Thumbnail & Visual Design
A collection of YouTube thumbnails and visual brand assets designed around strong contrast, clear typography, subject isolation, and mobile readability.