APPLICATION DESIGN II - LECTURE AND TASKS COMPILATION
24/04/26 - 24/07/26 (Week 1-14)
SUN YUTONG (0377440)
Bachelor of Design (Honours) in Creative Media
Application design II / Lecture and Tasks Compilation
INSTRUCTION
TASK 1- App Design Self-Evaluation and Reflection
Fig.1.1 Task 1: App Design Self Evaluation & Reflection
TASK 2 - Hybrid Lo-Fidelity Mobile App Development
Task Overview:
Integrate functional backend services into lo-fidelity mobile
application.
- User Authentication (Firebase): Users must be able to sign up for a new account and log in using an email address and password.
- 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:
- Provide clear screenshots of user flow
- Show the complete process for both Sign Up and Log In
- Show full CRUD workflow
- Arrange screenshots in sequence with short captions
Document Requirement:
- Include FlutterFlow project link on first page
- Compile into PDF or Word
- Submit via MyTimes
Fig.1.2 Task 2: Hybrid Lo-Fidelity Mobile App Development
TASK 3 - Micro Interaction Prototype
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.1.3 Task 3: Micro Interaction Prototype
Google Docs link (includes GIF): https://docs.google.com/document/d/1b_ScpCsjXm7C9R5oEc8X4VR6-u0iCfD3qVgVkDdj4Hw/edit?usp=sharing
TASK 4
REFLECTION
Experience:
This project was my first experience using FlutterFlow to turn my travel app design into a working prototype. My main contribution was developing the registration page, the hotel booking page, and several basic CRUD functions. At first, I found FlutterFlow difficult because I was unfamiliar with its actions, workflows, and backend settings.
The most challenging part was connecting the backend and implementing the application logic. I needed to configure Firebase, connect the database, and ensure the registration and booking functions worked correctly. I encountered several errors during development, but solving them helped me better understand how FlutterFlow works.
Observation:
Throughout the project, I realized that a good mobile application requires not only an attractive interface but also a well-organized backend. Every page, button, and action must be connected correctly for the application to function smoothly. Even a small mistake in the workflow or database settings could cause the entire function to fail.
I also found that testing is an important part of the development process. By testing each function step by step, I was able to identify problems earlier and fix them before moving on to the next feature. This helped improve the stability and usability of the application.
Findings:
Overall, this project improved my understanding of FlutterFlow, Firebase, and mobile application development. I became more confident in creating UI pages, implementing basic backend functions, connecting data, and performing CRUD operations. Besides improving my technical skills, I also learned to analyse problems logically and troubleshoot errors independently.
Although I am still not familiar with some advanced FlutterFlow features, I now have a stronger foundation in building functional applications. I hope to continue practising FlutterFlow in future projects so that I can further improve my development skills and create more complete and user-friendly applications.
.jpg)
Comments
Post a Comment