Compare Items

Compare shortlisted products or plans side by side using the attributes that matter for a purchase decision. The screen connects Comparison and Saved so product teams can find the “Add item” action while checking compared and attributes.

Use this reference when you need to design this workflow inside an existing product. The example includes practical records such as Northstar Pro plan and Atlas Business plan, rather than an empty visual shell.

Compare Items
Use this template in Figr

Template facts

Screen

Detail

Primary action

Add item

Pattern

Detail

State

Default, loading, empty, error, permission, success

Design system

Adaptable product UI theme

What this screen helps users do

Product teams need a clear “Add item” action without losing sight of compared, attributes and the affected records. Keep the decision and its outcome clear before moving to the next task.

Key elements

  • Primary action: Add item is clearly available where the task happens.
  • Main view: Comparison keeps the starting point obvious.
  • Connected view: Saved supplies nearby context.
  • Metric: Compared is visible with a meaningful value.
  • Another signal: Attributes helps people judge what to do next.
  • Representative record: Northstar Pro plan makes the example specific.
  • Second record: Atlas Business plan shows the pattern works beyond one item.

States worth designing

  • Record unavailable; show what people can do instead of leaving a blank panel.
  • Loading comparison without changing the layout unexpectedly.
  • Restricted detail or stale status; explain the problem and preserve work.
  • Permission denied for saved; clarify who can continue.
  • Success after choosing Add item; confirm the result and the next step.
  • Network or data refresh failure; offer a retry without losing context.

Where this screen sits in the flow

Comparison → Saved → Add item → Review outcome

Patterns used

Detail, Comparison, Saved, Specs, accessible states, contextual actions

Why these choices work

Prioritize the record status and next action. Put supporting history nearby without competing with the main task.

In this design, people should be able to compare Northstar Pro plan with Atlas Business plan. Make compared clear, then use attributes to explain whether the next step needs attention.

Before handing this to a designer or engineer, check keyboard focus, error copy, permissions and what happens after they choose the “Add item” action. The happy path alone is not enough.

Related UI examples: Favorites & Collections, Discovery Empty State, Recent Items.

Start from this in Figr

Design a compare items screen for our existing software product. Use our real design-system tokens, components and product language. Show Comparison and Saved, include believable records such as Northstar Pro plan, and make add item easy to find. Map loading, empty, failure, permission and success states before you create editable high-fidelity screens.

Open Figr