abcnuts/brand-driven-ux-overhaul

Brand-Driven UX Overhaul

Systematic workflow for overhauling user experience driven by brand identity, user feedback, and design best practices.

When to Use This Skill

• User requests interface redesign or rebranding
• Navigation feels cluttered or confusing
• Application lacks visual identity or brand consistency
• Need to simplify complex user flows
• Combining multiple UX improvements into cohesive overhaul

Core Methodology: 4-Phase Workflow

Phase 1: Collaborative Brainstorming

Goal: Understand user vision, pain points, and brand identity through structured dialogue.

Process:

1. Ask clarifying questions one at a time (never multiple questions)
2. Offer 4-5 concrete options (not open-ended questions)
3. Use analogies to clarify direction ("Think Nike Training Club meets cutting-edge AI")
4. Request brand assets early (logo, colors, fonts)
5. Confirm understanding before moving to planning

Question Templates: See references/brainstorming-questions.md for comprehensive question library covering:

• Pain point identification
• Brand identity & emotional tone
• Navigation structure
• Simplification strategies
• Color scheme & visual identity
• Layout structure

Key Principles:

• One question at a time - Avoid overwhelming user
• Concrete options - Give specific choices, not "what do you want?"
• Clarify combinations - "Option B with some E" → Ask for proportions
• Gather assets - Logo, colors, fonts needed before implementation

---

Phase 2: Design System Foundation

Goal: Establish cohesive design system with colors, typography, spacing, and effects.

Checklist: See references/design-system-checklist.md for complete checklist covering:

• Color palette (background, foreground, primary, semantic colors)
• Typography (font families, loading strategy, type scale)
• Spacing system (base unit, scale, layout)
• Shadows & effects (card shadows, glow effects, backdrop blur)
• CSS variables implementation
• Accessibility requirements

Key Files to Create/Update:

• client/src/index.css - Global styles and CSS variables
• client/src/lib/design-tokens.ts - TypeScript color constants
• client/index.html - Font CDN links
• tailwind.config.js - Theme extensions

Example Design Tokens:

export const colors = {
  background: '#0a1628', // Navy
  foreground: '#ffffff', // White
  primary: '#00d4ff', // Electric blue
  card: '#1a2942', // Card background
};

---

Phase 3: Implementation Planning

Goal: Create detailed, step-by-step implementation plan with time estimates.

Template: Use templates/implementation-plan-template.md as starting point.

Plan Structure:

1. Overview - Design direction, key changes
2. Task Breakdown - 6-10 tasks, each 30-90 minutes
3. Steps - Break each task into 5-15 minute steps
4. Code Snippets - Include exact code for each step
5. Verification - How to test each step
6. Checklists - Before/during/after implementation

Task Sizing Guidelines:

• Simple tasks (30-45 min) - Single component, no dependencies
• Medium tasks (60-90 min) - Multiple components, some integration
• Complex tasks (90-120 min) - Major refactoring, cross-cutting changes

Conservative Approach:

• When refactoring complex pages, add new UI above/below existing UI first
• Test thoroughly before removing old UI
• Preserve all existing functionality
• Document rollback procedure

---

Phase 4: Systematic Execution

Goal: Execute plan task-by-task with verification at each step.

Workflow:

1. Create todo.md with all tasks listed as [ ] items
2. Execute Task 1, mark complete [x] in todo.md
3. Run TypeScript compilation to verify
4. Execute Task 2, mark complete, verify
5. Repeat until all tasks complete
6. Final verification: TypeScript, server restart, status check
7. Create checkpoint with detailed description

Verification After Each Task:

• TypeScript compiles without errors
• Dev server running (restart if needed)
• Browser shows expected changes
• No console errors

Final Verification:

• All items in todo.md marked [x]
• TypeScript: No errors
• Dev server: Running cleanly
• Browser: All pages load correctly
• Checkpoint created

---

Best Practices

Brainstorming

• One question at a time - User can focus on single decision
• Concrete options - Easier to choose than open-ended
• Use analogies - "Energetic + tech-forward = Nike Training Club meets AI"
• Request assets early - Logo, colors, fonts needed for implementation

Design System

• Start with colors - Foundation for all other decisions
• Use CSS variables - Enable theme switching, easier maintenance
• Document tokens - TypeScript file for type safety
• Test accessibility - Color contrast, keyboard navigation, screen readers

Implementation

• Conservative refactoring - Add new, test, remove old
• Update todo.md - Mark tasks complete immediately after finishing
• Verify frequently - TypeScript after each task, not at end
• Restart server - Clear stale errors before final checkpoint

Common Pitfalls

• Skipping brainstorming - Leads to misaligned design
• Too many questions at once - Overwhelms user
• No brand assets - Can't match exact branding
• Aggressive refactoring - Breaks existing functionality
• Forgetting todo.md - Lose track of progress

---

Example Workflow

Scenario: Sales training dashboard needs FLEXX FIBER rebrand + simplified navigation

Phase 1: Brainstorming (30 min)

• Q1: Primary pain point? → "Cluttered interface + generic look"
• Q2: Which pages cluttered? → "Multiple areas"
• Q3: Brand feeling? → "Energetic + tech-forward"
• Q4: Navigation approach? → "Bottom tab bar"
• Q5: Color scheme? → [User provides logo image]
• Extract colors from logo: Navy (#0a1628) + Electric blue (#00d4ff)

Phase 2: Design System (45 min)

• Define color palette (navy bg, electric blue primary)
• Choose font (Inter from Google Fonts)
• Create design tokens file
• Update index.css with CSS variables
• Add card glow utilities

Phase 3: Planning (30 min)

• Task 1: Design System Foundation (45 min)
• Task 2: Bottom Tab Navigation (60 min)
• Task 3: One-Tap Quick Start (90 min)
• Task 4: Timeline History View (90 min)
• Task 5: Brand Header Component (45 min)
• Task 6: Responsive Polish (30 min)
• Total: 6 hours

Phase 4: Execution (6 hours)

• Create todo.md with 6 tasks
• Execute Task 1 → Mark [x] → Verify TypeScript
• Execute Task 2 → Mark [x] → Verify TypeScript
• ... repeat for all tasks
• Final verification: All [x], TypeScript OK, server running
• Create checkpoint: "FLEXX FIBER UX Overhaul Complete"

---

Progressive Disclosure

When to load references:

• Load references/brainstorming-questions.md at start of Phase 1
• Load references/design-system-checklist.md at start of Phase 2
• Load templates/implementation-plan-template.md at start of Phase 3

Keep in context:

• Core 4-phase workflow (always)
• Current phase instructions (as needed)
• Relevant reference file (as needed)

---

Success Criteria

• [ ] User vision clearly understood through brainstorming
• [ ] Brand assets collected (logo, colors, fonts)
• [ ] Design system established with CSS variables
• [ ] Implementation plan created with detailed steps
• [ ] All tasks executed and marked complete in todo.md
• [ ] TypeScript compiles without errors
• [ ] Dev server running cleanly
• [ ] All pages load correctly in browser
• [ ] Checkpoint created with detailed description
• [ ] User satisfied with final result