Application Design II / Task 2

 WEEK5-WEEK7

NAME: JIN RONG

I.D: 0361701

COURSE: Application Design II  / Bachelor of Design (Honors) in Creative Media

Application Design II / Task 2

---

INSTRUCTION

---

 LECTURES

Week 5

This week, Mr. Razif introduced us to the concept of micro-interactions in UX design. He explained how these subtle animations can greatly improve the user experience by providing visual feedback, enhancing usability, and making interactions feel smoother. He also showed us how FlutterFlow supports importing animations, making it easier to integrate motion into our designs. To help us understand the topic better, he recommended a YouTube video series called "The Principles of UX Animation" by Val Head, available on the Adobe Creative Cloud channel. Through this, I realized that good design isn’t just about appearance—small animations can make a big difference in how users feel while using an app.

Week 6

This week focused on building a fully functional login system using FlutterFlow. The flow started with a sign-up page for users without an account. After registration, users could log in and access the dashboard. I was able to build most of this without writing code, unless advanced customization was needed. Although the interface was straightforward, I still took time to understand the logic behind user authentication and how screens were connected. The testing phase helped me visualize the entire user journey more clearly. I found FlutterFlow to be a beginner-friendly platform, and it gave me a sense of accomplishment to create a working feature without traditional coding.

Week 7

This week, the majority of the class voted not to attend the physical lesson, so I chose to complete my individual tasks at home.

---

Task 2: Interaction Design Proposal & Planning

Requirements: 

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.

Login process

The various pages of the entire login process use fade-in and fade-out and smooth left and right sliding switching animations to ensure natural and smooth page transitions and improve the consistency of user experience.

The App icon on the login page implements an animation effect from completely transparent (0% opacity) to fully displayed (100% opacity) to enhance visual appeal.

When the user clicks the "Forgot Password" button, the current page disappears through a fade-out animation and smoothly transitions to the password reset page.

The subsequent pages include confirming the email, entering a new password, and creating a new user. Each page switch uses the same fade-in and fade-out or left and right sliding animation to ensure a unified process and visual comfort.

After completing all steps, it will finally jump to the login success page to end the login process.

Summary of interactive design of ticket purchase process

Macro Interaction

After successful login, the user enters the starting page of the ticket purchase process. Each step of the page transitions by sliding left and right to form a coherent and natural linear process (select theater → date and time → seat → ticket type → payment → success page).

The page switching uses a combination of fade-in and fade-out and sliding to keep the visual transition smooth and reduce the sense of jump.

After the payment is completed, jump to the success page, and the success information is presented in a gradual fade-in manner to enhance the sense of completion and ritual of the process.

Micro Interaction

Cinema selection page:

Click the heart icon in the upper right corner of the theater, the icon color changes from gray to red to indicate "collected", and click again to change back to gray, supporting status switching.

Select date and time page:

When clicking the date card, the background color changes to indicate selection.

When clicking the time button, the button background changes color to indicate selection, clearly conveying the user's current selection.

Seat selection page:

After clicking the optional seat, the color changes (such as from gray to green) to indicate the selected state.

The selected seat can be deselected by clicking it again, and the color will be restored.

Occupied seats are gray and unclickable, conveying the disabled state.

Select ticket type page:

When the plus and minus buttons for each ticket type are clicked, a slight zoom animation appears in the number area to provide click feedback.

On the success page, the payment confirmation information and icons are displayed in sequence using a gradual animation