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

12.05.2025 - 08.06.2025

Michael Chan Henn Loong / 0363611

Application Design 2 / BA of Design (HONS) in Creative Media / Taylor's University

Task 2: Interaction Design Proposal and Planning

---

INSTRUCTIONS

<iframe src="https://drive.google.com/file/d/1OOUQZzEIp02REyvbISxbLVatHMUihjXQ/preview" width="640" height="480" allow="autoplay"></iframe>

---

Task 2: Interaction Design Proposal and Planning

Todo:

• Create a prototype that presents all the animations the final flow will have

Process

App Flow Mapping

So at first I started with tidying up how I'm organizing the pages so at first definitely the welcome page then continues with the all the onboarding way down till the final page the "payment successful" page.

After deciding how the flow goes I'm starting to think on how should I do the animations for the whole flow as this initial phase focuses on structuring the macro animations and also defining the transitions as well as the whole flow of the app.

For the animations I actually want to create something that is seamlessly connected and hope to provide the users a good experience by having connected screens like from pages to pages. It took me quite some time to actually get to know what animations I'd be using for my flow as they shouldn't be too complicated but yet still exciting enough for the users to actually enjoy the whole experience.

Animations that will be used in the flow

Transition Animations

Onboarding Screens
Type: Horizontal swipe animation

Extra: Include parallax effect on background images or icon shifts for added depth. (If possible)

Welcome → Log In / Sign Up

Type: Fade + scale transition

Why: Creates a smooth entrance without feeling jarring, especially as it's the first interactive point.

Authentication → Home Screen

Type: Slide up + fade

Idea: Try to create a 'door opening' effect, giving the idea that the user is entering the platform.

Search Tab Switching

Type: Slide left/right with easing

Extra: Add a subtle color pulse on active tab to reinforce selection change.

Microinteractions

Button Taps

Effect: Press-in + glow pulse on tap

Where: "Sign In", "Add to Wishlist", "Buy Now", etc.

Input Fields

Effect: Border glow or underline animation on focus

Add-on: Placeholder text fades upward when typing begins

Search Field

Effect: Expand width or background lightening on focus

Bonus: Typing animation for placeholder like "Search for games, genres..."

Wishlist Button

Effect: Heart icon bounce or fill animation

Sound option: Soft click if you add audio UX. (If possible)

Macro Animations

Game Preview Modal

Effect: Slide up from bottom with slight bounce

Context: When clicking on a game from search/home — mimics drawer behavior.

Payment Flow

Step transition: Card carousel flip for selecting payment

Confirmation: Checkmark or coin-spin effect after successful payment

Tab Bar Navigation

Effect: Icon scale + fade background

Extra: Keep transitions short (<300ms) to maintain responsiveness

Fig 1.0, Overall Steam App Purchase Flow Mapping

Fig 1.1, Welcome Page & Onboarding

Fig 1.2, Onboarding to Login & Sign Up

Fig 1.3, Login to Home to Search

Fig 1.4, Search, Game, Basket, Wishlist, Payment, Successful & Fail

After planning out how all the micro transitions and macro animation, all the transitions and animations I haveI tried to make it as simple as it can be so that it wont be too difficult and hard for me to do since we dont have much time left, but it is also hard as well for me to keep the user experience natural and seamless throughout the whole process. 

So I added in some fading, sliding and glowing to make it more interactive and also more movement so that the experience wouldn't feel that boring and there will be a balance in between the simplicity I want as well as the interactive experience for the user.

Detail Explanation

So after finishing up the planning I started diving into the detail animations and interactions for all the pages I also got another chance to really think through again how I want my animations and transitions to be. I've also looked at the reference Mr. Razif provided us after going through the blog I've also learned on how I should proceed with my part, so I followed the blog and created 3 parts for my pages: Onload, In App and Offload. Putting my pages into their own groups makes it easier for me to work on my stuff, and I also fulfill the requirements to have these 3 groups, so below is how I grouped them.

Onload:

-Welcoming Page

-Onboarding pages

-Log in 

-Sign Up

In App:

-Home

-Search

-Results

-Game Details

-Busket Wishlist 

-Payment

Offload:

-Payment Successful

-Payment Fail

Fig 1.5, Overview of Masterplan 

Fig 1.6, Description for Welcome page & Onboarding

Fig 1.7, Description for Login/Sign up, Home, Search and Details

Fig 1.8, Description for Wishlist, Cart and Payments

For this Steam redesign app, I focused on adding small but meaningful micro-interactions like zooming images, smooth slide transitions, card flips, and icons flying into the cart. These aren't just something random. I wanted each of the interaction to serve a purpose, whether it was to provide feedback, guide the user, or simply make the experience feel more enjoyable and interactive. I made sure that the motion and animations were consistent across different stages of the app, from onboarding to search, game details, cart, and even the final payment feedback.

By adding these animations thoughtfully, I aimed to create an experience that feels alive and responsive. It’s the little details like the checkmark popping in after a successful payment, or a game image shrinking into the cart that help build trust and make the whole experience feel smoother and more fun. I didn’t want users to just use the app; I wanted them to feel like it was made with care and attention to detail. Even though they might not notice every animation, I believe these small touches add up and make a big difference.

So to stay on track with all the animations I wanted to include, I put together a simple but clear checklist that covered both macro and micro animations for each screen. This list, along with my app flow and master plan, acts as a visual guide that helped me manage what animations had been done and what still needed work. It also made it easier to see how each animation fit into the bigger picture whether it looked good, felt smooth, or needed any small tweaks to improve the overall experience.

Looking back, using Figma from the start for everything is the right choice. Figma made the whole process a lot smoother and more flexible. It gave me the freedom to test out new animation ideas without getting stuck in technical limitations like im using other applications. This decision not only made my workflow more efficient, but also helped me push the design further and bring more life into the app through motion.

Welcome Page

Macro:

• Auto-progression or manual tap to transition to Onboarding

• Entire screen transitions with Dissolve (800ms)

Micro:

• Logo fade-in

• Tap indicator animates subtly (e.g., pulse)

Fig 1.9, Welcoming page

Onboarding Page

Macro:

• Tap “Next” to transition horizontally to the next onboarding screen

• Final tap moves user to Login/Sign up

Micro:

• Text and visuals slide up or fade in on each screen

• Buttons slightly animate (scale or fade) on tap

Fig 2.0, Onboarding page

LogIn & Sign Up Page

Macro:

• Tap “Login” or “Sign Up” leads to Home Page

• Smart Animate transition connects onboarding to core app

Micro:

• Input fields highlight on focus

• Buttons animate on tap (e.g., bounce or ripple)

• Password reveal toggle smoothly animates

Fig 2.1, Log in & Sign Up

Home Page

Macro:

• Navigation via tab bar (Search, Wishlist, Profile, etc.)

• Tap “Search” slides up to Search screen

Micro:

• Cards slide into view with slight delay

• Tab icon highlights with motion feedback

• Hover or tap ripple on cards/buttons

Search Page

Macro:

• Typing search term loads dynamic results

• Tap search button or auto-search leads to Result screen

Micro:

• Search bar animates on focus

• Filter chips animate on selection

• Loading shimmer or fade-in for results

Fig 2.2, Home page & Search pages

Search Result Page

Macro:

• Tap a game card → Game Detail page (slide left)

Micro:

• Game cards animate in with fade and zoom

• Hover/tap feedback on cards

• Scroll-based animation or sticky header

Game Detail Page

Macro:

• Tap “Add to Cart” → Basket (slide left)

• Tap “Add to Wishlist” → Wishlist (slide top)

Micro:

• Button press provides tactile feedback (pop or pulse)

• Image carousel may slide or zoom

• Price and CTA animate into view

Basket Page

Macro:

• Tap “Checkout” → Payment Page (push up)

Micro:

• Cart items slide or fade in

• Delete icon animates on hover/tap

• Total value auto-updates with animation

Wishlist Page

Macro:

• Tap game → Game Detail page

• Back nav returns to Home

Micro:

• Cards fade or slide in

• Heart icons animate on toggle (fill/unfill)

• Scroll animations for list

Fig 2.3, Search result, Game Description, Busket & Wishlist

Payment Page

Macro:

• Submit payment → Success or Fail screen

Micro:

• Form fields animate on focus

• Card number inputs auto-format with spacing

• Pay button pulses or highlights on hover/tap

Payment Success

Macro:

• Option to return home or view receipt

Micro:

• Confirmation checkmark animates (scale or draw-in)

• Text fades in sequentially

Payment Failed

Macro:

• Tap retry → back to Payment page

Micro:

• Error icon bounces in from bottom

• “Try Again” button vibrates or pulses

Fig 2.4, Payment, Success & Fail

Fig 2.5, Overview of all pages in Figma

Common Macro Interactions (Big Transitions)

Smart Animate (ease in/out, 400–500ms) – Most screen transitions (login, onboarding, search, etc.)

Slide In (directional) –

• Up (e.g., Search)
• Left (e.g., Game Detail, Cart)
• Top (e.g., Wishlist)
• Down (e.g., Payment Fail)

Push (Top) – Used for deeper flow transitions (e.g., Basket → Payment)

Dissolve – Used in Welcome and Payment Success for smooth fade transitions

Common Micro Interactions (Small Feedback Animations)

• Buttons – Tap feedback like bounce, pulse, or pop
• Form Fields – Highlight on focus, auto-formatting (e.g., card numbers)
• Cards & Lists – Fade/slide-in on load, tap highlight
• Icons – Wishlist heart toggle (fill/unfill), animated checkmarks or error symbols
• Scroll & Load Effects – Staggered load-ins, smooth scroll feedback

Interaction Styles

Easing: Ease in/out (standard), Gentle (for soft transitions), Bouncy (for errors)

Durations:

• 400–500ms for typical flow
• Up to 800ms for strong emphasis (e.g., success/fail)

Final Submission for App Design 2 - Task 2: Interaction Design Proposal and Planning