UI/UX Design Interview Questions and Answers: 60 Questions from Easy to Hard
This guide is for designers in India preparing for UI/UX, UX and product design interviews: freshers with a course, bootcamp or self-taught portfolio, and designers with a few years of experience moving to a product company. It has 60 questions in three levels. Easy covers the design process, research basics, UX laws, visual design and Figma fundamentals. Medium covers usability testing, information architecture, WCAG 2.2, variants and component properties, forms and developer handoff. Hard covers design tokens, metrics, accessibility edge cases, design challenges and how senior designers present case studies. Contrast ratios, grid widths and other numbers in the answers were calculated, so you can check them yourself. Answer each question aloud first, then compare, and practise presenting one case study end to end.
- 60 questions, 3 levels
- Updated
- CoreHRx Jobs
- 418 open Design jobs
What UI/UX design interviews cover
- A portfolio review where you walk through one or two case studies and the panel asks why you made each decision.
- Process and research: how you find the real problem, talk to users, test designs and decide what to change.
- Visual and interaction design: hierarchy, typography, colour, spacing, states, and mobile and web patterns.
- Accessibility (WCAG 2.2), design systems and Figma skills such as auto layout, components, variants and prototyping.
- Often a design exercise: a take-home task or a live whiteboard challenge, and sometimes a critique of an app you use.
How to prepare (freshers and experienced designers)
- Freshers: build two or three case studies that show real research and iteration, even on a self-initiated project, and label concept work honestly as concept work.
- Learn the vocabulary panels use (Nielsen heuristics, Fitts and Hick, WCAG levels, auto layout, variants, design tokens) and have an example ready for each.
- Experienced designers: prepare one case study about business impact and one about a hard trade-off or disagreement, with your own role made clear.
- Practise a 45-minute design challenge on paper with a timer: clarify, pick one user and one journey, sketch, then say how you would measure success.
- Rebuild a screen from an app you use in Figma with clean auto layout and components; panels often open your file and look at the layers.
Common mistakes and interview-day tips
- Showing only final screens. The panel hires for reasoning, so show the problem, the options you rejected and why.
- Saying 'we' for everything. Say clearly what you did and what the researcher, product manager or developers did.
- Quoting impact numbers you cannot explain. If you did not measure it, say what you would measure instead.
- Treating accessibility as an afterthought. Mention contrast, target size, focus states and labels while you present, not only when asked.
- Jumping to screens in a live challenge. Spend the first few minutes on who the user is and what success looks like.
UI/UX Design interview questions: Easy questions (freshers)
20 questions1. What is the difference between UI design and UX design?
UX design is about the whole experience: whether the product solves the right problem, how the flow works and how easy each task is. UI design is the visible layer: layout, typography, colour, components and states. A leave-application flow that needs seven screens is a UX problem even if every screen is beautiful; a clear flow with unreadable grey text is a UI problem. In most Indian product teams one designer does both, so the honest answer is that they overlap. A common mistake is saying UX is only wireframes and UI is only colours.
2. Walk me through the design process you follow.
I use a version of the Double Diamond from the UK Design Council: discover (research the problem), define (agree on the real problem and how success is measured), develop (explore and prototype options) and deliver (test, refine and hand off). In practice it loops: a usability test during develop can send me back to define. For a small change such as a new filter I might spend a day on discovery; for a new module, weeks. The mistake is reciting the steps as a fixed checklist. Interviewers want to hear how you adapt the process to time, risk and what you already know.
3. What is a persona, and how do you make one useful?
A persona is a short, research-based description of a type of user: their goals, context, behaviour and frustrations. For an HRMS, 'Priya, HR executive at a 200-person Pune factory, runs payroll every month and worries about missed attendance corrections' guides decisions better than an age and a stock photo. A persona is useful when it changes a design choice, such as keeping bulk actions because Priya processes 200 records at once. The common mistake is inventing personas without research; if you start from assumptions, call it a proto-persona and test it.
4. What is a user journey map?
A journey map shows the stages a person goes through to reach a goal, across channels, with what they do, think and feel at each stage, the touchpoints and the pain points. For an employee claiming a travel reimbursement the stages might be: travel, collect bills, submit the claim, wait for approval, get paid. The low point is often the wait, which points to status updates rather than a prettier form. A user flow is narrower (screens and decisions inside the product); a service blueprint adds the backstage work of staff and systems.
5. What is the difference between a wireframe, a mockup and a prototype?
A wireframe shows structure: what content and controls go where, usually in greyscale with placeholder text. A mockup is a static, high-fidelity picture of the screen with real type, colour and images. A prototype is interactive: screens linked so someone can click or tap through a task, and it can be low or high fidelity. I use rough wireframes to agree on the flow, a clickable prototype to test it and mockups for visual sign-off. The mistake is polishing too early: people then comment on colours instead of whether the flow works.
6. What is usability testing, and what do you do during a session?
Usability testing means watching real or representative users try realistic tasks with your design, so you see where they hesitate, misread or fail. I give a scenario such as 'You need two days off next week, apply for them', ask them to think aloud and stay quiet when they struggle, because helping hides the problem. I note task success, errors and time, and the reasons behind them. It is different from asking opinions: 'Do you like it?' tells you little, while watching someone miss the Submit button tells you exactly what to fix.
7. Name Nielsen's usability heuristics and give an example of one.
The ten heuristics are: visibility of system status; match between the system and the real world; user control and freedom; consistency and standards; error prevention; recognition rather than recall; flexibility and efficiency of use; aesthetic and minimalist design; help users recognise, diagnose and recover from errors; and help and documentation. An example of the first: after an employee submits leave, show 'Sent to Ramesh for approval' with the status, instead of returning silently to the dashboard and leaving them unsure whether it worked.
8. What is Fitts's law, and how does it affect button design?
Fitts's law says the time to hit a target grows with its distance and shrinks with its size: MT = a + b x log2(D/W + 1). Bigger, closer targets are faster. So the main action should be large and near where the user's attention or thumb already is, for example a full-width Pay button at the bottom of a mobile checkout. On desktop, screen edges and corners act as very deep targets because the cursor stops there. It also works the other way: keep a destructive action such as Delete away from frequent actions, so it is not hit by accident.
9. What is Hick's law, and when does it apply?
Hick's law says decision time grows with the logarithm of the number of equally likely choices: RT = a + b x log2(n + 1). Going from 7 options to 15 raises log2(n + 1) from 3 to 4, so the time rises by one step; it does not double. The lesson is to reduce or group choices where people must decide, for example three plans with one marked Recommended, and progressive disclosure for advanced settings. It applies less when users already know what they want and scan an ordered list, such as picking their city from an alphabetical list or a search box.
10. What is visual hierarchy, and how do you create it?
Visual hierarchy is the order in which the eye notices things, so the most important element is seen first. You create it with size, weight, colour and contrast, spacing, position and grouping. On a payslip screen, net pay should be the largest, boldest number, with earnings and deductions grouped below in smaller text. A quick check is the squint test: blur your eyes and see what still stands out. The usual mistake is making many things bold or brightly coloured, which leaves nothing important; one clear primary action per screen helps.
11. What is an 8-point spacing system, and why do teams use one?
All spacing and sizes use multiples of 8, with 4 for small gaps, so the team picks from a short list instead of debating 13 or 15 pixels. It keeps layouts consistent and makes handoff faster, because each value maps to a token. Multiples of 8 also scale cleanly: at 1.5x density 8 becomes 12 device pixels, while 5 would become 7.5. Use small steps between related items, such as an icon and its label, and larger steps between groups and sections. The mistake is forcing everything onto it, such as column widths, which come from the layout grid.
space-0.5 4px icon to its label
space-1 8px items inside a group
space-2 16px card padding, phone side margin
space-3 24px between groups in a form
space-4 32px between cards
space-6 48px between page sections
space-8 64px large section breaks12. What colour contrast does WCAG require for text?
WCAG 2.2 level AA (criterion 1.4.3) needs 4.5:1 for normal text and 3:1 for large text, meaning at least 18pt (24 CSS px) or 14pt bold (about 18.7 px). Level AAA (1.4.6) raises this to 7:1 and 4.5:1, and 1.4.11 asks 3:1 for icons and for the parts that identify controls, such as input borders and focus indicators. Grey #767676 on white gives 4.54:1 and passes; #777777 gives 4.48:1 and fails, because the ratio must reach 4.5 and must not be rounded up. Most companies and laws target level AA.
def lin(c):
c = c / 255
return c / 12.92 if c <= 0.04045 else ((c + 0.055) / 1.055) ** 2.4
def lum(hexc):
r, g, b = (int(hexc[i:i + 2], 16) for i in (1, 3, 5))
return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b)
def ratio(a, b):
hi, lo = sorted((lum(a), lum(b)), reverse=True)
return (hi + 0.05) / (lo + 0.05)
print(round(ratio('#767676', '#FFFFFF'), 2)) # 4.54
print(round(ratio('#777777', '#FFFFFF'), 2)) # 4.4813. What is information architecture, and how do you test it?
Information architecture is how content and features are organised, labelled and found: the navigation, the grouping of pages and the words on menus. Good IA uses the user's words, not the company's, so an HRMS menu says Reimbursements rather than an internal team name such as Finance Ops. To build it I start from a content inventory, run a card sort to see how users group items, draft a sitemap, then run a tree test where people look for items in a text-only menu. The common mistake is copying the org chart into the navigation.
14. What is the difference between a style guide, a component library and a design system?
A style guide sets visual rules: colours, typography, logo use and tone. A component library is the reusable set of UI pieces, such as buttons, inputs and modals, in Figma and ideally in code. A design system includes both, plus design tokens, usage guidelines, patterns (how to build a form or an empty state), accessibility rules and a process for changing it. Public examples are Material Design and IBM Carbon. The key point: a design system is a product with owners and versions, not a Figma file someone made once and nobody maintains.
15. What is auto layout in Figma, and why use it?
Auto layout makes a frame arrange its children in a row or a column with set spacing, padding and alignment, and resize as the content changes. Layers can be set to Fixed, Hug contents or Fill container. A button with auto layout grows when its label changes from Apply to Apply for leave, and a list re-flows when you add an item, so you stop nudging layers by hand. It behaves much like CSS flexbox, which helps developers read your intent. The common mistake is random nesting; name frames and give each one a single layout job.
/* A Figma button with horizontal auto layout,
gap 8 and padding 12/16, behaves like: */
.button {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
}16. What are components and instances in Figma?
A component is a reusable element: you edit its main component once and every instance updates. An instance can override some things, such as its text, a swapped icon or a fill, while keeping the link, so a change to the main button's corner radius still reaches all 300 buttons in the file. Variants group related components, such as Primary, Secondary and Disabled buttons, into one component set with properties. Publishing to a team library lets other files use them. The mistake is detaching an instance for a quick change, which cuts that copy off from all future updates.
17. How is designing for mobile different from designing for desktop?
On mobile people use fingers, not a precise pointer; there is no hover; the screen is small and often used with one thumb, sometimes on a slow network. So targets must be larger, primary actions sit within thumb reach, content is prioritised, and hover-only tooltips need another route. Apple suggests at least 44 x 44 pt and Material 48 x 48 dp, which on a 3x screen are 132 and 144 physical pixels; WCAG 2.2 sets 24 x 24 CSS pixels as the AA floor. Follow each platform's conventions too, such as the Android back gesture and iOS swipe back.
18. What typography basics should every UI designer know?
Use one or two typefaces and build hierarchy with size and weight. Body text on the web usually starts at 16 px, the browser default, and iOS uses 17 pt for body text at the default text size. Give body text a line height of about 1.4 to 1.6 and keep lines to roughly 45 to 75 characters; WCAG's AAA criterion 1.4.8 says no more than 80. Left-align body text, and avoid long passages in all caps or very thin weights. A common mistake is too many sizes: a clear scale of five or six sizes is easier to use and to build.
19. How do you build a colour palette for a product interface?
I separate roles: one or two brand or primary colours for main actions, a range of neutrals for text, borders and backgrounds, and semantic colours for success, warning, error and information. Each gets a set of shades, often numbered 50 to 900, so every hue has a light background version and a dark text version. Then I check every text and background pair for contrast and never use colour alone to carry meaning (WCAG 1.4.1): an error field also gets an icon and a message. The common mistake is choosing colours that look good on a mood board but fail contrast.
20. How should you present a portfolio case study in an interview?
Tell it as a story of decisions: the context and problem, your role and the team, what research taught you, two or three key decisions with the options you rejected and why, the final design, the result and what you would change. Keep each case study to about 10 to 15 minutes unless told otherwise, and choose depth over breadth. A fresher can use a self-initiated project but should call it a concept and show real testing, even with five classmates. The mistake is a long scroll of screens with no explanation of why anything looks the way it does.
Ready to check yourself? Take the free UI/UX Design mock test
UI/UX Design interview questions: Medium questions (1-3 years)
20 questions21. How do you plan a usability test for a new leave-approval flow?
Start with what you need to learn, for example whether managers can approve or reject a request in under a minute. Recruit people who match the users, here managers who approve leave, not designers from your own team. Write tasks as scenarios without UI words: 'Two people on your team asked for the same Friday off; deal with it' rather than 'Click Approve'. Run a pilot session to fix the script, use think-aloud, keep a note-taker, and decide in advance what you will measure: task success, errors, time and a post-task rating. Get consent before recording.
22. Why do people say five users are enough for a usability test, and when is that wrong?
It comes from Nielsen and Landauer's model: the share of problems found by n users is 1 - (1 - L)^n, and with their average L = 0.31, five users find about 84 percent. That holds for one similar user group, a qualitative test and repeated small rounds. It fails when user groups differ (test 3 to 5 people from each, such as employees and HR admins), when a problem is rare (one that hits 10 percent of users is seen by five people only 41 percent of the time), and when you need numbers such as a benchmark, which needs a far larger sample.
for n in (1, 3, 5, 10, 15):
print(n, round(100 * (1 - (1 - 0.31) ** n), 1))
# 31.0, 67.1, 84.4, 97.6, 99.6
print(round(100 * (1 - 0.9 ** 5), 1)) # rare issue: 41.023. When do you use qualitative research and when quantitative research?
Quantitative methods, such as analytics, large surveys and A/B tests, tell you what is happening and how much: say, 40 percent of users drop off at the bank-details step. Qualitative methods, such as interviews and usability tests with a handful of people, tell you why: perhaps they do not have their IFSC code at hand. I combine them, using numbers to find where to look and conversations to understand it, then numbers again to check the fix. Also separate what people say (attitudinal) from what they do (behavioural); when the two differ, trust the behaviour.
24. How do you write good questions for a user interview?
Ask about real past behaviour, keep questions open and avoid leading or hypothetical ones. 'Would you use an app to track expenses?' invites a polite yes that predicts nothing; 'Tell me about the last time you claimed an expense. What did you do first?' gives facts. 'Don't you find approvals slow?' leads the answer; 'How does approval work today?' does not. Follow up with 'Can you show me?' and 'What happened next?', and get comfortable with silence. The common mistake is pitching your idea during the interview, which turns research into a sales call.
25. What is the difference between card sorting and tree testing?
Card sorting is generative: participants group content cards in a way that makes sense to them. In an open sort they also name the groups; in a closed sort they place cards into groups you defined. Tree testing is evaluative: people get a task and a text-only version of your menu, and you see whether they reach the right place. If 31 of 50 people find Travel claims, that is 62 percent success, and the paths show where the rest went, for example into Payroll. Use card sorting to propose a structure and tree testing to check it before any visual design.
26. A desktop frame is 1440 px wide with a 12-column grid, 72 px side margins and 24 px gutters. How wide is each column, and why does it matter?
The content width is 1440 - 2 x 72 = 1296 px and the 11 gutters take 264 px, so each column is (1296 - 264) / 12 = 86 px. A card spanning 4 columns is 4 x 86 + 3 x 24 = 416 px. Sizing cards to whole columns lets developers build the layout with CSS grid instead of copying odd pixel widths, and it keeps edges aligned across the page. On a 360 px phone a common choice is 4 columns with 16 px margins and gutters, giving 70 px columns. Columns need not be multiples of 8, but margins and gutters should be.
W, margin, gutter, cols = 1440, 72, 24, 12
col = (W - 2 * margin - (cols - 1) * gutter) / cols
print(col) # 86.0
print(4 * col + 3 * gutter) # 416.0, a 4-column card
print((360 - 2 * 16 - 3 * 16) / 4) # 70.0, phone, 4 columns27. A Bengaluru fintech's brand orange is #FE4001, and the team wants white 16 px text on orange buttons. Is that accessible?
No. White on #FE4001 is 3.53:1, below the 4.5:1 that WCAG 1.4.3 needs for normal text, so a 16 px label fails at AA. It would pass for large text (24 px, or about 18.7 px bold), and the button shape passes the 3:1 that 1.4.11 asks against a white page. Options: darken the fill, for example #C93300 gives 5.31:1; use black text on the orange (5.95:1); or keep the bright orange for illustrations and large headings. Leave a margin above 4.5, because a shade such as #DD3801 at 4.53:1 can slip below it after a small tweak.
# ratio() is the WCAG contrast function shown earlier
for fg, bg in [('#FFFFFF', '#FE4001'), ('#FFFFFF', '#C93300'),
('#000000', '#FE4001'), ('#FFFFFF', '#DD3801')]:
print(fg, bg, round(ratio(fg, bg), 2))
# 3.53, 5.31, 5.95, 4.5328. What does WCAG 2.2 criterion 2.5.8 Target Size (Minimum) require, and does a row of 16 px icons pass?
At level AA, pointer targets must be at least 24 x 24 CSS pixels unless an exception applies: enough spacing, an equivalent control elsewhere, links inside text, browser-drawn controls, or a size that is essential. The spacing test centres a 24 px circle on each small target; it must not intersect another target or another target's circle. 16 px icons with 4 px gaps have centres 20 px apart, so they fail; with 12 px gaps the centres are 28 px apart and pass. The simpler fix is padding the hit area to 24 px or more while keeping the icon 16 px.
.icon-button {
box-sizing: content-box;
width: 16px;
height: 16px;
padding: 4px; /* 16 + 4 + 4 = 24 px hit area */
}29. What changed in WCAG 2.2 compared with WCAG 2.1?
WCAG 2.2 became a W3C Recommendation in October 2023 and adds nine success criteria: Focus Not Obscured (Minimum and Enhanced), Focus Appearance, Dragging Movements, Target Size (Minimum), Consistent Help, Redundant Entry, and Accessible Authentication (Minimum and Enhanced). Four of the nine are level AA and two are level A. It also removed 4.1.1 Parsing as obsolete. For designers the big ones are 24 px minimum targets, a non-drag alternative for drag interactions, focus that is not hidden under sticky bars, and logins that do not depend on memory tests or puzzles.
30. In Figma, when do you use variants and when component properties?
Use a variant property when the design really changes, such as Size, Type or State. Use the component properties Figma added in 2022 for simpler things: a boolean to show or hide an icon, an instance swap to pick which icon, and a text property for the label. It adds up: a button with 3 sizes, 4 types, 5 states and an icon on or off as a variant needs 3 x 4 x 5 x 2 = 120 variants. Making the icon a boolean plus an instance swap cuts that to 60, and adding new icons never multiplies it. Fewer variants mean easier upkeep and lighter files.
Variant Size S, M, L
Variant Type Primary, Secondary, Tertiary, Danger
Variant State Default, Hover, Pressed, Focused, Disabled
Boolean Show icon true / false
Instance Icon any icon component
Text Label "Apply for leave"31. How do you build a realistic prototype in Figma?
Each prototype connection has a trigger (On click or tap, On drag, While hovering, After delay and others), an action (Navigate to, Open overlay, Swap overlay, Scroll to, Back, Change to) and an animation (Instant, Dissolve, Smart animate, Move in, Push and so on). Smart animate tweens layers that have the same name in both frames. For realism I use overlays for sheets and menus, scrolling for long lists, fixed headers, and interactive components so a toggle works in every instance. Since 2023, variables with Set variable and conditional actions can also keep state, such as a cart count.
32. What should you hand over to developers along with the screens?
Every state, not just the happy path: default, hover, focus, pressed, disabled, loading, empty, error and success, plus long text, missing data and each breakpoint. Use named tokens and components instead of loose hex values, and add notes for behaviour such as validation rules, focus order, alt text and what happens on a slow network. In Figma's Dev Mode (introduced in 2023) I mark sections Ready for dev so developers know what is final and can inspect spacing, variables and assets. Then walk them through it; a 20-minute call saves days of guessing.
33. How do you design empty, loading and error states?
Empty states explain what will appear and offer the next step: a new employee's Documents page says what to upload and shows an Upload button. A no-results state suggests clearing filters. For loading, use Nielsen's response-time limits: about 0.1 s feels instant, up to 1 s keeps the flow, and beyond about 10 s people lose attention. Use a skeleton when content is on its way, a progress bar for long tasks and nothing for very fast ones. Error messages say what went wrong and how to fix it in plain words, keep what the user typed and never blame the user.
34. What makes a form easy to fill in, for example a KYC form that asks for a PAN?
Visible labels above fields, never a placeholder as the only label, because it disappears as soon as you type. Ask only what you need, group related fields, mark optional ones and show the format in a hint ('10 characters, like ABCDE1234F'). Validate when the user leaves a field, not on every keystroke, and write errors that say how to fix the problem. Link hints and errors to the field so screen readers announce them, use the right keyboard and autofill, and do not hide the reason behind a disabled Submit button.
<label for="pan">PAN</label>
<input id="pan" name="pan" maxlength="10"
autocapitalize="characters"
aria-describedby="pan-hint pan-error"
aria-invalid="true">
<p id="pan-hint">10 characters, like ABCDE1234F</p>
<p id="pan-error">Enter the PAN in the format ABCDE1234F</p>35. Bottom navigation, tabs or a hamburger menu: how do you choose on mobile?
A bottom navigation bar suits 3 to 5 top-level destinations people switch between often, such as Home, Attendance, Leave and Profile: it is always visible and within thumb reach. Top tabs suit sibling views of one area, such as Pending, Approved and Rejected requests. A hamburger menu saves space but hides options, so keep it for secondary items, not the main ones. Follow platform norms (the tab bar on iOS, the navigation bar in Material) and keep destinations in the same places on every screen. The mistake is a bottom bar with seven icons and no labels.
36. How do you build a type scale, and how do you hand it over in code?
Pick a base, usually 16 px for body text, and a ratio, then multiply up and down. A ratio of 1.25 gives 12.8, 16, 20, 25, 31.25, 39.06 and 48.83, which most teams round onto a 4 px grid as 12, 16, 20, 24, 32, 40 and 48. Pair each size with a line height on the same grid, such as 16/24 and 32/40, and name it by role (body, title, heading), not by size. Hand it over in rem so it follows the user's browser setting: with a 16 px root, 24 px is 1.5rem and 40 px is 2.5rem. Five to seven sizes are usually enough.
step x1.25 rounded rem
-1 12.80 12 0.75
0 16.00 16 1
1 20.00 20 1.25
2 25.00 24 1.5
3 31.25 32 2
4 39.06 40 2.5
5 48.83 48 337. How do you run a heuristic evaluation, and what are its limits?
Three to five evaluators review the interface on their own against a set of heuristics, usually Nielsen's ten, working through key tasks and noting each problem, where it occurs and which heuristic it breaks. Only then do they merge the lists and rate severity on Nielsen's 0 to 4 scale, from not a problem through cosmetic, minor and major to catastrophe. Working independently matters because one evaluator misses many issues. It is fast and cheap, but it is expert opinion, not user data, so it misses problems that come from users' real context and vocabulary.
38. Which Gestalt principles do you use most in UI layout?
Proximity: things close together read as a group, so a form label sits 4 to 8 px from its own field and 24 px from the field above. Similarity: elements that look alike seem to do the same thing, so links and buttons must be styled consistently. Common region: a card or border groups content. Figure-ground explains why a dimmed backdrop makes a modal feel on top. Continuity and alignment guide the eye along a line. The common bug is equal spacing everywhere, so labels float between two fields and users cannot tell which field they belong to.
39. What are Jakob's law and Miller's law, and how are they misused?
Jakob's law says users spend most of their time on other products, so they expect yours to work the same way: a cart icon at the top right, a logo that goes home, a familiar OTP screen. Break a convention only when the gain is clear. Miller's 1956 paper found people hold about seven, plus or minus two, chunks in short-term memory; later work by Cowan puts it nearer four. It is often misused to cap menus at seven items, but menu items are recognised, not memorised. Apply it where people must remember, such as never making them recall a code from an earlier screen.
40. How do you present a portfolio project that was a team effort or is under an NDA?
Be precise about your part: 'I ran the five interviews and designed the approval flow; another designer owned the dashboard.' Use I for your work and we for shared work. For an NDA, ask what you may show; you can often rebuild key screens with dummy data, remove the client's name and brand, and give relative results such as 'cut support tickets by about a third' if allowed. You can also present the process and decisions without screens. Never put confidential work in a public PDF, and never claim results that someone else drove.
Ready to check yourself? Take the free UI/UX Design mock test
UI/UX Design interview questions: Hard questions (experienced)
20 questions41. How would you structure design tokens for a product with light and dark themes?
Use layers. Primitive tokens hold raw values (blue.600 = #1A73E8). Semantic tokens describe purpose and point to primitives (action.primary is blue.600 in light mode and a lighter blue in dark). Component tokens, if needed, point to semantic ones (button.primary-bg = action.primary). Screens use only semantic or component tokens, so a theme or rebrand changes the mapping, not every screen. In Figma, variables (introduced in 2023) do this with collections, aliases and modes such as Light and Dark. The mistake is naming semantic tokens after colours, such as orange-button.
{
"color": {
"blue": {
"600": { "$type": "color", "$value": "#1A73E8" }
},
"action": {
"primary": { "$type": "color", "$value": "{color.blue.600}" }
}
},
"button": {
"primary-bg": {
"$type": "color",
"$value": "{color.action.primary}"
}
}
}42. How do you keep a design system healthy when several product teams use it?
Treat it as a product. Define a contribution model: teams propose a component with the problem it solves, the core team reviews it for reuse, accessibility and naming, and accepted pieces ship in both Figma and code. Version releases, publish a changelog, and deprecate with a migration path and a date instead of deleting. Measure adoption: the share of screens built from library components, detach rates, and requests that keep coming back. Office hours and good documentation beat policing. Teams detaching instances to get work done is a sign the system is missing something.
43. What goes wrong when a team creates dark mode by simply inverting colours?
Contrast and meaning change. Brand blue #1A73E8 is 4.51:1 on white but only 4.16:1 on a #121212 surface, so links that passed AA fail; a lighter blue such as #8AB4F8 gives 8.89:1. Pure white text on near-black (18.73:1) can feel harsh, so a light grey such as #E0E0E0 (14.19:1) is often more comfortable. Shadows barely show on dark backgrounds, so elevation is shown with lighter surfaces, as Material's dark theme guidance does, and saturated colours need toning down. Every pair must be rechecked: dark mode is a second theme, not a filter.
# ratio() is the WCAG contrast function shown earlier
pairs = [('#1A73E8', '#FFFFFF'), ('#1A73E8', '#121212'),
('#8AB4F8', '#121212'), ('#FFFFFF', '#121212'),
('#E0E0E0', '#121212')]
for fg, bg in pairs:
print(fg, bg, round(ratio(fg, bg), 2))
# 4.51, 4.16, 8.89, 18.73, 14.1944. How do you design focus states that meet WCAG 2.2, including on pages with a sticky header?
Focus must be visible (2.4.7, AA), and the indicator needs 3:1 against the colours next to it (1.4.11). New in 2.2, criterion 2.4.11 Focus Not Obscured (Minimum) says a focused control must not be entirely hidden by author content such as a sticky header, chat button or cookie banner. Use :focus-visible so a mouse click on a button usually shows no ring, a clear outline with an offset, and scroll-padding so the browser scrolls focused items clear of the header. Never remove outlines without a replacement, and Tab through the whole page yourself.
html {
scroll-padding-top: 72px; /* sticky header height */
}
:focus-visible {
outline: 3px solid #1A73E8; /* 4.51:1 on white */
outline-offset: 2px;
}45. How does WCAG 2.2 Accessible Authentication affect an OTP login screen?
Criterion 3.3.8 (AA) says no login step may require a cognitive function test, such as remembering a password or solving a puzzle, unless there is an alternative or a mechanism that helps, like a password manager or copy and paste. Typing a code from an SMS is transcription, so the design must allow paste and autofill; six one-digit boxes that block paste are a common failure. Use one field with autocomplete set to one-time-code, allow paste in password fields and avoid puzzle CAPTCHAs. Object-recognition CAPTCHAs are an exception at AA, but they still frustrate many users.
<label for="otp">Enter the 6-digit code sent to your phone</label>
<input id="otp" name="otp" type="text"
inputmode="numeric"
autocomplete="one-time-code"
maxlength="6">46. Your Pune SaaS team's hiring board moves candidates between stages by drag and drop. What does WCAG 2.2 require?
Criterion 2.5.7 Dragging Movements (AA) says anything done by dragging must also be possible with a single pointer without dragging, unless dragging is essential. So each candidate card needs another way to move, such as a Move to stage menu, or tapping the card and then the target column. A keyboard alternative alone does not satisfy it, because the criterion protects pointer users, such as people with a tremor or using a head pointer, who may not use a keyboard. The same goes for sliders (add buttons or an input) and reorderable lists (add up and down buttons).
47. An A/B test of a new signup button shows 552 signups from 12,000 visitors against 480 from 12,000 for the old one. Is that a real win, and what else would you check?
The rate rose from 4.0 to 4.6 percent, a 15 percent lift, and a two-proportion z-test gives z = 2.29 and p = 0.022, so at the usual 5 percent level it is unlikely to be chance. With 1,200 visitors per side the pattern 48 against 60 gives p of about 0.24, not significant even though that lift looks bigger. Before celebrating I check that the sample size was fixed in advance rather than stopping when it looked good, that traffic was split as planned, and that a guardrail metric such as completed KYC or support tickets did not get worse.
import math
def ab(x1, n1, x2, n2):
p1, p2 = x1 / n1, x2 / n2
p = (x1 + x2) / (n1 + n2)
se = math.sqrt(p * (1 - p) * (1 / n1 + 1 / n2))
z = (p2 - p1) / se
return round(z, 2), round(math.erfc(abs(z) / 2 ** 0.5), 3)
print(ab(480, 12000, 552, 12000)) # (2.29, 0.022)
print(ab(48, 1200, 60, 1200)) # (1.18, 0.237)48. How do you choose UX metrics for a feature, for example a new leave-approval flow?
I use Google's HEART framework (Happiness, Engagement, Adoption, Retention, Task success) with goals, signals and metrics, picking only the dimensions that match the goal. For leave approval the goal is fast, correct decisions, so task success and time matter most: median time from request to decision, and errors such as approvals that are later reversed. Adoption shows whether managers use the new flow at all. Record a baseline before the change. Avoid vanity metrics such as page views, which can rise simply because the flow got harder.
Goal Signal Metric
Fast decisions request to decision median hours
Fewer errors approvals reversed % within 7 days
Managers adopt it approvals from alert % of approvals
Satisfaction post-task rating average, 1 to 749. How is a System Usability Scale (SUS) score calculated, and how should you read it?
SUS has ten statements rated 1 to 5. For odd items you subtract 1 from the answer; for even items, which are worded negatively, you subtract the answer from 5. Add the ten results and multiply by 2.5 to get a score from 0 to 100; the example answers give 30 x 2.5 = 75. It is not a percentage: Jeff Sauro's research puts the average SUS score around 68, so 75 is above average. Report the mean across participants with a confidence interval, compare it with your own previous release, and remember SUS says how usable people found it, not why.
answers = [4, 2, 5, 1, 4, 2, 4, 2, 3, 3] # items 1 to 10
raw = sum(a - 1 if i % 2 == 0 else 5 - a
for i, a in enumerate(answers))
print(raw, raw * 2.5) # 30 75.050. What would you design differently for users across India, for example in a payroll app for factory staff?
Assume budget Android phones, patchy networks and shared devices: keep screens light, show offline and retry states, and save drafts. Support Hindi and regional languages properly; Devanagari has vowel signs above and below the line, so allow more line height and test real translated strings, which may run longer. Show money in Indian digit grouping (12,34,567), put the day first in dates, allow a single name instead of forcing a surname, and reuse patterns people know, such as OTP and UPI. Test with real users where they work, not only with colleagues in a metro office.
// Indian digit grouping and day-first dates
const n = new Intl.NumberFormat('en-IN').format(1234567.5);
const d = new Intl.DateTimeFormat('en-IN', { timeZone: 'UTC' })
.format(new Date(Date.UTC(2025, 2, 9)));
console.log(n, d); // 12,34,567.5 9/3/202551. Using Fitts's law, compare making a 48 px button twice as wide with moving it twice as close. Which helps more?
With the Shannon form ID = log2(D/W + 1), a button 600 px away and 48 px wide has an index of difficulty of 3.75 bits. Doubling the width to 96 px gives 2.86 bits, and halving the distance to 300 px gives the same 2.86 bits, because only the ratio D/W matters. With assumed device constants a = 0.1 s and b = 0.15 s per bit, the time drops from about 0.66 s to 0.53 s either way, so pick whichever costs less in the layout. The law models pointing time only; it says nothing about how long it takes to find the button.
import math
a, b = 0.1, 0.15 # assumed device constants
for D, W in [(600, 48), (600, 96), (300, 48)]:
ID = math.log2(D / W + 1)
print(D, W, round(ID, 2), round(a + b * ID, 2))
# 3.75 0.66 / 2.86 0.53 / 2.86 0.5352. Rohan, the product manager at your Pune SaaS firm, wants a six-field signup form before users can see the product. You think it will hurt conversion. How do you handle it?
Start from the shared goal, more activated customers, not my preference. Ask why each field is needed; often sales wants company size and nobody uses it in the first week. Bring evidence: funnel data showing where people drop, session recordings, or a quick test of a shorter form. Propose a trade-off, such as asking for name, phone and work email first and the rest after the first useful moment, and offer an A/B test with an agreed success metric and guardrail. If Rohan still decides otherwise, record the decision, commit to it and review the numbers together.
53. How do you design a data-heavy table, such as a 500-row employee list in an HRMS?
Design for scanning and acting. Left-align text, right-align numbers and use tabular figures so digits line up; keep the header, and often the first column, sticky; offer comfortable and compact densities; and let users sort, filter, choose columns and save views. Show bulk actions in a bar when rows are selected and keep row actions consistent. Paginate or virtualise long lists. On phones do not squeeze 12 columns: show the two or three that matter as cards, or let the table scroll sideways inside its own box. Design the empty, loading and no-match states too.
td.amount {
text-align: right;
font-variant-numeric: tabular-nums;
}
thead th {
position: sticky;
top: 0;
background: #FFFFFF;
}54. How do you organise Figma libraries and files for a large product team?
Split libraries by how often they change: a foundations library with variables and styles, a core components library, and product pattern libraries that build on them. Keep files reasonably small, since huge files with thousands of variants get slow. Use clear slash names (Button/Primary) and descriptions so search works, and component properties to keep variant counts down. Make risky library changes in a branch, where your plan includes branching, then review, merge and publish with release notes. Use library analytics, where available, to see which components are detached or never used.
55. When should UI animation be used, and how do you make it accessible?
Use motion to explain, not decorate: show where a panel came from, confirm an action, or keep context during a change. Most UI transitions sit roughly between 100 and 500 ms, quicker for small changes and slower for large moves, with easing rather than linear timing. Respect the reduce-motion setting with the prefers-reduced-motion media query, swapping movement for a fade. WCAG 2.2.2 (level A) needs a way to pause, stop or hide content that moves on its own for more than five seconds alongside other content, and 2.3.3 (AAA) covers motion triggered by interaction.
.toast {
transition: transform 200ms ease-out,
opacity 200ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
.toast {
transition: opacity 200ms linear;
}
}56. How do you approach a live whiteboard design challenge, such as designing follow-up visit booking for a Jaipur clinic?
Clarify before sketching: who books (the patient, a family member, the receptionist), on what device, what the clinic wants (fewer no-shows, fewer phone calls) and what limits exist. Then name one primary user and one journey, state assumptions aloud and sketch the flow before screens. Draw low-fidelity screens for the key steps, then cover edge cases: no slot available, rescheduling, a reminder by SMS or WhatsApp. Close with how you would measure success and test it. Think aloud throughout; the panel scores your reasoning and how you use hints, not your drawing skill.
57. What do panels expect from a senior designer's case study that they do not expect from a junior's?
Business context and influence. Explain the goal in the company's terms (activation, support cost, revenue), the constraints, and how you shaped the problem, not only the screens. Show a hard decision: the options, the trade-off you chose, who disagreed and how it was settled. Give results honestly, including what else changed at the same time, and say what you would do differently. Show how you raised the team, such as a pattern others adopted or a research habit you started. Ten slides of sticky notes is process theatre; three real decisions explained well are stronger.
58. A growth team asks for a pre-ticked add-on at checkout and a countdown timer that resets on every visit. How do you respond?
Both are dark patterns: a pre-ticked add-on sneaks an item into the basket the user did not choose, and a resetting timer creates false urgency. Apart from losing trust and raising refunds and complaints, they carry legal risk in India: the Central Consumer Protection Authority issued guidelines on dark patterns in 2023 that name false urgency, basket sneaking, confirm shaming, drip pricing and subscription traps, among others (check the current text with your legal team). I would offer honest options for the same goal: an unticked add-on with a clear benefit, real deadlines, and an A/B test.
59. A developer sets headings with clamp(1.5rem, 1rem + 2.5vw, 2.5rem). How does it behave, and what accessibility risk does fluid type carry?
The size is 1rem plus 2.5 percent of the viewport width, kept between 24 px and 40 px with a 16 px root: it reaches 24 px at a 320 px viewport and 40 px at 960 px. Browser zoom shrinks the CSS viewport, so the vw part shrinks: in a 1280 px window at 200 percent zoom the heading renders at 64 device pixels, only 1.6 times its 40 px size, and reaches double at 300 percent. A size set only in vw, such as 3vw, does not grow with zoom at all, which can fail 1.4.4 Resize Text. Keep the rem part large and test with zoom.
h1 {
font-size: clamp(1.5rem, 1rem + 2.5vw, 2.5rem);
}
/* 1280 px window: 100% zoom = 40 px; 200% = 32 CSS px
= 64 device px; 300% = 80 device px */60. How do you check that what developers built matches the design before release?
Run design QA on the real build, at real breakpoints, with real data. Check layout and spacing against tokens rather than eyeballing pixels, then every state (hover, focus, disabled, loading, error, empty), long names, translated text and 200 percent zoom. Tab through with a keyboard and try a screen reader for labels and focus order. Log issues with a screenshot, expected versus actual and a severity, so must-fix bugs are separated from polish. Better still, review components in a tool such as Storybook as they are built, so problems are fixed once instead of on every screen.
Practice questions for November 2026
New every month3 questions from the UI/UX Design mock test, the way they appear in it. A new set comes on the 1st of every month. Pick your answer, then open it.
-
Which line length is generally comfortable for body text on a desktop screen?
- As wide as the screen allows
- About 10 to 20 characters per line
- About 45 to 75 characters per line
- About 120 to 150 characters per line
Show the answer
Answer: About 45 to 75 characters per line. Very long lines make it hard to find the start of the next line, and very short ones break reading rhythm. About 45 to 75 characters is the usual guide; WCAG AAA asks for no more than 80 for Latin text.
-
How do you make a checkbox toggle in a Figma prototype without linking a separate screen for each state?
- Duplicate every screen with the box ticked and link each pair of screens together
- Use Smart Animate between two components that have unrelated layer names
- Add a Scroll to action on the screen that points at the checkbox layer
- Add an On click, Change to interaction between its variants (interactive components)
Show the answer
Answer: Add an On click, Change to interaction between its variants (interactive components). Interactive components (from 2021) put prototype interactions on the variants themselves, so every instance toggles in every prototype. Duplicating screens works but grows the file quickly and is hard to maintain.
-
Developers ask whether the build must match Figma to the exact pixel. What is the senior answer?
- Yes, every pixel must match the Figma frame exactly, or the build is rejected at review
- Only the home page needs to match the design
- No, the design is only a suggestion and can be ignored
- Match tokens, components and behaviour; small rendering differences are acceptable
Show the answer
Answer: Match tokens, components and behaviour; small rendering differences are acceptable. Browsers and platforms render text and sizes slightly differently from Figma. What matters is that the right tokens, components, spacing scale and states are used. Pixel-hunting wastes time that edge cases need.
Ready to apply?
There are 418 open Design jobs on CoreHRx right now. Create a free profile once and apply with it.