216 lines
7.5 KiB
Markdown
216 lines
7.5 KiB
Markdown
# Inspiration Analysis Workshop (Product Brief)
|
|
|
|
**When to load:** After Visual Direction, as final Product Brief companion document
|
|
**Agent:** Saga or Freya
|
|
|
|
---
|
|
|
|
## Why This Matters
|
|
|
|
Without documented visual/UX preferences from real examples, Dream Up agents must guess what the client likes. This causes:
|
|
|
|
- **Wasted iterations** where client says "not that style" after seeing output
|
|
- **Abstract feedback** ("make it more modern") that's impossible to action precisely
|
|
- **Misalignment** between what the agent generates and what the client envisioned
|
|
- **Lost time** in later phases correcting direction that could have been captured early
|
|
|
|
**The power of this document:** When a client says "I like that layout" pointing at a real site, you now have a concrete, documented reference. Not abstract words — a real example with specific elements they approved or rejected.
|
|
|
|
**For Dream Up quality:** Every future generation can self-review against documented preferences. "Did I follow the layout principle from Site 1 that the client liked? Did I avoid the pattern from Site 2 they rejected?"
|
|
|
|
---
|
|
|
|
## What We Need to Know
|
|
|
|
**Satisfaction criteria — by the end you should have:**
|
|
|
|
1. **Documented reactions to real sites** — specific elements liked/disliked with WHY
|
|
2. **Visual style preferences** — from concrete examples, not abstract descriptions
|
|
3. **Layout and structure patterns** — what arrangements appeal to the client
|
|
4. **UX patterns** — what interaction patterns they prefer
|
|
5. **Anti-patterns** — what they've explicitly rejected (with examples)
|
|
6. **Synthesized design principles** — strategic takeaways that guide all future design
|
|
|
|
**Quality bar:**
|
|
- At least 2 sites analyzed (more if client provides them)
|
|
- For each site: specific elements with client's reaction (not vague overall impression)
|
|
- Synthesized principles clear enough for a Dream Up agent to self-review against
|
|
- Client confirms: "Yes, this captures what I'm looking for"
|
|
|
|
---
|
|
|
|
## The Process
|
|
|
|
### Getting URLs
|
|
|
|
Ask the client for 2-4 sites they find inspiring. These could be:
|
|
- Sites with layout/structure they like
|
|
- Competitor sites (to learn what works and doesn't)
|
|
- Sites with visual style they admire
|
|
- Sites with UX patterns they want to adopt
|
|
|
|
**If client is hesitant:** Even one site with one thing they like is valuable. Don't require perfection — any concrete reference beats abstract descriptions.
|
|
|
|
**If client has no references:** Offer to find 2-3 examples in their industry. Show them and ask for reactions.
|
|
|
|
### Analyzing Each Site
|
|
|
|
**Step 1: Load the site** — use browser/WebFetch tools to see what the client sees.
|
|
|
|
**Step 2: Ask open first** — "What drew you to this site?" / "What do you like about it?" Let the client lead.
|
|
|
|
**Step 3: Get specific** — naturally ask about elements you can see on the site. Don't use a checklist. Ask about what's actually there:
|
|
- Their layout approach
|
|
- How they handle navigation
|
|
- How content is displayed
|
|
- Visual style and imagery
|
|
- Specific elements (maps, forms, testimonials, etc.)
|
|
- Performance and load feel
|
|
|
|
**Step 4: Capture nuance** — listen for:
|
|
- Approval ("like that") — document what specifically and why
|
|
- Rejection ("don't like that") — document what and why not
|
|
- Conditional ("like but...") — document the adaptation needed
|
|
- The WHY behind each reaction is more valuable than the reaction itself
|
|
|
|
**Step 5: Extract principles** — as patterns emerge across sites, identify strategic takeaways. Test your understanding: "I'm noticing you prefer X — is that fair?"
|
|
|
|
### Synthesizing
|
|
|
|
After all sites are analyzed, organize findings into design principles by category:
|
|
- Layout patterns (to use / to avoid)
|
|
- Content hierarchy (priorities / anti-patterns)
|
|
- Visual style (direction / what to avoid)
|
|
- UX patterns (interactions / anti-patterns)
|
|
|
|
**Confirm with client:** "Based on what you liked and didn't like, here's what I'm taking away. Does this capture your vision?"
|
|
|
|
---
|
|
|
|
## Types of Information to Surface
|
|
|
|
**Layout and structure:**
|
|
- Single-page vs multi-page preference
|
|
- Section organization and flow
|
|
- Content density (busy vs minimal)
|
|
- White space usage
|
|
|
|
**Navigation and UX:**
|
|
- Menu style (simple vs complex)
|
|
- How key actions are accessed (contact, booking, etc.)
|
|
- Mobile behavior
|
|
- Scroll behavior
|
|
|
|
**Visual style:**
|
|
- Color palette impression
|
|
- Typography feel (modern, classic, etc.)
|
|
- Photo style (real vs stock, dark vs light)
|
|
- Overall aesthetic (minimal, rich, corporate, casual)
|
|
|
|
**Content display:**
|
|
- How services/features are shown (grid, list, cards)
|
|
- Testimonial/review presentation
|
|
- How contact info is displayed
|
|
- Map and location presentation
|
|
|
|
**Performance and feel:**
|
|
- Loading speed impression
|
|
- Animation and movement
|
|
- Overall "feel" (fast, heavy, smooth, clunky)
|
|
|
|
---
|
|
|
|
## What to Document
|
|
|
|
Create `inspiration-analysis.md` in the Product Brief output folder.
|
|
|
|
**For each site:**
|
|
```markdown
|
|
## Site: [Name or URL]
|
|
|
|
### What Client Liked
|
|
- [Specific element] — [Why it works for them]
|
|
- [Specific element] — [Why it works]
|
|
|
|
### What Client Didn't Like
|
|
- [Specific element] — [Why it doesn't work]
|
|
|
|
### Adaptations Needed
|
|
- [Element] — [Like the concept but needs modification because...]
|
|
|
|
### Principles Extracted
|
|
- [Strategic takeaway from this site]
|
|
```
|
|
|
|
**Synthesis:**
|
|
```markdown
|
|
## Design Principles (from all sites)
|
|
|
|
### Layout
|
|
- DO: [Patterns to follow]
|
|
- DON'T: [Patterns to avoid]
|
|
|
|
### Content Hierarchy
|
|
- DO: [How to prioritize]
|
|
- DON'T: [What not to do]
|
|
|
|
### Visual Style
|
|
- DO: [Visual direction]
|
|
- DON'T: [What to avoid]
|
|
|
|
### User Experience
|
|
- DO: [UX patterns to adopt]
|
|
- DON'T: [Anti-patterns]
|
|
```
|
|
|
|
**Usage note at the end:**
|
|
```markdown
|
|
## How to Use This Document
|
|
|
|
**For Scenario Outlining (Phase 4):**
|
|
Reference layout patterns when designing user flows
|
|
|
|
**For Page Design (Phase 5):**
|
|
Use extracted principles as design checklist.
|
|
Reference "What Client Liked" for visual direction.
|
|
Avoid "What Client Didn't Like" patterns.
|
|
|
|
**For Dream Up self-review:**
|
|
Check generated output against documented preferences.
|
|
```
|
|
|
|
---
|
|
|
|
## Red Flags
|
|
|
|
**"I like everything about it"** → Nothing is perfect. Probe: "Even if we could copy it exactly, what would you adjust for your business?"
|
|
|
|
**"I hate everything"** → Something drew them to share it. Ask: "What made you think of this site initially?"
|
|
|
|
**Contradictory preferences** → Different contexts may drive different preferences. Explore: "These sites have very different approaches — what draws you to each?"
|
|
|
|
**Overly technical feedback** ("Great CSS grid implementation") → Redirect to user value: "What does that achieve for visitors that you like?"
|
|
|
|
**Brand name dropping** ("Make it like Apple") → Probe specifics: "What specifically about Apple's approach appeals to you? The minimalism? The product focus? The typography?"
|
|
|
|
---
|
|
|
|
## Success Criteria
|
|
|
|
**You've succeeded when:**
|
|
- Client has reacted to specific visual/UX elements from real examples
|
|
- Preferences are documented with concrete references (not abstract words)
|
|
- Design principles are clear and actionable
|
|
- Anti-patterns are explicitly documented
|
|
- Client confirms the synthesis captures their vision
|
|
|
|
**Dream Up agents can now:**
|
|
- Reference documented preferences during generation
|
|
- Self-review against specific approved examples
|
|
- Avoid patterns the client explicitly rejected
|
|
- Design with confidence they're aligned
|
|
|
|
---
|
|
|
|
*Concrete examples beat abstract descriptions every time. This document turns "make it modern" into "like Site A's single-page layout with fixed contact header, but simpler than Site B's cluttered services grid."*
|