UX/UI Designer interview questions
100 real questions with model answers and explanations for Junior candidates.
See a UX/UI Designer resume example →Practice with flashcards
Spaced repetition · Hunter Pass
Questions
UX is the overall experience of using a product, while UI is the interface through which that experience is delivered.
- UX concerns whether the product is useful, understandable, efficient, and satisfying.
- UI concerns visual elements and interactive controls such as layout, typography, color, buttons, and states.
- UI is one part of UX, so a polished interface can support good UX but cannot fix a product that fails to meet user needs.
Why interviewers ask this: The distinction matters because UX covers the whole interaction with a product, whereas UI covers the presentation and behavior of its interface.
A user need describes an outcome or problem, while a requested feature describes one proposed way to address it.
- A need states what the user must accomplish, such as understanding the cost before committing.
- A feature states a specific implementation, such as adding a price calculator.
- Different features can satisfy the same need, and one requested feature may not satisfy the underlying need at all.
Why interviewers ask this: Separating the need from the feature keeps the underlying purpose distinct from a particular solution.
User goals are desired outcomes, tasks are actions taken toward them, and pain points are difficulties encountered along the way.
- A goal expresses the result a user wants, such as submitting an application.
- A task is a concrete step, such as attaching a document or completing a form.
- A pain point is friction such as unclear instructions, repeated data entry, or an unexpected error.
Why interviewers ask this: These concepts connect the user's intended result with the actions and obstacles that shape the experience.
A mental model is a user's expectation of how something works based on prior knowledge and experience.
- Familiar patterns create expectations, such as a trash icon meaning delete or a logo linking to the home page.
- An interface that matches those expectations is easier to predict and learn.
- An interface that contradicts them forces users to stop, reinterpret controls, and remember unusual behavior.
Why interviewers ask this: Respecting mental models reduces the gap between what users expect an interface to do and what it actually does.
A conceptual model is the coherent explanation an interface presents of what exists in the system and how it works.
- It defines the main objects users encounter, such as files, folders, messages, or accounts.
- It defines the actions available for those objects, such as creating, moving, sending, or deleting them.
- It defines relationships and rules, such as files belonging to folders or deleted items moving to a trash area.
Why interviewers ask this: A clear conceptual model helps users form accurate expectations about the interface's objects, actions, and rules.
A user flow maps the routes a user may take through a product, while a task flow maps the steps for completing one specific task.
- A user flow can include multiple entry points, decisions, screens, and outcomes.
- A task flow usually follows one defined sequence from a task's start to its completion.
- User flows show broader navigation possibilities, whereas task flows isolate the actions required for one goal.
Why interviewers ask this: The two views use different levels of scope: possible movement through a product versus the sequence for a single task.
These paths describe successful, valid but different, and unsuccessful routes through the same flow.
- The happy path is the expected route in which inputs are valid and the goal is reached without interruption.
- An alternative path is another valid route, such as choosing a different sign-in method and still reaching the goal.
- An error path begins when something prevents progress, such as invalid input, and includes the resulting error state or recovery route.
Why interviewers ask this: Together, the three path types describe how a flow behaves under normal choices, valid variations, and failures.
Information architecture is the structure, organization, and labeling of content and functionality so people can understand and find them.
- It groups related information into meaningful categories.
- It defines hierarchy and navigation between sections and levels.
- It uses clear labels that help users predict where content or actions belong.
Why interviewers ask this: Its purpose is to make a product's contents and available paths understandable and discoverable.
A sitemap shows the structural hierarchy of pages or sections, while a user flow shows the path taken to reach a goal.
- A sitemap represents parent, child, and sibling relationships between destinations.
- A user flow represents actions, decisions, transitions, and possible outcomes over time.
- The same sitemap can support several user flows because users can move through its structure for different goals.
Why interviewers ask this: A sitemap describes what destinations exist and how they are organized, whereas a user flow describes movement among them.
A journey map represents a user's end-to-end experience over time, while a screen flow represents transitions between interface screens.
- A journey map can span stages before, during, and after product use across multiple channels.
- It includes the user's goals, actions, thoughts, emotions, and pain points at each stage.
- A screen flow stays inside the interface and shows screens, controls, decisions, and navigation paths.
Why interviewers ask this: The journey map provides a broader experience view, while the screen flow describes the interface-level sequence.
User interviews help a designer understand how people describe their needs, experiences, and decisions.
- They reveal goals, motivations, language, context, and remembered problems.
- Follow-up questions can clarify why a person thinks or acts in a certain way.
- Interviews cannot reliably prove actual behavior, measure prevalence, or represent every user.
Why interviewers ask this: Interviews provide depth about user perspectives, but their findings need other evidence when behavior or frequency matters.
These question types differ in how much freedom they give the participant and how strongly they shape the response.
- Open questions invite detailed answers in the participant's own words, such as asking how they complete a task.
- Closed questions limit responses to options such as yes, no, or a fixed choice and are useful for confirming specific facts.
- Leading questions suggest a preferred answer and should be avoided because they can distort what the participant really thinks.
Why interviewers ask this: Open questions usually create richer interview evidence, while closed questions confirm details and leading questions introduce bias.
Research bias can distort findings when expectations or participant choices shape the evidence.
- Confirmation bias occurs when a researcher favors evidence that supports an existing belief and overlooks conflicting evidence.
- Selection bias occurs when recruited participants do not adequately reflect the relevant user population.
- Basic mitigation includes using neutral questions, seeking disconfirming evidence, recruiting varied relevant participants, and recording findings consistently.
Why interviewers ask this: Bias cannot be removed completely, but deliberate questioning, sampling, and documentation can reduce its influence.
Observed behavior is what a person actually does, while self-reported behavior is what the person says they do.
- Observation can reveal actions, errors, workarounds, and hesitation during a real or simulated task.
- Self-reports can reveal memories, intentions, preferences, and reasons, but may be incomplete or inaccurate.
- Comparing both types of evidence helps identify gaps between stated habits and actual actions.
Why interviewers ask this: People may remember or describe behavior imperfectly, so observed and self-reported evidence answer different questions.
Card sorting shows how participants group and label information.
- In an open card sort, participants create their own groups and labels, revealing their natural categories and vocabulary.
- In a closed card sort, participants place items into predefined groups, revealing whether an existing structure makes sense to them.
- Both reveal mental models and grouping patterns, but neither alone proves the final information architecture is usable.
Why interviewers ask this: Open sorting explores possible structures, while closed sorting checks how well content fits a proposed structure.
A usability test evaluates how well representative users can complete intended tasks with a design.
- It identifies where users succeed, struggle, make errors, or become confused.
- It examines whether controls, labels, navigation, and feedback support task completion.
- It evaluates the interaction being tested, not every user preference or the product's full market value.
Why interviewers ask this: Usability testing focuses on evidence from task interaction rather than opinions about whether a design looks appealing.
The main difference is whether a facilitator is present while the participant completes the test.
- In a moderated test, a facilitator gives tasks, observes directly, and can ask neutral follow-up questions.
- In an unmoderated test, participants complete tasks independently through prepared instructions, often at their own time and location.
- Moderated tests provide deeper context, while unmoderated tests are easier to run with more participants but allow less clarification.
Why interviewers ask this: The suitable format depends on whether deeper observation or broader and more flexible participation matters more.
A neutral usability-test task states a realistic goal without revealing the intended path or answer.
- It avoids interface terms, hints, praise, and wording that tells the participant which control to use.
- It provides enough context and a clear outcome while letting the participant decide how to proceed.
- Basic measures include task completion, errors, time on task, and a simple rating of ease or satisfaction.
Why interviewers ask this: Neutral wording reduces guidance from the test itself, while basic measures make observed performance easier to compare.
An evidence-based persona summarizes recurring patterns found in research with relevant users.
- Its goals, behaviors, needs, and constraints are supported by observations, interviews, or other credible data.
- It focuses on patterns that affect design decisions instead of decorative demographics or fictional personal details.
- It makes its evidence and uncertainties clear and can be updated when new findings challenge it.
Why interviewers ask this: A persona is useful when it represents verified behavior patterns rather than assumptions about an imaginary user.
Jobs to Be Done describes the progress a person seeks in a particular situation by using a product or service.
- It focuses on the situation, motivation, desired outcome, and obstacles around a task.
- A persona describes a recurring type of user through evidence-based goals, behaviors, needs, and context.
- Jobs to Be Done centers on why progress is sought, while a persona centers on who shares relevant patterns, so they can complement each other.
Why interviewers ask this: The two tools frame the problem differently, with one emphasizing desired progress and the other emphasizing user patterns.
Locked questions
- 21
What is visual hierarchy in an interface, and how do you create it?
hierarchytypes - 22
How do proximity, similarity, and common region help group interface elements?
types - 23
What are a layout grid and alignment used for in interface design?
layoutgridalignment - 24
Why use a spacing system and whitespace in an interface?
spacingsystem-designtypes - 25
What roles does typography play in an interface?
typographytypes - 26
How should color be used functionally in an interface, and why cannot it be the only cue?
colortypes - 27
What is the difference between an affordance and a signifier?
- 28
What does visibility of system status mean, and why is feedback important?
feedbacksystem-designcss - 29
Which component states should a designer consider?
componentsdesign - 30
What is cognitive load, and how does progressive disclosure reduce it?
progressive-disclosure - 31
When should a modal dialog be used instead of inline or full-page UI?
overlays - 32
How do tabs, primary navigation, and accordions differ, and when should each be used?
navigation - 33
What are the fundamental design rules for labels, hints, placeholders, validation, and errors in forms?
validationdesign - 34
What is the difference between a design system and a UI kit or component library?
componentssystem-designdesign - 35
What are the main parts of a reusable UI component's anatomy?
components - 36
What are design tokens, and why should junior designers use semantic names?
tokensdesigndesign-system - 37
What is the relationship between main components and instances in Figma?
figmacomponents - 38
How do variants and component properties work in Figma?
figmacomponents - 39
How do padding, gap, alignment, and sizing modes work in Figma Auto Layout?
figmalayoutalignment - 40
How do Figma constraints differ from Auto Layout and resizing behavior?
figmalayout - 41
How do low-fidelity and high-fidelity wireframes differ?
wireframesdesign-collab - 42
What does prototype fidelity mean, and what can low-, mid-, and high-fidelity prototypes validate?
prototypingprototypesvalidation - 43
How do connections, triggers, actions, overlays, and flows work in a basic Figma prototype?
figmaprototypesprototyping - 44
What is the purpose of WCAG, and what do the POUR principles mean?
wcaga11y - 45
What are the basic WCAG AA contrast requirements for text and meaningful interface visuals?
wcagcontrasta11y - 46
What makes an interface accessible through keyboard navigation?
keyboardtypesa11y - 47
What basic design and content practices support screen reader users?
screen-readersdesigna11y - 48
What target sizes and spacing make pointer interactions more accessible?
spacing - 49
How do responsive and adaptive design differ, and why is a mobile-first approach useful?
responsivedesign - 50
What are Nielsen's ten usability heuristics, and how are they used?
usability - 51
Design a short account-creation flow for a service that requires email verification but does not require profile details. What screens and actions would you include?
flowsscreensdesign - 52
Users of a project tool cannot predict what navigation labels mean and often fail to find the team member list. How would you fix the navigation?
navigation - 53
A settings screen has dozens of mixed controls for account, privacy, notifications, and billing. How would you reorganize it?
settingsnotificationsscreens - 54
Design a search-results screen for a marketplace with a query, filters, sorting, a result count, and recovery when nothing matches. How would you structure it?
recoveryscreensqueries - 55
Design the empty state for a saved-items screen when a user has not saved anything yet. How would you explain the state and guide the next action without fake content?
statesscreensdesign - 56
A form can take several seconds to submit and sometimes fails. Design its submitting, loading, success, and error behavior so users cannot submit twice or lose entered data.
formsdesign - 57
You need to design an application form with personal details, portfolio links, eligibility questions, and conditional follow-up fields. How would you choose between a single page and multiple steps?
formsdesigndiscovery - 58
Design first-run onboarding for a task app that must teach users how to create their first task while remaining skippable. What would you show?
flowsdesignonboarding - 59
Design deletion behavior for an item when some deletions can be undone but permanent deletions cannot. When would you use undo or confirmation, and what would each interaction contain?
design - 60
Design a dashboard landing screen that works for both a new user and a returning user without giving equal visual emphasis to every feature. How would you set the hierarchy?
hierarchydesignscreens - 61
You need to test a Figma checkout prototype with five representative users. How would you plan a small usability test that produces useful evidence?
prototypingusabilityflows - 62
You want to test whether users can change the delivery address during checkout. What task wording would you give them?
flows - 63
During a moderated usability test, a participant asks, "Where should I click?" How should you respond without contaminating the result?
participantsusability - 64
Your notes show that some users completed a task but hesitated, backtracked, or made errors. How would you analyze the notes to identify patterns?
- 65
Participants say they like a screen, but many of them fail its main task. How should you interpret this evidence?
participantsevidencescreens - 66
You need to learn how people currently manage recurring expenses without pitching a solution. How would you create the interview guide?
interviews - 67
Rewrite the leading interview question "Wouldn't automatic reminders make managing subscriptions easier?" into neutral follow-ups.
interviewstypography - 68
How would you recruit a small but relevant participant sample for research on managing recurring expenses, and how would you state its limits?
participantssampling - 69
You have notes from several interviews about recurring expenses. How would you synthesize them into themes without treating one memorable quote as a finding?
synthesis - 70
How would you present usability findings so the team can decide what to fix next?
findingsusability - 71
You are designing a checkout form in Figma and need one reusable form-field component for text inputs. How would you structure it so labels, guidance, and all important states stay consistent?
formsflowscomponents - 72
A news page needs one reusable content-card pattern for stories with optional images, metadata, actions, and titles of very different lengths. How would you design and test it?
imagerydesign - 73
A desktop orders table has eight columns, row selection, status comparison, and a refund action, but it must also work on a phone. How would you adapt it without hiding essential tasks?
tablescontrolsresponsive - 74
In an account settings flow, users can save a profile, lose connection, face planned maintenance, or permanently delete the account. Which feedback pattern would you choose for each event and why?
flowssettingsfeedback - 75
You need to design a city autocomplete field for a travel form in Figma. How would you cover typing, loading, results, no results, and keyboard selection?
formscontrolsdesign - 76
A job application form needs a reusable resume upload component. How would you design its progress, validation, retry, and removal behavior?
componentsformsdesign - 77
You are designing a hotel booking date-range field for mobile and desktop, with no past dates and a maximum stay of 30 nights. What would you propose?
responsivedesign - 78
In Figma, a product card must handle long titles, a promotional badge that may be hidden, and a narrow container. How would you build it with Auto Layout?
figmacontainerslayout - 79
A Figma library needs buttons for primary and secondary emphasis, three sizes, optional icons, loading, disabled, and hover states. How would you model the family without creating an unmanageable variant set?
figmainteraction - 80
You need to prototype a filter overlay in Figma that opens from a toolbar button. How would you show opening, closing, background dismissal, and return to the source?
figmaprototypesprototyping - 81
A form shows an invalid field only with a red border, and its error text has weak contrast. How would you fix the design?
formsa11ydesign - 82
How would you define keyboard order and visible focus for a page with a header, main content, and a dialog?
keyboardoverlays - 83
What focus behavior would you specify when a modal dialog opens and closes, including Escape and focus trapping?
overlays - 84
How would you make icon-only buttons and ambiguous form inputs understandable to screen reader users?
formsscreensa11y - 85
A developer proposes adding ARIA attributes to clickable divs. How would you correct the design and handoff?
a11ydesign - 86
How would you design accessible form validation with field messages and an error summary?
designvalidationforms - 87
Several small touch targets are placed directly beside each other in a compact interface. How would you fix them without making the UI feel loose?
touch-targetstypes - 88
A page uses a large parallax and zoom transition to communicate a state change. What reduced-motion alternative would you design?
motiondesigncommunication - 89
How would you adapt a page so text zoom and 400% reflow do not hide content or require two-dimensional scrolling except in valid cases?
rendering - 90
When a native select is insufficient, how would you specify an accessible custom combobox, including keyboard behavior, focus, and status?
keyboardcontrols - 91
You need to turn a wide desktop navigation into mobile navigation without losing the destination hierarchy or the user's current location. What would you do?
navigationresponsivehierarchy - 92
A page has a three-column card grid on a wide screen and must adapt across screen sizes. How would you define its responsive behavior?
responsivescreensgrid - 93
A screen must support long localized text and right-to-left languages, but some labels no longer fit. How would you adapt the design?
localizationscreensdesign - 94
A product manager asks you to simplify a flow, while a researcher says users need more guidance. How would you handle the conflicting feedback before revising the design?
designfeedbackflows - 95
A developer says your proposed interaction is expensive to build or unsupported by the current system. What would you do?
system-design - 96
You are handing off a responsive component with several variants and states. What should you provide so development can implement it consistently?
componentsresponsive - 97
You need to prepare icons and images for developer handoff. How would you package the assets?
imagery - 98
During design QA, the implemented screen has interaction, accessibility, and small visual differences from the design. How would you report and prioritize them?
designa11yprioritization - 99
How would you annotate a Figma prototype so a developer can implement its interactions without guessing?
figmaprototypesprototyping - 100
A stakeholder says, 'Make it cleaner,' without explaining what is wrong. How would you turn that feedback into an actionable design task?
feedbackcommunicationdesign