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

25/5/2025 - 8/6/2025 / Week 9 - Week 11

Angel Tan Xin Kei / 0356117

Application Design II / Bachelor of Design (Hons) in Creative Media

Task 3 // Interactive Component Design & Development

⋆ ˚｡⋆୨୧˚ Index ˚୨୧⋆｡˚ ⋆

Instruction
Task 3: Interactive Component Design & Development
Feedback
Reflection

⋆ ˚｡⋆୨୧˚ Instruction˚୨୧⋆｡˚ ⋆

Timeframe: Week 08 – Week 11

Description:

Students will build upon the knowledge gained in Task 2 to create micro-interactions and animated micro-interactions for their app. This will greatly elevate the user experience of the app. The aim of this task is to get the students to explore and make creative decisions on the type of interactions they would want to integrate into their app.

The output of this task is a working animation element that are ready to be integrated in their final app. Meaning it’s no longer a visualisation like how it was in Task 2. This will be created using Flutterflow and Lottieflies with the use of animation framework if necessary.

Interactive Components/Elements can be:

Navigation Menu with interactive icons.
Side Menu interaction
Pop Up boxes
Call to action buttons
Page/Screen transitions

Requirements:

1. Interactive components/elements created with Flutterflow and Lottieflies.

Submission:

1. Project link & Video Walkthrough.

2. Collaborator Links.

3. Online posts in your E-portfolio as your reflective studies

⋆ ˚｡⋆୨୧˚ Task 3: Interactive Component Design & Development˚୨୧⋆｡˚ ⋆

A. Animations in Lottiefiles

1) Splash Screen

The initial screen was supposed to be fun and bouncy start with a solid purple eclipse hole bounce into the center of the screen against a neutral background and popping back out with a springy ease-out bounce transition into original colour then blast fills the screen with a gradient background but there's some issue with Lottieflies transformin into Json files so I have made the last gradient screen and further continue in Final Project.

Fig 1.1 Initial Onboarding Screen

Fig1.2 LottiesFlies of Onboarding Screen

2) Loading Screen

Initially, I don't have a loading screen so I designed one for users to buffer after sign in or log in.

Purpose

A branded micro-interaction that enhances the onboarding experience. This animation should make the app feel smooth, polished, and engaging impression after log in or sign in.

Visual Concept

Animation Element: Two gradient circles subtly move and bounce when the user taps “Get Started”.
Branding: Incorporate the Bites brand colors to reinforce visual identity and user familiarity.
Behavior:

Should play once on tap to respond to user interaction, or
Loop smoothly if used as a passive visual during screen load.
Tone: Friendly, minimal, and consistent with the overall UI aesthetic.

Fig 2.1 Lottieflies for Loading Screen

Fig 2.2 Loading Screen.gif

B. Developing App in Flutterflow

1. Splash Screen

I uploaded Lottie animation JSON files in FlutterFlow. Although they appear distorted or incorrect in the preview, they display correctly in the final output. I set the animation timeline to 1000ms to trigger on page load.

Fig 3.1 Splash Screen in FlutterFlow

Fig 3.2 Animation in FlutterFlow

Fig 3.3 Animation in FlutterFlow

2. Onboarding Screen

I have implemented the Page View Controller or Carousel (depending on platform like Flutter, React Native, Unity UI, etc.)

Three indicators that:

Update as the user slides
Can be clicked/tapped to jump to a specific page (optional)

Sliding animation:

Smooth horizontal transition between pages
Fade-in or parallax optional for added polish

Next / Skip button on the last slide that routes to Login or Sign-Up

Fig 4.1 Page Indicator Buttons

Fig 4.2 Sliding Onboarding Pages

3. Home Page

Visual Concept

Slide-In Animation from Bottom: The Home Page enters with a slide-up animation, which gives it a modern and welcoming feel
Membership Card: Users can swipe the membership card left or right to see different membership tiers and styles
Vouchers, Promotions, Deals: Horizontal Swipe Horizontally scrollable cards or tiles showing.

Fig 4.3 SwipeableStack Container

Fig 4.4 HomePage Overview

4. Redeem Voucher Page

Visual Concept:

When the user taps "Redeem Now", show a confirmation message or animation e.g., Are you sure to redeem now?”
Visually distinguish used or expired vouchers by greying them out or reducing their opacity.Optionally, include filter buttons or chips at the top of the list, such as: Rdeem Now and Done
A timer to indicate the validity of redeeming vouchers to avoid lagging or misfunction.
"New" and "Used" Vouchers in same page for seamless vouchers records for user experience.

Fig 5.1 Timer Setting

Fig 5.2 Tab Bar Features in One Page

Fig 5.3 "used" and "available" Vouchers in One Page

Fig 5.4 Voucher Redeemed Pages Overview

5. Enter Promo Code Page

Visual Concept:

When a code is submitted, provide immediate feedback:

If the code is valid: Show a success message like, “Promo code applied!.”
If the code is invalid or expired: Show a bottom message like, “Invalid code.”

After the user taps "Apply Code" and the promo code is valid and accepted.Short and exciting message like: “You’ve successfully redeemed your voucher!”

Fig 6.1 Enter Promo Code Page

C. Final Submission

Published Web Addressed Url : https://the-bites-angeltxkei.flutterflow.app/

Collaborator Link: https://app.flutterflow.io/project/the-bites-heito0

Walkthrough Video:

Video Presentation: https://youtu.be/CVcEwyqFbY4

⋆ ˚｡⋆୨୧˚ Feedback˚୨୧⋆｡˚ ⋆

Week 10

Concentrate solely on the MVP pages of the app for now; the remaining sections can be refined during the final phase of the project.

Week 11

Please proceed with the development and ensure the alignment is neatly arranged. The remaining sections can be refined during the final phase of the project

⋆ ˚｡⋆୨୧˚ Reflection˚୨୧⋆｡˚ ⋆

Experience

This was my first time building a fully functional app using Flutterflow. Firebase and Lottieflies, and it proved to be a valuable hands-on journey into no-code development. Initially, I faced a lot of trial and error trying to understand how Flutterflow’s visual builder works its very different from Figma, especially with the alignments, columns and containers but over time, I became more confident in translating layout ideas into a working app. Integrating Lottie animations and configuring backend flows provided me with new insights into how polished interactions can be created without writing a single line of code.

Observations

One key observation was that having a logical and structured mindset from traditional coding significantly accelerated my learning curve with Flutterflow. Familiar concepts like flex layouts, spacing, and responsiveness made the visual development process more intuitive.

I found the Action Flow Editor particularly powerful it allowed me to connect screens, manage page transitions, and implement logic-driven interactions effortlessly. Working with page states, such as toggling icons (e.g., heart or tick icons), helped me appreciate how conditional logic is implemented visually in no-code platforms different from code, but just as effective once understood.

Findings

Overall, this task reinforced the idea that no-code tools like Flutterflow can empower me with basic coding knowledge to build production-ready apps much faster than starting from scratch. My biggest takeaway is the importance of understanding how design structures, logical flow, and backend interactions work together. Once the data flow clicked, using Firebase for authentication and storage became quite straightforward. This experience strengthened my belief that combining design thinking with technical fundamentals is essential to creating user-friendly, interactive apps whether or not you're writing traditional code.

⋆ ˚｡⋆୨୧˚ Quick Links ˚୨୧⋆｡˚ ⋆

Application Design II // Task 1: Self-Evaluation and Reflection

Application Design II// Task 2:Interaction Design Planning & Prototyping

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

Application Design II // Task 4 : Final Project & E-Portfolio