Skip to main content
UI Coach Logo
Back to challenges
Intermediate

Transparent Affiliate Review

Design a product review page that makes testing evidence, commercial relationships, and comparison criteria easy to inspect.

Responsive web

The brief

Understand the problem

Background

Affiliate-funded reviews can help readers compare products, but trust erodes when sponsorship, testing methods, ownership, and link commissions are hidden or when every option is presented as best.

User context

Theo is comparing noise-cancelling headphones for travel. He wants to know which models were tested, how scores were derived, and whether purchases support the publisher.

Product problem

Readers need commercial disclosure and evidence close to the recommendation, not buried in generic policy pages.

Objective

Create a review, comparison, methodology, and outbound-link confirmation experience for an affiliate publication.

What to design

Define the experience

Required experience

  • Scan the recommendation and intended use case
  • Compare products by consistent criteria
  • Inspect testing notes and update history
  • Understand commission disclosure before visiting a retailer

Screens and states

  • Review article
  • Product comparison
  • Testing methodology
  • Retailer link disclosure

Core user flow

Follow the critical path

  1. 01

    Theo sees who the top pick suits and who should avoid it

  2. 02

    He compares comfort, battery, repairability, and price

  3. 03

    He opens the test protocol and sample limitations

  4. 04

    He follows a labeled affiliate link after seeing the relationship

Product rules

Requirements and constraints

Requirements

  • Place compensation and supplied-product disclosures near recommendations
  • Separate measured results, reviewer judgment, and manufacturer claims
  • Show publication and material update dates
  • Include drawbacks and non-affiliate alternatives

Constraints

  • Commercial terms cannot change the visible scoring method
  • Unavailable products need a dated status
  • Retail prices must name source and capture time

Reality check

States worth considering

A product is recalled
The affiliate relationship ends
A manufacturer disputes a result
A retailer changes price after click-through

Finish line

What to deliver

  • Four responsive page states demonstrating disclosure and evidence

Optional direction

Visual resources

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

Color palette
#1C1B19
#C7B89F
#649853
#735D5F
#87759D
Font pairing
LoraRoboto

Lora & Roboto

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

Icons
Illustrations