What's New modal lab by Gagan Malik — design pattern for post-update feature announcements with a dismissible modal, pill-tab use-case menu, live preview cards, and contextual footer CTAs. Interactive demo based on Claude's update spotlight.
التصميم
What's new modal
بقلم جاجان مالك
1 دقيقة قراءة
Live Demo
What's New
Think it through
For big tasks or small ones, get help throughout your day.
Plan a day trip
London Docklands: A Day by the Thames
4 stops · 5 km · mostly walking
Morning
- 9:00 — Canary Wharf riverside walk
- 11:30 — Cutty Sark to Greenwich Market
Find new recipes
Traditional Greek tiganopsomo
Pan-fried bread with olive oil and herbs — crisp outside, soft within.
Servings4
Write a great email
Subject
Revised Timeline for Chimney Deliverable
Hi team, Could we move the Chimney deliverable to Friday 14 March? I need two extra days for QA on the checkout flow. Thanks, Alex
Live Demo — Mobile action sheet
What's New
Think it through
For big tasks or small ones, get help throughout your day.
Plan a day trip
London Docklands: A Day by the Thames
4 stops · 5 km · mostly walking
Morning
- 9:00 — Canary Wharf riverside walk
- 11:30 — Cutty Sark to Greenwich Market
Find new recipes
Traditional Greek tiganopsomo
Pan-fried bread with olive oil and herbs — crisp outside, soft within.
Servings4
Write a great email
Subject
Revised Timeline for Chimney Deliverable
Hi team, Could we move the Chimney deliverable to Friday 14 March? I need two extra days for QA on the checkout flow. Thanks, Alex
When to use
Show a What's new modal on first open after a meaningful software update — not on every patch, and not before users have context for why it matters. It replaces release-note walls with three concrete jobs the update unlocks (plan, create, refine). Works especially well for AI assistants and creative tools where value depends on the task, not a feature checklist.
Anatomy
New badge (ties the moment to the release) and dismiss control (respects agency — mark seen, don't nag). Headline in display serif; subheadline in muted sans sets scope. A fit-to-content pill tab menu switches example use cases — active tab gets a clear outline. Preview card swaps per tab with realistic sample output. Footer: primary CTA per tab, secondary "Do it later" to dismiss, tertiary "View release notes" for the changelog.
Accessibility
Use native tab semantics with arrow-key navigation between use cases. Announce tab changes to screen readers. Keep preview content readable at 200% zoom. Respect prefers-reduced-motion: cross-fade or instant swap instead of sliding carousels. Ensure dismiss and primary CTA meet 44×44pt touch targets.
Reference
The interactive demo recreates Anthropic's Claude update spotlight (tabbed trip, recipe, and email previews). Screenshots from that release are the reference — swap headline, examples, and CTAs for your product.
هل نعمل معاً؟
اطّلع على الخطط أو اسأل سؤالاً أو احجز مكالمة.
