Prompt

Create a new tab with an illustrated black and white storyboard of the this scenario

Screen 1 — The Friction (Problem State)
Title: “Too Many Choices” Scene
Description: Linda is browsing travel credit cards. She sees multiple cards listed with dense reward structures, APR details, and promotional language. The information feels overwhelming and not clearly relevant to her family’s needs.
On-Screen UI Elements: Long list of travel cards Dense comparison table Small-print rewards language No personalization cues
User Emotion: 😕 Overwhelmed, unsure where to start Pain Point: Cognitive overload + lack of family-focused guidance

Screen 2 — Guided Personalization (Intervention)
Title: “Tell Us About Your Travel Style” Scene
Description: Linda is prompted with a short, friendly questionnaire: Do you travel with family? Preferred airlines? Average annual travel spend? Priority: Points, cash back, or perks? The interface is clean, minimal, and reassuring.
On-Screen UI Elements: 4–5 simple multiple-choice questions Progress indicator (Step 1 of 3) “See My Matches” CTA
User Emotion: 🙂 Supported, understood Opportunity: Reduce decision friction through contextual filtering

Screen 3 — Clear Recommendation (Resolution)
Title: “Your Best Travel Match” Scene
Description: Linda sees 2–3 recommended cards tailored to her profile. Each card highlights: Estimated yearly rewards value Family-friendly perks Key differentiators “Why this is a match for you” Comparison is simplified to the most relevant variables.
On-Screen UI Elements: Personalized badge: “Best for Family Travel” Side-by-side comparison of 3 core benefits Estimated rewards calculator preview Primary CTA: “Apply Now” / “Save for Later”
User Emotion: 😌 Confident and clear Outcome: Reduced comparison fatigue → Higher task completion

Prompt

Created a new "Sketch" tab featuring a detailed black and white wireframe illustration of the credit card comparison interface. The sketch shows all three cards with their complete details including search bar, checkboxes, rewards information, fees, APR, bonus points, and action buttons. Below the sketch is a design notes section that explains the layout structure, interactive elements, information hierarchy, and visual style choices.

Prompt

Updated the layout to display the credit cards side-by-side in a responsive grid. The cards will show 3 columns on large screens, 2 columns on medium screens, and stack vertically on mobile devices for optimal viewing across all device sizes.