Generate a workflow cursor rule `.cursor/rules/workflows/uiux/prototyping.mdc`, guide AI assistants to go through the Prototyping phase for UX/UI design in a step-by-step and single question only iterative conversational process. **Goal**: Build interactive prototypes to test and refine the user experience. **Tasks**: 1. **Create High-Fidelity Prototypes**: - Develop clickable prototypes based on wireframes, incorporating placeholder visuals (e.g., colors, typography, icons) aligned with the brand. - Simulate key interactions, such as navigation, form submissions, and modals. - Include micro-interactions (e.g., button hover states, loading animations) to enhance realism. 2. **Plan Usability Testing**: - Suggest usability testing methods, such as moderated sessions or remote task-based tests. - Generate test scripts with tasks (e.g., “Find and purchase a product”) and questions (e.g., “Was the navigation clear?”). - Recommend testing with 5-8 users to identify 85% of usability issues (per Nielsen’s usability principles). 3. **Analyze Testing Results**: - Summarize user feedback from testing sessions, focusing on pain points, successes, and confusion areas. - Propose specific prototype revisions (e.g., “Simplify checkout flow by reducing steps”). 4. **Prepare for Developer Handoff**: - Organize prototype screens and interactions into a logical sequence. - Draft initial design specifications, including spacing, font sizes, and interaction details. **Rationales**: - High-fidelity prototypes simulate the final experience, allowing realistic user testing. - Usability testing validates the design with real users, catching issues before development. - Iterative revisions based on feedback improve usability and user satisfaction. - Early handoff preparation streamlines communication with developers, ensuring accurate implementation. **Deliverables**: # High-Fidelity Prototype and Testing Plan ## Prototype Overview - **Screens Included**: [e.g., Homepage, Search Results, Checkout] - **Key Interactions**: - Homepage: Search bar triggers results; featured items open details - Checkout: Form validation, progress indicator - **Micro-Interactions**: - [e.g., Button hover: Changes color to indicate interactivity] ## Usability Testing Plan - **Participants**: [e.g., 6 users matching persona profiles] - **Tasks**: 1. [e.g., Sign up for a new account] 2. [e.g., Find and purchase a product] - **Questions**: - [e.g., Was the process intuitive?] - [e.g., What was confusing?] - **Metrics**: - Task completion rate - Time to complete tasks - User satisfaction (1-5 scale) ## Testing Results - **Pain Points**: [e.g., Users struggled to find filter button] - **Successes**: [e.g., Easy navigation to profile] - **Recommendations**: [e.g., Move filter button to top of search results] ## Design Specifications - **Spacing**: [e.g., 16px padding around buttons] - **Typography**: [e.g., 16px body text, 24px headings] - **Interactions**: [e.g., Modal appears on “Add to Cart” click] --- ### **Guidance for AI Assistant** - **Proactivity**: Anticipate designer needs by suggesting additional tasks (e.g., “Would you like me to generate more user flow variations?”) without overwhelming them. - **Clarity**: Provide concise, actionable suggestions and deliverables, avoiding vague or generic advice. - **Iterative Support**: Continuously check in with the designer to validate outputs and incorporate feedback. - **User-Centric Focus**: Always tie recommendations back to user needs and research findings. - **Consistency**: Ensure deliverables align across phases (e.g., wireframes reflect sitemap, mockups reflect prototype). - **Accessibility**: Proactively include accessibility considerations in all deliverables.