Interview Sample 1 — E‑commerce Homepage Refresh
Scenario A sustainable grocery brand’s homepage feels cluttered. Bounce rate is high on mobile. The interviewer asks about visual design fixes that also respect brand consistency.
Q1. How would you improve the hero section’s readability and focus?
Show possible responses (A/B/C)
A: Reduce noise around the hero by increasing headline size/weight, moving the CTA above the fold, and adding a soft overlay behind text to maintain contrast over photography. Keep brand greens for the primary button to preserve recognition.
B: Apply a 12‑column grid with 8px spacing tokens, align copy to a left column, and constrain hero text width to ~60–70ch. Use the approved brand type scale (H1 36/1.2, Body 16/1.5) for consistent rhythm.
C: Swap background photo for a cleaner crop that shows fresh produce with negative space. Introduce a mint (#E6F5EC) panel under the copy to maintain the palette and ensure ≥4.5:1 text contrast.
Strong answers use size, contrast, spacing, and alignment to create hierarchy, cite a type scale, and reference brand palette and contrast targets.
Q2. The site uses green (success) and red (error) as the only cues. What’s your fix?
Show possible responses (A/B/C)
A: Add redundant cues: icons (✔/⚠), labels, and patterns so status isn’t color‑only. Keep hues within the brand system to avoid drift.
B: For CTAs, keep primary green with white text (check 4.5:1) and use an outline style for secondary actions to reinforce hierarchy.
C: Define a state color scale (success, warning, error, info) with usage rules in the brand guidelines to keep consistency across teams.
Mentions WCAG color‑not‑alone, contrast, and brand governance are key.
Q3. Cards feel cramped. What layout fixes would you try first?
Show possible responses (A/B/C)
A: Increase internal padding using the 4/8px scale; ensure consistent h‑spacing between image, title, price, and CTA; set a max line length for titles.
B: Use a consistent baseline grid and equalize image aspect ratios to reduce jitter; align CTAs across rows.
C: Add white space around cards and standardize shadows/borders to the brand’s elevation tokens to avoid visual noise.
Good answers reference grids, spacing tokens, alignment, white space, and component consistency.
Interview Sample 2 — Fintech Analytics Dashboard
Scenario A fintech startup’s dashboard has dense tables and charts with weak contrast. PMs want faster scanning without breaking the brand.
Q1. How do you improve legibility of data tables against a mint background?
Show possible responses (A/B/C)
A: Move dense tables to a white surface; use “Ink” (#111) for text; reserve mint for section backgrounds. This keeps brand feel but raises contrast.
B: Increase cell padding and line height; left‑align text; right‑align numbers; add zebra striping with high‑enough contrast to guide the eye.
C: Use semantic hierarchy in table headers (bolder, slightly larger) and lock column widths to avoid jitter across refreshes.
Addresses contrast, alignment, spacing, and hierarchy while honoring the brand palette.
Q2. Chart colors don’t match brand or accessibility targets. What’s your approach?
Show possible responses (A/B/C)
A: Build a chart palette derived from brand greens plus neutrals; ensure line/label contrast; use shapes/patterns so meaning isn’t color‑only.
B: Define roles: primary data = Eco Green 900; baseline/targets = muted grey; alerts = warning color. Document in guidelines.
C: Provide dark‑mode equivalents and test legibility for color‑vision deficiencies with a simulator.
Looks for brand‑aligned palettes, contrast, redundant encoding, and documentation.
Q3. The dashboard uses three type families and six weights. What would you change?
Show possible responses (A/B/C)
A: Reduce to two families (headings/body) and limit weights (400/600/700). Apply a responsive type scale to keep rhythm across viewports.
B: Establish component typography tokens (card title, metric, caption) and refactor styles to the design system.
C: Audit font file sizes and set font-display: swap for performance without visual popping.
Seeks cohesion, performance, and systematization grounded in Course 1.1 typography.
Interview Sample 3 — Ed‑tech Brand Consistency Sprint
Scenario Marketing pages, the web app, and social posts all look slightly different. Your task: unify visuals without slowing teams down.
Q1. How do you fix brand drift across teams?
Show possible responses (A/B/C)
A: Create/update brand guidelines with logo usage, type scale, color roles, and accessibility rules. Add a living component library for dev/design parity.
B: Introduce “brand tokens” (color, spacing, radius, typography) consumed by Figma and code, so choices are enforced by default.
C: Add linting/checklists in PRs and design QA (contrast checks, heading order), and a visual regression suite for critical flows.
Great answers bridge brand guidelines with design‑system tokens and quality gates to keep consistency.
Q2. A new campaign wants a brighter green. How do you evaluate and integrate (or reject) it?
Show possible responses (A/B/C)
A: Test contrast (AA), check harmony with existing palette, and define usage scope (campaign‑only vs. core palette). Document in guidelines.
B: Provide semantic mapping: brighter green for highlights only; keep primary CTAs in Eco Green 900 to preserve recognition.
C: If it fails contrast or confuses affordances, propose alternatives (tint/shade) that meet both brand and accessibility goals.
Shows accessibility‑first thinking and brand recognition protection.
Q3. Social templates, letterheads, and cards look unrelated. What do you standardize?
Show possible responses (A/B/C)
A: Lock typography roles (H1, eyebrow, caption), set grid and safe areas, and enforce the logo’s clear‑space and minimum sizes.
B: Define a brand “system page” in Figma with reusable components and auto‑layout constraints for fast, consistent variants.
C: Package export presets (PDF/X for print, PNG 2× for social), and provide usage examples in the brand kit.
Focuses on roles, grids, spacing, logo rules, and repeatable assets.