Ideation and Sketching Questions

Rapidly generate and communicate multiple design concepts using low fidelity sketches, wireframes, and annotations. Emphasize clarity of thought rather than visual polish: show user flows, layout options, and interaction ideas through quick drawings and labeled notes. Produce several distinct approaches, evaluate the pros and cons of each, and explain the rationale for selecting the strongest direction. Demonstrate exploration, trade off analysis, and decision making by iterating quickly and exposing your design thinking throughout the process.

EasyTechnical

88 practiced

When presenting a low-fidelity sketch to stakeholders, what annotations and labels do you include to make intent, interaction, constraints, and assumptions clear to product and engineering? Provide an example list of annotation types you'd always add to a sketch.

HardTechnical

127 practiced

Sketch keyboard and screen-reader accessible interactions for a drag-and-drop Kanban column. Show keyboard focus order, alternative keyboard actions (move up/down), aria-live notifications for moves, and fallback interactions. Explain how you'd test accessibility before full implementation.

Sample Answer

**Approach summary**Design keyboard & screen‑reader accessible interactions for moving a Kanban column while preserving visual affordances and developer handoff notes.

**Focus order**- Tab sequence: Global toolbar → Board container → Column header (drag-handle) → Column menu (more) → Column content → Column footer (add card).- Visual focus: 2px high‑contrast ring; focus visible when keyboard used.

**Alternative keyboard actions**- When focus on column header (drag-handle): - Space / Enter: "pick up" column → set aria-grabbed="true" and move into "reorder mode". - ArrowLeft / ArrowRight (or Ctrl+Arrow) : move column left/right one position. - Ctrl+Shift+ArrowLeft/Right: move to start/end. - Escape: cancel reorder.- While picked up: Tab still cycles inside column but moving commands apply to picked column (announce positions).

**ARIA & live region**- Use aria-live="polite" region off-screen for announcements: - On pick up: "Column 'Roadmap' picked up. Use left and right arrows to move. Press Enter to drop." - On move: "Column 'Roadmap' moved to position 2 of 5." - On drop: "Column 'Roadmap' moved to position 2." - On cancel: "Move cancelled."

**Fallbacks**- Provide non-JS fallback: column reorder form in Column menu — "Move to position" with select and Submit.- For touch: long-press drag handles with visible lift animation.- For reduced-motion: simple reposition without animation.

**Testing plan (before implementation)**- Keyboard-only walkthrough: tab order, pick up, move, cancel, drop.- Screen-reader rounds: NVDA+Firefox, VoiceOver+Safari, TalkBack on Android; verify live region announcements and aria-grabbed/state changes.- Axe / WAVE automated checks and manual semantics audit (ensure roles: group/list/option or application based on complexity).- Usability testing with keyboard-only and screen-reader users; record time/errors and refine labels/phrasing.- Dev handoff: provide Figma specs, focus styles, aria snippets, and interaction prototype for dev to implement and QA.

MediumTechnical

92 practiced

Given a subscription cancellation flow, sketch the primary user path with annotations and identify at least five realistic edge cases (for example: payment issue, active trial, pending refunds, admin override, multi-account). Explain how your sketches handle or surface each edge case.

Sample Answer

**Primary user path (sketch + annotations)**

1. Landing: Account > Subscription page — shows plan card, next bill date, “Manage subscription” CTA. - Annotation: prominent plan summary, clear CTA, subtle risk color for cancellation action.

2. Manage > Cancel flow step 1: “Why are you leaving?” (choices + brief microcopy) - Annotation: use radio options to tailor messages; progress indicator (Step 1/3).

3. Step 2: Impact & alternatives — shows refund eligibility, prorated credit, feature end date, downgrade options, and “Pause” option. - Annotation: bold delivery date, microcopy: “You’ll keep access until [date].”

4. Step 3: Confirm & final CTA — confirm checkbox “I understand cancellation consequences”, primary “Confirm cancellation”, secondary “Contact support”. - Annotation: final summary, CTA disabled until checkbox checked.

5. Post-cancel: Confirmation screen + email with account reactivation one-click link (expires).

**Five edge cases & how sketches surface/handle them**

- Payment issue: Subscription in delinquent state. On Landing card show “Payment issue” badge + tooltip linking to billing modal. Cancel flow warns: “Unpaid invoices may affect refund eligibility” and links to pay now.- Active trial: Landing shows “In trial — X days left.” Cancel flow replaces prorated refund with “Cancel trial — access ends immediately or at trial end” toggle.- Pending refunds: If user has pending refund, Step 2 displays “Refund pending” badge and disables immediate refund option; microcopy explains timeline and support contact.- Admin override / SSO multi-admin: If account is managed, Manage page shows “Managed by [Org]” and “Request cancellation” button that sends request to admin; modal explains who can complete cancellation.- Multi-account / shared billing: If multiple seats/orgs on one payment method, Step 2 lists affected accounts, shows Caution banner, and requires explicit acknowledgment per account.

Each screen includes inline microcopy, badges, contextual help links, and error/toast patterns to surface these states clearly and reduce cognitive load.

MediumTechnical

80 practiced

Describe your handoff process when moving from sketches to interactive prototypes and then to engineering. List specific artifacts you deliver (annotated screens, component mapping, tokens, acceptance criteria), file organization conventions, and how you flag ambiguous interactions.

MediumTechnical

66 practiced

Sketch a 3-step sign-up and onboarding flow that reduces friction for new users while capturing minimal required data. Provide low-fidelity sketches for the key screens, annotate validation and error paths, and explain what microcopy you'd include to build trust and increase conversion.

Unlock Full Question Bank

Get access to hundreds of Ideation and Sketching interview questions and detailed answers.

Join thousands of developers preparing for their dream job.