Skip to main content
UI Coach Logo
Intermediate

Room Makeover Preview

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

Mobile, Tablet2 to 4 hours

The brief

Understand the problem

Background

Decor products are difficult to judge from isolated catalog images. Camera previews can support decisions, but inaccurate scale, lighting, and color may create misplaced confidence.

User context

Theo rents a small living room and wants to test a rug, curtains, and wall color without making permanent changes. He has a strict budget and cannot block the only doorway.

Product problem

The tool must help Theo establish room dimensions, understand preview limitations, and compare coordinated options without prescribing one aesthetic answer.

Objective

Create the room capture, item placement, comparison, and shopping handoff experience.

What to design

Define the experience

Required experience

  • Room setup and measurement
  • Place and adjust decor items
  • Compare versions and inspect product fit

Screens and states

  • Room capture guidance
  • Interactive room preview
  • Version comparison
  • Product details and list

Core user flow

Follow the critical path

  1. 01

    Theo captures the room and confirms scale

  2. 02

    He places a rug and adjusts its size

  3. 03

    He saves two color combinations

  4. 04

    He reviews dimensions, price, and retailer information

Product rules

Requirements and constraints

Requirements

  • Display scale confidence
  • Allow move, rotate, resize, replace, and undo
  • Keep a running budget
  • Separate visual approximation from verified product dimensions

Constraints

  • Camera measurements may be inaccurate
  • Screen color differs from physical material
  • Some catalog items lack usable models

Reality check

States worth considering

Room scan is incomplete
An item blocks a doorway
A product is out of stock
The device does not support live placement

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.

Room plan

  • Wool rug, 160 by 230 cm, $240
  • Linen curtain pair, 220 cm drop, $118
  • Warm clay wall sample, $9

Finish line

What to deliver

  • Four mobile or tablet screens
  • A comparison view for two saved room versions

If you want more

Optional extensions

Add a shared household review
Create an accessible text-only product planning mode

Optional direction

Visual resources

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

Font pairing
PacificoArimo

Pacifico & Arimo

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

Icons
Illustrations

Keep practicing

Advanced
E-commerce

Outfit Planning With Tailor Handoff

Design a styling tool that helps someone explore outfits for an occasion, request useful feedback, and prepare alterations for a local tailor.

Mobile4 hours plus
Trust and SafetyInteraction Design
Intermediate
E-commerce

Hair Color Try On and Salon Brief

Design a camera preview that compares hair color options and turns a chosen look into a realistic salon consultation brief.

Mobile2 to 4 hours
Mobile DesignTrust and Safety
Intermediate
E-commerce

Nearby Deal Alerts

Create a local shopping alert that surfaces relevant offers without exposing precise location history.

Mobile1 to 2 hours
Mobile DesignTrust and Safety
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

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
Mobile DesignSearch and Filtering