Blog

Design dense dashboards around a real question

Organize dense dashboards around a concrete decision, with clear metric definitions, useful tables, and honest unavailable-data states.

Use interface motion to explain change

Use motion to explain a specific change, preserve orientation, and keep the same information available with reduced motion.

Turn a UI idea into a testable product hypothesis

Connect a UI change to a clear hypothesis, a stable treatment, and an event that measures completed work rather than clicks alone.

A practical keyboard review for product designers

Review focus order, dialogs, feedback, and return paths with a real keyboard task, then document behavior that can be checked.

Make subscription changes easy to understand

Make upgrades, temporary discounts, cancellations, and resulting access understandable across the whole account journey.

Design forms for correction, not just completion

Design validation, server errors, and retries as a complete correction loop that preserves the work someone has already entered.

Empty states that explain what happens next

Distinguish a new account, an unsuccessful search, and a failed request, then give each empty state an honest and useful next step.

Design navigation around the user's next decision

A practical way to connect navigation labels, meaningful links, and return paths to the decisions people actually need to make.

A design handoff that explains behavior, not just screens

Connect screens to data, permissions, state transitions, and acceptance scenarios for a handoff engineers can implement.

Extract a design system from references without copying a brand

Use reference flows to develop your own tokens, component rules, and system decisions without copying another brand.

Design the interface states your happy path leaves out

Design loading, empty, error, and partial-success states with clear recovery paths and concrete transition rules.

Compare iOS, Android, and web references without mixing their assumptions

Compare iOS, Android, and web flows through shared user tasks while keeping platform context and unknown behavior visible.

Bring a web reference into Figma without losing the question

Install Refcat Web to Figma, choose the right capture mode, and turn editable imports into focused design research.

Review a checkout flow beyond the payment button

Review pricing promises, temporary discounts, payment failures, and confirmation as one connected checkout experience.

Audit an onboarding flow before you redesign it

Map the journey to a first useful outcome, identify unnecessary requests, and choose an onboarding change worth testing.

How to turn UI references into design decisions

A practical workflow for turning UI inspiration into explicit decisions, contrasting examples, and testable proposals.