Labels

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. 
  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:
  • 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


TASK 4 - Final Application
Task Overview:
Part A: Final Application Execution (30%)
You must build a functional Minimum Viable Product (MVP) with real logic, interaction, and data, going beyond just static designs.

Platform & Deployment: Build the app entirely using FlutterFlow and publish it as a mobile web app accessible via a public web link.

Database Management: Integrate Firebase Firestore to manage at least one dynamic dataset. You must implement full CRUD (Create, Read, Update, Delete) operations, ensuring the UI updates dynamically based on the database.

User Authentication: Implement secure email signup and login using Firebase Auth (Google Sign-In is optional but recommended for a professional UX).

Interactivity & Logic: Use FlutterFlow workflows and conditional visibility to build true functionality rather than just visually linking screens.

Animations (Per Rubric): To get full marks here, you must successfully implement 5 Micro animations (e.g., button taps, loaders) and 2 Macro animations (e.g., page transitions, modals).

Part B: Presentation & Documentation (Includes 10% E-Portfolio)
You must transparently document your development process, highlighting your challenges and solutions.

1. PDF Slide Deck: A professional presentation that includes your problem statement, app concept, core features, animation plan, visual proof of your Firebase database structure, and screenshots of both the working app and the backend.

2. Video Walkthrough: A recorded video (.mp4 or YouTube link) where you present the app, explain the MVP, demonstrate the task flow, discuss what changed during development, and openly explain any technical difficulties you encountered.

3. E-Portfolio / Reflective Journal (10%): A Word document or personal blog post detailing your planning and build process (including specific details on your Firebase, Auth, and animation setup). It must include screenshots of key features and an honest reflection on both your technical successes and the challenges you faced.


Fig.1.4 Task 4:  Final Application

Presentation Slides


Final Application Design Slide Presentation

Video Walkthrough

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.



Labels:

Comments

Post a Comment

Popular Posts