View
CASE STUDY 03 / QSR, WEB & APP ORDERING

Dagwood

A live storefront and a native app for a Lahore QSR chain, picking up orders organically before a single rupee of marketing.

ROLE Product design, web and native app
YEAR 2026
SCOPE Ordering website, app prototype, developer handover
TOOLS Claude, Lovable, Figma
The Dagwood ordering website hero banner: a towering grilled chicken sandwich dripping sauce against a red background with a playful bite me headline

The problem

01 / 09

Dagwood is a quick service restaurant chain running two physical branches in Lahore, on PIA Road and Khayaban e Amin, open around the clock. Customers ordered by walking in or phoning ahead. There was no ordering website, no native app, no loyalty program, and no way to see where an order was once it left the kitchen.

No digital channelEvery order depended on someone answering a phone at a busy branch.
No order visibilityOnce food left the kitchen, the customer had no way to check on it.
No retention loopRegulars had no reason to be recognised as regulars.

The brand already had demand. What it needed was a channel that could hold it, and a native app to follow once that channel proved itself.

Scope and role

02 / 09

Two products, one brand. The website shipped first and carries the live order volume today. The native app followed as a full design and handover package, now built and live on Google Play. Both ran on the same toolchain throughout (Figma, Claude and Lovable), with the website shipping as a React and Tailwind app and the native app handed over as a Flutter ready specification.

THE WEBSITE

A live ordering storefront, directed through Lovable and deployed to a custom domain.

Menu browsing with category navigation, ingredient customisation, a persistent cart, phone verified checkout, a delivery radius map against both branches, and a WhatsApp ordering assistant built into the header and footer.
THE APP

A native app design system, handed to Flutter engineers.

A functional requirements document, a sixteen screen interactive prototype simulating every flow, a full token and component system, and a developer handover document. It shipped, and is now live on Google Play.

The ordering website

03 / 09

This is the live product. Every screen below is a real, working part of dagwood.com.pk ↗ today: a scroll aware menu, ingredient level customisation, a persistent cart that follows the page, phone verified checkout, and a delivery picker that draws an actual radius around both branches and computes distance live.

Browse, cart and checkout

Dagwood website menu grid: an our menu heading, a row of category pills with sandwich with fries selected, and the matching sandwich with fries group below it showing three cards with product photo, name, description, price and an add button
Category tabs, scroll synced to the grid below
Cart popover opened from the header over the hero carousel, listing one item with its quantity and price, a running total, and view cart and checkout buttons, while a persistent items and total pill sits in the bottom right corner of the page
The cart follows the page, not a route
Checkout page from the title down: an order summary listing two sandwiches with prices, a level up your sandwich upsell strip offering two shakes and a side of fries, a your details card with a required phone field and a verify button, and a delivery method card offering delivery to your door or free pickup in Lahore
Phone verified, with a meal upsell above the fold

Customise and deliver

Item detail modal for Fillet Steak With Fries, showing the product photo, a required bread choice between regular and bran, a customise your sandwich panel for adding and removing ingredients, a goes well with upsell carousel, and the price with make it a meal and add to cart buttons
Bread, ingredients and a rules aware upsell
Select delivery location modal with an address search field over a live Lahore map, a shaded delivery radius drawn around each of the two branch markers, a dropped pin, the resolved street address, the nearest branch and its distance, and a confirm location button
Real radius, real distance to the nearest branch

Sandy, the ordering assistant

04 / 09

Sandy was designed once and shipped twice, in two different forms.

DESIGNED FOR THE APP An in app support sheet Sandy appears as a sheet inside the app prototype, with quick options for order status, changes and cancellations, and a WhatsApp handoff built in from the start.
SHIPPED ON THE WEBSITE

A WhatsApp ordering assistant, live in the header and footer.

Every page carries an Order with Sandy AI entry point that opens a prefilled WhatsApp chat, so a customer can place a full order by conversation without touching the menu grid.
The lower half of the order tracking screen in the app prototype: a four step progress tracker, a delay alert, the order summary, and a Chat with Sandy button sitting between Cancel and Reorder, labelled WhatsApp, replies instantly
Sandy's entry point, right on the order screen
The Sandy support sheet in the app prototype: a WhatsApp avatar marked Online, Dagwood Support Bot, an Open WhatsApp button, and four quick options (where is my order, change my order, cancel my order, something else), above a note that Sandy typically replies in under thirty seconds
The sheet itself, WhatsApp handoff included

Menu and customisation

05 / 09

One catalogue, shared by both surfaces: five categories, close to forty items, every price carried over exactly from the kitchen's own list. Customisation goes down to bread choice and individual ingredients, not just add ons.

Sandwich with friesCocktail, Fillet Steak and Cheese Lover, each from Rs. 850.
Chicken with friesStrip combos with dynamite sauce, plus regular and large fries on their own.
BeveragesMilkshakes, refreshers, cold drinks and karak or cardamom chai.
DessertsBrownies, cookies, cakes, donuts and sundaes.
CondimentsCocktail, dynamite, cheese, mayo and BBQ sauce, sold on their own.
Customise ingredientsBread choice, removable ingredients and priced extras, per sandwich.

From prototype to native app

06 / 09

The app side of Dagwood started as a functional requirements document and a sixteen screen interactive prototype, simulating the full order flow, a loyalty and points system, and live tracking. Alongside it, a developer handover document translated every colour, type style and component into a Flutter ready specification. The prototype was locked in April 2026. The app was live on Google Play by June 2026, built by a separate engineering team working from that handover.

Prototype and shipped app, side by side

Home screen in the interactive prototype, showing the Cocktail Special hero banner, the location row with a delivery and pickup toggle, a featured Cocktail with Fries card and the five tab bottom navigation
The prototype's home screen
The same home screen in the shipped Dagwood app on Google Play, running on a real Android phone: same hero banner, same featured card and the same five tab navigation, with an Add To Cart button in place of the prototype's Explore Menu
The shipped app, live on Google Play

More of the sixteen screen prototype

Splash screen with the layered Dagwood sandwich mark, the wordmark, the tagline where every layer tells a story, and a tap to begin prompt
Splash
Menu screen with a search bar, scrollable category pills, a full width best seller card and a two column grid of items with star ratings and prices, above the bottom navigation
Menu
Rewards screen with a gold member badge, a points balance, a scannable loyalty barcode, a progress bar toward a free meal and a list of unlocked rewards with redeem buttons
Rewards
Order tracking screen with a live map and rider marker, a four step progress tracker, a delayed plus four minutes alert reading heavy traffic on Main Boulevard with the route updated, and the order summary with item prices
Tracking, mid delay

Design system

07 / 09

Dagwood arrived with an eighty eight page brand book. The product design system is a deliberate subset of it: the parts that survive contact with a 390 pixel screen, carried identically across the prototype, the handover document and the live website.

Lahore's boldest sandwiches, built in layers, crafted with heat.

Brand essence · DagBook v0.2 · splash animation from the app

Interface palette

Four colours carry the whole interface. Three come from the brand book: two of them adjusted, because pure black and pure white are punishing across a long scrolling menu. The fourth had to be invented: nothing in the book covers a confirmed state, and an order tracker needs one.

Brand Red #B41E05 Carried over unchanged
Dark Ink #1C1208 Warmed from #000000
Cream #F7F7F7 Cooled from #FEFEFE
Success Green #34A853 Added for order states

One mark, three lockups

The book draws the lockup three ways rather than leaving the background to chance. The symbol keeps its orange on light and on black; on brand red the whole mark reverses to solid white, because orange on red is not a contrast a menu screen can carry.

The Dagwood lockup on a white background: orange layered sandwich symbol beside a black Dagwood wordmark
On light
The same lockup on black: the orange symbol is unchanged and the wordmark reverses to white
On black
The lockup on brand red: symbol and wordmark both reversed to solid white
On brand red

Two typefaces, doing four jobs

Bebas Neue is a condensed all caps display face that holds a screen title or a price in very little width. Lato carries everything a caps face cannot: descriptions, ratings, form labels, error text.

The book asked for more than two. It assigns a different display face to each menu family: seven in all, one each for sandwiches, appetizers, drinks, milkshakes, donuts, sundaes and brownies. None of them shipped.

Seven faces is coherent in print, where a reader meets one family at a time. A menu screen scrolls all seven past you in a second, and type that changes by family reads as inconsistency rather than as a system. Two faces was the trade: less range, one voice down the whole scroll.

Bebas Neue
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
Lato
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm
Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz

Everything else that had to be decided

Four point spacingCard radius at sixteen, sheets and buttons at twenty four, chips at twelve.
Tracking on display typeBebas Neue set out at two percent of the font size, so screen titles do not tighten into a block at large sizes.
One weight onlyBebas Neue ships a single weight, so display hierarchy has to come from size and tracking rather than from going bolder.

Live today

08 / 09
TWO PRODUCTS, LIVE NOW

dagwood.com.pk ↗ is the ordering website, and Dagwood on Google Play ↗ is the native app.

The same brand, the same catalogue, two different ways in.
1,000+ Downloads on Google Play, Food and Drink category, still climbing

Before any marketing spend, the channel picked up ten to fifteen orders a day on its own. That is the number worth trusting here: not a projection, what the storefront actually did once it existed.

Reflection

09 / 09

A brand book and a product turned out to be two different problems. Eighty eight pages gave me a voice; a 390 pixel screen decided what survived. The harder lesson was the handover: the app was built by engineers I never sat with, so every colour and state had to be written down well enough to be built right without me in the room.

Muhammad Bin Saif, Product Designer
NEXT PROJECT Zeny