Product designer at Miro

As asked

Pick a checkout flow on any product you use that you think is bad. Walk me through how you would redesign it.

Sample answer outline

Name the product and the specific user. State your hypothesis about what is wrong (friction at a specific step, unclear errors, hidden costs, broken keyboard navigation). Walk through the current flow, calling out each problem with a reason. Sketch the redesign at the right fidelity for the conversation, and explain the principle behind each change (reduce decisions, surface costs early, default to the common case). Discuss what you would A/B test to validate, what could backfire, and what success looks like. Strong designers are opinionated but show their work.

Expect these follow-ups

• Which change would you ship first and why?
• What would tell you the redesign is worse?
• Who on the team would push back, and how would you handle it?

As asked

A user's card payment fails at checkout. What should the error message say, and how do you decide what not to say?

Sample answer outline

A good answer is clear, specific where the system knows the cause, and action-oriented without blaming the user. It should distinguish between insufficient funds, expired card, network failure, and unknown decline only if the payment processor safely exposes that reason. Avoid exposing sensitive bank details or implying certainty the product does not have. The message needs a recovery path such as trying another card, checking details, or contacting the bank. Strong UX writers also mention localization, accessibility, and consistency with the product voice.

Expect these follow-ups

• How would you write the same message for a screen reader user?
• What if legal says you cannot disclose the decline reason?
• How do you test whether the copy reduces support tickets?

As asked

A mobile app moves users from a list of cards to a detailed view. How would you design motion that helps comprehension rather than just looking polished?

Sample answer outline

Use motion to preserve object continuity: the selected card can expand or hand off into the detail surface so users understand where they went. Keep timing short, easing natural, and hierarchy clear so the transition does not delay the task. Define what moves, what fades, and what remains stable, then specify behavior for interruption and back navigation. Respect reduced-motion settings with an alternate transition that preserves orientation without large movement. Candidates who talk only about delight miss the core product motion goal: reducing cognitive load.

Expect these follow-ups

• How would you specify this for iOS, Android, and web engineers?
• What changes for a low-end device?
• How do you decide whether the motion is too slow?

As asked

Walk me through your end-to-end design process for a feature, from the moment you get a brief to the moment engineering ships it. What does each stage look like and what do you produce at each step?

Sample answer outline

A strong answer names concrete stages (discovery, definition, ideation, prototyping, validation, handoff) and explains what artifact or decision comes out of each. The candidate should talk about how research findings shape wireframes, how low-fidelity exploration precedes high-fidelity polish, and how they collaborate with engineers at handoff. Look for awareness of when to compress or expand stages based on risk and timeline.

Expect these follow-ups

• Which stage do you spend the most time in, and why?
• How does your process change when you have two weeks versus two days?

As asked

Take a simple text input field. List every interactive state it needs and explain how you would visually differentiate them so that a user never has to guess what state they are in.

Sample answer outline

A strong answer covers: default, hover, focus, active, disabled, read-only, filled, error, success or validated, and loading if async. The candidate should explain that each state needs a distinct visual signal (border color, icon, helper text) that does not rely on color alone. They should mention WCAG 2.5.3 and 3:1 contrast for non-text UI components and note that placeholder text alone is never sufficient for labeling.

Expect these follow-ups

• How do you handle error state when validation fires on blur versus on submit?
• What is the visual difference between disabled and read-only, and when do you use each?

As asked

What are the WCAG AA contrast requirements for text and for UI components, and what are the most common places you see designers get them wrong in real products?

Sample answer outline

A strong answer states 4.5:1 for normal text, 3:1 for large text (18pt regular or 14pt bold), and 3:1 for UI components and meaningful graphics under SC 1.4.11. Common mistakes include: checking only primary text but missing placeholder text, icon-only buttons with insufficient contrast against the background, and focus indicators that fail the 3:1 ratio against adjacent colors. Bonus for mentioning WCAG 2.2 SC 2.4.11 (Focus Appearance, which sets minimum size and contrast requirements for focus indicators) and APCA as a newer alternative contrast model.

Expect these follow-ups

• How do you check contrast for a gradient background?
• What do you do when brand colors fail AA but the brand team will not change them?