Task 2: Interaction Design Proposal and Planning
25 September 2024
Simon Ko Jing Liang
0364359
Bachelor of Design in Creative Media
INSTRUCTION
Fig 1
Instruction - PDF
Task 2
The application I redesigned is called KTMB.
To Do List:
- Detailed Wireframe
- User Flow Diagram
- Micro & Macro Animation
Detailed Wireframe
Fig 2
Wireframe - PDF
User Flow Diagram
Fig 3
User Flow Diagram
I would going to choose the function which is booking the train ticket.
Micro Animation & Macro Animation
Based on the application I had chosen, in order to make it faster and more convenient for users to pre-purchase train tickets, I focused more on micro animations.
Micro Animation
Below is the micro animation I decided to create:
Button Interactions (Throughout the App): Add hover effects and subtle animations when users tap buttons like "Register," "Login," or "Confirm." For example, the buttons could slightly enlarge or change color briefly on tap to provide visual feedback.
Form Fields (Registration & Login Screens): Use animations when users focus on form fields, such as a highlight effect or underline animation. This guides users and emphasizes active fields.
Notifications Icon (Booking History/Notifications): A small animated bell or dot indicator can appear on the notifications icon when there are new alerts, making it more noticeable to users.
Fig 4
Micro Animation - PDF
Prototype in Figma:
Feedback
After consulted with Mr. Shamsul, I changed the corner radius not too round.
Macro Animation
Page Transitions (Navigation Between Sections): Add transition effects when users navigate between main pages like onboarding, booking, and summary. Slide or fade-in animations would make the transition feel smoother and more connected.