Application Design II - Task 2: Interaction Design Proposal and Planning

on

22.4.2025 - 6.6.2025 ( Week 5- Week 7)
Gam Jze Shin / 0353154
Application Design II / Bachelor of Design in Creative Media
Task 2: Interaction Design Proposal and  Planning 

Index

1. Instructions
2. Task 2: Interaction Design Proposal and  Planning 
3. Feedback
4. Reflection

Instructions

fig 1.1  Application Design MIB

Task 2

In this task, students are required to create a thorough interaction design plan for their final web-based mobile application. This includes detailed wireframes, user flow diagrams, and prototypes showcasing both micro and macro animations. The objective is to conceptually and visually develop interaction designs and animations that will improve the overall user experience of their application.

To prepare for the animation prototype, we need to include two types of animations: micro animations and macro animations. To better understand these concepts, I conducted research online about the micro animations and macro animations.

Micro Animations
Micro animations are small, subtle movements used to provide feedback, guide users, or enhance interactions in a user interface. They usually occur within a component or element.

Examples:

  • A heart icon filling up when liked
  • A button changing color on hover
  • A loading spinner
  • A switch toggling from off to on

fig 2.1 - 2.2 Micro animations examples

Macro Animations
Macro animations are larger-scale transitions or movements that affect the layout or flow of the interface. They help guide the user through navigation or between major sections.

Examples:

  • A page sliding in from the right when navigating to a new screen
  • A product card expanding into a detailed view
  • A modal window animating in and out
  • Navigation drawer sliding in from the side

fig 2.3 - 2.4 Macro animations examples

Research
fig 2.5 CSS references website

Website: https://prismic.io/blog/css-button-animations
I explored various CSS button examples from a webpage as references for interface animations that could be incorporated into my design. Since my project focuses on the Senheng app, a retail shopping application, I also analyzed similar platforms like Lazada and Shopee. I observed that business-oriented apps like these typically do not rely heavily on macro animations. Instead, they emphasize micro animations to enhance the user experience—particularly to create a smoother, more engaging shopping journey that encourages users to interact and make purchases within the app.

Master Plan
After gaining a clear understanding, I began developing a master plan for the Senheng app prototype by mapping out the micro and macro animations for each page. This helped me establish a rough structure and provided a clear direction for the overall app flow, ensuring consistency throughout the design.
fig 2.6 Master Plan Progress

First, I organized the flow of the prototype pages. Then, I created two separate box sections—one for micro animations and one for macro animations. I placed these into each transition point and outlined how the page transitions would occur, along with the simple micro animations that would appear on each page.

Storyboard

fig 2.7 Storyboard Progress

Next, after completing the master plan, I began creating the animation storyboard for each prototype screen. I referred to senior work, which included detailed explanations for Onload, On page, and Offload animations for each page. Following that approach, I arranged the layout with the prototype on the left side and the three sections of animation explanations on the right.

fig 2.8 Explanation in Storyboard

After completing the storyboard, I began creating the animations for each prototype page, using the planned transitions and animation types to ensure consistency and enhance the overall user experience.

Animate Prototype
On boarding Page
Macro:

  • Senheng logo animation


fig 2.9 - 2.11 Senheng logo progress in Adobe Illustrator

I searched for the Senheng logo online and imported it into Adobe Illustrator. Using the Image Trace tool, I converted the logo into vector paths. However, I noticed that some parts were not traced cleanly, so I used the Shape Tool to manually fix and connect the broken areas, while also removing any unnecessary elements. After cleaning up the design, I separated the logo into different layers to prepare it for animation in Lottiefiles. This step helps ensure a smoother and more flexible animation process later on.

fig 2.12 - 2.13 Senheng logo aniamtion in Lottiefiles

Next, I exported the file as an SVG from Illustrator and imported it into Lottiefiles. In Lottiefiles, I created the animation using key animation functions such as opacity, rotation, and position. These tools allowed me to bring the logo to life with smooth transitions, enhancing its visual appeal and making it more dynamic for use in the prototype.

fig 2.14 - 2.15 Senheng name progress

Since the logo did not include the brand name, I decided to add the text "Senheng" below the logo within the animation. This addition helps to clearly represent the brand and strengthens its identity in the animation.

On boarding logo GIF
fig 2.16 Senheng logo GIF

This is the Senheng logo GIF that I exported from Lottiefiles. After completing the animation, I imported it into Figma and placed it into the prototype.

fig 2.17 On boarding page before and after

The two pages on the left show my previous idea for the onboarding page. After reviewing it, I decided to enhance the visual appeal by adding the Senheng logo animation. This improvement helps the onboarding screen look more polished and engaging compared to the earlier version.

fig 2.18 On boarding page animation before and after

Both of these are the original versions. After reviewing them, I felt that by incorporating the logo animation, the loading bar became unnecessary. So, for the final version, I decided to remove the loading bar to keep the design cleaner and let the animation take focus.

fig 2.19 Final on boarding page

Sign Up Page
Macro:
  • Page slides up from the bottom, revealing a full red background.
  • The red background is filled with white patterned lines.
  • Input fields slide in from left to right to remind the user to fill them out.
  • The Sign Up box rotates into the page, prompting the user to click it after filling out the information.
Micro:
  • When the user hovers over an input box, an animation effect highlights the box to show it’s active.
  • When the user presses (mouse down) on the Facebook and Google icons, a hover animation effect appears. This effect signals to the user that these icons are clickable buttons.
fig 2.20 Sign up animation effect

I made the Sign Up box appear from the center with zero opacity, then duplicated it as a completed box with full opacity, applying a smooth animation transition between them so the box animates as if it’s being filled up.

fig 2.21 Sign Up Page

fig 2.22 Sign Up Page animation

Before Home Page
Macro:
  • The Sign Up box smoothly dissolves into the advertising page, where the advertising poster then appears.
Micro:
  • The box animates when hovered over to indicate interactivity.
  • The cancel button’s color darkens on hover to show it is clickable.
  • This visual feedback helps users understand the button’s functionality.
fig 2.23 Before Home Page

fig 2.24 Before Home Page animation

Home Page
Macro:

  • The text "Welcome back, Avery" pops up with a shining effect to warmly greet the user.
  • The home icon in the navigation bar fills up, indicating it’s the active or selected page.

Micro:

  • The button hover effect features a circular animation that zooms out from the center, expanding to cover the entire button before gradually fading out, creating a smooth and engaging visual interaction.
  • In the Super Deals section, clicking on an image reveals a different image, adding an interactive element to the browsing experience.
fig 2.25 Text animation in Home Page

I changed the text opacity from 0 to 100 and added an effect to create a pop-up feeling, making the text appear more dynamic and attention-grabbing.

fig 2.26 Icon animation in Home Page

Here is the transition I created for the home icon, which activates when navigating to the home page to indicate the current active state with a smooth and engaging effect.

fig 2.27 Home Page

fig 2.28 Home Page animation

Searching Page
Macro:

  • The information slides up from the bottom of the screen, creating a smooth upward transition effect.
Micro:
  • The box animates when hovered over to indicate interactivity.
fig 2.29 - 2.32 Searching Page attempt
I experimented with different transition effects, including slow, bounce, ease-in, and ease-out. After comparing them, I found that the ease-in effect felt more suitable, so I decided to use it.

fig 2.33 Searching Page

fig 2.34 Searching Page animation

After Searching Page
Macro:

  • The products appear line by line, creating a sequential reveal effect.
  • The store icon is filled in to indicate that the user is currently on the store page.
Micro:
  • The filter icon fills up when hovered over, indicating interactivity.
  • At the same time, the filter text enlarges slightly and appears with a pop-up effect to draw attention and enhance user engagement.

fig 2.35 After Searching Page

fig 2.36 After Searching Page animation

Filter Page
Macro:

  • The filter page slides in smoothly from the right, creating a clear and intuitive transition for the user.
Micro:
  • The box animates when hovered over to indicate interactivity.
  • The text will have pop up effect while hovering.
fig 2.37 - 2.38 Components in Filter Page

This is the component I created for the filter page. When the user hovers over it, the appearance changes to visually indicate interactivity and guide user actions.

fig 2.39 Filter Page

fig 2.40 Filter Page animation

Product Page
Macro:

  • The product page dissolves in with a smooth fade effect, creating a seamless and visually appealing transition.
Micro:
  • Product images can be scrolled horizontally, allowing users to browse multiple views easily.
  • Users can like or dislike the product by tapping the heart icon, which triggers a pop-up effect for visual feedback.
  • The "Add to Cart" and "Buy Now" boxes below also feature a pop-up effect, encouraging user engagement and prompting purchase actions.
fig 2.41 Horizontal scroll in Product Page

This is the horizontal scroll section that allows users to browse through product images.

fig 2.42 Product Page

fig 2.43 Product Page animation

Add to Cart Page
Macro:

  • The information section smoothly slides up into view.
Micro:
  • The box animates when hovered over to indicate interactivity.
  • The product quantity can be increased or decreased using plus and minus buttons, allowing users to easily adjust the number of items.

fig 2.44 - 2.45 Add to Cart Page

fig 2.46 Add to Cart Page animation

After Add to Cart Page
Macro:

  • The screen dissolves into the visual animation for a smooth transition.
  • The "Done" graphic appears with a scaling effect, growing from small to large to create a satisfying completion feeling.

fig 2.47 After Add to Cart Page

fig 2.48 After Add to Cart Page animation

My Cart Page
Macro:

  • The screen smoothly dissolves into the My Cart page.
Micro:
  • The box animates when hovered over to indicate interactivity.
  • After selecting a product, the price smoothly appears on the screen.
  • The "Checkout" box animates with a pulsing effect—expanding and shrinking repeatedly—to draw the user's attention and encourage them to proceed.
fig 2.49 - 2.50 Components created in My Cart Page

While hovering, the box displays a light red background to indicate it's interactive. When clicked, a “/” symbol appears to confirm the action. For the product adding section, I designed it to clearly show that it's clickable, guiding users to interact with it easily.

fig 2.51 My Cart Page

fig 2.52 My Cart Page animation

Payment Page
Macro:

  • User information slides in from left to right, creating a smooth horizontal transition.
  • Additional information slides up from the bottom, enhancing the layered flow of content presentation.
Micro:
  • A red line appears to guide the user, indicating which section they need to complete next after selecting the previous option.
  • This visual cue helps maintain a clear and intuitive flow throughout the process.
fig 2.53 Payment Page

fig 2.54 Payment Page animation

After Payment Page
Macro:

  • After a successful payment, a graphic animation appears with a short delay to celebrate the completion.
  • Once the animation finishes, the screen automatically navigates to the tracking page.

fig 2.55 - 2.58 Payment successful animation progress

I created the payment animation by importing the design into Adobe Illustrator and separating the elements into layers. Then, I animated it using LottieFiles. However, I encountered a challenge—LottieFiles was quite laggy, and the animation took a long time to render smoothly. I also tried exporting it to Figma using the LottieFiles plugin, but the animation still appeared blurry in Figma. This was one of the technical difficulties I faced during the process.

Payment Successful GIF
fig 2.59 Payment Successful GIF

This is the graphic animation that appears after a successful payment, providing a visual confirmation and enhancing the user experience.

fig 2.60 After Payment Page

fig 2.61 After Payment Page animation

Tracking Page
Macro:

  • The customer information slides in from left to right.
  • Other supporting information slides up from the bottom, enhancing the visual flow and content structure.
Micro:
  • When hovering over the driver contact section, a fill-up effect appears to indicate interactivity and draw the user's attention.
fig 2.62 Tracking Page

fig 2.63 Tracking Page animation

After Tracking Page
Macro:

  • A delivery animation appears to visually represent the current status of the parcel, helping users track its progress in real time.
After Tracking GIF
fig 2.64 After Tracking GIF

This is the animation that displays the parcel’s status when the user wants to track their delivery, offering a clear and engaging visual update on its progress.

fig 2.65 After Tracking Page

fig 2.66 After Tracking Page animation

Progress in Figma
fig 2.67 Components in Figma

This is the component I created for the prototype, designed to support interaction and enhance the overall user experience in the interface.

Final Interaction Design Proposal and Planning
Final Master Plan
Click here to view the Master Plan in Figma File.

fig 2.68 Final Master Plan

Final Storyboard
Click here to view the Storyboard in Figma File.

fig 2.69 Final Storyboard

Figma File 
Click here to view the animated prototype in Figma File.

fig 2.70 Task 2 Figma File

Prototype Link
Click here to view the animated prototype link.

fig 2.71 Task 2 Prototype Link

Presentation Video
Click here to view the task 2 Presentation Video in YouTube.

fig 2.72 Task 2 Presentation Video

Prototype Video
fig 2.73 Task 2 Animation Prototype Video
Feedback

Week 6
General Feedback
Mr. Razif recommended that we use LottieFiles or Adobe After Effects to create macro animations, which can then be integrated into our prototype.

Reflection

Experience
Creating animations and transitions in Figma was unfamiliar to me at first. Therefore, I took the initiative to explore and experiment, especially with micro animations. I learned that by creating components for elements such as buttons, text, and shapes, I could easily modify and reuse them across various prototypes. This approach not only saves time but also allows me to manage multiple animations and effects within the same project without being limited to a single type of transition.

In addition, this was my first time learning how to create animations using LottieFiles. The process is quite similar to Adobe After Effects, but it requires some extra steps. For example, I needed to import images into Adobe Illustrator, separate the layers, export them as SVG files, and then bring them into LottieFiles for animation. Once the animation was complete, I used the LottieFiles plugin to import it into Figma. This workflow involves working across several platforms, which I found beneficial in improving the quality and flexibility of my design work.

Observation
I observed that commercial or business-focused mobile applications tend to use fewer animations compared to entertainment or lifestyle apps. This is likely because too many animations can overwhelm users or disrupt the buying experience. Instead, these apps prioritize encouraging purchases through strong call-to-action elements like "Buy Now" buttons or promotional highlights. However, they may still use subtle animations—such as celebratory effects after a successful payment—to enhance user satisfaction and make the experience more enjoyable. Striking the right balance between functional design and animation is crucial to avoid overwhelming the user.

Findings
I discovered that creating animations—especially detailed ones for each screen—requires a significant amount of time and attention to detail. Even small animation effects can be time-consuming, and there’s always a risk of placing them incorrectly or having them fail to work. This process demands a high level of patience and carefulness. To ensure the animations work as intended, it’s important to test and double-check each animation after implementation. This has taught me that good animation design is not just about creativity, but also precision and perseverance.

Comments

Post a Comment