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

23.5.2024 - 13.6.2024 (Week 5 - Week 7)
Tan Yi-Tyng (0353327)
Bachelor of Design (Hons) in Creative Media
Application Design II
Task 2: Interaction Design Proposal and Planning

INSTRUCTIONS

TASK 2 - PROPOSAL

Instruction

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.

Master Plan & Storyboard

Based on the previous Task 1, I have completed redesigning the Batik Air app, and now I am beginning to create the master plan to better understand the app flow mapping. Next, I proceeded to the storyboard, which includes detailed explanations of the interactive animations within the app. Each storyboard page is divided into three sections: Onload, Onpage, and Offload.

On Load Animation: Animation that occurs when the page initially loads.
On Page Animation: Animation that takes place within a page.
Off Load Animation: Animation that takes place as an element moves off the screen or fades out.

Fig. 1.1 - Overview of Master Plan

Fig. 1.2 - Overview of Story Board

Interactive Design Master Plan & Storyboard

Link: FigmaView-App Flow Masterplan

Animate Prototype

Splash Screen:

Macro:

Logo introduction centered on the screen, followed by a shrink and leftward move.
Airplane animation transitions from the bottom, filling the screen with dynamic motion and vapor effects.

Fig. 3.1 - Overview of Splash Screen animation pages

Fig. 3.1.1 - Animation of Splash Screen

Home Page:

Macro:

Smooth slide-in of the 3D airplane from the left to the center, setting the thematic focus of the page.
The Book Flight panel slides up from the bottom, covering the airplane, which signals readiness for user interaction.
On selecting the "Search" button, the navigation bar smoothly slides down off the screen, and all page contents gently slide to the left, transitioning to the next page as the gradient background fades out.

Micro:

Vertical scrolling of the page for additional content access like promotions.
Side menu panel slides in from the left when the hamburger menu is clicked.

Fig. 3.2 - Overview of Home Page animation pages

Fig. 3.2.1 - Animation of Home Page

Flight Selection Page:

Macro:

The gradient background image fades in to establish the visual theme.
Destination indicator and calendar on the top section of the screen slide up, introducing the key elements for flight search interaction.
Flight ticket options slide up smoothly, presenting available flights in a dynamic, engaging manner.
On selecting a flight ticket, the entire content slides out to the left, transitioning to the next stage of the booking process as the background fades out.

Micro:

Horizontal scrolling enables users to navigate through different dates
Vertical scrolling allows users to explore available flight ticket options in detail, enhancing user control and engagement with the booking interface.

Fig. 3.3 - Overview of Flight Selection animation pages

Fig. 3.3.1 - Animation of Flight Selection page

Cabin Selection Page:

Macro:

The main visual slide-up of cabin class images ensures users are immediately introduced to different class offerings upon entering the page.
The info panel that slides up provides key details about each class.
When a user selects a fare, the entire page slides out to the right, seamlessly transitioning to the next step in the booking process.

Micro:

Users can interact with the cabin class options by swiping left and right, with each class sliding smoothly into view, providing a tactile feel and a direct interaction with the available options.
Buttons for selecting the fare slide up gently, subtly drawing attention to the call-to-action.

Fig. 3.4 - Overview of Cabin Selection animation pages

Fig. 3.4.1 - Animation of Cabin Selection Page

Seat Selection Page:

Macro:

The header fades gently into the screen, setting the stage for user interaction.
Seat legends and the seat selection visual smoothly slide up, revealing the available seating options in a visually appealing manner.
On completion of seat selection, the entire seat info panel slides up for confirmation, then slides down to transition away after confirmation, facilitating a clear pathway to the next step.

Micro:

Vertical scrolling allows users to view all available seat options.
Transformation of seat icons to green with a tick mark upon selection, providing immediate visual feedback that the seat has been successfully selected.

Fig. 3.5 - Overview of Seat Selection animation pages

Fig. 3.5.1 - Animation of Seat Selection page

Check Out Page:

Macro:

The circle icon of the cart moves from left to center in the header, symbolizing the transition to the next stage of booking.
The information panel smoothly slides up, revealing passenger details and flight information as a central element on the page.
The "Total Fare" section slides down, providing cost details in a clear, focused manner.
On completing the checkout, the contents and button slide down off the screen, transitioning the user to the next step confirmation page.

Fig. 3.6 - Overview of Check Out animation pages

Fig. 3.6.1 - Animation of Check Out page

Payment Page:

Macro:

The circle icon of the payment moves from the center to the right within the header, symbolizing the transition to the final stage of booking.
The payment information panel and the "Terms and conditions" section slide up and down respectively, setting the stage for the transaction details and legal agreements.
Once the "Pay" button is clicked, the transition to the next loading screen is designed to be seamless, effectively moving the user towards the completion of their booking.

Fig. 3.7 - Overview of Payment animation pages

Fig. 3.7.1 - Animation of Payment Page

Confirmation Page:

Macro:

The flight ticket slides into the screen from the top through masking, presenting the ticket in a manner reminiscent of it being printed out.
When users decide to close the page, the ticket and button slide down off the screen, while the background gently fades out, signifying a smooth transition back to the home page.

Micro:

Upon user interaction with the "Save" button, the overlay panel slides up to allow the user to download or share with others.

Fig. 3.8 - Overview of Confirmation animation pages

Fig. 3.8.1 - Animation of Confirmation page

My Trips Page:

Macro:

The "Upcoming Trips" and "Past Trips" buttons slide into the screen, clearly segmenting the trip information and enhancing user navigation between different trip statuses.
The ticket appears on the screen by sliding down through masking, providing a dynamic entry for the detailed trip information.
When users exit the page, there is a seamless transition to the next page, ensuring a smooth navigational flow within the app.

Fig. 3.9 - Overview of Trips animation pages

Fig. 3.9.1 - Animation of My Trips page

Notification Page:

Macro:

Each notification panel slides up one by one, introducing the user sequentially to various alerts such as flight confirmations and travel updates, which enhances the clarity and digestibility of information.
When users decide to exit the page, there is a seamless transition to the next page, ensuring a smooth navigational flow within the app.

Fig. 3.10 - Overview of Notification animation pages

Fig. 3.10.1 - Animation of Notification page

Profile Page:

Macro:

The top section with the user's profile details slides down into view upon entering the page, establishing the personalization aspect of the page.
The central content (list of menu options like Promotions, Loyalty, etc.) slides in from the left, smoothly introducing the various user options available.
The "log out" button sliding up provides a clear and engaging cue for user action.
When exiting the page, there is a seamless transition to the next page, maintaining a smooth and continuous navigational flow.

Fig. 3.9 - Overview of Profile animation pages

Fig. 3.9.1 - Animation of Profile page

Progress on Video Editing

After completing the animated prototype in Figma, I proceeded to arrange the storyboard along with showcasing the animated prototype, to make it clearer to understand during the presentation.

Fig. 6.1 - Editing in Premiere Pro

FINAL SUBMISSION

Presentation Video Link:

https://youtu.be/WD65A7676Q0

Timeline:
0.00-8:09: Explanation of storyboard + Animation Prototype Display

8:15-10:22: Overview run-through of Animation Prototype

Final App Design II - Task 2 : Animation Prototype Presentation

Prototype Link : Figma-View-Link

Final App Design II - Task 2 : Figma View Link Prototype Presentation

Animation Prototype Link: FigmaLink-AnimatePrototype

Final App Design II - Task 2 : Animation Prototype

REFLECTION

At the beginning, I was very stuck with ideas for the planning of animations for all pages. I kept worrying that the animations in my mind would look great at this stage, but when it came to the final project, creating the app by coding it, I kept eliminating those ideas because I worried it would be difficult for me to achieve that result. This limitation hindered my creativity and made me quite unmotivated. However, I eventually found a balance and managed to work well from then on. Since the last time I did animations in Figma was last year, I had forgotten some of the techniques. I spent some time watching tutorials online to familiarize myself with Figma again. Although the process of creating animations for all pages took longer than I expected, especially the splash screen and home page, I enjoyed the process. Spending a lot of time thinking about ideas and experimenting with different kinds of animations, and seeing the results, was definitely an accomplishment. One important lesson I learned is that spending time to learn and watch tutorials is crucial. It can sometimes save a lot of time by using "shortcuts" to create the animations I want.

TAN YI-TYNG (0353327)