UI/UX Design interview questions

UX (User Experience) and UI (User Interface) are closely related but address different aspects of product design. UX Design: - Focuses on the overall feel and flow of a product — how easy and enjoyable it is to use - Encompasses the entire user journey, from first discovery to task completion - Involves research, information architecture, user flows, wireframing, and usability testing - Goal: Ensure the product is useful, usable, and desirable - Tools: User interviews, journey maps, wireframes, prototypes, usability tests - Deliverables: Personas, user flows, wireframes, prototypes, research reports UI Design: - Focuses on the visual appearance and interactivity of specific screens - Covers layout, typography, color, iconography, spacing, and micro-interactions - Goal: Ensure the interface is visually appealing, consistent, and clearly communicates affordances - Tools: Figma, Sketch, Adobe XD - Deliverables: High-fidelity mockups, design systems, style guides, component libraries The relationship: - UX comes first: understand the user need and define the optimal flow before designing pixels - UI gives it life: once the UX is validated, UI design brings it to a polished visual standard Analogy: Designing a restaurant. - UX = the restaurant's overall layout, menu organization, seating arrangement, service flow — how easy it is to find a table, order, and enjoy the meal - UI = the aesthetic: lighting, furniture, menu design, color scheme, font choices A product can have beautiful UI and terrible UX (gorgeous but confusing) or great UX and mediocre UI (easy to use but ugly). The best products nail both.

The UX design process is iterative — it cycles through phases of research, design, and validation rather than following a rigid linear path. Double Diamond framework (Design Council): Phase 1: Discover (diverge) → Phase 2: Define (converge) → Phase 3: Develop (diverge) → Phase 4: Deliver (converge) Practical step-by-step process: 1. Research (Discover) - Understand users: who are they, what do they need, what are their pain points? - Methods: user interviews, surveys, contextual inquiry, analytics review, competitive analysis - Output: Research findings, affinity maps, user quotes 2. Define - Synthesize research into clear problem statements and insights - Create personas: archetypes of key user types with goals, pain points, contexts - Write "How Might We" (HMW) questions to frame the design challenge - Map the current user journey to identify friction points - Output: Problem statement, personas, user journey map, HMW statements 3. Ideate - Generate as many solution ideas as possible (quantity over quality first) - Techniques: sketching, Crazy 8s (8 ideas in 8 minutes), brainstorming, design studio - Review ideas against user needs; select 2-3 concepts to prototype - Output: Concept sketches, information architecture, user flows 4. Prototype - Build testable representations of the solution - Start low-fidelity (paper/whiteboard sketches) → mid-fidelity (wireframes) → high-fidelity (Figma mockups) - Only build what you need to test the critical assumptions - Output: Wireframes, interactive prototypes 5. Test (Validate) - Put the prototype in front of real users; observe and listen - Usability testing: "Think aloud" as users complete specific tasks - Look for: confusion, errors, drop-offs, frustration, delight - Output: Usability test report, list of issues with severity ratings 6. Iterate - Fix critical issues; run another test cycle if needed - The process is never truly "done" — post-launch, analytics and ongoing research feed the next cycle

Figma is the industry-leading browser-based design tool used for UI/UX design, prototyping, and design system management. It has largely replaced Sketch and Adobe XD. Why Figma is dominant: - Real-time collaboration: multiple designers (and developers) work in the same file simultaneously - Browser-based: no installation; works on any OS - Components and variants: reusable design elements; change once, update everywhere - Prototyping: link frames to simulate user flows without a separate tool - Developer handoff: developers inspect designs for exact specs (padding, font size, colors, CSS) in the same tool Core Figma concepts: Frames and Layouts: - Frames are artboards representing screens - Auto Layout: flexible containers that resize based on content (like CSS Flexbox) Components and Variants: - Components: reusable UI elements (Button, Input, Card) - Variants: multiple states of a component (Button: Primary/Secondary/Disabled; Input: Default/Focus/Error) - Instance overrides: change text or icons in a component instance without breaking the master Styles: - Text styles: define and reuse font families, sizes, weights - Color styles: define brand palette; change one style and update the whole file - Effect styles: shadows, blurs Prototyping: - Add click interactions between frames (Frame A → click button → navigate to Frame B) - Simulate animations, overlays, and hover states - Share a prototype link for user testing without handing over editable files Design Handoff: - Developers switch to Dev Mode to inspect every layer for spacing, typography, colors, and assets - Automatically generated CSS, Android, or iOS code snippets FigJam: Figma's whiteboard tool for brainstorming, user journey mapping, and workshops

Usability heuristics are general principles for interaction design — rules of thumb used to evaluate whether a UI design is usable, even without formal user testing. Jakob Nielsen's 10 Usability Heuristics: 1. Visibility of System Status - Keep users informed about what's happening through timely feedback - Examples: loading spinners, progress bars, "Saving..." indicators, notification badges 2. Match Between System and the Real World - Use familiar words, concepts, and metaphors (not system-oriented jargon) - Examples: Trash/Recycle Bin icon, shopping cart, folder icons 3. User Control and Freedom - Support undo and redo; provide clear exits from unwanted states - Examples: "Undo" action, "Cancel" button on forms, browser back button support 4. Consistency and Standards - Follow platform conventions; don't surprise users with different interactions for similar things - Examples: Submit button on the right, red for errors, blue for links 5. Error Prevention - Design to prevent errors before they happen - Examples: "Are you sure?" confirm dialog, form validation before submit, disable unavailable options 6. Recognition Rather Than Recall - Minimize user memory load; show options rather than requiring users to remember them - Examples: Autocomplete, recently visited items, visible navigation menus 7. Flexibility and Efficiency of Use - Support both novice and expert users; allow shortcuts - Examples: Keyboard shortcuts, default values, saved searches, macros 8. Aesthetic and Minimalist Design - Don't include irrelevant information; every element competes for attention - Example: Remove decorative elements that don't serve the user's goals 9. Help Users Recognize, Diagnose, and Recover from Errors - Error messages in plain language; indicate the problem; suggest a solution - Examples: "Email not found. Check your spelling or create a new account." (not just "Error 404") 10. Help and Documentation - Easy to find, search-oriented, focused on the user's task - Examples: Contextual help tooltips, searchable FAQ, onboarding guides

A user persona is a semi-fictional character representing a key segment of your target users — created from real research to help the team make user-centered design decisions. Why personas matter: - Prevents "designing for yourself" — teams naturally default to their own preferences - Creates empathy for users across the entire team (engineering, PM, design) - Provides a concrete reference for design decisions: "Would [Priya] understand this label?" What a persona includes: - Name and photo: Makes them feel like a real person (not abstract) - Demographics: Age, location, job title, experience level - Background: How they discovered the product, their context of use - Goals: What they're trying to accomplish (primary and secondary) - Pain points / frustrations: What makes their current experience difficult - Behaviors: How they currently solve the problem, what tools they use - Motivations: What drives their decisions - Quote: A representative statement from your research that captures their voice How to create personas: 1. Conduct user research first - Interviews (5-10 users per segment), surveys, behavioral analytics - Never base personas on assumptions or stereotypes 2. Identify patterns - After interviews, cluster users with similar goals, behaviors, and pain points - These clusters become your persona archetypes 3. Build 2-4 personas (not more) - Too many personas = nobody focuses on anyone - Prioritize the personas you're designing for primarily 4. Validate and share - Get feedback from the broader team - Post personas visibly in the design space (physical or virtual) - Reference them in design critiques: "What would Maya think of this flow?" Persona types: - Proto-personas: Created quickly without research (useful for early ideation; replace with research-backed personas as soon as possible) - Research-based personas: Created from real user data (authoritative, reliable)

A user journey map is a visualization of the steps a user takes to accomplish a specific goal with your product — showing touchpoints, actions, emotions, and pain points along the way. Purpose: - Builds empathy across the team by showing the full experience, not just isolated screens - Reveals friction points and gaps in the experience - Identifies opportunities for design improvement Components of a journey map: 1. Persona: Which user type is this map for? 2. Scenario / Goal: What specific task or objective are they trying to accomplish? 3. Stages (phases of the journey): E.g., Awareness → Consideration → Onboarding → Active Use → Support → Renewal 4. User Actions: What the user does at each stage 5. Thoughts: What the user is thinking (based on research) 6. Emotions: How they're feeling at each step (often shown as a curve — high/low) 7. Touchpoints: Which channels or interfaces they interact with (app, email, phone, web) 8. Pain Points: Where they experience frustration, confusion, or friction 9. Opportunities: Design improvements that could address the pain points Types of journey maps: Current State (As-Is): - Maps the experience as it exists today - Identifies pain points to fix Future State (To-Be): - Maps the ideal experience you're designing toward - Used to align the team on the vision Service Blueprint: - Extended version that also shows back-end processes and systems that support the user experience How to create one: 1. Start with a specific persona and scenario 2. Collect data from user research (interviews, session recordings, support tickets) 3. Map the stages and actions collaboratively (workshop with team using FigJam or Miro) 4. Add emotions and pain points based on actual user quotes 5. Identify top 3-5 pain points as design opportunities

Wireframe, mockup, and prototype represent three fidelity levels in the design process — each serving a different purpose. Wireframe: - Low-fidelity skeletal layout of a screen - Shows: structure, layout, content hierarchy, navigation — not visual design - Uses: grayscale, placeholder text ("Lorem Ipsum"), generic icons (boxes for images) - Created with: pen/paper, Balsamiq, Figma (with low-fi components), draw.io - Purpose: Quickly explore and validate layout and content structure before investing in design - When: Early in the design process; ideating multiple layout options; communicating structure to stakeholders Mockup: - High-fidelity static visual representation - Shows: final visual design — actual colors, typography, images, icons, spacing - NOT interactive — it's a picture, not a clickable prototype - Created with: Figma, Sketch, Adobe XD - Purpose: Communicate the final visual design to stakeholders for review and approval - When: After layout is validated by wireframe; before prototyping Prototype: - Interactive, clickable simulation of the product - Shows: user flows, transitions, interactions — how the product behaves - Can be low-fi (linked wireframes) or high-fi (linked mockups with animations) - Created with: Figma (prototyping mode), InVision, Principle, Framer - Purpose: Test usability with real users; simulate the user experience without code - When: Before development; when you need to validate a user flow or interaction pattern The design progression: Sketches → Wireframes → Mockups → Prototype → User Testing → Iteration → Development Fidelity summary: | | Wireframe | Mockup | Prototype | |---|---|---|---| | Visual fidelity | Low | High | Varies | | Interactivity | None | None | Yes | | Speed to create | Fast | Slow | Moderate | | Used for | Structure | Visual design | Testing flows |

Usability testing is the process of observing real users attempt to complete specific tasks with a product (or prototype) to identify usability problems before launch. Why usability testing? - "You are not your user." Assumptions about what's intuitive are almost always wrong. - It's much cheaper to fix usability problems in a prototype than in production code - The data is irrefutable: watching a real user struggle is more convincing than any opinion How many users to test? - Jacob Nielsen's research: 5 users find 85% of usability issues - Run 5 sessions → fix issues → run another 5 sessions (find new issues revealed after fixes) Types of usability testing: 1. Moderated (most common for qualitative insights) - Researcher facilitates in real time; can ask follow-up questions - In-person or remote (via Zoom + screen share) - Provides rich qualitative data 2. Unmoderated (scalable, remote) - Participants complete tasks independently; their screen and audio are recorded - Tools: Maze, Lookback, UserTesting.com - Faster and cheaper; less depth 3. Guerrilla testing - Quick informal testing with anyone available (coffee shop, colleagues not on the team) - Very fast; useful for early-stage testing Conducting a usability test: 1. Define tasks - Write 3-5 realistic task scenarios: "You want to book a hotel in Mumbai for next weekend. Please go ahead and do that." - Tasks must be realistic and not hint at the answer 2. Set up the session - Screen recording + audio (or screen share + Zoom recording) - Brief the participant: "We're testing the design, not you. There are no wrong answers." 3. Think aloud protocol - Ask participants to speak their thoughts as they work: "What are you thinking right now?" - Don't help; observe silently even when they struggle (the struggle is the data) 4. Take notes - Note: confusion moments, errors, unexpected navigation, positive reactions - Timestamp interesting moments 5. Analyze and prioritize findings - Categorize issues by severity: critical (blocks task completion), moderate (causes confusion), minor (small friction) - Fix critical issues first; validate in the next round

Information Architecture (IA) is the practice of organizing, structuring, and labeling content in a way that supports findability and usability — helping users find what they need intuitively. Core IA components: 1. Organization systems - How content is grouped and categorized - E.g., Alphabetical, by topic, by audience, by task, chronological 2. Labeling systems - The words used for navigation, headings, and categories - Bad labels confuse users ("Resources" vs. "Help Center" vs. "Support") - Good labels match users' mental models, not internal organizational structures 3. Navigation systems - Global navigation: persistent menu available everywhere - Local navigation: section-specific navigation - Contextual navigation: related links within content - Breadcrumbs: "Home > Products > Electronics > Laptops" 4. Search systems - When navigation fails, search must succeed - Autocomplete, filters, search suggestions, zero-results handling Why IA matters: - Users will abandon a product if they can't find what they need — poor IA is invisible until it fails - "Navigation is not a feature" — good IA means users never have to think about navigation IA research methods: Card Sorting (for organizing content): - Give users cards with content labels; ask them to group the cards into categories that make sense to them - Open card sort: users create their own categories (reveals mental models) - Closed card sort: users sort into predefined categories (validates existing IA) Tree Testing (for validating navigation): - Give users tasks: "Find the return policy." They click through a text-only version of the navigation tree - Reveals where users get lost without the distraction of visual design Tools: Optimal Workshop (card sorting + tree testing), Figma (IA diagrams), Miro

A design system is a collection of reusable components, design tokens, guidelines, and documentation that enables teams to build consistent, high-quality products efficiently. It's the "single source of truth" for how a product looks and behaves — used by both designers (Figma) and developers (code). What a design system contains: 1. Design Tokens - The smallest design decisions stored as variables: colors, typography, spacing, border radius, shadows - Examples: --color-primary: #00D4C8; --spacing-4: 16px; --font-size-body: 16px - Tokens connect design (Figma styles) to code (CSS variables, design tokens JSON) 2. Component Library - Reusable UI components: Button, Input, Card, Modal, Toast, Dropdown, Table, Navigation - Each component has: - Anatomy: labeled parts and their purposes - Variants: Primary/Secondary/Tertiary; Large/Medium/Small; Enabled/Disabled/Loading - Usage guidelines: when to use this component; when NOT to - Accessibility requirements: ARIA labels, keyboard behavior, focus management 3. Foundations / Guidelines - Color palette and usage rules (brand colors, semantic colors: success/error/warning/info) - Typography scale (H1-H6, body, caption, label sizes and weights) - Grid and spacing system (8px base grid) - Icon library - Motion/animation principles - Accessibility standards 4. Pattern library - Repeated UX patterns: empty states, error states, loading states, forms, onboarding flows - Guidance on solving common UX problems consistently Why design systems matter: - Consistency: every screen follows the same visual language - Efficiency: designers don't redesign the same button 50 times - Scalability: new team members can contribute without learning everything from scratch - Designer-developer alignment: Figma components map directly to code components Famous design systems: Google Material Design, Apple Human Interface Guidelines, Atlassian Design System, Airbnb DLS

Accessibility (a11y) in design means creating products that can be used by everyone — including people with visual, auditory, motor, or cognitive disabilities. Why it matters: - 15% of the world's population lives with some form of disability (WHO) - In many countries, accessibility is a legal requirement (ADA in USA, RPWD Act in India) - Accessible design benefits everyone: captions help in noisy environments; keyboard navigation helps power users WCAG (Web Content Accessibility Guidelines): Published by W3C; the global standard for web accessibility. 4 POUR Principles: 1. Perceivable - Information must be presentable in ways users can perceive - Alt text for images (screen readers read it aloud) - Captions for videos - Sufficient color contrast between text and background 2. Operable - All functionality must be accessible via keyboard (not just mouse) - No content that flashes more than 3 times per second (seizure risk) - Enough time to complete tasks (no forced auto-timeouts) 3. Understandable - Text is readable; language is clear - Behavior is predictable (navigation consistent across pages) - Error messages are clear and suggest corrections 4. Robust - Content is interpreted reliably by assistive technologies (screen readers) - Valid, semantic HTML; proper ARIA labels WCAG Conformance Levels: - Level A: Minimum requirements (most critical; must fix) - Level AA: Standard; recommended for most websites and apps - Level AAA: Highest level; not always achievable for all content Key accessibility checks designers should know: - Color contrast ratio: 4.5:1 for normal text (AA), 3:1 for large text - Touch target size: Minimum 44×44px (iOS) / 48×48dp (Android) - Focus indicators: Visible keyboard focus state on all interactive elements - Text resize: UI should work at 200% text zoom - Screen reader testing: VoiceOver (Mac/iOS), TalkBack (Android), NVDA (Windows)

Gestalt principles describe how the human visual system perceives and organizes visual elements. Understanding them helps designers create layouts that feel natural and intuitive. Key Gestalt principles in UI design: 1. Proximity - Elements close to each other are perceived as related - Application: Group form labels near their inputs; keep related actions near each other; use spacing to separate unrelated content 2. Similarity - Elements that look alike are perceived as belonging together - Application: Make all primary buttons the same color/style; use consistent icon style for related functions; visual consistency communicates relationship 3. Closure - The mind fills in gaps to perceive a complete shape even when part is missing - Application: Partially visible cards suggest more content below the fold; off-screen carousels hint that swiping reveals more 4. Continuity - The eye follows smooth paths rather than abrupt changes in direction - Application: Align elements to create visual flow; avoid jagged or inconsistent layouts; use consistent grid alignment 5. Figure and Ground - Elements are perceived as either foreground (figure) or background (ground) - Application: Modals use a darkened overlay to push background content to ground; cards with elevation (shadow) appear in the foreground 6. Common Fate - Elements moving in the same direction are perceived as related - Application: Animating related items together (e.g., a card expanding and its children moving in sync) 7. Symmetry and Order - The mind prefers symmetrical, ordered compositions - Application: Balanced layouts feel more professional; asymmetry can be used deliberately to draw attention Practical example: A settings page groups related settings together (Proximity + Similarity), uses clear section headers (Figure/Ground), and aligns controls consistently (Continuity). Users scan it quickly because their brain effortlessly groups the information.