APPLICATION DESIGN // TASK 02

Hasnol Rafiq Bin Hasnol Raduan / 0356767

Advanced Interactive / Bachelor of Design (Hons) in Creative Media / Taylor's Design School

---

Task 02: Interaction Design Planning & Prototyping

Create a comprehensive prototype animation sheet for a train booking app. This sheet should serve as a visual guide, illustrating the user flow and transitions within the app, from selecting the trip type to confirming the booking and making the payment.

Application Prototype Animation Sheet

I created this prototype animation sheet in Figma to visualize the user flow and transitions within the app. This sheet serves as a comprehensive guide to help understand the intended user experience.

Starting from the top, the first set of screens allows users to select their trip type - whether it's a one-way or round-trip journey. These screens feature dropdown menus and date pickers that animate smoothly when interacted with, providing a seamless user experience.

Moving down the flow, users can input their journey details such as the origin, destination, and travel dates. As they interact with these components, micro-interactions like dropdown animations and date picker transitions will occur, enhancing the overall usability.

Once the journey details are set, users can proceed to select their preferred seats. Here, the seat map component will animate and update dynamically based on the user's selections, ensuring a clear and intuitive seat selection process.

After selecting seats, users will be presented with a summary of their trip details and fare information. This screen may include modal windows or overlays that slide in or fade in gracefully, providing additional information or prompting users for further actions.

Finally, the flow culminates in the booking confirmation and payment screens. These screens may feature various UI elements such as input fields, buttons, and progress indicators, all of which will be animated to provide visual feedback and guide users through the booking process seamlessly.

Throughout the entire flow, I've carefully planned and annotated the various animations and transitions to ensure a cohesive and delightful user experience. This prototype animation sheet serves as a reference to accurately implement the intended interactions and animations, aligning with the overall design vision for the app.