Application Design II / Task 2: Interaction Design Proposal and Planning
Self-Evaluation and Reflection
Starting from 12.2024
4.2025 -8.2025 / Week 1 - Week 14
Ge Xianjing / 0377636
Application Design 2 / Interactive Space Design
- Plan Information and Showcase Animations: Just like creating a Sigma flow or user flow, use arrows to show the navigation process between screens, and design and describe macro and micro animations. Macro animations usually involve large transitions in most of the interactive areas on the screen, while micro animations focus on the changes of touchpoints of content elements within the screen pages.
- Provide Visual Feedback and Clues: Design visual feedback or clues that can offer users a good experience, and describe these designs in detail through documents so that team members can understand the intentions. If there are unique or uncommon designs, further explanations are required.
- Create Visual Examples: Use software such as Canva, Figma, and After Effects to create examples to showcase the animation effects. You can also provide reference links to similar online animations to clearly present the design ideas.
- Use Storyboards: In projects with animations, especially when it comes to interactive animations on websites or advanced interactions, storyboards are needed to represent the ideas. For each screen with a large amount of interaction, describe the situations in different states such as entering, exiting, and loading, and display the corresponding examples.
- Focus on the MVP and Refer to Materials: Concentrate on the MVP (Minimum Viable Product), refer to the provided links (such as the seniors' blog, etc.) as well as relevant logs and examples. Adjust according to needs and there is no need to copy them completely.
- Learn Animation Principles: Watch videos about motion design and animation principles (such as the principle of directing attention) to learn the relevant knowledge.
✦ Animation Strategy Overview – Baidu App Macro Interaction
In this prototype, I placed strong emphasis on macro animations to craft a visually compelling and functionally cohesive transition system across different screens of the Baidu App. My core intent was to guide users seamlessly from one state to another, while making key interface moments feel fluid, dynamic, and meaningful.
Each transition was carefully choreographed to highlight major shifts in context—for instance, the Baidu logo morphing into a droplet that dives into the search bar, or the elastic ripple on the "Book Hotel" button to reflect confirmation. These moments are not only aesthetic but purpose-driven: they reflect feedback, signal intent, and maintain the continuity of the journey.
During this phase, I mapped the entire user flow from homepage to hotel booking completion, making sure that each macro animation aligned with the app’s functional logic and user expectations. My final design approach adopted clean, minimal yet expressive transition styles—striking a balance between clarity and dynamism, so the interface never feels static or disjointed.
By anchoring these animations to the structural rhythm of the app, I was able to establish a cohesive, intuitive, and emotionally engaging experience, especially in high-interaction zones like the hotel search and personal info editing screens.
➤ Key Focus Points Summary (for documentation or Figma side notes):
-
🧭 User flow scaffolding: Clear entry and exit points across all major screens
-
🎬 Macro animations: Page-level transitions (e.g., slide-ins, morphing icons, loading states)
-
💡 Visual storytelling: Each motion emphasizes a meaningful shift in context
-
🎯 Clarity + dynamism: Transition styles are smooth, elegant, and functionally expressive
-
🤝 Cohesive UX: Animations reinforce spatial continuity and reduce friction
In the redesign of the hotel booking flow within the Baidu App, my animation strategy focuses not just on visual aesthetics but on enriching the user’s emotional journey. Animation here is not merely decorative—it acts as a storytelling medium that bridges functionality, brand identity, and user feedback.
✨ Main Step : Book a Hotel via Baidu Search
Open the Baidu homepage
↓
Enter keywords (e.g., “Bodrum hotel”)
↓
View search suggestions → Select or confirm the keyword
↓
Browse search results page (includes ads, filters, and map)
↓
Tap on a hotel card
↓
Enter the hotel details page (images, ratings, facilities, booking button)
↓
Tap the “Book” button → Redirect to booking platform or show booking pop-up
 |
| Main line: search for information and book hotels |
 |
| Enter short video |
 |
| Bookmarks and hot searches |
 |
| Login loading page1.1 |
 |
| Login loading page1.2 |
 |
| Search in the search box |
 |
| Transition concept from researching materials to booking a hotel |
 |
| Macro main animation planning |
 |
| Baidu Home Page (Main Search Interface) |
 |
| Search Results Page (Keyword + Mixed Content) |
 |
| Baidu Baike Article Page (e.g., “Turkey”) |
 |
| Hotel List Page |
 |
| Hotel Detail Page |
 |
| Personal Center → Name Modification |
📱 Page 1: Baidu Home Page (includes search bar and navigation bar)
Use Smart Animate transition.
The top search bar and logo fade in simultaneously.
The bottom navigation bar slides in from the bottom.
When the search bar is tapped → use a Push animation to transition to the search results page.
The bottom navigation bar remains fixed to maintain visual continuity.
The page Pushes left to enter the search interface.
(In the process of later learning, I hope to create animations like this:)
🎬 Homepage ➝ Search Interface: A Ritual of Transition
When the user taps the search bar on the homepage, a visual cue is triggered to mark the beginning of an exploration:
Click on the homepage search bar to jump to the search page. I hope to add an animation here, similar to rotating the Baidu icon and shaking it to open to this screen
- The Baidu logo gently rotates ➝ lightly vibrates ➝ morphs into a small water droplet,
- symbolizing the condensation of information and the entry into a new phase of interaction.
The droplet then softly drops and unfolds into the search page. The motion is quick but fluid—meant to suggest efficiency without abruptness, setting a gentle and immersive tone for the user journey.
📱 Page 2: Search Results Page (includes keyword results, images, videos, etc.)
The entire list appears using Smart Animate + Ease In.
The top category tabs (e.g., “All,” “Images,” “Videos”) use Horizontal Scrolling components.
Tapping on a search result card → use a Push animation to open the detail page.
If the page includes top-level tabs (e.g., notes, images), use a Slide animation (left/right) for switching.
Search Response Feedback: Soothing the Wait(In the process of later learning, I hope to create animations like this)
visually indicating a loading state. The movement mimics a soft breathing rhythm, which helps reduce the perceived wait time and reassures users that the system is responding.
On the “Turkey” search results page, users can:
Swipe horizontally to switch between “Notes,” “Images,” and “Videos” tabs.
The card gently enlarges ➝ fades into the foreground ➝ content scrolls in from the topWhen clicking on the “Baidu Encyclopedia” entry for Turkey, the following motion sequence is proposed:
This creates the illusion of opening a book or diving deeper into a topic, reinforcing the intellectual depth of the encyclopedia.
The page Pushes in from the left.
Use Move In animation for sub-sections (such as intro, images, related entries).
Apply Dissolve or Smart Animate to create layered reveal effects for each section.
🔸In app
Scrolling within the page (vertical) uses no animation, relying instead on Figma’s native scroll smoothness.
🔸Offload
Clicking the back arrow → the page Pushes right to go back.
📱 Page 4: Hotel Booking Flow Pages (List → Detail → Form)
A. Hotel List Page (shows images, ratings, etc.)
Hotel cards fade in from top to bottom using Smart Animate.
🔸In app
Clicking on any hotel card → use Push animation to transition to the hotel detail page.
🔸Offload
Exit the page with a Push left animation.
B. Hotel Detail Page
Whole page slides up on entry; images and text fade in in layers.
🔸In app
Clicking “Book” → transition to the booking form with a Push animation.
🔸Offload
C. Booking Information Form Page
The form section slides up from the bottom.
🔸In app
After filling in the form → tap “Confirm” → a confirmation prompt appears using Overlay + Dissolve.
🔸Offload
🏨 Entering the Hotel Booking Flow: Momentum Meets Meaning(In the process of later learning, I hope to create animations like this)
From the main service categories, when tapping “Book Hotel”:
- The hotel card jumps subtly to acknowledge the tap
- A rotating circular icon appears, indicating the system is fetching detailed content
- Once loaded, the hotel information screen gently fades in
- During the booking form:
The purple confirmation buttons vibrate slightly upon click,
simulating physical feedback and reinforcing the feeling of responsive design.
In the redesign of the hotel booking flow within the Baidu App, my animation strategy focuses not just on visual aesthetics but on enriching the user’s emotional journey. Animation here is not merely decorative—it acts as a storytelling medium that bridges functionality, brand identity, and user feedback.
✅ Post-Booking Success Animation :
- Upon completing the booking and tapping “Confirm,” a crafted micro-interaction takes place:
- The purple button shrinks into a glowing dot ➝ expands into a ripple circle ➝ transitions smoothly to the “Booking Success” screen
- A key icon gently spins, followed by a fade-in confirmation message: “Booking Confirmed. Welcome!”
📱 Page 5: Personal Center → Edit Name
The page Pushes in from the right; the field blocks fade in segment by segment.
🔸In app
Clicking the “Name” field → use Push to transition to the edit name interface.
The input box is displayed using Smart Animate or Overlay simulation.
🔸Offload
📅 Page 6: Calendar Event Marker Page
The page loads using a
Slide up animation. The top month bar and the bottom calendar section appear in layers with Smart Animate + Fade in for a smooth visual entry.🔸In App
Overlay + Slide in from bottom, allowing users to add new events.Users can swipe left or right to scroll through the calendar months using
Horizontal Scroll with Ease-in-out easing for natural transitions.🔸Offload
Tapping outside the form or pressing the back button will dissolve the form popup using the Dissolve animation, returning to the main calendar view.
 |
| Calendar Schedule Page 1 --Detailed time and events |
 |
| Calendar Schedule Page 2 |
🤖 Page 7: AI Smart Search Interface
The main structure enters with a
Slide up motion. The top search bar and icons (for upload, voice, etc.) fade in synchronously for visual clarity.🔸In App
Overlay + Move in from bottom, allowing users to upload images or videos.Tapping the chatbox area opens a typing interface using
Smart Animate + Move in from bottom to simulate keyboard input.Clicking the “History” section brings up an overlay window that displays past search entries categorized by date, animated with
Overlay + Fade in.
Returning to the previous page uses a Push right animation to maintain spatial continuity.
📚 Page 8: Vocabulary Learning Page
The entire page loads with a
Slide up animation. Vocabulary cards fade in one by one using Smart Animate, giving a staggered reading effect.🔸In App
Overlay + Dissolve to softly appear.Users can swipe horizontally through flashcards using
Horizontal Scroll for daily learning content.🔸Offload
Pressing the back button triggers a Push right transition back to the previous task list or main interface.
🎞️ Page 9: Short Video Browsing Page
The page enters with a
Slide up animation. The top category bar (e.g., Recommended, Music, Education) slides in from the top and fades in at the same time.🔸In App
The category bar supports horizontal scrolling to switch between video types.
Tapping the “Message” icon pushes the user to the chat interface with the creator.
🔸Offload
Tapping the back button uses a Push right transition to return to the main video list page.
💬 Page 10: Private Message Chat Interface
The chat page uses
Push left to enter. The top avatar and username fade in, while the chat log slides up for a layered reveal.🔸In App
Overlay + Scale in, gently zooming in for attention.The input field remains fixed at the bottom. Tapping it simulates keyboard appearance with
Smart Animate + Slide up.🔸Offload
Tapping the back arrow triggers a Push right animation to return to the video or profile screen.
👤 Page 11: Personal Profile Page
The profile page loads using
Slide up. The top section, including the profile photo, name, and follower count, fades in and moves in from the top. Functional blocks below (e.g., favorites, history, settings) fade in sequentially.🔸In App
Push animation.Scrolling is enabled to explore additional content, maintaining a clear layout and smooth transitions.
🔸Offload
Pressing the back button triggers a Push right animation, guiding the user back to the home page or previous section.
- User Action: Tap the "More Options" button on the main interface.
- Animation Type: Use Overlay + Move in from Bottom.
- Effect: A compact personal information panel slides up from the bottom of the screen, slightly scaled down to indicate it's a temporary layer on top of the main page.
- Visual Clarity: The background dims slightly using a semi-transparent dark overlay to focus attention on the popup.
- User Action: Tap the "Share" icon inside the personal info popup.
- Animation Type: Use Overlay + Move in from Bottom, layered above the previous overlay.
- Effect: A “Share to...” panel (such as icons for WeChat, WhatsApp, etc.) slides up smoothly above the personal info popup.
- Detail: This second overlay is slightly smaller in height, with rounded corners to distinguish it as a functional layer.
- Background: The first popup dims slightly more, showing it's not currently in focus.
- User Action: Tap outside the panel or select a sharing destination.
- Animation Type: Use Dissolve or Move out to Bottom.
- Effect: The share options disappear first. If the user taps outside the personal info popup after that, it will also dissolve or slide out, returning to the main interface.
 |
| Overview of all Page Prototype View in Figma |
- Tap
- Navigate to
- Slide in (left, right, top, bottom)
- Ease-out
- Open Overlay
- After Delay
- Slide in
2.Interaction Design App Flow Mapping in Figjam
⸻
🎬 Presentation Video Post-Production Summary
During the post-production process of my presentation video, I carried out several targeted edits to ensure a smoother and more comprehensive viewing experience.
Firstly, for segments that contained longer blocks of text or detailed explanations, I applied a 1.4x playback speed adjustment. This helped to maintain viewer engagement by improving the pacing, while still ensuring the clarity of the information being delivered.
Secondly, there were a few moments during the live presentation where I unintentionally skipped showcasing certain animations or transitions due to nervousness or timing issues. In response, I carefully reviewed the entire prototype flow after the presentation and manually inserted the missing animated sequences in the final video. This guaranteed that each user flow and interaction transition was fully demonstrated as intended.
This editing process not only enhanced the clarity of my video but also gave me an opportunity to re-evaluate the logic and coherence of my flowchart design and interaction planning—valuable insights for future iterations of this app project.
Part 2: Interactive Prototype Demonstration
Part 3: Self-Reflection and Summary 13：00--14：31
🔍 Reflection & Insights
For this interaction animation design project, I chose the Baidu App as the foundation to explore complex user flows and animation transitions. By building and analyzing multiple functional modules — including the homepage search, knowledge entries, hotel booking, personal profile editing, AI intelligent search, short video browsing, and private messaging — I gained deeper insight into how large-scale, platform-based apps maintain seamless and interconnected navigation experiences.
Key Reflections:
Managing Structural Complexity & Information Hierarchy
The intertwined nature of various modules led to a highly intricate flowchart. While this posed challenges for animation consistency, it also helped me strengthen my skills in information architecture and user flow planning.Balancing Simplicity with Smooth Visual Transitions
Although I initially envisioned more “fancy” visual effects, I eventually chose to use built-in Figma transitions such as Smart Animate, Slide, and Push. These native animations provided just the right amount of motion to ensure clarity and direction without overcomplicating the interface.User-Centered Thinking in Microinteractions
As I designed features like message pop-ups, vocabulary reminders, and swipeable calendar timelines, I began shifting my perspective to prioritize intuitive user behavior, responsive feedback, and timing. It became clear that meaningful animation should enhance usability—not distract from it.
🚀 Future Development Plan
To further develop this application into a more complete and deployable prototype, I propose several improvement directions:
Enhance Navigational Cues Across Modules
Implement visual cues such as guide arrows, tooltips, or onboarding animations to help users understand the app’s navigation logic and reduce cognitive load during their first-time usage.Introduce Dynamic & Personalized Content
Especially in areas like AI-powered search and video content, I plan to integrate personalized recommendation logic. Micro-interactions, like a star icon turning yellow upon “favorite,” will make the experience more responsive and emotionally engaging.Build a Design System & Component Library
A unified set of UI components (e.g., buttons, cards, bottom tabs, modals) will ensure consistency across pages, streamline team collaboration, and facilitate future multi-platform deployment.Evaluate Animation Feasibility in Real-World Development
I’ll work closely with developers to assess how Figma animations can be translated into real code, such as CSS transitions or React motion libraries, ensuring visual fidelity without sacrificing performance.Conduct User Testing & Data-Driven Refinement
If developed into a real product, usability tests and interaction analytics (e.g., heatmaps, click paths) will be used to iteratively improve the transitions, timings, and page flow logic.
📌 Conclusion
This project taught me that animation is not just decoration — it plays a pivotal role in defining the rhythm, tone, and clarity of user experiences. Moving forward, I aim to further explore how thoughtful transitions can not only guide users but also enrich product identity, improve accessibility, and foster user delight in meaningful ways.
Comments
Post a Comment