Skip to main content
UI Coach Logo
Intermediate

Visual Search for an Unknown Product

Design a mobile shopping flow that identifies a photographed item and helps someone compare credible purchase options.

Mobile2 to 4 hours

The brief

Understand the problem

Background

Shoppers often notice a product without knowing its name, model, or seller. A photo can begin the search, but uncertain matches and inconsistent listings make the result difficult to trust.

User context

Nadia sees a desk lamp in a cafe and wants to find the same model or a close alternative within her budget. She can take one photo, but cannot inspect a label or ask the owner for details.

Product problem

Image matches may be visually similar while differing in size, material, compatibility, or authenticity. The experience must communicate confidence and let Nadia refine the search without pretending the first result is exact.

Objective

Create the capture, match review, refinement, and merchant comparison experience for a visual product search.

What to design

Define the experience

Required experience

  • Camera guidance for a useful photo
  • Ranked matches with confidence cues
  • A comparison path from match to seller

Screens and states

  • Camera and photo review
  • Visual match results
  • Product and merchant comparison

Core user flow

Follow the critical path

  1. 01

    Nadia photographs the lamp

  2. 02

    The service identifies several possible matches

  3. 03

    She narrows results by material and price

  4. 04

    She compares delivery, returns, and seller trust before leaving for a store

Product rules

Requirements and constraints

Requirements

  • Allow crop, retake, and gallery upload
  • Separate exact-looking matches from alternatives
  • Show price, stock, seller, delivery, and return information
  • Preserve the source photo while filters change

Constraints

  • Recognition can take up to five seconds
  • Some listings lack dimensions or reliable images
  • The interface must work one handed on a small phone

Reality check

States worth considering

No confident match
Several products share the same appearance
A matched listing becomes unavailable
Camera permission is denied

Ready-to-use content

Mock data

Use this content to test hierarchy and realistic data states. You can expand it when the concept needs more depth.

Possible matches

  • Luma Arc Lamp, 82 percent match, $89
  • Kanso Task Light, 74 percent match, $64
  • Northline Desk Lamp, 68 percent match, $112

Finish line

What to deliver

  • Four polished mobile screens covering capture through comparison
  • A short note explaining how match confidence is communicated

If you want more

Optional extensions

Add barcode or label scanning
Design a saved search alert

Optional direction

Visual resources

Use these as a starting constraint if you want one. They are not part of the required solution.

Font pairing
Dancing ScriptJosefin Sans

Dancing Script & Josefin Sans

Clear interface writing gives people the confidence to understand what changed and decide what to do next.

Icons
Illustrations

Keep practicing

Beginner
E-commerce

Scan a Book Before Buying

Design a book discovery flow that recognizes a cover and compares reviews, editions, prices, and library availability.

Mobile1 to 2 hours
Information HierarchyMobile Design
Intermediate
E-commerce

Product Release and Local Stock Alert

Design a brand-following experience that notifies shoppers about relevant releases and shows trustworthy nearby availability.

Mobile2 to 4 hours
Information HierarchyMobile Design
Intermediate
E-commerce

Scan a Product Brand and Origin

Design a product label scanner that explains brand ownership, verified origin details, and credible customer guidance.

Mobile2 to 4 hours
Information HierarchyTrust and Safety
Intermediate
E-commerce

Room Makeover Preview

Design a room visualization tool that helps renters test decor choices, compare combinations, and shop with realistic scale information.

Mobile2 to 4 hours
Interaction DesignMobile Design
Intermediate
E-commerce

Schedule a Recurring Gift Delivery

Design a gift subscription that helps someone choose occasions, recipients, budget rules, and approval before each delivery.

Mobile2 to 4 hours
Service DesignForms
Advanced
E-commerce

Grocery Shopper With Substitution Approval

Design a grocery delivery flow where a shopper follows a detailed list and receives timely decisions about unavailable items.

Mobile4 hours plus
Interaction DesignError Handling