Week-11: Prototyping Animations & Micro-Interactions

Objective: Create a high-fidelity prototype that includes animations and micro-interactions to enhance user experience. This assignment aims to help students understand the importance of motion in UI design and how to implement it effectively.

Assignment Description:

1. Choose an App Concept:

   • Select an app concept for which you will design the prototype. This could be a mobile app or a web application.
   • Define the primary goal of the app and identify key user interactions.

2. Sketch Wireframes:

   • Create low-fidelity wireframes for the main screens of your app on paper to plan your designs.
   • Identify key interactions where animations and micro-interactions will be beneficial.

3. Design High-Fidelity Screens:

   • Using Figma, design high-fidelity screens for your app. (5-8 screens)

4. Incorporate Animations:

   • Identify at least three key animations to include in your prototype (e.g., page transitions, loading animations, feedback animations).

5. Implement Micro-Interactions:

   • Identify at least three key micro-interactions to include in your prototype (e.g., button hover effects, toggle switches, form validations).
   • Design and implement these micro-interactions using Figma.

6. User Testing:

   • Conduct user testing with at least two individuals.
   • Gather feedback on the usability and effectiveness of your animations and micro-interactions.

7. Iteration:

   • Based on the feedback received, iterate on your design to improve the animations and micro-interactions.
   • Document the changes made and the rationale behind them.

Deliverables:

1. A high-fidelity prototype with implemented animations and micro-interactions.
2. User testing feedback and iteration documentation.

Grading Criteria:

1. High-Fidelity Prototype (40%):

   • A well executed prototype with effective and purposeful animations that enhance the user experience.

2. Micro-Interactions (40%):

   • Clear and functional micro-interactions that provide user feedback.

3. User Testing and Iteration (20%):

   • Comprehensive user testing and relevant feedback documentation.
   • Effective iterations based on user feedback.

Submission:

• Following Tuesday by 12pm
• Submit link to your Figma interactive prototype. Make sure it is accesssible to teacher.

Good luck, and have fun designing!