9th June 2025 - 6th July 2025 (Week 8 - Week 11)
Sin Jun Ming 0364638
Application Design 2 / Bachelor of Design in Creative Media / Taylor's University
Task 3 - Interactive Component Design & Development
Instructions
Task 3 - Interactive Component Design & Development
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 or Lottieflies.
Submission:
1. Project link & Video Walkthrough.
2. Collaborator Links.
3. Online posts in your E-portfolio as your reflective studies.
A. App Development in Flutterflow
1. Splash Screen
For this task, I began by designing and implementing the splash screen of the app using FlutterFlow. My reference was the finalized design from Figma, which included animation elements to make the onboarding feel smooth and engaging. In FlutterFlow, I recreated the layout by matching the colors, typography, and positioning closely with the Figma mockup.
Fig 1.1 Splash Screen in Flutterflow
Fig 1.2 Animation in Flutterflow
Fig 1.3 Animation Overview of Splash Screen
2. Home Page
I structured the layout using Column and Row widgets to position elements like the welcome message, featured banner, and course cards. To create a dynamic and engaging first impression, I applied a slide-up and fade-in animation to the Home Page.
Fig 2.1 Home Page Animation
Fig 2.2 Home Page Overview
3. Course Learning Page
The next major screen I developed was the Course Learning Page, where users can dive into the content of a selected course. I enhanced the structure by using FlutterFlow’s Tab Bar feature to combine both the "Description" and "Index" into a single, seamless screen.
Fig 3.1 Tab Bar Feature
To enhance interactivity, the "Start" button triggers a bottom sheet pop-up when clicked. This bottom sheet is a reusable component in FlutterFlow that overlays the current page with a smooth upward animation.
Fig 3.2 Pop-Up Component
Fig 3.3 Course Learning Page Overview
From there, clicking the CTA button on the bottom sheet leads users into the Lesson Flow, which consists of 7 separate screens designed to simulate the full lesson experience. These screens represent the core functionality of the app in its MVP stage - completing a lesson.
Fig 3.4 Lesson Flow
4. Challenge Page
Based on the Figma design, I built this page in FlutterFlow to deliver interactive, quiz-like experiences that align with the course content.
Fig 4.1 Challenge Page in Flutterflow
I created pop-up components that appears once user answers a question correctly.
Fig 4.2 Pop-Up Components
Fig 4.3 Challenge Flow
5. Progress Tracking Page
Animations of fade-in and slide-up on page load were added to make the page feel smooth and responsive.
Fig 5.1 Progress Tracking Page Animation
A reusable "Share" component is created to be shown as bottom sheet when "Share" button is clicked in the Progress Flow.
Fig 5.2 Reusable "Share" Component
Fig 5.3 Progress Tracking Flow
C. Final Submission
Published Web Addressed: https://encodeapp-junming.flutterflow.app/
Presentation Video: https://youtu.be/YwbC-2_nlGo
Reflection
Using FlutterFlow gave me a clearer understanding of how screens connect, how interactions work, and how small things like animations or transitions can make a difference in the overall user experience. I especially found the built-in features like the Tab Bar and Bottom Sheets helpful. They made it easier to bring my ideas to life without writing code from scratch.
There were still a few challenges like handling one-off pop-ups that aren’t reusable or setting up logic that only applies to specific actions. These situations pushed me to think more carefully about the structure of the app and how each part fits into the bigger flow. It wasn’t too difficult, but it did make me appreciate the importance of planning ahead and staying organized.
Overall, this task helped me bridge the gap between UI design and real interaction. It wasn’t a huge leap, but it was a good reminder that design and functionality go hand-in-hand. I’m happy with how the MVP turned out, and I feel more confident in building interactive flows that actually work, not just look good on a screen.
Comments
Post a Comment