Application Design 2 - Task 2: Interaction Design Proposal and Planning
Index
Lectures
|
| Fig1.1 Flutterflow Demo |
Instructions
1. Planning Interaction Design: Masterplan & Storyboard
|
| Fig2.1 Masterplan |
To support the animation design later on, I first decided which screens would involve micro or macro animations.
- Micro animations are small, focused transitions like button feedback, loading spinners, or hover effects—they enhance clarity and guide users subtly.
- Macro animations, on the other hand, are more noticeable and structural—like screen transitions, page entry effects, or full-screen overlays—they shape the overall rhythm of the user journey.
2. Structural UI components (e.g. nav bars): same animation in & out
This
consistent directional logic
brings several benefits:
1. Improved user orientation: Users can easily understand where elements come from and where they go.
2. Cleaner visual rhythm: A consistent motion pattern makes transitions feel smooth and intentional.
|
| Fig2.2 Storyboard |
|
| Fig2.3 Storyboard |
After planning out the animation types, I moved on to the storyboard to define each screen’s animation in more detail. Every screen is broken down into four stages: Before entering, Entering, During, and Exiting.
Figma Link of Masterplan and Storyboard to have a clearly view
After completing the masterplan and storyboard, I began creating animation prototypes for each key screen. Here are the screens I designed, along with the logic and reasoning behind each animation.
A. Splash & Loading Screen
|
| Fig2.4 Loading Screen |
|
| Fig2.5 Loading Screen animation |
The app opens with a black screen, followed by a branded LFS logo card sliding in from the left. As it enters, it performs a 3D flip rotation, giving a dynamic first impression. Then, a progress bar begins to fill from 0% to 100%, providing users with a clear sense of loading status. Finally, the card slides out to the right, and the background softly fades, transitioning into the login screen.
Animations used here include:- 3D Logo Flip (Macro)：Establishes brand identity and adds a memorable, immersive introduction
- Slide In Left / Slide Out Right (Card) (Macro)：Creates a smooth flow from launch to next screen, mimics real-world motion
- Progress Bar Fill (Micro)：Offers clear loading feedback, reduces uncertainty and waiting anxiety
- Crossfade Background (Macro)：Provides soft screen transition without visual disruption
B. Login Page
As the splash screen exits, the login screen picks up the momentum. The LFS card slides in again from the left, followed by text and button elements that gradually fade in. The login and sign-up buttons also go through a color and depth transition, reinforcing their interactivity. This creates a sense of continuity from the previous screen and introduces the user to the login options clearly.
|
| Fig2.6 Login Page |
|
| Fig2.7 Login Page Animation |
Key animations:
- Slide In (Card + Text) (Macro)：Maintains directional flow from splash screen, introduces login panel clearly
- Text Fade In (Micro)：Ensures readable and comfortable content entry
- Button Color & Depth Transition (Micro)：Highlights button interactivity, offers immediate feedback on availability
- Micro Button Press (scale + darken) (Micro)：Confirms user action through tactile visual feedback
C. Bottom Sheet Login
Once the user taps the login button, a bottom sheet panel slides up with a white background, creating a familiar mobile UI pattern. The rest of the background dims, focusing the user's attention. During interaction, the input fields respond with cursor feedback and eye icon toggles, while the login button provides zoom-and-fill response when pressed. Upon submission, the entire modal slides down smoothly, restoring the previous page or leading into the next screen.
|
| Fig2.8 Bottom Login Sheet |
|
| Fig2.9 Bottom Sheet Login Animation |
Animation techniques used:
- Slide Up Panel (Macro)：Mimics physical drawers or mobile sheets, familiar and easy to interpret
-
Exit by Tap Outside or Submit → Slide Down (Macro)：Allows user to exit with control, returning to prior state smoothly
-
Dimmed Background (Micro)：Focuses user attention, reduces background distraction
-
Input Focus Cursor Blink (Micro)：Provides clear input indicator, improves accessibility
-
Eye Icon Toggle (Micro)：Reflects password visibility change, reinforces user control
-
Button Press Feedback (Zoom + Fill) (Micro)：Adds tactile response, prevents accidental repeat taps
D. Homepage
After logging in, users land on the Homepage, where several UI components animate into place to establish structure and orientation. The top navigation bar slides in from above, while the bottom navigation bar rises from below. At the same time, the movie banner card enters with a left slide and slight zoom effect, and a floating Quick Booking button fades and slides in from the right.
|
| Fig2.10 Homepage |
|
| Fig2.11 Homepage Animation |
Animations used:
-
Top/Bottom Nav Slide In (Macro): Anchors page structure, reinforces user orientation
-
Card Slide In Left + Zoom Slightly (Macro): Adds entry momentum and visual hierarchy emphasis
-
Floating Quick Booking Fade + Slide In (Macro): Calls attention to primary action, supports immediate access
-
Carousel Auto Slide (Micro): Maintains dynamic visual flow, showcases multiple options passively
-
Indicator Toggle (Swipe Highlight) (Micro): Indicates user position in carousel, enhances discoverability
-
All Button Tap (Zoom + Color Deepen) (Micro): Offers clear touch confirmation, reduces input hesitation
-
Floating Button Draggable + Semi-hide (Micro): Increases flexibility, ensures function availability without clutter
E. Quick Booking
Clicking the Quick Booking button brings users into a step-by-step booking interface. The screen uses a timeline layout where elements like cinema, movie, time, and seat slide in from the left in order. The current step is highlighted with an orange zoomed-in dot, providing a sense of progress.
|
| Fig2.12 Quick Booking |
|
| Fig2.13 Quick Booking Animation |
Animations used:
-
Slide in Cards + Top Bar (Macro): Visually guides user step-by-step through form-like layout
-
Staggered Card Entrance (Macro): Enhances visual rhythm, keeps focus paced
-
Timeline Dot Highlight (Micro): Clarifies current progress in multi-step process
-
Conditional Button Enable (Micro): Only enables next action when valid, improving task clarity
-
Zoom Feedback on Tap (Micro): Tactile feedback helps users confirm interaction
F. Seat Selection
In the seat selection screen, the movie poster slides in from the left and the seating layout appears by unfolding from the bottom. When a user taps on an available seat, it turns white to show selection. The Book Seats button becomes active in orange after a valid selection is made.
|
| Fig2.14 Seat Selection |
|
| Fig2.15 Seat Selection Animation |
Animations used:
-
Slide in Poster + Fade Seat Area (Macro): Emphasizes movie focus and immersive layout
-
Slide Out Right while Retaining Top Bar (Macro): Maintains orientation across screen transitions
-
Seat Highlight when Clicked (Micro): Visual cue of selection status
-
Activate Book Seats Button on Valid Input (Micro): Reinforces progression and input requirement
-
Bounce / Zoom Effect on Button Click (Micro): Adds tactile micro-feedback, reducing uncertainty
Once seats are selected, the user moves on to selecting ticket types. The ticket card slides in from the left, and the Add to Cart button is initially disabled. After choosing ticket quantities, the button becomes active and gives a zoom-and-color emphasis when tapped.
|
| Fig2.16 Ticket Type |
|
| Fig2.17 Ticket Type Animation |
Animations used:
-
Slide in Ticket Card (Macro): Ensures continuity and visual context for next task
-
Slide Out to Food Page (Macro): Seamless shift to next step, matching directional consistency
-
Grayed-out Add to Cart Button (Micro): Indicates input requirement before proceeding
-
Quantity Picker Interaction (Micro): Reinforces input feedback via number change
-
Zoom Rebound + Color Emphasis on Add to Cart (Micro): Strong visual confirmation that selection is successful
H. Food and Beverage
The food menu opens with a staggered entry of category buttons and food cards. Users can tap items to add them to the cart, with animations like card highlight, shopping cart flash, and zoom effects reinforcing each action. The overall experience is dynamic, yet structured.
|
| Fig2.18 Food and Beverage |
|
| Fig2.19 Food and Beverage Aniamtion |
Animations used:
-
Category Buttons Pop from Below (Macro): Brings structure to food filtering, avoids cognitive overload
-
Staggered Grid Food Card Entry (Macro): Adds dynamic rhythm and clear item segmentation
-
Slide Out to Next Stage (Macro): Keeps screen flow intuitive and predictable
-
Step Highlight + Tick on Progress Bar (Micro): Visually confirms progress and encourages completion
-
Card Selection with Cart Icon Flash (Micro): Instant response to selection action
-
Activate Add to Cart Button + Zoom Tap (Micro): Visually confirms action and emphasizes interactivity
After selecting tickets and food, a cart detail pop-up slides up from the bottom. The background dims to shift focus. Items inside the cart appear one by one with a staggered upward animation, and prices scale up for emphasis. Tapping the "Check Order Summary" button provides rebound feedback.
|
| Fig2.20 Cart Detail Animation |
|
| Fig2.21 Cart Detail |
Animations used:
-
Slide Up Panel from Bottom (Macro): Matches mobile UI conventions, naturally draws focus
-
Staggered Item Entry (Top to Bottom) (Macro): Builds visual rhythm, mimics stacking order effect
-
Click Outside to Close + Slide Down (Macro): Easy and intuitive exit mechanism
-
Dim Background (Micro): Reduces distraction, keeps attention on cart details
-
Price Zoom from Small to Large (Micro): Highlights total value, improves cost awareness
-
Press Animation on CTA Button (Micro): Enhances action confirmation
-
Background Restore (Micro): Returns screen to normal, transitions smoothly
J. Vouncher Redeem
The next screen presents a sliding order summary. Items are shown with card staggered animation, and the total amount figure zooms in to highlight. If the user clicks "Redeem", the voucher panel slides in and updates the summary after selection.
|
| Fig2.22 Vouncher Redeem Animation |
|
| Fig2.23 VOuncher Redeem |
Animations used:
-
Card Staggered Entry (Macro): Builds logical reading flow
-
Voucher Slide In + Selection Highlight (Macro + Micro): Guides and confirms user actions
-
Total Sum Zoom Large (Micro): Highlights total price for cost awareness
-
Redeem Button Activation Feedback (Micro): Confirms interaction clearly
K. Payment
In the payment screen, the payment methods fade in one after another in a staggered sequence. Initially, the confirm button is grey. Once a method is selected, the button turns orange and becomes active, also triggering color feedback animation.
|
| Fig2.24 Payment Animation |
|
| Fig2.25 Payment |
Animations used:
-
Payment Icon Staggered Fade-In (Macro): Guides user attention progressively
-
Payment Button Activate Color Change (Micro): Indicates system readiness clearly
L. Payment Animation
After submitting payment, a wallet icon animates with a coin merging in and transitioning into a ticket icon, visually narrating the transaction process. Meanwhile, a pulse loading text indicates progress. Eventually, a "Success" text and icon fade in to confirm completion.
|
| Fig2.26 Payment Aniamtion |
|
| Fig2.27 Payment Animation |
Animations used:
-
Wallet → Coin → Ticket Merge Effect (Macro): Visual storytelling of transaction
-
Pulse Loading Text (Micro): Reinforces the loading state gently
-
Success Fade-In with Icon (Micro): Delivers closure and confirmation
M. My Booking Page
The My Booking screen showcases upcoming or past bookings. The header and tabs slide in from top, booking cards fade up, and the QR code fades in last. If users click "Download", the button changes state to grey.
|
| Fig2.28 My Booking Page Aniamtion |
|
| Fig2.29 My Booking Page |
Animations used:
-
Card Info Entry from Bottom (Macro): Reinforces ticket summary layout
-
QR Code Fade-In (Micro): Highlights the essential ticket content
-
Download Button State Change (Micro): Reduces confusion and confirms success
Final Submission:
1. Presentation Video
2. Prototype and Animation Demo
3. Presentation Slide
4. Figma File
5. Figma Prototype
Reflection
Experience
Working on this animation prototype was both rewarding and challenging. One of the most time-consuming aspects was figuring out what type of animation would best suit the overall style of the app. It wasn't just about adding movement—it had to feel natural, purposeful, and technically achievable. In the context of application design, animation should never be overwhelming or overly decorative. Excessive or overly complex transitions may confuse users or slow down the experience. The key was to ensure that every animation served a clear functional purpose while enhancing the overall smoothness of the app.
Observation
Throughout the project, I came to realize how powerful micro animations can be. Simple feedback animations—like a red exclamation mark for errors or a pulsing loading icon during a wait—can greatly improve clarity and reduce user anxiety. These subtle movements offer immediate visual feedback, helping users stay oriented and informed. On the other hand, well-placed macro animations, like screen transitions or card movements, provide a sense of flow and narrative, making the app feel more cohesive and engaging.
Findings
In the end, I learned that good animation is never just about aesthetics—it’s about communication. It bridges the gap between system and user, subtly guiding interactions, reducing confusion, and making every action feel more satisfying. When used appropriately, animation can even encourage users to return and recommend the app, simply because it “feels right.” It’s not just a decoration—it’s a silent guide. With the right balance between function and form, animation becomes an invisible yet essential part of great UX design.
Comments
Post a Comment