Application Design 2 - Task 02: Interaction Design Proposal and Planning
APPLICATION DESIGN 2 DST 61004
WEEK 05 - Week 07 (22.05.2025 - 05.06.2025)
NAME: Chin Tze Wei
I.D: 0357423
COURSE: Application Design 2 / Bachelor of Design (Honors) in Creative Media
GROUP: Class 01 Sec 01
Application Design 2 - Task 02: Interaction Design Proposal and Planning
- LIST -
1. INSTRUCTIONS
Module Information Booklet
Module Information Booklet (MIB)
Requirement:
- Interaction Design Document: Creating detailed flowcharts and wireframes to map out user journeys, creen layouts, and navigation paths.
- Animation Prototyping:
- Micro Animation:Small effects like button clicks, loading icons, and feedback states, prototyped in Figma.
- Macro Animation: Larger UI transitions or intro animations. I can use After Effects or reference similar examples if needed.
- Explaination and Presentation: Write or visually present how these interactions and animations enhance usability and aesthetics, explaining the thought behind each design decision.
2. TASK 02: INTERACTION PROPOSAL AND PLANNING
In this task, I will create a comprehensive interaction design plan for my
final mobile web app project. The primary objective is to visually and
conceptually outline the user interactions with the app to guarantee a
seamless and engaging user experience.
- Micro animations: Button press, loading spinner, success checkmark
- Macro animations: Screen transitions, slide-in menus, onboarding motion
2.1 Application Flow Mapping
(a) Onboarding Page Flow
First, when user open the application, user will see the onboarding
information page. Each page for the onboarding page use the same
animation, slide in left, with the curve ease in. To change pages to
pages, users need to tap on the "next" button.
Figure 2.1 Onboarding Page
Figure 2.2 Onboarding Page Flow
Video 1 Onboarding Page Preview
(b) Onboarding to Splash Screen Page Flow
After the onboarding page, it will leads the users to the splash screen
page. This page use the animation, instant with the curve ease in.
Figure 2.3 Splash Screen Page
Figure 2.4 Onboarding to Splash Screen Page Flow
Video 2 Onboarding to Splash Screen Page Preview
(c) Splash Screen Page to Log In and Sign Up Page
Later, it will lead users to Log In and Sign Up page, the animation used in
the transition to the page is smart animate with the curve ease in.
Figure 2.5 Log In and Sign Up Page
Figure 2.6 Splash Screen Page to Log In and Sign Up Page Flow
Figure 2.7 Log In and Sign Up Page Flow
Video 3 Splash Screen Page to Log In and Sign Up
Page Preview
(d) Log In and Sign Up Page to Home Page
Then, users will log in into the application and enter to the Home Page, the
transition animation for this page are smart animate with the curve ease in.
Figure 2.8 Log In and Sign Up Page to Home Page Flow
(e) Main Flow - Home Page to Product Page
After successfully login/signup, user will proceed to the home page which
included category and products of the applilcation. Then, user can select on
of the product and proceed to product page.
Figure 2.9 Home Page to Product Page
Figure 2.10 Home Page to Product Page Flow
Video 4 Home Page to Product Page Preview
(f) Main Flow - Product Page to Payment Page
After added the product to cart, it then immediately proceed to the Cart
Page and users can conduct to payment progress.
Figure 2.10 Product Page to Payment Page
Figure 2.11 Product Page to Payment Page Flow
Video 5 Product Page to Payment Page Preview
2.2 Master Plan
After finnish the mapping, I then add macro and micro interactions into those
pages.
User Flow Mapping with Micro and Macro interaction
2.3 Storyboard
While exploring the user flow, I have also map on how the screens and
components animate and transition to create a smooth and interactive
experience for users.
This storyboard helps to have a clear understand of how and what interactions
should done by users while using the application.
Storyboard Overview
3. FINAL SUBMISSION
3.1 Figma - App Flow Mapping and Masterplan
Figma - App Flow Mapping and Masterplan
Click
HERE to access the App Flow and Masterplan in Figma
3.2 Figma - Animation Prototype
Animation Prototype
Click
HERE to access the Animation Prototype
3.3 Presentation Video
5. FEEDBACK
There are no feedback given by Mr Razif.
6. REFLECTION
Through this project, I gained valuable experience in enhancing user interface
and interaction design. By analyzing the original app, I identified key areas
for improvement, such as visual consistency, user flow efficiency, and
feedback animations.
I redesigned each screen with a focus on modern aesthetics and usability,
applying UX principles like feedback, system status visibility, and user
control. Using Figma’s prototyping tools, I incorporated both macro and micro
animations to improve the overall user experience and create a more engaging,
responsive app.
This project helped me better understand the importance of storytelling in
UI/UX design, especially through tools like storyboards, interaction flows,
and before-and-after comparisons. It has strengthened my skills in designing
for both usability and emotional impact, and I feel more confident in creating
user-centered digital experiences.
