Application Design 2 - Task 2: Interaction Design Proposal and Planning

⭐ 21/5/2024 - 4/6/2025 (Week 5 - Week 7)

🎀 Yan Zhi Xuan | 0369425

💜 Application Design 2 | Bachelor of Design (Hons) in Creative Media | Taylor's University

📚 Task 2: Interaction Design Proposal and Planning

TABLE OF CONTENTS /ᐠ - ˕ •マ ⋆｡°✩

1. Lectures

2. Instructions

3. Task 2: Interaction Design Proposal and Planning

4. Feedback

5. Reflections

1. LECTURES ⊹ ࣪ ˖₊˚⋆˙⟡

Week 5

Fig. 1.1 Principles of UX Animation by Val Head.

In Week 5, Mr. Razif introduced us to the concept of microanimation in app design and UX motion principles. He explained how these subtle animations enhance user experience by providing visual feedback, improving usability, and making interactions feel smoother. He also shared that FlutterFlow supports the import of animations, making it easier to integrate motion into our designs. To help us understand the topic better, Mr. Razif recommended a YouTube video series titled "Principles of UX Animation" by Val Head, available on the Adobe Creative Cloud channel.

Lecture Material: UI Animation—How to Apply Disney’s 12 Principles of Animation to UI Design

Principles of UX Animation by Val Head: YouTube

Week 6

Fig. 1.1 Login System in FlutterFlow.
YouTube video: Link

In Week 6, we learned how to use FlutterFlow to create a fully functional login system. The flow begins with a sign-up page for users without an account. Once registered, users can log in and access the dashboard. Unlike traditional coding methods, FlutterFlow allows us to build these features with minimal coding, unless advanced customizations are required. After completing our interface designs, we tested the login functionality to ensure everything worked smoothly.

💜 Reflection: Using FlutterFlow to build a login system was a valuable experience. It made me realize how powerful no-code platforms can be for rapid app development. I found it much easier than traditional coding, and testing the interface helped me understand how user flows function in real apps.

Week 7

During this week, we followed the majority decision — most of us voted not to attend the physical class, so we’re working on our own tasks from home instead.

2. INSTRUCTIONS ⊹ ࣪ ˖₊˚⋆˙⟡

Fig. 2.1 Module Information Booklet - Application Design 2.

Task 2: Interaction Design Proposal & Planning (Week 05–07, 20%):

Create user flowcharts, wireframes, and animation prototypes.
Explain how animations improve UX.
Submit app files, blog post, and video/class presentation.

3. TASK 2: INTERACTION DESIGN PROPOSAL & PLANNING ⊹ ࣪ ˖₊˚⋆˙⟡

Week 5

Guardian App Final Wireframes (Animation Prototype of MVP Focus Overview)

Fig. 3.1 Guardian App High-fi Wireframes and Prototype (MVP Focus).

After Week 5, I finalized and carefully arranged the final wireframes for Task 2: Interaction Design Proposal and Planning. I went through each screen in detail, ensuring that all layout components were aligned consistently and that the overall flow felt intuitive. Beyond just wireframing, I also reviewed every aspect of the interactive prototype, paying close attention to both micro and macro animations—from the initial loading page to the empty cart screen. I checked the timing, easing, and transitions of each animation to ensure they felt smooth, responsive, and aligned with the user experience goals. This included hover effects, entrance animations, screen transitions, button interactions, and icon feedback. By refining each interaction, I aimed to deliver a polished and cohesive prototype that reflects thoughtful planning and user-centered design.

Fig. 3.2 Guardian App Animation Prototype Overview.

Guardian App Interaction Design Proposal and Planning in FigJam

Fig. 3.5 Task 2 Interaction Design Proposal & Planning - Guardian App.

Week 6

I created the interaction design proposal and user flow using FigJam, where I structured the journey as a narrative to help visualize the user's experience. The proposal includes a clear flow of how users move through each stage of the app. The following is a breakdown of each screen:

Guardian App User Flowchart

I focused on building a detailed user flow in FigJam, mapping out each screen from loading to checkout. This included defining the navigation logic, transitions, and interactive flow between key pages like Sign In, Home, Product Overview, Cart, and Checkout.

1. Loading and Landing Pages

Macroanimations:

Smart Animate transitions between landing pages with Ease In and Out.
Loading screen fades in and transitions into the onboarding flow with a timed delay.

Microanimations:

A dot scales up and logo reveal (fades).
Page dots at the bottom animate with a bounce on each transition.
The call-to-action button ("Let’s Get Started") subtly scales when hovering/tapping.

2. Sign In & Sign Up Pages

Macroanimations:

Slide In / Move In transitions between Sign In and Sign Up pages.
Transitions are triggered by tapping the "Create an Account" or "Sign Up" buttons.

Microanimations:

Waving hand + speech bubble animation using Smart Animate (rotate back and forth).
Icons animate on hover with a slight scale or shadow.

3. Home Page

Macroanimations:

Dissolve transition from Sign In to Home.
The entire screen loads with a soft fade or slide-up motion.

Microanimations:

Navigation bar icons bounce and fade in.
Underline animation for the selected tab.
Category bar auto-cycles with vertical sliding every few seconds.

4. Product Display & Virtual Try-on Pages

Macroanimations:

Product page slides in from the bottom on tap.
Virtual Try-On moves in from the right, and back with slide out to the left.
Instant transition to Cart.

Microanimations:

Add to Cart button triggers cart icon to shake and show "1" badge with scale+fade.
The Try-On camera includes a "Picture Captured" toast message or icon animation to confirm the photo was successfully taken.

5. Cart Item & Checkout Pages

Macroanimations:

Slide In / Out between Cart and Checkout screens.
Smart Animate for transitions between checkout steps (Address → Shipping → Payment).
Back navigation moves the screen out to the left.

Microanimations:

Progress bar line animates with width expansion (Ease Out).
Step icons scale and colour-fill asthe user progresses.

6. Order status, Payment Status, E-invoice & Cart Empty Page

Macroanimations:

Dissolve transition to Order Status after placing the order.
E-Invoice page slides in from the top, and back to the cart from the bottom.
Empty Cart page is the final transition (slides in or appears instantly).

Microanimations:

Success checkmarks scale and bounce in.
Download button on the E-Invoice scales slightly on hover.
Start Shopping button animates on hover with a slight scale or shadow.

Week 7

Guardian App Animation Prototype Storyboard

I developed a full storyboard showcasing each screen’s animation behavior—categorized by On Enter, On Screen Loaded, and On Exit. I refined both macro and microanimations, ensuring smooth transitions and engaging UI feedback for user actions across all screens.

1. Loading and Landing Pages

Loading Page

On Enter: The screen appears instantly with an orange background and a small, low-opacity Guardian logo.
On Screen Loaded: The logo fades in and scales up smoothly using Smart Animate; the loading dot pulses or rotates to show activity.
On Exit: The screen fades or slides out softly, moving to the next screen.

Landing Pages

On Enter: Background and content (image, text, button) fade in for a clean entrance.
On Screen Loaded: Auto-transitions loop through landing screens using Smart Animate with Ease In-Out.
On Exit: On “Get Started” tap, the screen fades out and the orange box morphs into a half-screen gradient to become the Sign In backdrop.

2. Sign In & Sign Up Pages

Sign In Page

On Enter: Gradient background from Landing page transitions into the Sign In screen using Ease In.
On Screen Loaded: A waving hand animation appears, rotating slightly via Smart Animate; form elements fade in.
On Exit: On “Sign In” tap, the form fades out and transitions to Home screen.

Sign Up Page

On Enter: All elements fade in softly.
On Screen Loaded: Form fields appear for user input.
On Exit: After “Sign Up” is tapped, the screen shows a success message, then fades out and returns to the Sign In page.

3. Home & Product Overview Pages

Home Page

On Enter: Slides up from the bottom, overlaying the Sign In page with Ease In.
On Screen Loaded: The Home icon bounces in with slight scale and return; the category bar auto-cycles with a vertical slide every few seconds.
On Exit: Selecting a product triggers a left-slide animation to open the Product Overview.

Product Overview Page

On Enter: Slides in from the right as an overlay on Home.
On Screen Loaded: Product details are scrollable; Virtual Try-On shows feedback on capture; Add to Cart animates the cart icon shake and badge pop-in.
On Exit: Tapping the cart icon transitions to the Cart screen.

4. Cart Item & Checkout Pages

Cart Page

On Enter: Appears instantly for direct access.
On Screen Loaded: Displays cart items immediately for user review.
On Exit: Tapping “Checkout” slides the screen in from the right to proceed to checkout.

Checkout Page

On Enter: Slides in from the right, continuing from the cart.
On Screen Loaded: User selects address, shipping, and payment; each step animates with Smart Animate and Ease Out transitions.
On Exit: Tapping “Place Order” transitions to the Order Status screen.

5. E-invoice & Cart Empty Page

E-Invoice Page

On Enter: Slides in from the top after tapping “Request for E-Invoice.”
On Screen Loaded: Displays purchase summary with download option.
On Exit: Slides out to the left, returning to the Cart.

Empty Cart Page

On Enter: Slides in after the E-Invoice exits.
On Screen Loaded: Shows empty message and “Start Shopping” button.
On Exit: Navigates instantly to Home on tap, closing the loop.

After completing the storyboard, I recorded a presentation video that walks through the entire interaction flow, explaining the design decisions, animation choices, and how the prototype enhances user experience.

⭐ Final Submission - Task 2

Presentation Video

1. User Flowchart Explanation (00:00 - 03:09)

2. Animation Prototype Storyboard Explanation (3:09 - 06:36)

3. Guardian App Animation Prototype Walkthrough Video Without Speeding & Explanation (06:36 - 08:27)

Fig. 3.4 App 2 Task 2 Presentation (Link: YouTube).

*** While watching the video, please select 1080p (HD) for clear quality view.

Guardian App Interaction Design Proposal & Planning in FigJam

Fig. 3.5 Task 2 Interaction Design Proposal & Planning - Guardian App.

Guardian App Animation Prototype of MVP Focus Overview in Figma

Fig. 3.5 Guardian App High-fi Wireframes and Prototype (MVP Focus).

Fig. 3.5 Guardian App High-fi Animation Prototype.

4. FEEDBACK ⊹ ࣪ ˖₊˚⋆˙⟡

Week 5

No feedback given. During this week, Mr. Razif only showed us seniors' work as examples of this task 2.

Week 6

Mr. Razif said that the animation references I found on Pinterest are fine. He mentioned that I should start thinking about the animation for the navigation bar icons, and show it to him next week. This will be the key microanimation in the app. For the presentation, I don’t need to code it — I can either show the animation prototype in Figma or just present the references, since this stage is only about interaction planning proposal.

Week 7

For the navigation bar icon animations, they shouldn't be too playful — something simple will do. However, the style should still align with the overall visual direction and suit the target audience. I can also explore adding a line indicator under the icons; for example, when one icon is clicked, a line appears beneath the selected icon to show it's active.

5. REFLECTIONS /ᐠ - ˕ •マ

Task 2 was when things started to shift from surface-level design to deep interaction planning. I moved away from just asking “Does it look good?” to asking “How does it feel to use?” I began mapping out the entire user journey from login to checkout and explored how each touchpoint could be enhanced with purposeful interaction. Creating wireframes and flowcharts helped me untangle and organise the user flow—what users see, what they do, and how the app responds. I wanted every click, swipe, or tap to feel responsive and intentional.

I then explored micro and macro animations as tools to shape the user experience. It was fun to experiment with ideas like animating the reward icon with a subtle bounce when users collected points, or designing a smooth slide transition between the login screen and home page. These interactions may seem small, but they add personality and clarity. Observing how popular apps handled transitions, feedback, and motion really inspired me to think in a more dynamic and interactive way.

Documenting these animations through visuals and written explanations helped me articulate their purpose. I started thinking of animation not as decoration, but as communication—it tells the user where they are, what they’ve just done, or where they can go next. Using Figma to prototype and visualize transitions was definitely challenging at times, especially when trying to simulate motion accurately.

Search This Blog

Yan Zhi Xuan (0369425)