APPLICATION DESIGN II / FINAL COMPILATION / DST65604

on

20/4/2026 -26/7/2026 / (Week 1 - Week 14)

Aricia Man Yi Xuan / 0375026

Application Design II / Task 1 / DST65604

Bachelor of Design (Hons) in Creative Media

Google Drive Link

TABLE OF CONTENT

1. Instructions

2. Task 1: App Design Self-Evaluation and Reflection

3. Task 2: Hybrid Lo-Fidelity Mobile App Development

4. Task 3: Micro Interactions Prototype

6. Feedback

7. Reflection

INSTRUCTION

Fig.2.1.1 Module Information Booklet

TASK 1


Fig.3.1.1 Task 1: App Design Self Evaluation & Reflection / (Week 4, 13/5/2026)

TASK 2

Practical of using FlutterFlow (Week 2):
Fig.3.1.1 Run Test Outcome / (Week 2, 29/4/2026) 

We learned how to create and implement an "Add to Cart" button

Task Overview:
Integrate functional backend services into lo-fidelity mobile application. 
  1. User Authentication (Firebase): Users must be able to sign up for a new account and log in using an email address and password.
  2. Database Integration / CRUD Operations (Firebase): Demonstrate full Create, Read, Update, and Delete (CRUD) operations, complete with dynamic UI updates reflecting the database changes in real-time.
Submission Requirement:
  1. Provide clear screenshots of user flow
  2. Show the complete process for both Sign Up and Log In
  3. Show full CRUD workflow
  4. Arrange screenshots in sequence with short captions
Document Requirement:
  1. Include FlutterFlow project link on first page
  2. Compile into PDF or Word
  3. Submit via MyTimes
Fig.3.1.2 Task 2 - pdf / (Week 9, 17/6/2026)

FlutterFlow Project Link: click here

TASK 3

Task Overview:
Enhance FlutterFlow app by integrating both Micro Interactions and Macro Interactions while ensuring CRUD operations and backend services (Firebase Authentication & Firestore) are fully functional.

1. Micro Interaction
These are small animations that provide immediate feedback to users.
  • Button Feedback
  • Input Field Feedback
  • Loading & Processing States
2. Macro Interactions
These are larger animations that help users understand app navigation and structure.
  • Screen Navigation Animations
  • Modal & Popup Animations
  • Onboarding / Multi-Step Flows
Fig.4.1.1 Task 3 - pdf / (Week 12, 9/7/2026)

TASK 4

Part A: Final Application Execution
Develop and deploy a working MVP application with the following requirements:
1. Platform & Deployment

  • Build the application entirely using FlutterFlow.
  • Publish the application as a mobile web app.
  • Ensure the app is accessible through a public web link.

2. Database Management
  • Connect the application with Firebase Firestore.
  • Manage at least one dynamic dataset (e.g., user entries, listings, records).
  • Implement complete CRUD operations
  • Ensure the interface updates dynamically based on database changes.
3. Firebase Authentication
  • Include Email Login and Signup functionality.
  • Google Sign-In integration is optional but recommended for improving user experience.
4. Interactivity & Logic
  • Use FlutterFlow workflows, actions, and conditional visibility.
  • Ensure features function through real logic rather than only visual navigation between screens.
Part B: Presentation
  1. Presentation Slides
  2. Video Walkthrough (MP4)
  3. E-portfolio & Reflection

FlutterFlow Project

Fig.5.1.1 FlutterFlow Project

View my FlutterFlow Project: click here

Presentation Slides
Access to Canvas: click here

Walkthrough Video


YouTube Link: click here

FEEDBACK

Week 3 (6/5/2026)
Specific Feedback:
  • You have Log In page, search bar, input field, and add to cart button, which is good, you can import the design system into FlutterFlow following the tutorial.
  • The AR feature was interesting, but not sure if you can make it in FlutterFlow, you can either just put a background, or just remove it.
  • You don't need to do all of the category product, just do one or two it's enough.
  • For the animation, you can do for the advertising, or the AR features bread rotation.
  • Basically, you'll need to do all of the screen into FlutterFlow for final task.
Week 13 (15/7/2026)
Specific Feedback:
  • Task 2 and Task 3 is good, you have mentioned about the challenges and difficulties. You can just write into your final presentation slides.

REFLECTION

Experience:

This was my first time using FlutterFlow to develop a mobile application. In this module, we transformed the app design that we had created in Figma during the Application Design I into a functional prototype. For me, my app was Subway MY. At the beginning, I found FlutterFlow quite overwhelming because it contained many features, settings, and workflows that were completely new to me. 

Although the lecturer demonstrated the development process step by step during class, the demonstrations were based on a sample application. Since everyone had designed a different application, the implementation often differed from our own project. Therefore, I occasionally became confused when trying to adapt the demonstrated techniques to my Subway app. I always needed to experiment with different settings and review the tutorial videos before I could successfully implement the required functions.

I think the most difficult part of the project was developing the backend functionality. We had to know the correct setting up the database, creating the backend structure, connecting data, and configuring actions and logic for different user interactions. I often encountered problems where an action did not behave as expected because a condition, parameter, or database reference was configured incorrectly. Solving these issues took plenty of time and patience, but solving them helped me gain a better understanding of how the logic works.

However, I enjoyed designing the user interactions and animations. FlutterFlow provides various built-in animation options, allowing me to experiment with page transitions, button effects, loading animations, and dialog animations. Playing with these features finally made me feel more interactive and polished, and it was satisfying.

Observation:

Throughout the development process, I observed that a well-designed UI must supported by a properly organized backend structure and logical user flows. Besides, we always need to resolve the errors before testing the application. It's helpful that FlutterFlow provides warnings and error messages whenever there are missing variables, incorrect action flows, or database issues. 

I also realized that backend development is significantly as backend development requires logical thinking, proper data management, and careful planning of user interactions. Every page, button, and action must be connected correctly for the application to function smoothly.
Findings:

Overall, I think this module is quite interesting despite its level of difficulty. The module strengthened my understanding of how frontend design and backend functionality work together to create a usable product. I also learned how to identify errors and fixing them. 

However, I still feel that I'm not very familiar with FlutterFlow as a whole. I have only managed to understand and apply some basic concepts, especially related to page navigation, simple UI interactions, and basic backend connections. More advanced functions are still areas that I need more time to practice and improve. 

In the future, I wish I could gradually improve my technical skills of using FlutterFlow in other projects or perhaps in my future career.




Comments

Post a Comment