Application Design II / TASK 2
Week 5 - Week 8
LI YANXI (0361436)
Bachelor of Design In Creative Media
APP II - Task 2
LECTURES
Week 5-6
We learned about Flutter Flow and Firebase. Flutter Flow allows us to visualize our application interface designs, while Firebase supports our backend functionalities. In class, the teacher taught us about login, registration, and homepage pages. The overall process was actually quite complex.
Task 2 - Interaction Design Planning & Prototyping
We are required to develop a comprehensive interaction design plan for our 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 our application.
Submissions:
App Project Files
Online Blog Post in E-portfolio
Video Presentation
Master Plan
Based on the prototype interface design, I have identified and listed the transition animations planned to be added to the application. To better organize these animations, I created a master plan that outlines the specific transition animations for each page, ensuring overall consistency and a smooth user experience.
The main flow includes：
- Loading page
- Sign in page
- Register page
- Home page
- Flight search page
- Account page
- All combine page
I need to confirm three main things first, usually:
1. Searching for flights
2. Booking tickets/selecting seats
3. Viewing order/registration information.
Therefore, these three will be the main focus of my interaction design.
 |
| Master plan in Figma |
 |
| Storyboard in Figma |
Master plan & storyboard Figma link :
https://www.figma.com/design/bwqlTkIAPMdElVXeNaCBee/APPLICATION-II--Master-plan---storyboard?node-id=0-1&t=18MfNOBZJvNqTmy1-1
1. Login screen
Macro Interactions:
After clicking to enter the app, users will see options to log in, register, or skip. Selecting any of these options will allow them to proceed to the next step of the app's interaction.
Micro Interactions:
The page background image and logo gradually appear on the screen, followed by the login/registration buttons.
 |
| Login screen |
2. Sign-in Page
Macro Interactions:
The login screen displays an address, password, and re-registration option. Users log in to the app using their personal information.
Micro Interactions:
Automatic left swipe on the page; the page swipes left after interaction.
 |
| Sign-in page |
3. Sign up Page
Macro Interactions:
The user registration page includes options for address, verification code collection, and information settings such as password and name. Users follow the steps to register an account and log in to the software to book airline tickets.
Micro Interactions:
The back button has a right-swipe effect
 |
| Sign-up page |
4. Home Page
Macro Interactions:
The main page features interactive functions such as Flight search to find desired flight information. The Both section covers all interactive information, and Profile allows users to modify their account information.
Micro Interactions:
Clicking on any part will trigger a fade-in, causing the page to gradually appear from the screen.
 |
| Home page |
5. Search Flight Page
Macro Interactions:
After clicking "Flight search," you'll see the flight dates. Click on your desired date to access the flight departure time, your preferred airline, and flight number. Then, you'll be directed to baggage allowance selection.
Micro Interactions:
Select a date, then swipe up; swipe left to enter the flight selection page, ending with a fade-in animation that slowly reveals the content.
 |
| Search flight page |
6. Select seat Page
Macro Interactions:
After selecting your flight, you will be taken to the seat selection page. Different colors indicate whether you can choose your desired seat. Once you have selected your seat, click the "Book" button below.
Micro Interactions:
The "Book" button has a sliding animation; clicking it will swipe right to appear the next page. Clicking the "Back" button will swipe left to return to the previous page.
 |
| Seat select page |
7. Payment Page
Macro Interactions:
After completing the initial booking process, you will be redirected to the payment page. Enter your password, and a payment success message will appear. After successful payment, you can click the button below to view flight details. Alternatively, if you haven't pre-linked your payment method, you can select the payment linking page, choose your preferred payment method, and click link. After successful linking, you will be redirected back to the payment page to continue the payment process.
Micro Interactions:
All animations are swipe-to-right effects for the next step. Finally, clicking "Complete Payment" will result in a fade-out animation returning you to the app's main page.
 |
| Payment page |
 |
| Set up Payment Page |
8. Profile Page
Macro Interactions:
The main page contains a profile page; clicking "Profile" will take you to this page.
There are three interactive elements: Personal Information, Security & Privacy, and Settings & Notifications. Each interaction has corresponding content.
Micro Interactions:
Each interaction uses a right-swipe animation, the back button uses a left-swipe animation, and returning to the main page uses a fade-out animation.
 |
| Profile main page |
 |
| Personal Info Page |
 |
| Privacy and Sharing Page |
 |
| Notification and setting Page |
Final Figma prototype link：
Final Animation prototype link：
Final present video link：
Reflection
评论
发表评论