# PX002B — Budget & Invitation Professional Design Critique Recovery **Professional Product Design Review | Experience Recovery | Cross-Module Refinement** --- # IMPORTANT This sprint replaces the previous PX001 and PX002 outputs. Do NOT assume previous refinement work is complete. Treat both modules as if they have never been reviewed. You are performing a completely fresh professional design review. --- # OBJECTIVE Review the Budget module and Invitation module exactly like a Lead Product Designer reviewing a product before public launch. This sprint is NOT primarily a coding task. This sprint is primarily a DESIGN REVIEW. Code changes are only allowed AFTER the complete design critique has been finished. --- # PROJECT CONTEXT Before reviewing anything, read: /assets/branding/ Required documents: - README.md - brand-colors.md - design-system.md - ai_guide.md These documents remain the single source of truth. --- # MODULES Review every implemented page inside: ## Budget - Dashboard - Budget Setup - Categories - Expenses - Expense Detail - Create Expense - Edit Expense - Payments - Settings ## Invitation - Dashboard - Editor - Design - Theme Gallery - Preview - Insights - Report - Related Invitation pages Review EVERY implemented page. --- # DESIGN REVIEW WORKFLOW The following workflow is MANDATORY. Do NOT skip phases. --- # PHASE 1 ## VISUAL INSPECTION Open every page. Do NOT modify code. Simply inspect. Observe: - composition - hierarchy - spacing - alignment - readability - proportions - density - visual rhythm - interaction flow --- # PHASE 2 ## PROFESSIONAL DESIGN CRITIQUE Still do NOT modify code. For EVERY page provide: ### Score Using: 10 = World-class SaaS Comparable to: - Stripe Dashboard - Linear - Notion - Vercel - Arc Browser - Framer 9 = Excellent Minor polish remains. 8 = Production Ready Several noticeable improvements remain. 7 = Good Needs UX refinement. 6 = Average Needs major refinement. Below 6 Needs redesign. --- For EVERY page provide: ### Strengths ### Weaknesses ### UX Problems ### Visual Problems ### Layout Problems ### Hierarchy Problems ### Whitespace Problems ### Interaction Problems ### Professional Recommendation Be critical. Never assume the page is already good. Every page should contain both strengths AND weaknesses. --- # STOP GATE You are NOT allowed to modify code before: ALL pages have been reviewed. If fewer than five weaknesses are identified across the entire module, continue reviewing. Do not proceed. --- # PHASE 3 ## IMPLEMENTATION Only now implement improvements. Prioritize improvements that significantly improve: - usability - composition - hierarchy - readability - visual comfort - premium perception Avoid cosmetic-only changes. Do NOT perform changes that have negligible UX impact. --- # IMPLEMENTATION PRINCIPLES When fixing an issue: Search for the same layout pattern. Apply improvements consistently across both modules. The platform is more important than sprint boundaries. --- # REVIEW AREAS Review: ## Overall Composition Does the page feel balanced? Does it feel intentional? Would users trust the product? --- ## Information Hierarchy Can users immediately identify: - page purpose - primary action - secondary action --- ## Layout Review: - widths - grids - columns - cards - proportions Avoid: - narrow forms - stretched layouts - oversized whitespace - cramped content --- ## Action Placement Review: - Save - Cancel - Preview - Publish - Delete - Back Buttons should: - never feel crowded - have proper hierarchy - remain visually balanced --- ## Cards Review: - padding - spacing - grouping - visual rhythm Cards should never feel compressed. --- ## Tables Review: - density - readability - filter placement - action placement - empty states --- ## Forms Review: - grouping - widths - helper text - section spacing - completion flow --- ## Dashboard Experience Review: - KPI hierarchy - breathing room - charts - summaries - visual balance --- ## Preview Experience Especially inside Invitation. The preview should become the visual highlight of the module. --- ## Micro UX Review: - badges - icons - chips - tabs - breadcrumbs - empty states - hover states - helper text --- # DESIGN MINDSET Assume you are NOT the engineer. Assume another team built this product. You are reviewing it before launch. Ask yourself: Would I approve this page? Would experienced users immediately trust this product? Would this page feel comfortable on a 27-inch monitor? Would this page be accepted during a professional product design review? If the answer is "No", improve it. --- # SCORING RULES Never increase a page score by more than: 0.8 unless ALL of the following improved: - composition - hierarchy - usability - interaction - layout Small CSS refinements MUST NOT generate large score increases. --- # CONSTRAINTS Do NOT: - redesign workflows - add features - modify business logic - modify controllers - modify models - modify routes - modify database Do NOT modify branding. Only improve: - layout - UX - composition - hierarchy - spacing - alignment - readability --- # DELIVERABLES ## 1. Initial Design Review For EVERY page provide: - Initial Score - Strengths - Weaknesses - Critical Findings - Recommendations --- ## 2. Improvements Implemented Explain: - what changed - why - expected UX improvement Focus on user impact rather than technical implementation. Instead of writing: "Changed max-w-6xl" Write: "Reduced excessive line length and improved reading comfort on large desktop displays." Describe the UX outcome, not just the code change. --- ## 3. Cross-Module Improvements Explain reusable improvements applied to both modules. --- ## 4. Final Review For EVERY page provide: Old Score ↓ New Score ↓ Remaining Minor Issues (if any) No page is required to reach 10/10. It is acceptable to leave small future improvements. --- ## 5. Files Modified List every modified file. --- ## 6. PHP Syntax Verification Run: php -l Verify every modified PHP file. --- ## 7. Final Approval Choose ONE: ✅ Budget & Invitation Approved for Production OR ⚠ Additional Refinement Recommended Explain your reasoning. --- # SUCCESS CRITERIA Budget and Invitation should: - Feel premium. - Feel elegant. - Feel comfortable. - Feel balanced. - Maintain excellent visual hierarchy. - Eliminate unnecessary visual density. - Improve desktop experience. - Improve perceived product quality. - Preserve all existing functionality. Treat this sprint as the final Product Design Review before platform-wide certification.