Application Design II / Task 3: Interactive Component Design & Development

on
25.05.2025 - 08.06.2025 (Week 8 - Week 11)
Gunn Joey / 0366122
Application Design II / Bachelor of Design (Hons) in Creative Media
Task 3: Interactive Component Design & Development

TABLE OF CONTENTS

1. Module Information Booklet 
2. Task 3
3. Feedback 
4. Reflection

MODULE INFORMATION BOOKLET


TASK 3

Description

In Task 3, you are required to design and develop functional interactive components and micro-interactions that enhance the user experience of their app. Unlike Task 2, which focused on visual prototypes, this task involves creating working animation elements that can be integrated into the final app. The aim is to explore interaction design more deeply and apply creative decisions to produce tangible, usable components that add value to the overall user experience.

Requirements

1. Create interactive components/elements using HTML/CSS and JavaScript.

2. Deliver working animation elements, not just visual mockups.

3. Component examples include:
  • Navigation menu with interactive icons
  • Side menu interaction
  • Pop-up boxes
  • Call-to-action buttons
  • Page/screen transitions
Submission
  • Project files and video walkthrough of the components
  • Single HTML file with linked CSS/JS (if needed)
  • Reflective blog post in your e-portfolio
Progress:

        A. Lottiefiles Animation

1. Splash Screen

At first, I tried to create the splash screen for the Sasa app in FlutterFlow, but I quickly realised it wasn’t working the way I wanted. So, I started watching many YouTube tutorials to figure out a better way to do it. I ended up importing all the images for the splash screen animation into Adobe Illustrator, where I arranged the layers for each page. Once I had everything set up, I exported the files and brought them into After Effects to work on the animation.


I also tried using Lottiefiles but ran into a limitation because it does not support PNG files, which I had used for my splash screen assets. This made the process a bit frustrating and I realised it was not the right tool for this project. I decided to stick with Adobe Illustrator and After Effects since I had more control and flexibility working with my existing files.


2. Home Page

For the home page, I created a circular transition that plays right after the user taps the button on the last onboarding screen. This transition shows an animation before smoothly moving into the home page, helping to create a more polished and engaging experience.



3. Checkout Process

I created the checkout process loading spinner in Lottiefiles to add a smooth and visually appealing animation. Since Lottiefiles doesn’t support text layers well, I converted the text into an SVG format and then imported it into Lottiefiles. This allowed me to keep the design consistent and ensure the animation worked correctly.




        B. Developing App in Flutterflow

1. Splash Screen

I added the splash screen animation to FlutterFlow and made sure it plays only once when the app starts, without looping. I adjusted the animation settings to ensure it runs smoothly just during the initial loading screen.


2. Log In/Sign Up Process

I created a dropdown multiple selection container in FlutterFlow for the sign-up form, allowing users to choose their nationality easily. I also added text fields in FlutterFlow to let users fill in their personal details, such as name, email, and phone number. This helped make the form more interactive and user-friendly.


3. Home Page

Before creating the home page transition animation in Lottiefiles, I first tried to make it in FlutterFlow and applied an animation to it. However, I ran into a problem with the on page load action because it did not work, and I could not figure out what was causing the issue. I tried adjusting different settings and troubleshooting, but the animation still would not play when the page loaded. In the end, I decided to create the animation in Lottiefiles instead.


4. Product Page

For the product page, once users tap on “Add to Cart” or “Add to Wishlist,” a message appears saying “Item added to cart” or “Item added to wishlist.” I created these messages as components and adjusted their settings to make sure they appear neatly in the center of the page. This helps provide clear feedback to users in a simple and visually balanced way.



5. Shopping Cart

I designed a ribbon transition animation for the promo section to make the user experience more engaging. The idea is that when users tap the "Apply Promos" button, a ribbon effect slides down from the top of the screen, giving a smooth and satisfying visual cue that the promo has been applied. After a short moment, the ribbon disappears on its own. I wanted to create something subtle yet noticeable, and I think this type of animation might be called a dissolve effect, though it also feels like a smooth slide or fade. Either way, the goal was to add a polished touch to the interaction without overwhelming the user.



For the promo selection, I used a circular button checklist to let users choose which promos to apply. I searched for a suitable component in FlutterFlow and found one that fit the design I had in mind. After that, I adjusted the details of the checklist, such as the size, color, and spacing, to match the overall look and feel of the app. This helped make the promo selection process simple and intuitive for users while keeping the interface clean and visually consistent.



7. Checkout Process

I placed the Lottiefiles loading spinner into FlutterFlow to enhance the user experience during loading times. After adding it, I adjusted the padding to make sure the spinner was properly centered and had enough space around it. This helped the animation look clean and balanced on the screen, making the loading process feel smoother and more polished for users.


Similar to the promo section, I created a circular button checklist for the payment method page to let users easily choose their preferred payment option. Then, I adjusted the checklist details such as the colour and spacing to ensure everything looked clean and consistent with the rest of the interface. This helped make the payment selection process smooth and user-friendly while maintaining a polished and cohesive design.


        C. Final Submission

Published Web Addressed URL: https://sasa-app-yaqwqx.flutterflow.app/logInForm
Fltterflow Collaborator Link: https://app.flutterflow.io/share/sasa-app-yaqwqx
Video Presentation:


FEEDBACK

Mr. Razif: Focus on finalising the core interactive elements first to ensure a smooth user experience. Additional features and refinements can be addressed later during the final project phase. Continue developing the main components and pay attention to consistency in interaction and layout. 

REFLECTION

Working on Task 3 for my SASA cosmetic e-commerce app was a really rewarding experience. It gave me a chance to see just how much small interactive details can shape the way people feel when using an app. I focused on adding things like animated buttons, smooth transitions, and interactive menus that matched the clean, polished look of the SASA brand. It took a bit of trial and error to get things feeling right, especially on mobile, but seeing the interactions come to life made all the effort worth it.

As I built these components, I started to notice how even the smallest interaction can change how users experience the app. For example, a simple animation when someone adds a product to their cart helped give clear feedback and made the whole process feel more complete. I also played around with dropdowns and pop-ups, which helped with navigation, but only when spaced well and timed properly. At times I went a bit overboard with animations and had to pull back to keep things simple and easy to use. Making everything feel consistent really helped tie the design together.

One big thing I learned was that micro-interactions work best when they have a purpose. They aren’t just for decoration, Users rely on them for guidance and reassurance that things are working as expected. If the animations were too flashy or distracting, it just got in the way. I found that quick, smooth, and predictable interactions helped users feel more confident and comfortable. This task really showed me how thoughtful design, even in small details, can make an app feel friendly, trustworthy, and enjoyable to use.

Comments

Post a Comment