Skip to main content
UI Coach Logo
Intermediate

Product Alternative Advisor

Design a comparison tool that explains why a product may or may not suit a shopper and suggests credible alternatives.

Responsive web, Mobile2 to 4 hours

The brief

Understand the problem

Background

Specifications, sponsorships, reviews, and marketing claims are scattered across many pages. Shoppers can find alternatives, but they often cannot tell which differences matter for their own needs.

User context

Priya needs a lightweight laptop for university. Her budget is fixed, repairability matters, and she is willing to trade graphics performance for longer battery life.

Product problem

A recommendation can look authoritative even when evidence is incomplete or commercial relationships influence the result. The interface must help people understand the comparison instead of asking them to trust a black box.

Objective

Design the product search, evaluation, and alternative comparison flow for a considered purchase.

What to design

Define the experience

Required experience

  • Describe priorities and hard limits before searching
  • Inspect a product's strengths, tradeoffs, evidence, and price history
  • Compare the selected product with two relevant alternatives
  • Change a preference and understand why the ranking changes

Screens and states

  • Needs setup
  • Search results
  • Product assessment
  • Side-by-side comparison

Core user flow

Follow the critical path

  1. 01

    Priya enters her budget and marks battery life and repairability as priorities

  2. 02

    She selects a laptop from the results

  3. 03

    The service explains the fit and flags missing repairability data

  4. 04

    She compares two alternatives and saves a shortlist

Product rules

Requirements and constraints

Requirements

  • Separate verified facts, user reviews, and editorial judgment
  • Explain each recommendation in plain language
  • Disclose sponsored placement without hiding it in secondary copy
  • Support comparison across different units and missing specifications

Constraints

  • Prices and stock can change frequently
  • Some brands provide incomplete specifications
  • The interface cannot claim that one product is objectively best

Reality check

States worth considering

No product meets every hard limit
Two products have near-identical scores
A saved product is discontinued
Conflicting evidence exists for a specification

Finish line

What to deliver

  • A responsive comparison journey with at least four key screens
  • An explanation pattern for recommendation evidence and uncertainty

Optional direction

Visual resources

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

Font pairing
Alfa Slab OneCoustard

Alfa Slab One & Coustard

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

Icons
Illustrations

Keep practicing

Advanced
E-commerce

Community Shopping Advice

Design a product discussion community where shoppers compare offers and firsthand experience without hidden promotion or review manipulation.

Responsive web4 hours plus
Trust and SafetyInformation Architecture
Advanced
E-commerce

Neighborhood Group Purchase

Design a collective order flow that unlocks a better unit price when enough local buyers commit.

Responsive web2 to 4 hours
Product ThinkingForms
Intermediate
E-commerce

Scheduled Gift Delivery

Design a thoughtful scheduling flow for sending flowers or gifts on future occasions without losing control of the final choice.

Mobile2 to 4 hours
Interaction DesignForms
Intermediate
E-commerce

Adjust a Household Replenishment Subscription

Design a recurring order experience that predicts supply needs while making quantity, frequency, skips, and price changes easy to control.

Mobile2 to 4 hours
Information ArchitectureInteraction Design
Advanced
E-commerce

Drone Product Selector

Design an ecommerce journey that helps a new buyer choose a suitable camera drone and understand operating responsibilities.

Responsive web2 to 4 hours
Search and FilteringContent Design
Intermediate
Social

Choose a Meetup Plan as a Group

Design a group decision flow that turns different schedules, budgets, locations, and interests into one workable meetup plan.

Mobile2 to 4 hours
Product ThinkingInformation Architecture