Intermediate everything in Design & UX, page 19
Voice and Tone: One Voice, Many Moods
Voice is your product's personality; tone is its mood in the moment. Guidelines keep every button and error message from feeling written by different teams. The footgun is documenting voice but skipping tone, so a cheerful brand still sends terrifying alerts.
Component Usage Guidelines as Guardrails
Usage guidelines are guardrails, not the component itself. They tell engineers when to pick primary versus secondary buttons, or when a modal becomes a page. Without them, teams reinvent one component for different contexts, fragmenting the system.
Page Templates: The Floor Plan for UI
Page templates are the floor plan, not the furniture: fixed zones where components slot in. Use them for recurring screens like dashboards so teams stop rebuilding skeletons. The footgun is treating them as giant components, forcing brittle overrides later.
Dashboard Layouts: Information Architecture, Not Just Grids
A dashboard layout is an information hierarchy, not grid; it controls what users see in first three seconds. Use it for monitoring and admin panels where users scan for anomalies. Biggest mistake is filling every pixel with widgets, destroying glanceability.
Card Pattern: Self-Contained Content Objects
A card groups related info into a bounded, scannable object you can rearrange like playing cards. Use it for dashboards, product grids, or feeds where items need equal visual weight.
Elevation System: Height as a Token
Elevation is spatial height, not just shadows: it maps every surface to a specific z-height. Use it for modals, dropdowns, and draggable cards. The footgun is tuning shadows without locking z-index, so visually higher elements still get buried.
Motion Tokens Turn Timing into a System
Motion tokens standardize animation like color tokens standardize palettes. A team can retime an entire product from one file. The footgun is naming tokens after CSS curves instead of intent, locking implementation details into your design language.
Seven-Figure Copywriter Ditches Eloquence for Customer Research
Seven-figure copywriter Tim Stoddart says clarity beats eloquence. Mine customer pain points from sales calls and Reddit, then mirror that language in copy. Engineers should swap jargon for verified customer vocabulary to increase conversion.
How would you enforce WCAG 2.1 AA compliance across CI/CD?
Layer axe-core in unit tests, Playwright Axe in CI, visual regression for focus states, and gate deploys on severity.
How do you fulfill a GDPR erasure request across microservices?
Log the request, emit a durable erasure event, let each service delete or anonymize locally, then reconcile.
How would you handle a DMCA takedown notice for image uploads?
Tests forensic logging and compliance workflow. A strong answer covers immutable upload hashes, content-addressable storage, a legal-hold workflow, and counter-notice handling. Red flag: suggesting hard deletion without preserving evidence or due process.
Build a reusable A/B framework and its copy API
Propose a declarative hook with experiment key, fallback, and variants; handle bucketing, anti-flicker, and logging.
How does scriptwriting differ for live webinars versus pre-recorded tutorials?
Live uses modular chunks and 20-30% Q&A padding; recorded uses tight arcs and cuts to one concept per 2-3 minutes.
Structure a 5-minute video script demonstrating a new API endpoint
Tests your ability to sequence technical information for developers with limited attention. Strong outline: 60s problem hook, 90s live request demo, 60s auth and errors, 30s next steps. Red flag: opening with PRD specs before a working call.
Your button breaks in German: what CSS and API strategies fix it?
Tests i18n resilience. Strong answers pair CSS tactics like text-wrap, min-width, and container queries with API levers such as truncation flags, max-length props, or adaptive icon slots. Red flag: telling translators to shorten text or hardcoding widths.
Design an automated 3-email onboarding sequence with early exit
Tests distributed state management and reliable delayed execution. A good design uses an idempotent state field, scheduled jobs with at-least-once delivery, and an event handler to suppress sends on conversion.
What client-side and server-side validations belong on a campaign sign-up form?
This tests defense in depth and UX trade-offs. A strong answer maps validations to layers: regex and immediate feedback client-side, strict schema and rate limiting server-side, plus duplicate checks. Red flag: claiming client-side validation is sufficient.
How does A/B testing native mobile apps differ from web?
Native mobile constraints versus web deployment. A strong answer covers: app store cycles forcing remote flags; device fragmentation skewing segments; and offline usage delaying events.
How to structure translation keys for dynamic localized strings
Tests ICU MessageFormat and safe interpolation. Outline: one key per sentence with named placeholders; sanitize variables pre-format; use pattern-level plural and select. Red flag: concatenating fragments or injecting raw user input into templates.
Propose a strategy to migrate fragmented docs into a unified docs-as-code system
Inventory sources; choose SSG by team fit; automate extraction; phased rollout with redirects.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles