Choose a real task and a real user role

“Improve the dashboard” is difficult to evaluate. “Help an account owner review a pending request and decide what happens next” gives the design a more useful starting point.

List the roles that use the product and the decisions each is allowed to make. A new member, an administrator and a returning specialist may need different information. Do not assume that a view which works for the owner also works for everyone else.

Map the decision before designing the screen

Identify what must be known before the action, what changes after it and what evidence confirms success. Keep supporting details available without making them compete with the immediate task.

For a hypothetical approval tool, the user may need a summary, the relevant supporting record and a clear approve-or-return decision. Internal notes and unrelated activity should not obscure that sequence. The layout follows the task rather than an arbitrary collection of dashboard cards.

Design the states that the polished mockup leaves out

A product must work before it has data and when something fails. Plan the empty, loading, error and success states alongside the main screen. Also review one-item and many-item layouts, long labels, permission limits and interrupted work.

  • Nothing yet: explain what can happen next and who can do it.
  • Work in progress: show whether changes are saved.
  • Something failed: explain the recovery without losing useful input.
  • Access restricted: provide the appropriate route without exposing private data.
  • Action completed: show the resulting state clearly.

These states belong in the prototype and implementation brief. Treating them as leftover development decisions often creates an inconsistent experience.

Use interaction to explain the change

Motion can show that an item moved, an action completed or a view changed context. It should preserve orientation and stay out of the way of reading and repeated tasks.

Keep important information accessible without depending on hover or animation. Provide a reduced-motion experience and make the keyboard path understandable. A striking transition is successful when it helps the user follow the product, as well as making a memorable impression.

Connect the interface to the product’s actual domain

Kingdom Sports demonstrates product UX and UI for a decentralised sports platform. It belongs in the portfolio as product work, with a different set of interface considerations from a brochure website. Textava provides another example across a SaaS identity, landing page and product experience.

Explore the design scope and visual decisions in each example. For your product, I start with your users, constraints and the tasks that matter.

Test a complete journey before calling it ready

Ask representative users to complete a realistic task without explaining every screen. Observe where they hesitate, misunderstand a label or need information that is missing. Separate observed problems from the team’s assumptions, then decide what to change.

A useful handover includes the approved flows, states, responsive behaviour and interaction details. It also identifies unresolved questions. I scope product UX work around those journeys so the team can review a complete experience, rather than a collection of attractive screens.