What's included

• Welcome and sign-up. A first-order offer, email or phone sign-up, Apple, Google and Facebook buttons, and Skip for now.
• Multi-store home. Search across products, stores and recipes, an active-order banner and store cards with delivery times and EBT and pickup tags.
• Storefront and aisles. A delivery, pickup or in-store toggle, the store's service fee, flyer deals, an 'Ask or search anything' bar and an aisle list from Produce to Pets.
• Search and product detail. Results for 'apple pie' with nutrition lines and brand, sale and sort filters, then a product page with unit price, stock level and a nutrition panel.
• Cart, checkout and tip. A replacement choice and note on each item, a spend-more offer, a fee summary and a tip screen with $1 to $6 presets.
• Tracking, membership and settings. Order confirmed and tracking with the shopper's profile, a membership trial, settings with EBT SNAP payment, and an empty cart.

Why wireframe a grocery delivery app first?

• Design for out-of-stock items. A weekly shop runs to dozens of items, so every cart line carries a replacement choice like Replace with best match, and the order confirmed screen asks for replacement preferences again.
• Handle more than one store. Instacart starts from a list of stores, a decision to settle early if your app will ever add a second retailer.
• Show fees early. The storefront states the service fee and bag charge up front, and the basket bar shows how much more to spend for $0 delivery.
• Treat tipping as its own step. A dedicated tip screen, step 2 of 2 before Confirm & pay, tells customers the shopper keeps the whole tip.
• Plan for benefit payments. EBT tags on store cards and an EBT SNAP payment method show where shoppers using benefits find eligible stores and pay.

How to use this template

1. Duplicate the template. Make a copy of the 15 Instacart screens in your Whimsical workspace.
2. Pick one store or many. A supermarket's own app can skip the store list and open on the storefront.
3. Map your aisles. Rename the aisle list to match how your catalog is actually organized.
4. Fill a test cart. Add 30 realistic items to the cart wireframe to see if the layout holds up at real sizes.
5. Write your replacement rules. Decide what happens when an item is out of stock, whether that's a best match, a specific item or a refund, and who approves it.

Single-store vs multi-store grocery app