Xinyi Zhang
The Instacart carrot mark and wordmark, and the same on a desktop screen.

Instacart

The same apple across every store, in one unit, side by side, with an AI you can just ask. A concept.

  • Role · Sole designer
  • Year · 2023–24
  • Tools · Figma
Two phones: search results for apple grouped by store, every apple priced per kilo; and three apples compared side by side, an add button under each.

Brief

Instacart lets you shop eight supermarkets from one couch, but never against each other. $4.50 a kilo here, $5.66 for three pounds there, never side by side.

How might we compare products by price and quality, and recommend from what you like and what you can spend?

Research

I mapped the shopping flow, then the branch Instacart lacks: comparison, by filter or by budget.

Then I asked three shoppers. They wanted less than I expected.

What that adds up to

In different words, all three asked for two things: a price in a unit they can hold against another, and the app remembering what they like. None asked for more filters. That set the goals.

Three goals
  • Easy comparison. Smooth and intuitive, never a spreadsheet.
  • Enough information. Enough to decide on, and no more.
  • Bendable options. Comparisons you can shape, by filter or by budget.
Flow · the yellow branch is new
  • Clear price comparisons, more ways to search, add straight from the comparison, and personalisation. Not over-filtering, not stale information.Shopper 1
  • Remember my shopping preferences. Show detailed images and descriptions. Give price and quality a score I can read.Shopper 2
  • Keep it simple. Show the unit price and a nutrition rating.Shopper 3

Wireframes

Two flows, drawn grey so only the structure argues.

Compare. One new button on the product page, and the sheet it opens.

Ask. A chat in the corner: “some apples, low price” comes back as four cards.

Compare · six screens
Ask · four screens

Iterations

Four passes, each fixing what testing broke. The second is the one that matters: every price in one unit.

Same three apples, two ways to read the price
  1. Gala Apple Bag $5.07 1.36 kg bag
  2. Honeycrisp $4.87 2 lb bag
  3. Fuji Apple $6.50 loose, per kg
Prototype prices · which one is cheapest changes

  1. Clarity

    Filters as a row of chips. Every card lost a line and gained a price you can read at arm’s length.

    Search results for apple with a row of filter chips and four product cards.

  2. One unit, grouped by store

    Every price also shown per kilo, and results grouped by store, so choosing between stores happens on one screen.

    Search results for apple grouped by store: Walmart, ShopRite, Costco, every apple priced per kilo.

  3. Ask

    A sentence instead of a search term. “Cheap apples for a pie” comes back as a card you can add.

    The chat box open over the store, a Fuji apple card in the reply: photo, price per kilo, a short description, ratings, and About this item.

  4. Compare, side by side

    Up to three, lined up: photo, price per kilo, stock, one line each, and an add button under every column.

    Compare all products: Gala, Fuji and Green apples in three columns, price per kilo and stock under each, a summary line per apple, and an add button per column.
Search
Compare
Ask
Holiday shelf

Outcome

A clickable prototype in Figma: search, filter, compare, ask. A concept, done on my own, not with Instacart.

Not yet tested

Whether shoppers trust a per-kilo price on a bagged product, and how many items a compare sheet holds before it turns into the spreadsheet the brief warned against. Both are next.

Reflection

Today the search bar itself would take “cheap apples for a pie” and come back with a comparison, not a list.

← All Work ExplorEdge →