AI Skill Report Card
Designing UI/UX Interfaces
UI/UX Pro Max Design Skill
Quick Start15 / 15
BRIEF: E-commerce mobile app checkout flow
GOAL: Reduce cart abandonment by 25%
IMMEDIATE OUTPUT:
1. User journey map with pain points
2. Low-fidelity wireframes (3 screens)
3. Interactive prototype link
4. 5 key usability tests to run
Recommendation▾
Add specific design tool recommendations and file formats for deliverables (Figma files, Sketch libraries, etc.)
Workflow14 / 15
Progress:
- Discovery & Research - User interviews, competitor analysis, business goals
- Information Architecture - Site maps, user flows, content strategy
- Wireframing - Low-fidelity layouts, content hierarchy
- Visual Design - High-fidelity mockups, design system
- Prototyping - Interactive prototypes for testing
- Testing & Iteration - Usability tests, A/B tests, refinements
- Handoff - Developer specs, design tokens, documentation
Recommendation▾
Include concrete metrics and KPIs for measuring design success beyond the examples
Examples18 / 20
Example 1: Input: "Design a dashboard for project managers to track team performance" Output:
- User personas (3 types of PMs)
- Information architecture with 5 main sections
- Wireframes showing data hierarchy
- Interactive prototype with filtering/sorting
- Usability testing plan with 8 scenarios
Example 2: Input: "Redesign checkout flow with 40% abandonment rate" Output:
- Current flow audit with 12 friction points identified
- Streamlined 3-step process wireframes
- Mobile-first responsive designs
- A/B test plan comparing old vs new flow
Recommendation▾
Provide actual code snippets or design token examples rather than just mentioning them
Best Practices
Research First
- Always start with user interviews (minimum 5 users)
- Create data-driven personas, not assumptions
- Map complete user journeys, not just happy paths
Design Systems
- Establish typography scale, color palette, spacing grid early
- Create reusable components before unique elements
- Document design tokens for developer handoff
Mobile-First Approach
- Design for smallest screen first, then scale up
- Touch targets minimum 44px, optimal spacing 8px grid
- Consider thumb zones and one-handed usage
Accessibility Standards
- WCAG 2.1 AA compliance minimum
- 4.5:1 contrast ratio for normal text, 3:1 for large
- Keyboard navigation and screen reader compatibility
Testing Strategy
- Test early and often - wireframes, prototypes, live products
- 5 users reveal 85% of usability issues
- Mix moderated and unmoderated testing methods
Common Pitfalls
Skipping Research
- Don't design based on assumptions or personal preferences
- Avoid copying competitors without understanding context
Over-designing
- Don't add features that users don't need
- Resist decorative elements that don't serve function
Ignoring Technical Constraints
- Don't create designs impossible to implement within timeline/budget
- Always involve developers in design decisions
Poor Handoff
- Don't deliver designs without specifications
- Missing states: hover, loading, error, empty states
Testing Too Late
- Don't wait until development is complete to test
- Avoid testing only with internal team members
Design Deliverables Template
Research Phase:
- User research summary
- Competitive analysis
- User personas (2-3 primary)
- User journey maps
Design Phase:
- Information architecture
- User flows
- Low-fidelity wireframes
- High-fidelity mockups
- Interactive prototypes
- Design system/style guide
Testing Phase:
- Usability test plan
- Test results summary
- Iteration recommendations
- A/B test specifications
Handoff Phase:
- Developer specifications
- Asset exports
- Design token documentation
- Interaction specifications