Top 30 Easy Design & UX Interview Questions and Answers for Freshers

30 questions. Pick an answer, or open “Show the answer” to read it.

Answers are graded in your browser. Nothing is saved, and no XP or streak is earned here. The app keeps score.

1. Question 1 of 30

   Which statement best describes the primary engineering purpose of conducting UX research before development begins?

   • aIt generates quantitative metrics that replace the need for qualitative analytics after launch.
   • bIt validates real user needs and exposes unknown requirements while changes are still cheap.
   • cIt produces detailed technical specifications and architecture diagrams based on user feedback.
   • dIt is mainly valuable for validating a prototype after the initial design is complete.
   Show the answer

   Answer: b · It validates real user needs and exposes unknown requirements while changes are still cheap.

   Pre-development UX research is fundamentally an engineering risk-mitigation tool that validates real user needs and uncovers unknown requirements before code is written, when changes are cheapest. Option D is tempting because prototype testing is valuable, but the card explicitly states that the primary purpose of pre-development research is discovery and alignment, not post-hoc validation.

   Read the full bite: What is the primary purpose of UX research before starting development?

2. Question 2 of 30

   Which of the following best describes how a design system enforces consistency at scale?

   • aIt establishes a governance process where designers review all product changes before release
   • bIt integrates reusable coded components, design tokens, and documentation across both design tools and code repositories
   • cIt documents visual standards in a style guide that designers and developers can reference manually
   • dIt provides a shared Figma file that serves as the single source of truth for all interface designs
   Show the answer

   Answer: b · It integrates reusable coded components, design tokens, and documentation across both design tools and code repositories

   A design system enforces consistency by uniting coded components, tokens, and documentation across design and engineering, not just through design assets. Calling it merely a shared Figma file is a common misconception because it misses the engineering adoption and version-controlled code that actually standardizes implementation.

   Read the full bite: What is a design system's purpose and how does it enforce consistency?

3. Question 3 of 30

   What key elements elevate a component library into a full design system?

   • aReusable coded components, design tokens, documentation, and governance processes
   • bA versioned npm package with semantic versioning and automated testing
   • cA one-time build of standardized buttons and inputs for all teams
   • dA Figma library paired with CSS custom properties for theming
   Show the answer

   Answer: a · Reusable coded components, design tokens, documentation, and governance processes

   A design system is engineering infrastructure that combines reusable components with design tokens, documentation, and governance. Option B describes only a mature component library, which is a common misconception that omits the tokens, docs, and processes required for a true system.

   Read the full bite: What is a design system and its primary engineering components?

4. Question 4 of 30

   Which approach best follows Nielsen's visibility of system status heuristic when handling a button-triggered API call?

   • aDisable the button with a spinner, then transition to success or error states based on the API result
   • bWait to update the UI until the API response returns to prevent displaying incorrect state
   • cShow a full-screen loading modal so the user cannot interact with anything during the call
   • dOptimistically update the UI and assume the network request will succeed without a rollback plan
   Show the answer

   Answer: a · Disable the button with a spinner, then transition to success or error states based on the API result

   The card describes proper feedback as immediate local changes like a disabled button with a spinner, followed by resolution to success or error states. Waiting until the API responds leaves the user staring at a frozen screen, which violates the visibility of system status heuristic.

   Read the full bite: Explain UI feedback and implement immediate feedback for API calls

5. Question 5 of 30

   Your team needs to understand why developers rarely use a new CLI flag. Which method produces qualitative user data?

   • aReviewing telemetry on command error rates after the latest deploy
   • bSitting with developers as they run commands and narrate their thought process
   • cMeasuring average execution time for commands using the new flag
   • dEmailing developers an open-ended questionnaire about CLI usability
   Show the answer

   Answer: b · Sitting with developers as they run commands and narrate their thought process

   Sitting with developers as they narrate their thought process is qualitative because the researcher is directly observing and listening to behaviors and attitudes. An open-ended questionnaire is a tempting distractor because it relies on an instrument and confuses question format with the direct-versus-indirect distinction.

   Read the full bite: Explain qualitative vs quantitative user data with engineering examples

6. Question 6 of 30

   A team documents brand colors and voice, yet engineers rebuild every button from scratch. What best describes their design infrastructure?

   • aThey have interchangeable artifacts that each cover one part of the product, which is normal at scale.
   • bThey have a style guide but lack the coded reusable components and cross-team workflow of a full design system.
   • cThey have a complete design system that is simply under-adopted by the engineering team.
   • dThey have a component library that needs additional style guide documentation to become a design system.
   Show the answer

   Answer: b · They have a style guide but lack the coded reusable components and cross-team workflow of a full design system.

   Documented colors and voice rules fit the narrow scope of a style guide, while the absence of production-ready, reusable code means they are missing the component library and holistic standards that define a design system. The most tempting distractor assumes a style guide alone constitutes a complete design system, but the card emphasizes that a design system must also include coded components and shared workflows.

   Read the full bite: Component library vs style guide vs design system

7. Question 7 of 30

   Which scenario best illustrates a design system delivering value beyond a simple UI kit?

   • aEngineers import pre-built UI widgets and override styles locally to match brand requirements.
   • bUpdating a single color token automatically updates every component across all consuming apps without modifying any product code.
   • cProduct teams build components in isolation within their own repositories to maximize creative flexibility.
   • dDevelopers reference a shared CSS file to avoid writing custom styles, ensuring visual consistency across teams.
   Show the answer

   Answer: b · Updating a single color token automatically updates every component across all consuming apps without modifying any product code.

   This reflects the card's concrete example where design tokens decouple visual decisions from product code, enabling safe cross-app theming. Option D is tempting because it mentions consistency and shared code, but it reduces the system to a CSS framework and ignores tokens, living docs, and workflow integration.

   Read the full bite: What are the main benefits of consuming a design system?

8. Question 8 of 30

   When A/B testing sign-up button copy, which practice ensures you can accurately attribute differences in sign-ups to the copy change?

   • aRandomly assign users to variants using a hashed user ID, track impressions and conversions, and compare conversion rates
   • bShow version A for one week and version B for the next to avoid overlap
   • cSplit users by geolocation and compare sign-up counts across regions after two weeks
   • dTrack button clicks for each variant and compare click counts, assuming more clicks lead to more sign-ups
   Show the answer

   Answer: a · Randomly assign users to variants using a hashed user ID, track impressions and conversions, and compare conversion rates

   Randomizing with hashed user IDs and tracking both impressions and completed sign-ups lets you calculate a true conversion rate and establish causality. Sequential testing introduces temporal bias because traffic composition and external factors differ between weeks, invalidating the comparison.

   Read the full bite: How would you A/B test sign-up button copy and measure results?

9. Question 9 of 30

   A team's current approach to keeping PII out of logs is to log full request and response bodies as usual, then run a nightly job that scans old logs and deletes lines matching an email regex. What is the main weakness of this approach?

   • aThere is no real weakness, since deleting matching lines nightly reaches the same end state as never logging the data at all
   • bThe only weakness is that the job runs nightly instead of hourly; running it more frequently would fully solve the problem
   • cThe weakness is that regex pattern matching is computationally expensive, not that any data is exposed before the job runs
   • dIt leaves PII sitting in logs until the nightly job runs, and regex scrubbing after the fact commonly misses fields it was not written to catch
   Show the answer

   Answer: d · It leaves PII sitting in logs until the nightly job runs, and regex scrubbing after the fact commonly misses fields it was not written to catch

   Logging everything first leaves PII exposed in plaintext for up to a full day, and after the fact regex scrubbing routinely misses fields that do not match the pattern, so this is not equivalent to never logging it at all. The stronger control is preventing sensitive fields from being logged in the first place, not cleaning up after exposure.

   Read the full bite: What is PII and how to keep it out of logs

10. Question 10 of 30

    Which approach best implements click tracking for dozens of headlines and CTAs while remaining performant and maintainable?

    • aAttach a unique addEventListener to each element and use its innerText as the analytics identifier
    • bUse a single delegated listener on a parent container, read data attributes to identify elements, and send via navigator.sendBeacon
    • cRe-attach individual listeners to all elements whenever new content is injected into the page
    • dAdd inline onclick handlers to every element that submit CSS class names to the analytics endpoint
    Show the answer

    Answer: b · Use a single delegated listener on a parent container, read data attributes to identify elements, and send via navigator.sendBeacon

    Event delegation on a common ancestor avoids the performance cost of dozens of individual listeners and naturally handles dynamic content, while data attributes provide stable identifiers unlike brittle innerText or class names. The most tempting distractor, attaching unique listeners to every element, scales poorly and misses the efficiency and dynamic-content benefits that delegation provides.

    Read the full bite: How would you track clicks on headlines and calls-to-action?

11. Question 11 of 30

    Which implementation best satisfies GDPR for informed consent before a remote usability test?

    • aAllow the test to initialize immediately and prompt for consent during the first task
    • bPlace a privacy policy link in the footer and start the session, treating continued use as consent
    • cUse a CMP to collect active consent, record it server-side, and gate the test interface until consent is confirmed
    • dPresent a consent banner but store the decision only in browser storage while the test loads
    Show the answer

    Answer: c · Use a CMP to collect active consent, record it server-side, and gate the test interface until consent is confirmed

    The correct approach requires active consent via a CMP, server-side recording for auditability, and blocking test access until consent is granted. A tempting distractor stores consent only in browser storage, which can be altered after the fact and lacks a verifiable server-side record.

    Read the full bite: Implement verifiable informed consent before a remote usability test

12. Question 12 of 30

    When styling a news article, how should line-height and letter-spacing differ between body text and headings?

    • aIncrease letter-spacing on body text to improve word shape recognition, and use generous line-height on headings to prevent overlap.
    • bGive body text at least 1.5 line-height with minimal letter-spacing, and use tighter line-height with slight negative letter-spacing for headings.
    • cSet body text to tight line-height for a compact style and keep default letter-spacing across all elements.
    • dApply the same line-height and letter-spacing scale to body text and headings so the design system stays uniform.
    Show the answer

    Answer: b · Give body text at least 1.5 line-height with minimal letter-spacing, and use tighter line-height with slight negative letter-spacing for headings.

    Body text needs generous vertical rhythm (at least 1.5x) and minimal letter-spacing for comfortable reading, while headings can tolerate tighter values because they are scanned quickly. Option D is a tempting red flag because treating both elements identically confuses vertical rhythm with horizontal spacing and harms readability.

    Read the full bite: Line-height vs letter-spacing: impact on readability and values for body vs headings

13. Question 13 of 30

    When translating GDPR data minimization into a survey schema, which approach reflects the principle correctly?

    • aHash email addresses before storage and keep optional demographic fields for future analysis.
    • bCollect name, email, and demographics upfront, then delete unused columns after a quarterly review.
    • cDefine the survey purpose first, map every column to a specific need, use pseudonymous identifiers, and schedule periodic deletion.
    • dLimit the total number of response rows stored instead of restricting which columns are collected.
    Show the answer

    Answer: c · Define the survey purpose first, map every column to a specific need, use pseudonymous identifiers, and schedule periodic deletion.

    Data minimization is a proactive design principle requiring purpose-defined columns, pseudonymous identifiers, and planned deletion before collection begins. Collecting all data upfront and deleting unused columns later conflates minimization with storage limitation and ignores the requirement to limit data from the outset.

    Read the full bite: Explain data minimization and how to apply it to a survey schema

14. Question 14 of 30

    When migrating a web-only Sass theme to support both Android and iOS, what is the main reason to adopt design tokens?

    • aBecause tokens are defined in a vendor-neutral format that can generate Android XML, Swift constants, and CSS from one file, while Sass only outputs CSS
    • bBecause design tokens act as runtime CSS custom properties that native apps can read directly from the browser cascade
    • cBecause tokens provide semantic names like color-primary that Sass variables cannot support
    • dBecause Sass variables require a JavaScript runtime to resolve values, making them incompatible with native mobile build pipelines
    Show the answer

    Answer: a · Because tokens are defined in a vendor-neutral format that can generate Android XML, Swift constants, and CSS from one file, while Sass only outputs CSS

    Design tokens use a vendor-neutral format to generate iOS, Android, and web code from one source, while Sass variables compile only to CSS. Distractor C is tempting because it confuses tokens with CSS custom properties, which are runtime web values and cannot produce native mobile deliverables or encode cross-platform aliases.

    Read the full bite: What is a design token versus a CSS or Sass variable?

15. Question 15 of 30

    Why should typography tokens bundle font-size with properties like line-height, letter-spacing, and weight?

    • aIt enables responsive scaling by referencing the same ratio token at different breakpoints
    • bIt simplifies the design handoff by reducing the number of variables exported to code
    • cIt ensures proportional sizing so every step is mathematically derived from the base
    • dIt creates complete, platform-agnostic presets that prevent inaccessible, cramped text
    Show the answer

    Answer: d · It creates complete, platform-agnostic presets that prevent inaccessible, cramped text

    The card explains that composite tokens bundle size, leading, tracking, and weight into platform-agnostic presets because a scale is unusable if text collides or weights clash. Option C describes the role of the base size and ratio token, not the purpose of bundling properties into composites.

    Read the full bite: Implement a typographic scale using design tokens and accessible properties

16. Question 16 of 30

    When building a centralized copy service for a React app, which design choice best ensures consistency without over-engineering?

    • aHardcode user-facing strings directly inside JSX components to keep markup simple
    • bStore static copy in a remote database and fetch it on every component mount
    • cUse semantic identifiers like button.save in a key-value map consumed via a hook
    • dUse the exact English display text as the lookup key for easy readability
    Show the answer

    Answer: c · Use semantic identifiers like button.save in a key-value map consumed via a hook

    Semantic identifiers decouple content from components, so rewording copy only requires updating the map. Using exact English text as keys (D) is brittle because changing a label breaks every reference across the codebase.

    Read the full bite: How would you design a centralized copy service for consistent UI text?

17. Question 17 of 30

    Which scenario best justifies choosing a moderated usability test over a survey?

    • aObserving behavioral blockers in an interactive prototype before code solidifies
    • bValidating that a majority of users say they value one-click purchasing
    • cCollecting quantitative satisfaction ratings from thousands of users to prioritize a roadmap
    • dGauging user interest in a feature concept using a static mockup
    Show the answer

    Answer: a · Observing behavioral blockers in an interactive prototype before code solidifies

    Moderated tests reveal what users actually do, such as confusion or errors in interactive workflows, while surveys only capture self-reported opinions. Option B reflects the card's survey example of validating desire, which cannot uncover hidden interaction flaws.

    Read the full bite: What trade-offs matter between moderated usability tests and surveys?

18. Question 18 of 30

    A reusable Modal needs parent-controlled visibility and an internal closing animation. What is the correct data ownership split?

    • aMirror the visibility prop into state with useEffect
    • bKeep both in internal state to maximize encapsulation
    • cUse a prop for visibility and internal state for the animation
    • dUse props for both so the parent can observe all behavior
    Show the answer

    Answer: c · Use a prop for visibility and internal state for the animation

    The parent must control Modal visibility, so it should be a prop, whereas the animation phase is a private implementation detail that only the component needs, making it state. Mirroring the prop into state with useEffect is explicitly flagged as an anti-pattern because it creates a lagging source of truth.

    Read the full bite: When should data in a reusable component be a prop or state?

19. Question 19 of 30

    Which part of a UX research plan tells an engineer whether they need to build prototypes, set up feature flags, or add analytics instrumentation?

    • aThe participant profiles and sources
    • bThe methodology
    • cThe timeline and milestones
    • dThe research problem and objectives
    Show the answer

    Answer: b · The methodology

    The methodology defines the study type—such as A/B tests, usability tests, or diary studies—which dictates whether engineering must provide prototypes, feature flags, or event instrumentation. The research problem and objectives reveal exploratory versus evaluative intent but do not specify the technical mechanisms required.

    Read the full bite: Essential UX research plan components for engineering scope

20. Question 20 of 30

    Which statement accurately describes a trade-off when using Shadow DOM instead of build-time scoping like BEM or CSS Modules?

    • aShadow DOM offers true style and DOM isolation but complicates external theming without explicit custom properties.
    • bShadow DOM prevents style leakage by automatically sharing one global stylesheet across all component instances.
    • cShadow DOM makes it easier to theme components from the host page using standard CSS cascades.
    • dShadow DOM reduces runtime overhead because it relies on native browser features rather than build tooling.
    Show the answer

    Answer: a · Shadow DOM offers true style and DOM isolation but complicates external theming without explicit custom properties.

    The card highlights that Shadow DOM provides true isolation from host-page CSS and JavaScript, yet its main drawback is harder external theming unless you explicitly expose CSS custom properties. Option C is a tempting distractor because easier theming via standard cascades is actually an advantage of build-time scoping, not Shadow DOM.

    Read the full bite: Two strategies to prevent style leakage in reusable components and their trade-offs

21. Question 21 of 30

    You are building a mobile prototype where a list of cards must scroll vertically and be clipped at the viewport edges. What should wrap the list?

    • aA Group, because it supports scroll overflow and clipping for nested layers
    • bA Group, since it applies constraints that govern how nested children resize
    • cA Frame, because it lets you clip content and enable scroll overflow
    • dA Frame, because it automatically clips any content extending past its edges
    Show the answer

    Answer: c · A Frame, because it lets you clip content and enable scroll overflow

    A Frame is correct because it has independent bounds that support Clip content and scroll overflow when child layers exceed its edges. Option A is tempting because both Groups and Frames organize layers, but Groups do not provide bounds-based clipping or scroll overflow.

    Read the full bite: When would you wrap layers in a Frame versus a Group?

22. Question 22 of 30

    Which schema design best preserves first normal form for posts that can have multiple tags?

    • aDuplicate the post row for each tag, storing tag names inline with each copy
    • bCreate a dedicated tags table and a post_tags join table linking post_id to tag_id
    • cStore tags as a comma-separated string in a single column on the posts table
    • dCreate a tags table but reference tag_id with a foreign key directly on the posts table
    Show the answer

    Answer: b · Create a dedicated tags table and a post_tags join table linking post_id to tag_id

    A join table models the many-to-many relationship without duplication or parsing strings, satisfying first normal form. Storing comma-separated tags in a single column violates 1NF and prevents indexed lookups, which is why it is flagged as a common anti-pattern.

    Read the full bite: Design a database schema for a blog with posts, authors, and tags

23. Question 23 of 30

    What is the most reliable first step to extract exact CSS typography values from a Figma text element?

    • aHold Option and hover over the text to measure its font size and line height
    • bTake a screenshot and use the browser inspector to match the typography visually
    • cSelect the text layer, then check the Properties tab or Dev Mode for exact values
    • dSelect the parent frame and copy its CSS to find the nested text styles
    Show the answer

    Answer: c · Select the text layer, then check the Properties tab or Dev Mode for exact values

    You must select the specific text layer because the Properties tab and Dev Mode display exact typography values only for the selected object. Selecting a parent frame is a tempting but wrong first step because it hides the precise font properties and leads to approximations.

    Read the full bite: How would you inspect a Figma text element for CSS properties?

24. Question 24 of 30

    To keep a composed SearchForm reusable, where should the actual search/fetch logic live?

    • aIn global state that SearchForm mutates directly
    • bInside SearchForm itself so every consumer fetches the same way
    • cIn the parent, triggered by an onSearch event SearchForm emits on submit
    • dInside the reused Button component's click handler
    Show the answer

    Answer: c · In the parent, triggered by an onSearch event SearchForm emits on submit

    Keeping SearchForm presentational and emitting onSearch lets each parent decide what to do with the query, maximizing reuse. Hardcoding the fetch inside the form or button couples it to one use case.

    Read the full bite: Composing Input and Button into a SearchForm

25. Question 25 of 30

    When designing a screener to find mobile users who have never used Feature X, which strategy best reduces bias and improves data quality?

    • aUse a single self-reported frequency question to confirm app usage and skip exclusion criteria to keep the screener short.
    • bBegin with broad behavioral questions, then use an indirect description of Feature X's unique task flow to disqualify users without naming the feature.
    • cAsk users directly if they have used Feature X by name, then disqualify those who say yes.
    • dReveal the study topic early so participants can honestly assess their Feature X experience before screening.
    Show the answer

    Answer: b · Begin with broad behavioral questions, then use an indirect description of Feature X's unique task flow to disqualify users without naming the feature.

    C is correct because broad behavioral questions verify genuine app usage, while indirect disqualifiers prevent users from misunderstanding internal feature names or faking eligibility to qualify. A is the most tempting distractor because direct questions seem efficient, but they actually increase false responses since users may not know internal names or may lie to participate.

    Read the full bite: Design a screener survey to identify non-Feature X mobile users

26. Question 26 of 30

    A Card must support optional image, title, and text in varying order. Why is a compound-component API often better than many boolean show-flag props?

    • aIt makes the component render faster by skipping reconciliation
    • bIt removes the need to style the Card consistently
    • cIt lets consumers control presence and order directly, avoiding a rigid flag-driven layout
    • dIt prevents consumers from omitting any of the three regions
    Show the answer

    Answer: c · It lets consumers control presence and order directly, avoiding a rigid flag-driven layout

    Composition lets the consumer include and order pieces freely, which boolean flags plus a fixed order cannot do without bloating the API. It does not change rendering performance or styling responsibility.

    Read the full bite: Building a flexible Card with optional content

27. Question 27 of 30

    Which configuration lets a Figma button with an icon and text automatically resize when the label changes?

    • aUse grid auto layout on the icon and text with a fixed-width button frame
    • bApply horizontal auto layout, set text and frame to hug contents, and use fixed padding
    • cSet the text to fill container and the frame to a fixed width with no auto layout
    • dGroup the icon and text, then manually nudge elements when the label changes
    Show the answer

    Answer: b · Apply horizontal auto layout, set text and frame to hug contents, and use fixed padding

    Horizontal auto layout with hug contents on the text and parent frame lets the button expand or shrink dynamically as the label changes, while fixed padding keeps spacing consistent. Grouping layers and manually nudging them is wrong because the layout breaks as soon as the text is edited, defeating the purpose of a responsive component.

    Read the full bite: How would you use Auto Layout for a button with optional icon?

28. Question 28 of 30

    How does a 16px fixed spacing behave compared with Space between when an Auto Layout toolbar stretches wider?

    • aSpace between simply adds a larger pixel gap between icons, keeping the group left-aligned with extra space on the right
    • bSpace between applies 16px of padding to the outer edges of the frame while leaving the inner gaps unchanged
    • cFixed spacing keeps the 16px gap identical and clusters icons, while Space between pushes the first icon to the left edge and the last to the right edge
    • dFixed spacing distributes icons evenly across the width, while Space between enforces a constant 16px gap regardless of container size
    Show the answer

    Answer: c · Fixed spacing keeps the 16px gap identical and clusters icons, while Space between pushes the first icon to the left edge and the last to the right edge

    Fixed spacing is an absolute value that never changes, so icons remain clustered when the frame grows, while Space between dynamically divides leftover space to push the first and last items flush to the edges. The reversed option is wrong because it swaps the two behaviors—fixed spacing does not distribute items evenly, and Space between does not enforce a rigid pixel gap.

    Read the full bite: Difference between 'Space between' and fixed spacing in Auto Layout

29. Question 29 of 30

    What is the main benefit of a Grid component that accepts per-breakpoint column counts as props instead of exposing raw CSS?

    • aIt guarantees the grid never needs a gap between items
    • bConsumers declare layout intent while the component encapsulates all responsive CSS
    • cIt forces every layout to use exactly one column on all screens
    • dIt eliminates the need for CSS Grid or Flexbox entirely
    Show the answer

    Answer: b · Consumers declare layout intent while the component encapsulates all responsive CSS

    The abstraction lets consumers say how many columns per breakpoint while the component owns the media queries and grid CSS. It still uses CSS Grid internally and still supports gaps and multiple columns.

    Read the full bite: Designing a responsive Grid with breakpoint props

30. Question 30 of 30

    In a rule-based intent classifier, why is the query 'buy discount laptop' labeled transactional?

    • aIt concerns a product category commonly sold online
    • bThe SERP for this query is dominated by e-commerce websites
    • cIt contains action-oriented modifiers indicating the user wants to purchase
    • dIt does not include informational question words like 'how' or 'why'
    Show the answer

    Answer: c · It contains action-oriented modifiers indicating the user wants to purchase

    Transactional intent is defined by the user's goal to complete an action, and rule-based classifiers detect this through modifiers such as 'buy' and 'discount'. Option A is wrong because defining intent by query topic rather than user goal is a common mistake; a laptop query could also be informational.

    Read the full bite: Differentiate informational, navigational, and transactional intent and classify keywords programmatically