Application Design 2 || Task 2: Interaction Design Planning & Prototyping
22.05.2025 - 08.06.2025 || Week 05 - Week 07
Hanson Pea Wei Hao || 0359463
Application Design 2 || Bachelor of Design (Honours) in Creative Media || Taylor's University
Task 2: Interaction Design Planning & Prototyping
Hanson Pea Wei Hao || 0359463
Application Design 2 || Bachelor of Design (Honours) in Creative Media || Taylor's University
Task 2: Interaction Design Planning & Prototyping
Lists
1. Instructions
2. Feedbacks
3. Reflections
Instructions
For Task 2, We need to create a prototype that presents all the animations the final app should have. we are required to create a complete interaction design plan for our mobile app project. This involves not just designing how the app looks, but also how it behaves, which including transitions, animations, and user feedback. The main goal is to design interactions that feel smooth, intuitive, and enhance the overall user experience.
Process
Based on the previous Task 1, I have completed redesigning the SOCAR app, and now I am beginning to create the master plan to better understand the app flow mapping. Next, I proceeded to the storyboard, which includes detailed explanations of the interactive animations within the app. Each storyboard page is divided into three sections: Onload, On page, and Offload.- On Load Animation: Animation that occurs when the page initially loads.
- On Page Animation: Animation that takes place within a page.
- Off Load Animation: Animation that takes place as an element moves off the screen or fades out.
Fig 1.1, Overview of Story Board
Fig 1.2, Overview of Master Plan
Fig 1.3, Interactive Design Master Plan & Storyboard
Interactive Design Master Plan & Storyboard: [Link to Figma]
Animate Prototype
Splash Screen Animation
Macro:- The splash screen unfolds as a cinematic sequence, starting with a tap-triggered logo that fills the screen. The letter "S" animates into view, gradually assembling the full SOCAR wordmark through a smooth fade and position shift. This stepwise reveal introduces brand recognition in a dynamic, memorable way.
- As the brand animation completes, a car drives across the screen , a metaphor for motion and mobility. The transitioning the user from branding into the app’s functional space. The animation concludes with a seamless slide into the login screen, where the call to action is clearly presented. This uninterrupted flow from brand introduction to user action establishes emotional engagement and clarity in navigation.
Fig 2.1, Overview of Splash Screen
Fig 2.2, Animated of Splash Screen
Changing Screen Between two page
- Each main tab (Explore, Booking, Account) is accessed through a slide transition that mirrors the direction of navigation which is sliding left or right as users switch contexts. This spatial movement reinforces the sense of moving across sections of the app, making it easier for users to mentally map their position.
- The transition is consistent and fluid, allowing users to quickly switch between browsing cars, managing bookings, and updating their profile without cognitive friction. Each screen retains its distinct layout and branding, helping reinforce page identity while supporting an intuitive and visually continuous experience.
Fig 2.3, Overview of Slide between Screen
Fig 2.4, animation of Slide between Screen
Animation when Successfully booking a car
Marco:
- The booking confirmation flow uses a progressive animation to reinforce success and closure. A large checkmark animates smoothly into view, signaling to the user that their action has been completed. This visual confirmation plays out over a series of frames, creating a sense of satisfaction and clarity before revealing the booking summary.
- As the checkmark fades, the screen transitions into a detailed confirmation card that outlines booking details, payment, and car information. The use of vertical stacking and timing ensures that the user can absorb each piece of feedback without feeling rushed. The journey ends with a seamless slide to the Booking Page, where the new reservation is visible by creating a smooth bridge from confirmation to ongoing user interaction.
Fig 2.5, Overview of Animation when Successfully booking a car
Fig 2.6, Animation when Successfully booking a car
Fully Booking a car
Marco:
- The booking flow unfolds through a structured and linear journey, starting from the Explore screen where users input key booking details. Upon initiating a search, the app smoothly transitions into a scrollable list of available vehicles. This transition maintains user context and reduces cognitive load by keeping layout and brand elements consistent.
- Once a car is selected, the booking flow deepens with a detail-rich screen and a clear “Proceed” call to action. Each stage transitions through a subtle vertical slide, reinforcing directionality and guiding the user toward confirmation.
- After confirming the booking, a deliberate and paced success animation is introduced which with a checkmark growing in scale and reinforcing the emotional closure of the task. This step-by-step confirmation is not just decorative but serves to pause the experience, giving the user time to absorb the completion of their booking.
- Finally, the flow resolves in a clear handoff to the Booking Page, where the new reservation appears with up-to-date status. The entire sequence leverages smooth transitions and micro-delays to build clarity, reduce anxiety, and deliver a polished, user-first booking experience.
Fig 2.7, Overview of full booking a car
Fig 2.8, Animation of full booking a car
Final Submission
Presentation Video Link: [Youtube]
Working on my SOCAR-inspired app prototype in Figma has been a refreshing return to the fundamentals of interface design. Rebuilding screens, designing transitions, and prototyping animations helped me better understand how users experience visual flow, but not just static screens.
In the early stages, I focused on structuring the splash screen and welcome animations. Using Figma’s frame linking, smart animate, and timing controls, I was able to simulate branding moments like the fade-in of letters, the movement of a car icon, and transitions into the login page. Although the animations aren’t as fluid as a real coded app, the process made me appreciate how Figma can visually communicate intent and narrative through UI.
Designing each screen required thinking not only about layout, but also how each component behaves. Every motion which from sliding tabs to confirmation checkmarks is need to feel meaningful. This reminded me how micro-interactions and macro-transitions are both critical in shaping user expectations and emotions. I faced challenges with layer matching and timing delays, but I get to solve it buy watching some Youtube tutorial, these helped me to build confidence in Figma’s prototype logic.
Overall, this project reminded me how design tools like Figma aren’t just about screens, and they’re about building experiences. I’m thankful for the feedback and support that helped me improve my logic flow and bring more life into the transitions. It’s motivated me to further explore how I can turn flat UI into something dynamic and intentional.
In the early stages, I focused on structuring the splash screen and welcome animations. Using Figma’s frame linking, smart animate, and timing controls, I was able to simulate branding moments like the fade-in of letters, the movement of a car icon, and transitions into the login page. Although the animations aren’t as fluid as a real coded app, the process made me appreciate how Figma can visually communicate intent and narrative through UI.
Designing each screen required thinking not only about layout, but also how each component behaves. Every motion which from sliding tabs to confirmation checkmarks is need to feel meaningful. This reminded me how micro-interactions and macro-transitions are both critical in shaping user expectations and emotions. I faced challenges with layer matching and timing delays, but I get to solve it buy watching some Youtube tutorial, these helped me to build confidence in Figma’s prototype logic.
Overall, this project reminded me how design tools like Figma aren’t just about screens, and they’re about building experiences. I’m thankful for the feedback and support that helped me improve my logic flow and bring more life into the transitions. It’s motivated me to further explore how I can turn flat UI into something dynamic and intentional.
Comments
Post a Comment