Application Design II / Task 2: Interaction Design Planning & Prototyping

on
25.05.2025 - 08.06.2025 (Week 5 - Week 8)
Gunn Joey / 0366122
Application Design II / Bachelor of Design (Hons) in Creative Media
Task 2: Interaction Design Planning & Prototyping
TABLE OF CONTENTS
1. Module Information Booklet 
2. Lectures 
3. Task 2
4. Feedback 
5. Reflection
MODULE INFORMATION BOOKLET


LECTURES

Week 5:

This week, we learned how to use LottieFiles as an alternative to After Effects for creating animations. Mr. Razif explained that LottieFiles provides a large collection of ready-made animation assets and is easier to use, especially for beginners. He also showed us how LottieFiles can be added to Figma through a plugin, which allows designers to create and preview animations or GIFs directly within their design workflow. This simplified the process and made animation more accessible.

After learning about these tools, I experimented with some of the timeline animation features and created a custom SVG animation using the BMW M Sport logo. This activity gave me a better understanding of how scalable vector animations work and how they can be used to enhance user interfaces with lightweight and smooth visuals. In addition to learning technical skills related to app structure and backend integration, this session allowed us to explore creative design tools. Using LottieFiles helped us see how animations can improve the user experience by adding motion and visual interest to applications.

Week 6:

This week, we started using FlutterFlow, the main platform for building our final app. With Mr. Razif’s guidance, we explored its core features and focused on creating a complete user authentication flow. We built login, sign-up, and dashboard pages to understand how users move through the app. A key part of the session was learning to connect FlutterFlow with Firebase. We used Firebase Authentication to let users sign up and log in with their email and password. Mr. Razif showed us how to set up Firebase in the project settings and link it to our login and sign-up buttons. Once logged in, users are taken to a dashboard that displays live data from Firebase.

We also worked with FlutterFlow’s drag-and-drop tools and created custom functions. This helped us understand how to build app features quickly without writing much code. By the end of the session, we had a solid grasp of backend integration and felt more confident starting our own app prototypes.
TASK 2

Description

You are required to develop a comprehensive interaction design plan for your final mobile application. This task focuses on mapping the user journey, planning navigation, and designing both micro and macro interactions that enhance usability and experience.

Requirements

1. Interaction Design Documents
  • Create detailed user flow diagrams and wireframes
  • Map out key screens and their interaction logic
  • Include navigation structure and layout planning
2. Animation Prototyping
  • Micro animations: e.g. button states, hover effects, loading indicators
  • Macro animations: e.g. page transitions, state changes
  • Use tools like Figma (for basic animations) or After Effects (for complex ones)
  • If you can't animate, provide strong references
3. Visual and Written Explanation
  • Explain how each animation contributes to usability and user engagement
  • Describe your interaction logic clearly with visuals
4. Video or Class Presentation
  • A walkthrough video or class presentation will be required 
5. E-portfolio Blog Post
  • Document your process, visuals, and rationale in a blog post format
  • Present your idea as if pitching your interaction design strategy
Progress:
A. Master Plan & Storyboard

After completing Task 1, I moved forward by redesigning the Sasa app and constructing a comprehensive prototype master plan to visualise the app’s overall structure and user journey. As part of this process, I created a detailed storyboard to document how interactive animations enhance transitions and usability throughout the application.

To clearly define the purpose of each animation, the storyboard is organised into three main categories. Onload animations are used when a screen first appears, introducing the interface with movement and visual focus. Onpage animations describe interactive feedback that occurs while users engage with specific elements on the screen, such as tapping, scrolling, or hovering. Offload animations take place when users navigate away from a screen or when content fades out, contributing to smooth and continuous transitions.

Progress:




B. Animation of Prototype

        1. Splash Screen

Macroanimation:
  • Start with a dark circular shape fading in at the center of the screen against a plain background.
  • A large makeup brush pops in from the center using a bounce-in scale animation.
  • The brush scales down and moves slightly to the left, making space for the logo.
  • The Sasa logo appears with a smooth reveal using a mask effect placed behind the brush.
  • After a short delay, the splash screen fades out to begin the onboarding sequence
Microanimation:
  • The logo reveal uses a slow mask transition to enhance elegance
  • The brush scale-down uses easing to soften the visual movement
I have used the union of a circle and rectangle shape to create the masking path for the logo to appear from behind the brush.



        2. Onboarding Page

Macroanimation:
  • Each page fades in with title, description, and illustration.
  • A horizontal rectangular line animates across each screen to connect them visually.
  • Clicking “Next” slides the screen to the left into the next onboarding page.
  • Clicking “Get Started” fades out all content and transitions to the login screen.
Microanimation:
  • Hovering over “Next” and “Get Started” buttons triggers a colour shift.
I have used slide-left transitions between pages and added a rectangle connector to create a visual link across the onboarding sequence.



        3. Log In & Sign Up Page

Macroanimation:
  • After onboarding ends, a pink gradient background slides down from the top.
  • The login and sign-up form containers slide up from the bottom.
  • Clicking “Login” directly navigates to the homepage with no delay.
  • Clicking “Sign Up” shows a centered loading spinner.
  • The spinner dissolves into a tick with confirmation message.
  • After confirmation, the screen slides back to the login screen.
Microanimation:
  • Tapping on empty input fields reveals input labels smoothly.
  • Button hover states use colour changes to suggest interactivity.
I have used a layered slide motion to stage background and form container separately, and dissolve transitions for loading-to-confirmation flow.





        4. Home Page

Macroanimation:
  • A small circle expands from the center to cover the entire screen on load.
  • The homepage interface fades in smoothly behind the shape.
  • Tapping a product card triggers a horizontal slide to the product page.
I have used a central scale transition combined with staggered fades for component reveal to create a welcoming introduction to the main app.


        5. Product Page

            A. Main Page

Macroanimation:
  • The product image enters in large scale from the center.
  • It scales down and moves upward to settle into the header area.
  • Navigation to Ratings & Reviews or Homepage slides horizontally.
Microanimation:
  • Hovering “Add to Cart” or “Wishlist” changes button colour.
  • Clicking triggers a center-aligned confirmation message that fades in and out.
I have used scale and position animation to emphasize product entry and fade transitions for interaction feedback.




             B. Ratings & Reviews

Macroanimation:
  • Section is embedded within the product page as a scrollable area.
  • Tapping “Ratings & Reviews” scrolls the page down to this section.
Microanimation:
  • Each review card fades in slightly as it enters viewport.
I have integrated vertical scroll motion with smooth fade-ins to support readability and maintain focus hierarchy.


        6. Shopping Cart

            A. Main Page

Macroanimation:
  • Cart page slides in from the product screen.
  • Tapping “Apply Promo” navigates to the promo page.
  • Returning with an applied promo triggers a ribbons animation from the top.
  • Clicking “Checkout” transitions the screen to the checkout section.
Microanimation:
  • Ribbons effect uses a timed fade-out.
I have used ribbons overlay animation triggered conditionally after promo application to show success without breaking navigation.




            B. Promo Page

Macroanimation:
  • Promo page slides in from the right after “View All Promo” is tapped.
Microanimation:
  • Cards react to tap with a shadow pulse.
  • Selecting a promo and tapping “Apply” navigates back to cart.
I have used entry fades and lightweight scale for interaction feedback on selectable promo cards.


        7. Checkout Page

Macroanimation:
  • Checkout screen slides in from the shopping cart view.
  • Section content (address, summary, payment) appear in vertical sequence.
  • Clicking “Place Order” displays a centered loading spinner.
  • The spinner dissolves into a success message with a green tick.
  • The screen holds for a few seconds, then closes the flow.
Microanimation:
  • Hovering over “Select Payment” and “See Details” changes colour subtly.
  • Tapping expandable areas reveals hidden info with short slide-down animation.
I have combined loading dissolve animation with structured layout reveal and hover cues to guide the user toward final confirmation.
 
Walkthrough Video:


D. Video Presentation


FEEDBACK

Mr. Razif advised me to focus more on macroanimations instead of relying too much on microanimations like button hovers. He suggested that I look at more animation references to better understand how large transitions can improve the overall flow and user experience of the app.

REFLECTION

Creating the animation prototype for the Sasa app has been a valuable part of the design process. I began by developing a detailed master plan to outline the structure and navigation flow of the app. This helped me clearly visualise how each screen connects and transitions. From there, I applied both macroanimations and microanimations to support usability, guide user attention, and create a smoother, more engaging experience. Each motion was planned with purpose, whether to highlight a feature or to guide users naturally through the interface.

While working on the animations, I observed how subtle changes such as hover effects, scaling, or timed fades can significantly improve the clarity and responsiveness of a screen. Microanimations helped reinforce interactions, giving feedback when users tapped or hovered over elements. In contrast, macroanimations like sliding pages or fade transitions helped define the overall rhythm of the app. I also learned that careful timing and easing are essential for animations to feel natural rather than distracting.

Developing the storyboard allowed me to organise all animations according to their behaviour during screen load, user interaction, and screen exit. This made it easier to evaluate the purpose of each motion and maintain consistency across the app. Overall, this task has shown me how important it is to plan animations early in the design process. Well-designed motion does more than add visual interest, it supports functionality, enhances feedback, and helps users feel confident as they move through the app.

Comments

Post a Comment