Application design II / Lecture and Tasks Compilation
22/4/2026 - 22/7/2026 (Week 1 - 14)
Rachel Ng Jie Ting / 0378902
Bachelors of design (Honours) in creative media
Application design II / Lecture and Tasks Compilation
Table of content
Week 1: Introduction to Mobile Application Design II
Week 2: Levels of Mobile User Experience
Week 3: Context Consideration for Mobile UI
Week 4: Cross-platform Development (Part 1)
Week 5: Cross-platform Development (Part 2)
Week 7: Cross-platform Development (Part 3)
Week 8: Interaction Design for Mobile Application (part 1)
Week 10: Interaction Design for Mobile Application (part 2)
Week 11: Optimizing Application Design
Task 1: App Design Self-Evaluation and Reflection (20%)
Task 2: Hybrid Lo-Fidelity Mobile App Development (20%)
Task 3: Micro Interaction Prototype (20%)
Task 4: Final Application (30%) and E-Portfolio Overview (10%)
Lectures
- Core features function properly
- Example: Touch 'n Go eWallet can pay, transfer, reload
- Consistent, no crashes
- Accurate data, works even with weak internet
- Simple navigation
- Users complete tasks fast
- Tap size ~ 44 × 44 px, thumb-friendly
- Animations, haptics, smooth UI
- Makes app enjoyable to use
Tidying Up Figma colours and font styles
2) Pure Logic Form Validation & Input Shake
Practical - Confirm Dialog File
Tutorial 11 - Integrating Native AI Agents in FlutterFlow File
Instructions
Task Overview:
Students are required to perform a self-evaluation and
reflection based on their Application
Design 1 final
project. The aim of this project is to document the issues,
problems, and difficulties encountered, and to propose
solutions to improve the mobile app design.
Objective:
Mobile App design is an iterative process. This task will
expose students to the constant
improvements one can make
to their app.
Submission Guidelines:
Students are required to submit the documentation (pdf or
docs) at MyTimes for review and
evaluation.
Due date: 12th May 2026
-------------------------------------------------------------------------------
Getting started: Duplicate Figma file
Before I start the app design analysis, I made a copy of the Figma file. 1 copy will be kept the same, while the other will to used for the design refinement process.
Sticker Maker Figma File (Before Refinement) :
Fig 2.1 - Sticker Maker Figma File (Before Refinement)
Self-evaluation and Reflection
First, I self-evaluated my app design section by section to identify its strengths and weaknesses.
Then, I reviewed the design together with AI to gain additional feedback and suggestions.
If I disagreed with any of the AI’s feedback, I explained my reasoning and justified my design choices.
Finally, I compiled all potential refinements into a “Things to Consider Changing” list at the bottom of each section.
See full evaluation document here:
https://docs.google.com/document/d/1hd_76QlU6t5ApIb45Y38h3UgBjwtAYkOeNr8bstnl2E/edit?usp=sharing
--------------------------------------------------------------------------------------------
App Design Refinement
Next, I refined some of the designs in my app. (See more detailed changes in Final Task 1: Self Evaluation & Reflection Presentation Slides)
After everything is done, i compiled everything into a presentation slide and sent it off for submission.
--------------------------------------------------------------------------------------------
Final Task 1: Self Evaluation & Reflection Presentation Slides
Task Overview:
For this assessment, you are required to integrate functional backend services into your lo-fidelity mobile application. Your application must demonstrate working user authentication and database management.
You must successfully implement the following two core components:
1. User Authentication (Firebase):
You must successfully integrate Firebase Authentication into your app. 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):
You must use Firebase to manage at least one dataset within your app. Your implementation must demonstrate full Create, Read, Update, and Delete (CRUD) operations, complete with dynamic UI updates reflecting the database changes in real-time.
Objective:
Mobile App design is an iterative process. This task is designed to expose students to the constant improvements that can be made to a mobile application, specifically focusing on backend integration and dynamic user interfaces.
Submission Guidelines:
To successfully complete this assessment, you must document your working application comprehensively. Please follow the instructions below to prepare and submit your assignment:
1. Required Screenshots
Capture clear, high-resolution screenshots that demonstrate the step- by-step flow of your application. You must include the following:
- Show the complete process for both Sign Up and Log In.
- Demonstrate the full data lifecycle by showing how a user can Add (Create), View (Read), Edit (Update), and Delete data within your app.
2. Document Compilation
- Arrange your screenshots sequentially so they clearly illustrate the user journey. It is highly recommended to include brief captions or descriptions for each screenshot.
- You must provide the direct, working link to your FlutterFlow project. Please place this prominently on the first page of your document.
3. Submission Details
- Export and submit your compiled document strictly as a PDF or Word Document (.docx).
- Upload your final file to the MyTime portal. Ensure your submission is completed prior to the specified deadline.
Due date: 12 June 2026
-------------------------------------------------------------------------------
First, I moved my app design from figma into flutterflow.
Some element were slightly adjusted due to lack of space.
--------------------------------------------------------------------------------------------
See detailed screenshots, user journey and FlutterFlow app link here:
Task Overview:
For this assessment, you are required to integrate both micro and macro interactions alongside your functional CRUD backend services. Your mobile application must clearly demonstrate how both types of interactions operate seamlessly in response to user input and real-time database changes.
You must successfully implement the following two core components:
1. Micro Animations (Action & State Feedback)
Micro-interactions are small, functional animations that acknowledge a user’s action or communicate a system state change. You must implement these to prevent your app from feeling rigid.
- Capture clear, high-resolution screenshots that demonstrate the step- by-step flow of your application. You must include the following:
- Demonstrate the micro and macro interaction within your app.
- Arrange your screenshots sequentially so they clearly illustrate the user journey. It is highly recommended to include brief captions or descriptions for each screenshot.
- You must provide the direct, working link to your FlutterFlow project. Please place this prominently on the first page of your document.
- Export and submit your compiled document strictly as a PDF or Word Document (.docx).
- Upload your final file to the MyTime portal. Ensure your submission is completed prior to the specified deadline.
Due date: 10 July 2026
-------------------------------------------------------------------------------
Building shimmer state loading
We will change the backend query loading widget from default to the shimmer grid we made.
-------------------------------------------------------------------------------
- Build the application entirely using FlutterFlow.
- Publish your project as a mobile web app and ensure it is accessible via a public web link.
- Integrate Firestore to manage at least one dynamic dataset (e.g., listings, entries).
- Implement professional CRUD (Create, Read, Update, Delete) operations.
- Ensure the UI updates dynamically from the database.
- Implement secure Email login and signup. (Optional but recommended for professional UX: Integrate Google Sign-In.)
- Use FlutterFlow workflows and conditional visibility to build true functionality rather than just visually linked screens.
- Problem statement and app concept.
- Core feature focus.
- Animation plan and its implementation.
- Visual proof of your Firebase database structure.
- Screenshots showcasing the working app and the backend.
- Record yourself presenting the app.
- Explain the MVP, demonstrate the task flow, and discuss what works and what changed during development.
- Show professional accountability by openly describing any technical issues or difficulties you discovered.
- Please save your video as an .mp4 file, or publish it on YouTube and share the link.
- Documentation of your planning and build process.
- Details on your Firebase, Auth setup, and animation integration.
- Screenshots highlighting key features.
- An honest reflection on both your successes and the challenges you faced.
Due date: 27 July 2026
-------------------------------------------------------------------------------
-------------------------------------------------------------------------------
App walkthrough video:
Fig - App walkthrough video
Feedback
Week 1: -
Week 13: Change the folder colour button icon into something more recognizable, other than that, proceed with task 4 presentation slides.
Comments
Post a Comment