Application 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