Product designer role-specific interview questions

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?

As asked

You need to validate a new onboarding flow. What factors determine whether you build a paper sketch, a clickable wireframe in Figma, or a coded prototype, and how does fidelity affect what you can actually learn?

Sample answer outline

A strong answer ties fidelity to the specific question being tested: paper prototypes work when you are testing structure and flow, mid-fidelity Figma prototypes work when you are testing task completion and copy, and coded prototypes are needed when real data, performance, or micro-interactions are part of what is being evaluated. The candidate should mention that high fidelity can bias participants toward commenting on polish rather than flow. They should note the cost-accuracy tradeoff and how to communicate prototype limitations to participants.

Expect these follow-ups

• How do you prototype a state that depends on user input when you cannot use real data?
• When would you skip prototyping and go straight to an A/B test?

As asked

What does a complete design specification include beyond screenshots, and what do you do to make sure engineers have everything they need without having to ask you ten follow-up questions?

Sample answer outline

A strong answer includes: annotated states for all interactive conditions, edge cases (empty states, error states, truncation at long strings), explicit measurements or Figma Dev Mode links, token names rather than raw hex values, motion specs (duration, easing curve), and copy including character limits. The candidate should describe their process for walking engineers through specs in a kickoff, using a shared frame for open questions, and how they stay available during implementation.

Expect these follow-ups

• How do you spec a component that behaves differently across breakpoints?
• What happens when an engineer says your spec is impossible to implement as designed?

As asked

Walk me through how you structure a design review when you need feedback from a PM, an engineering lead, and a marketing director who all have different priorities. How do you keep it focused and get decisions rather than endless opinions?

Sample answer outline

Strong answers describe setting the context before showing designs (the problem being solved, constraints, and what questions you need answered), using a consent agenda or pre-read to get basic questions out of the way early, and explicitly separating 'decisions needed today' from 'nice-to-have feedback'. The candidate should mention techniques like time-boxing open discussion, using dot voting or written feedback to surface minority opinions, and parking off-topic discussions. They should also acknowledge that different stakeholders need different framings.

Expect these follow-ups

• What do you do when a stakeholder gives feedback that contradicts your user research?
• How do you handle a design review where the stakeholder with the highest authority has the least helpful opinion?

As asked

Take me through the project in your portfolio you are most proud of. Tell me about the problem, your process, the constraints you worked under, and what actually shipped.

Sample answer outline

A strong answer has a clear problem statement with context (who the user is, what they were failing to do), a process that includes research, iteration, and moments of learning that changed direction, specific constraints (time, technical, business), and a shipped outcome with measurable results. Red flags include presenting only the final polished UI without showing the messy middle, claiming sole credit for team work, or describing a project that was never actually shipped.

Expect these follow-ups

• What would you do differently if you were starting that project today?
• Tell me about a decision in that project where you had to choose between two approaches. How did you decide?

As asked

Your PM tells you that two features both need your attention this week but you realistically have time for only one. They are both high-priority according to the roadmap. How do you decide which to work on first and how do you handle the conversation with your PM?

Sample answer outline

A strong answer shows structured prioritization: asking about external deadlines or engineering dependency for each, the user impact of delaying each one, and what partial progress on each is possible. The candidate should show they can have a direct conversation with a PM about resource constraints rather than silently overcommitting or passively waiting to be told. They should propose a recommendation rather than just escalating the decision.

Expect these follow-ups

• How do you handle it when the PM insists both must be done by Friday?
• What do you do to protect design quality when you are stretched across multiple workstreams?

As asked

How do you decide when to use Figma variants versus separate components? Walk me through a real case where you had to choose and explain what drove your decision.

Sample answer outline

A strong answer shows understanding that variants work best when components share structure but differ in state, size, or style, while separate components make sense when structure diverges significantly. The candidate should mention how variant names map to props engineers will implement, and how poorly named or overcrowded variant sets create confusion in handoff. Bonus if they mention using component properties (text, boolean, instance swap) introduced in Figma 2022+.

Expect these follow-ups

• How do you name your variant properties so engineers can read them easily?
• What happens to your component library when the design system changes a base token?

As asked

A designer on your team built frames that break when content length changes. How would you use Figma auto layout to fix this, and what properties would you set to handle variable-length text, wrapping, and min or max widths?

Sample answer outline

A strong answer covers fill container versus hug contents versus fixed sizing, how nesting auto layouts creates flexible responsive frames, and how min or max width constraints prevent overflow. The candidate should mention that wrapping was added later and has specific gotchas with spacing modes. They should also note that auto layout in design should mirror flexbox so the CSS translation is clean.

Expect these follow-ups

• How do you handle an auto layout frame that needs both horizontal and vertical flexibility?
• What breaks in auto layout when a designer uses absolute positioning inside it?

As asked

How do you structure design tokens so they work across light and dark themes, multiple brands, and multiple platforms? Walk me through the naming conventions and layering you use.

Sample answer outline

A strong answer distinguishes primitive tokens (raw values like hex colors), semantic tokens (purpose-named like color.surface.primary), and component tokens (button.background.default). The candidate should explain that semantic tokens reference primitives, and themes swap only the semantic layer. They should mention formats like W3C Design Tokens Community Group, tools like Style Dictionary or Tokens Studio, and the challenge of keeping Figma variables in sync with code.

Expect these follow-ups

• How do you prevent token sprawl when five teams all want to add new tokens?
• How would you handle a token that needs a different value on iOS versus web?

As asked

A lot of designers stop at color contrast when thinking about accessibility. What are the other areas you actively design for, and how do you catch accessibility gaps before a feature ships?

Sample answer outline

Strong answers cover: focus order and keyboard navigability, touch target size (WCAG 2.5.5 recommends 44x44px), motion and reduced-motion preferences, reading level and plain language, alt text strategy for images, meaningful link text, form label associations, and heading hierarchy. The candidate should describe a concrete process: checklist in their design file, review with an accessibility specialist or screen reader, and checking with browser extensions like Axe or Accessibility Insights.

Expect these follow-ups

• How do you design for screen reader users without being able to test on a screen reader yourself?
• What is the difference between ARIA labels and visible labels, and when would you use each?

As asked

You are redesigning the navigation of a content-heavy app. Walk me through how you would use card sorting, what type you would choose, and how you would turn the results into an actual IA recommendation.

Sample answer outline

A strong answer distinguishes open (participants name categories) from closed (categories are pre-set) card sorts and explains that open sorts reveal users' mental models while closed sorts test a proposed structure. They should mention tools like Optimal Workshop or Maze, typical sample sizes (15 to 30 participants for qualitative insight), and how to read a dendogram or similarity matrix. The answer should describe how to reconcile card sort data with business constraints and how to validate the resulting IA with a tree test.

Expect these follow-ups

• What do you do when card sort results cluster into groups that do not match your product's domain model?
• How do you run a card sort remotely with a tight deadline and a small budget?

As asked

During a usability test, a participant is struggling with a task and looks at you for help. How do you handle this without invalidating the session, and what interviewer behaviors do you actively watch out for to avoid biasing results?

Sample answer outline

A strong answer describes reflecting questions back ('What would you normally do here?'), using think-aloud protocols, and tolerating silence without filling it. The candidate should name specific biasing behaviors to avoid: leading questions ('Did you find that confusing?'), nodding or reacting visibly to choices, and over-explaining the task. They should mention that a practice task at the start warms participants up. Bonus for noting that a note-taker freeing the moderator to focus on body language improves data quality.

Expect these follow-ups

• How do you handle a participant who gives you the answer they think you want instead of their real experience?
• What is the difference between a usability test and a user interview, and when do you choose each?

As asked

You have just finished eight user interviews. You have hours of recordings, a wall of sticky notes, and a week to turn this into something actionable. Walk me through your synthesis process.

Sample answer outline

Strong answers describe affinity mapping (grouping observations by theme, not by participant), distinguishing observations from interpretations, and using a framework like 'I noticed, I wonder, I think' to layer inference carefully. The candidate should mention how to prioritize themes by frequency and severity, and how they translate themes into design implications or problem statements rather than stopping at raw findings. Bonus for mentioning how to share uncertainty honestly (one participant said X versus all eight said X).

Expect these follow-ups

• How do you get a PM or engineer who skipped the interviews to trust your synthesis?
• What do you do when your synthesis contradicts what the team assumed going in?

As asked

Explain the Jobs to Be Done framework in plain terms and walk me through a real situation where it changed how you framed a design problem.

Sample answer outline

A strong answer explains that JTBD focuses on the outcome a user is trying to achieve ('hire' a product for) rather than on demographic categories or feature requests. The candidate should distinguish functional, emotional, and social dimensions of a job. A good concrete example shows how reframing from a feature request to a job statement opened up solution space or killed a poor assumption. Bonus for contrasting JTBD with personas and when each is more useful.

Expect these follow-ups

• How do you identify the real job when users ask for a specific feature?
• Where does JTBD fall short, and what frameworks do you pair with it?

As asked

Walk me through your mental model for deciding when to add motion to an interface. What makes motion functional versus decorative, and how do you know when you have overdone it?

Sample answer outline

A strong answer describes functional motion as changes that communicate something: state transitions, spatial relationships (a sheet sliding up reveals it sits above the page), or cause and effect (a button press triggers a fill animation). Decorative motion adds delay and cognitive load without information value. The candidate should mention prefers-reduced-motion as an accessibility requirement and note that duration above 300ms on frequent interactions feels sluggish. Bonus for referencing Google Material Motion principles or the 12 principles of animation.

Expect these follow-ups

• How do you spec motion for engineers? What information do they need?
• How do you handle reduced-motion preferences in a design system?

As asked

If I asked you to do a heuristic evaluation of an unfamiliar product by Friday, walk me through exactly how you would run it, what framework you would use, and how you would present the findings.

Sample answer outline

A strong answer describes using Nielsen's 10 heuristics (or a modern variant), completing at least two passes through key flows, and rating each issue by severity (0 to 4 scale) and frequency. The candidate should mention that a single evaluator finds about 35% of issues and that three to five evaluators are ideal for coverage. Findings should be organized into a report that shows the heuristic violated, a screenshot, the severity, and a recommended fix. Bonus for noting when heuristic evaluation beats a usability test (speed, cost) and when it does not (it misses genuine user confusion).

Expect these follow-ups

• Which of Nielsen's heuristics do you find most commonly violated in real products?
• How do you prioritize which issues to fix first when your list has 40 findings?

As asked

Your design system is used by eight product teams. How do you decide what goes into the system versus stays in a product team's local library, and how do you handle teams that fork components without telling anyone?

Sample answer outline

A strong answer describes a contribution model: teams propose additions via a defined process (a contribution form, a design crit, or a Slack channel), a core team reviews for generalizability and quality, and accepted components get documented and published. For forks, the candidate should explain how they detect them (Figma analytics, library audits) and how they triage them: is the fork filling a gap in the system or is it a one-off? They should describe how a changelog and versioning system keeps teams informed of breaking changes.

Expect these follow-ups

• How do you build designer buy-in for contributing back to a shared system rather than just taking?
• What does a design system roadmap look like and who sets its priorities?

As asked

Walk me through how you would establish a typographic scale for a new design system. What are the decisions you make, what tools or methods do you use, and how does it connect to what engineers actually implement?

Sample answer outline

A strong answer covers choosing a base size (typically 16px for body), selecting a modular scale ratio (1.25 to 1.5 for UI, tighter scales for data-heavy products), and naming the scale semantically rather than numerically (display, heading-xl, heading-l, body, caption). The candidate should discuss line height and letter spacing as part of the type style, not just size, and note that on the web rem units are better than px for user accessibility preferences. Bonus for connecting type tokens to CSS custom properties or a token spec.

Expect these follow-ups

• How do you handle type scales that need to work across mobile and desktop at different densities?
• When would you deviate from a strict modular scale?

As asked

How do you define and use a grid system in your designs, and how do you make sure the layout you design actually matches what engineers build in CSS?

Sample answer outline

Strong answers explain 12-column grids for flexibility, choosing gutter and margin values that align with the spacing scale (multiples of 4 or 8), and how to communicate breakpoints clearly in specs. The candidate should note that Figma grids are visual guides and the developer needs to know the actual column count, gutter, and margin values, not just see colored overlays. They should describe how they handle components that need to span or break the grid intentionally.

Expect these follow-ups

• What is the difference between a grid column and a spacing unit, and how do you use both together?
• How do you design for a 320px minimum viewport without losing grid structure?

As asked

Walk me through how you would build a color system for a product from scratch, covering palette construction, semantic naming, and how it supports theming and accessibility.

Sample answer outline

Strong answers describe generating a full tonal palette for each hue (typically 10 to 13 steps from near-white to near-black), then creating a semantic layer that maps purposes like surface, primary, error, and warning to specific palette values. They should explain that the semantic layer is what themes swap, not the raw palette. The candidate should mention checking contrast for all text-on-background combinations in both themes and note that brand colors often need adjusted lightness values to pass AA.

Expect these follow-ups

• How do you handle a background color that needs multiple foreground colors on top of it at different contrast levels?
• What tooling do you use to generate and audit a color palette?

As asked

Walk me through your approach to empty states. When do they matter most, what information should they contain, and what mistakes do you see designers make most often with them?

Sample answer outline

A strong answer distinguishes first-time empty states (user has never added data), filtered empty states (nothing matches current filters), and error empty states (data failed to load). Each needs a different message and call to action. Common mistakes: using a generic 'Nothing here' message that gives no direction, overloading empty states with marketing, and forgetting that filtered empty states need a way to clear or adjust the filter. Bonus for noting that empty states are prime real estate for onboarding.

Expect these follow-ups

• How does your empty state design change based on where in the product hierarchy it appears?
• What is the difference between a zero-state and a null-state?

As asked

Give me your framework for error messages. What makes one good versus bad, and how do you balance being specific with being concise?

Sample answer outline

A strong answer describes the three components of a good error message: what went wrong, why it went wrong (if user-actionable), and what to do next. The candidate should mention that technical error codes and jargon belong in logs, not user-facing messages, and that blame-free language ('We could not save your work' rather than 'You made an error') reduces friction. They should describe where error messages should appear (inline near the problem, not only at the top of a form) and how they are tested with real users.

Expect these follow-ups

• How do you handle an error caused by the system, not the user?
• What is the design difference between an inline validation error and a modal error?

As asked

What are the guidelines for touch target sizes on mobile, and how do you handle situations where a design calls for tightly packed interactive elements that cannot all meet those guidelines?

Sample answer outline

A strong answer cites Apple's 44x44pt and Google's 48x48dp recommendations, and WCAG 2.5.5 (44x44 CSS pixels) versus the more lenient 2.5.8 (24x24 minimum). For dense UIs, the candidate should describe techniques: transparent tap-area padding that extends beyond the visible element, increasing space through layout rather than shrinking targets, and using bottom sheets or menus to surface secondary actions rather than cramming them inline. They should note that thumbs reach screen zones differently, and that the bottom third of mobile screens is the primary interaction zone.

Expect these follow-ups

• How do you design for one-handed use on a large phone?
• How does touch target size guidance differ between iOS and Android, and how do you handle a single design that ships on both?