APPLICATION DESIGN II - TASK 2: INTERACTION DESIGN PLANNING & PROTOTYPE

on
22/10/2024 - 12/11/2024 (Week 5 - Week 8)
Lee Wing Kie / 0364251
Application Design II/ Bachelor of Design (Hons) in Creative Media
Task 2: Interaction Design Planning & Prototype


INSTRUCTION



Task 2: Interaction Design Planning & Prototype

Students are required to develop a comprehensive interaction design plan for their final web-based mobile application, including detailed wireframes, user flow diagrams, and prototypes of both micro and macro animations. The goal is to visually and conceptually prepare the interaction design and animations that will enhance the user experience of their application.

Animation Plan
Fig 1.1 Overview of Animation Plan

In Task 1, I completed the redesign of the Travel Mate app. For Task 2, we are required to develop a comprehensive interaction design plan for the application. To make it easier to visualize the animations for each page within the app, I proceeded to create an animation plan board.

Animation Prototype

Splash Screen
Macro
- A black dotted point appears at the center of the screen, followed by a large splash that gradually expands until it fully fills the screen. Then a logo animation fades in.

Fig 2.1 Overview of Splash Screen prototype

Fig 2.2 Animation of Splash Screen

Homepage

Macro
- Fade-in animation for the flight search section and promotions.

Micro
- Vertical scrolling on the page to access additional content and horizontal scrolling in the promotions section.

Fig 2.3 Overview of Homepage prototype

Fig 2.4 Animation of Homepage

Flight Result

Macro
- Page slide-in animation when clicking the 'Search' button to navigate to the Flight Results and Details page.
- Fade-in animation for the search results section.

Micro
- Vertical scrolling on the date allow user to click to see different date of flight ticket price and compared.

Fig 2.5 Overview of Flight Result prototype

Fig 2.6 Animation of Flight Result

Seat Selection

Macro
- Airplane graphic smoothly slides up.
- Upon completion of seat selection, the entire seat info panel slides up for confirmation.

Micro
- Fade-in animation for seat selection.

Fig 2.7 Overview of Seat Selection prototype

Fig 2.8 Animation of Seat Selection

Checkout

Macro
- Fade-in animation when transitioning to the checkout page, followed by a fade-in of the 'Enter Promo Code' section and the total payment amount.

Fig 2.9 Overview of Checkout prototype

Fig 2.10 Animation of Checkout

Payment

Macro
- 
Fade-in animation after clicking the "Payment" button, transitioning to the "Payment Method" selection page.
- 
Airplane icon flies into the page upon processing completion, symbolizing a successful transition.
- 
When users close the page, the boarding pass screen gently fades out, smoothly transitioning back to the home page.

Micro
- 
Loading icon appears during the payment process.
- 
Boarding pass ticket fades in after processing is complete.

Fig 3.1 Overview of Payment prototype

Fig 3.2 Animation of Payment

FINAL SUBMISSION

Presentation Video


Prototype link:

Animation link:
(Click the refresh button to see the splash screen animation.)
REFLECTION

In the beginning, I struggled with planning the micro and macro animations. I wanted to avoid using too many animations, as excessive animation can reduce user-friendliness. So I focused on keeping the animations suitable and balanced. I also had difficulty finding the right animation icons at first, but I really appreciate my coursemate for sharing some Figma plugin and tips on how to find animation icon. It was very helpful. I'm very excited to code the flow and hope the final result will be beautiful.

Comments

Post a Comment