Labels

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

Application Prototype High Fidelity


The KTMB Mobile app focuses on creating a smooth, intuitive user experience enhanced by thoughtful animations. When users tap between email and phone sign-in options, a subtle slide transition happens. This creates a seamless flow between input methods. The promotional banners on the home screen feature a gentle sliding animation. Users can swipe through offers, with each card smoothly transitioning into view.

In the "Book Your Journey" section, tapping on fields like "From/To" and "Destination" triggers an elegant dropdown animation. The options unfold downwards with a subtle fade-in effect, making selection intuitive and visually appealing. The date picker slides in from the bottom of the screen when activated, with a smooth transition that doesn't disrupt the overall layout.

The seating chart pops up with a scale animation, allowing users to easily view and select their preferred seats. Each seat responds to taps with a highlight animation. As users progress through the payment screens, subtle slide transitions happen between each step. This creates a sense of forward momentum in the booking process.

Upon successful booking, a celebratory animation appears. A checkmark icon scales up and fades in, providing clear visual feedback of the completed transaction. The bottom navigation bar features subtle icon animations when tapped, providing clear feedback on which section is currently active.

These animations not only enhance the visual appeal of the app but also serve functional purposes - guiding user attention, providing feedback, and creating a sense of flow throughout the booking process. The result is a more engaging and user-friendly experience that aligns with modern design standards while maintaining the efficiency expected of a ticketing app.


Animation Elements

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.



Labels:

Comments

Post a Comment

Popular Posts