APPLICATION DESIGN 2 - TASK 2

19/05/2025 -08/06/2025 (Week 05-07)

Chan Suet Yee 0358427

Bachelor of Design (Honours) in Creative Media

Application Design II | DST60504 | Sec 01

Task 02 | Interaction Design Proposal & Planning

---

 LIST 

TABLE OF CONTENTS:

1. INSTRUCTIONS

2. TASKS

3.REFLECTION

---

 INSTRUCTIONS 

---

 TASKS 

INSTRUCTIONS

For this assignment, we are required to develop a comprehensive interaction design plan for our final web-based mobile application. The goal is to visually and conceptually prepare the user interactions and animations that will enhance the overall user experience. The key components of the assignment include:

1. Interaction Design Documents

• Create detailed flowcharts and wireframes to map out the user journey.
• Clearly show the layout of each screen and the navigation structure of the app.

2. Animation Prototyping

• Micro Animations: Design small interactive effects (e.g., button clicks, loading indicators, hover effects) using tools like Figma.
• Macro Animations: Develop concepts for larger transitions (e.g., page changes, animated intros) using tools like Adobe After Effects or provide references if direct prototyping isn't possible.

3. Visual and Written Explanation

• Provide explanations or a visual presentation to describe how the animations and interactions improve usability and aesthetics.
•  Explain the purpose behind each animation and how it supports the user experience design.

4. Video or Class Presentation

• Presentation format will be confirmed by the module coordinator.

MASTERPLAN & STORYBOARDING

For Task 1, I started working on a Master Interaction Board for my Senheng app redesign. This board helps me map out all the key interactions in the app, from the big stuff to the small details.

The macro interactions are the main user flows—things like searching for products, browsing categories, and buying items. These are the steps users go through to actually get things done in the app.

Then there are the micro interactions, which are all the little touches that make the app feel smooth and responsive. Think hover effects, button animations, loading spinners, and confirmation messages when users take an action. These might seem small, but they really help the app feel more polished.

Once the interaction board is done, the next step is to work on a Storyboard. This is where I plan out how animations will look and behave across the app. For each screen and interaction, I’m thinking about three types of animations:

• On-load animation – What happens when a screen or element first appears.
• On-page animation – What moves or changes when the user interacts with something on the same screen.
• Off-load animation – What shows up when the user leaves the screen.

This whole process helps me keep things consistent and make sure the app not only works well but also feels good to use. I want the new Senheng app to be easy to navigate, visually smooth, and fun to interact with.

Fig 1.0 Overview of Masterplan

Fig 1.1 Overview of Storyboard

Figma File :

ANIMATION PROTOTYPE

Splash Screen

Macrointeractions :

1. Entering the Site
The user moves their mouse onto the splash screen, which triggers the transition from a passive intro state to an interactive one.

Microinteractions :

1. Initial State (before interaction)

• Background: Solid white
• Senheng Logo: Centered on screen
• Start Button: Hidden 

2. On Mouse Enter

• Background Transition:
• Background fades from white to black
• Uses easing (e.g. ease-in-out) for a soft visual feel

• Logo
• Stays fixed at the center of the screen
• No movement or visual change (helps anchor the experience)

• Start Button Appearance:
• Slowly fades in with a gentle delay (e.g. 500ms after background transition starts)
• Possibly with slight scale-in animation (optional, for added elegance)
• Final position: centered beneath the logo

Fig 1.2 Overview of Splash Screen Animation

Onboarding Screens

Macrointeractions : 

1. Click Start

• User clicks the start button on the splash screen to begin onboarding.

2. View Onboarding Content

• The new page (onboarding screen) fades in.
• Slogan appears on mouse enter.
• Navigation via “Next” button.

3. Progress Through Onboarding Pages

• User navigates between onboarding pages (using "Next").
• Current page is represented visually by a larger dot in the pagination indicator.

Microinteractions : 

1. On Click “Start” Button

• Fade Transition: Entire onboarding screen fades in smoothly.

2. Start Button Transformation:

• Morphs into “Next” button (smooth width and text transition)
• On Mouse Enter (Onboarding Page)

3. Slogan Appearance:

• Slogan fades in 
• Triggered only on mouseenter (to avoid overwhelming motion on load)

4. Pagination Indicator (3 Dots)

• Dot Behavior:
• 3 horizontally aligned dots
• Current page’s dot: larger
• Inactive pages: smaller dots

5. Transition on Page Change:

• When "Next" is clicked, the large dot shifts to the next position
• Animation: smooth scale transition between dot sizes

Fig 1.3 Overview of Onboarding screens animation 

Final Onboarding Screen

Macrointeractions : 

1. Click “Next” Button

• Triggers transition to the final page.

2. View Welcome Page

• User sees a new message or call-to-action.
• A new button appears prompting sign-up.

3. Mouse Enter on Welcome Page

• Triggers the appearance of text content

Microinteractions : 

1. On “Next” Button Click

• Page Transition:
• Current page fades out.
• Next page fades in smoothly 

2. Button Morph:

• “Next” button transforms into “Join Us Now”
• Text changes
• Button smoothly animate its width

3. On Mouse Enter (Welcome Page)

• Text Animation:
• Slogan fades in slowly

Fig 1.4 Overview of Final Onboarding screen animation 

Login Screen

Macrointeractions : 

1. Click “Join Us Now”

• Navigates to the Login Page (fades in).

2. Enter Login Credentials

• User clicks on textboxes to enter Mobile No./Email/IC and Password.

3. Submit Credentials

• User clicks “Done”
• Login page slides up and new page slides in.

Microinteractions :

1. Join Us Now → Login Page

• Transition:
• Login page fades in smoothly.

2. Floating Label Behaviour

• When user clicks into Mobile No./Email/IC textbox:
• Placeholder animates:
• Shrinks in size
• Moves to top-right corner of the textbox
• Leaves space for typing
• Same effect applies to Password textbox.

3. Click “Done” Button

• Page Transition:
• Login page slides upward and out of view.
• Next page (homepage) slides up and in from below.

Fig 1.5 Overview of Login screen animation 

Home Page

Macrointeractions : 

1. Enter Home Page

• Triggered when user logs in and presses “Done” from the login page.
• Home page slides in from below (upward motion).

2. Scroll Through Sections

• User scrolls vertically to move through different sections like:
• Spotlight Picks
• S-Coin Cashback

3. Explore Within a Section

• Each section allows horizontal scrolling to browse more content within it.

Microinteractions :

1. Page Transition

• Slide Up Effect:
• After login, Home Page slides in from bottom to top, replacing the login screen.

2. Section Scrolling Behavior

• Vertical Scroll:
• Scrolls between sections (stacked vertically).
• Horizontal Scroll Within Each Section:
• For example:
• “Spotlight Picks” has scrollable card list going left-right.
• “S-Coin Cashback” and other sections behave similarly.

 Fig 1.6 Overview of Home screen animation 

Search Screen

Macrointeractions : 

1. Click Search Button (from Home Page)

• Home Page slides out to the left
• Search Page slides in from the right

2. Enter Search Page

• Mouse enters the Search Page area
• "Trending Products" panel fades in

Microinteractions : 

1. On Search Button Click

• Home Page Transition:
• Smoothly slides leftward off-screen

2. Search Page Entry:

• Slides in from the right to replace the home view

3. On Mouse Enter (Search Page)

• "Trending Products" Panel:
• Fades in gradually

 Fig 1.7 Overview of search screen animation 

Product Details Screen

Macrointeractions : 

1. Click Product (from Home Page)

• Home page fades out
• Product Detail Page fades in

2. Drag Bottom Section Up

• Expands to show full product info (like reviews, description, etc.)

3. Drag Down to Collapse

• Bottom section slides back down to preview/collapsed state

4. Press Back Button

• Returns to Home Page (fade out product detail, fade in home)

5. Click Panel Button (“Reviews”, “Description”, “Others”)

• Changes content panel
• Updates button color to reflect selected state

Microinteractions : 

1. On Product Click (from Home Page)

• Transition:
• Page fades into Product Detail Page using CSS opacity + transition

2. Bottom Section Behavior

• Drag Up:
• Section slides upward to expand
• Content scrollable inside
• Drag Down:
• Section slides downward to close

3. Tab Buttons ("Reviews", "Description", "Others")

• Initial State:
• All buttons filled white
• On Click/Select:
• Selected button changes background to dark blue
• Others revert to white
• Corresponding content panel changes (fade transition)

 Fig 1.8 Overview of Product Details screen animation 

Add to Cart Screen

Macrointeractions : 

1. Press “Add to Cart” (initial button on product page)

• A panel fades in where the user can:
• Select product type
• Adjust quantity
• Confirm adding to cart

2. Press “Add to Cart” (inside panel)

• Panel fades out
• A small “Added to Cart” message fades in on top of the bottom navigation bar

3. Cart Icon Update

• The cart icon in the navigation bar shows a badge with a number representing items added

Microinteractions : 

1. On Initial “Add to Cart” Button Press

• A panel fades in
• Includes:
• Dropdown or radio buttons for product type
• Stepper or input for quantity
• Final Add to Cart button

2. On Confirming Add to Cart in Panel

• Fade out the selection panel
• Fade in “Added to Cart” message (on top of bottom navigation bar, near cart icon)

3. Cart Icon in Nav Bar

• A small badge counter appears or increments:
• Smooth fade animation to draw attention

 Fig 1.9 Overview of Add to cart screen animation 

Shopping Cart Screen

Macrointeractions : 

1.Press “Shopping Cart” Icon (bottom nav bar)

• Cart Page fades in

2. Item Selection

• Users can select individual items
• Or tap "Select All" at top right

3. Item Deletion

• Untick an item
• Then double-click to turn it black & white (inactive state)
• Slide panel to the left to reveal a delete icon
• Tap delete to remove item

4. Press “Checkout” Button

• Cart page fades out, Checkout page fades in

Microinteractions : 

1. Navigation to Cart

• On clicking cart icon:
• Use fade in animation for Cart Page

2. Item Selection

• Checkboxes on each item
• When selected: tick on checkbox
• "Select All" syncs with individual item states

3. Item Deletion Flow

• Untick item
• empty checkbox 
• Double-click
• Visually confirms it’s inactive 
• Slide item left
• A delete icon slides in from the right
• Tap Delete Icon
• Item slides out

4. Checkout Button

• Only enabled when at least one item is selected
• When tapped:
• Cart page fades out
• Checkout page fades in

 Fig 1.10 Overview of Shopping cart screen animation 

Checkout Screen

Macrointeractions : 

1.Payment Option Scroll & Selection

• User scrolls horizontally to view available payment methods
• User clicks on a payment option to select it

2. Item Review

• User scrolls vertically to review the cart items listed below

3. Order Confirmation

• User presses “Confirm Order”
• An “Order Confirmed” panel fades in

4. View Orders

• User presses “My Orders” button
• Checkout page fades out, and My Orders page fades in

Microinteractions : 

1. Payment Option Scroll & Selection

• Horizontal scroll for payment options carousel
• When a payment method is clicked:
• Stroke appears around the selected card 
• Shadow effect added
• All other options return to default appearance

2. Vertical Scrolling for Item List

• Cart items are scrollable below the payment options
• Each item have:
• Product image
• Name
• Quantity and total price

3. “Confirm Order” Button

• On click:
• Confirmation panel fades in
• Text: “Order Confirmed”
• Includes “My Orders” button

4. “My Orders” Button

• On press:
• Checkout page fades out
• My Orders page fades in with transition 

 Fig 1.11 Overview of Shopping cart screen animation 

My Orders Screen

Macrointeractions : 

1.Default Page State

• When user lands on the My Orders Page, the "All" section is active by default, displaying all orders.

2. Switching Between Tabs

• User clicks "To Pay", the “To Pay” section fades in, and the “All” section fades out.
• User clicks "To Ship", the “To Ship” section fades in, and the current section (either “All” or “To Pay”) fades out.

Microinteractions : 

1. Tab Buttons

• 3 category buttons: All, To Pay, To Ship
• Each button is colour-coded :
• All – Dark blue highlight
• To Pay – Red highlight
• To Ship – Turquoise highlight
• The active tab:
• Has shadow effect
• Others return to normal state

2. Fade Transitions

• When switching between sections:
• Current section fades out with
• New section fades in 

3. Order Cards (within each tab)

• Include:
• Product image, title, status badge

 Fig 1.12 Overview of My Orders screen animation 

Profile Screen

Macrointeractions : 

1.Entering Profile Page

• User taps the “Profile” icon on the bottom navigation bar.
• Profile page fades in.

2. Viewing a Section

• User taps the arrow beside a section (e.g., “Account Setting”).
• The selected section page slides in from the right.

3. Returning to Profile

• User presses the Back button from the section page.
• That section page slides out to the left, returning to the Profile page.

Microinteractions : 

1. Profile Page Sections

• Sections:
• Account Setting
• My Orders
• S-Coin
• Notification Settings
• Each section is displayed in a card-style row with:
• Text label (e.g., “S-Coin”)
• Right-facing arrow (→ icon)

2. Transition Effects

• Profile page fade-in
• Section page slide-in from right
• Back button slide-out

 Fig 1.13 Overview of Profile screen animation 

Loyalty Program Screen

Macrointeractions : 

1.Accessing S-Coin Page

• User taps “S-Coin” in the Profile section.
• S-Coin page slides in from the right.

2. Scrolling Loyalty Program Info

• User can scroll horizontally through a series of cards or panels that explain the S-Coin loyalty program.

3. Navigating to Rewards Page

• User taps “Redeem Now” button.
• Rewards page slides in from the left.

4. Returning to S-Coin Page

• User presses Back button.
• Rewards page slides out to the right, returning to the S-Coin page.

Microinteractions : 

1. Profile → S-Coin Page

• Slide-in animation

2. Loyalty Program Info

• Scrollable horizontal panel with:
• Card-style blocks
• Smooth scroll 

3. “Redeem Now” Button

• On click:
• Rewards page slides in from the left

4. Rewards Page

• Shows rewards that can be redeemed
• Cards with product images, point cost
• Scrollable vertically
• Pressing back:
• Rewards page slides out to the right
• Returns user to S-Coin page

 Fig 1.14 Overview of Loyalty program screen animation 

Figma Design File

Figma Prototype

 Presentation Slides 

APPLICATION DESIGN 2 TASK 2 by suetyee chan

 Presentation Video 

---

 REFLECTION 

Experience

Throughout this assignment, I had the opportunity to explore and design the entire user flow for a mobile application, starting from the splash screen to the profile and reward redemption sections. It was an engaging experience as I had to think carefully about the user’s journey, ensuring every transition, animation, and interaction felt natural and intuitive. Mapping out each screen's behavior and movement helped me better understand how microinteractions and macrointeractions shape the overall user experience. I enjoyed visualizing how each section connects and transforms, which deepened my appreciation for thoughtful interface design.

Observation

One key observation I made was how important consistency and clarity are when designing transitions between screens. For instance, using the same fade-in or slide animation across similar actions (like navigating between pages or returning via a back button) helps users form mental models and navigate the app more confidently. I also noticed how small details—like fading text on hover or animating a selected button—can make the interface feel more polished and responsive. These subtle interactions may seem minor, but they greatly enhance user satisfaction and engagement.

Findings

From this assignment, I found that planning user interactions in detail is crucial for creating a seamless and intuitive user experience. Identifying and separating macrointeractions from microinteractions helped me organize my design logic and maintain consistency across the user journey. I also learned that a good user interface is not just about aesthetics—it’s about communication and feedback. Whether it’s through visual cues, transitions, or animated responses, every interaction contributes to guiding the user and reinforcing trust in the app. This process has improved my ability to think from the user's perspective and design with intention.