Application Design II: Task 2
23/10/24 - 13/11/24 // W5-W8
Mercy Chong HuiZiun // 0360929
Application Design II // BDCM
Task 2: Interaction Design Proposal & Planning
Instructions
Fig 1.0 Module Information Booklet
Lists
Task 2: Interaction Design Proposal & Planning
App Flow Mapping
Micro & Macro animations in Figma
Onboarding Page
Fig 2.0 Onboarding pages
Fig 2.1 Video walkthrough (Onboarding page)
Micro Animation: Button trigger animation when users click onto the arrow button as indicators of 'back' and 'next'.
Macro animation: Smart animate in each of the onboarding page animations to ensure smoothness and clean transition of the pages.
Log In/Sign Up Page
Fig 2.2 Log In/Sign Up page
Fig 2.3 Quick Loading Screen
Micro animation: The bouncy (smart animate) transitions in between each of the frames.
Macro animation: The circle gradually became bigger as the frame transitions then the color will change into a full blue screen with a confirmation frame that says "You're all set!". Then users will proceed to the log in/sign up page after this.
Home/Explore Page
Arrival Time Transit Information page
Lifestyle Page
Feedbacks Page
Profile Page
Final Figma Link: https://www.figma.com/design/RPuk4nHm6MHXlkacTTAn19/APP-DESIGN-II-(REDESIGN)?node-id=36-45&m=dev&t=LksK6BMUn4AskYFx-1
Feedbacks
W7:
Reflections
