Application Design II: Final Task
| 03.07.2025 - 24.07.2025 (WEEK 11-WEEK 14)
| Tang Chin Ting [ 0366473 ]
| Final Project & E-portfolio| Application Design II / Bachelor of Design in Creative Media
INSTRUCTIONS
LECTURES
All lectures and exercises are completed in this Blog.
SUBMISSION
Task 04: Final Project & E-portfolio
Instructions:
A) Final Project – Completed Experience – 30%
- Students will synthesise the knowledge gained in tasks 1, 2, and 3 for application in task 4. Students will create and integrate visual assets and refine the prototype into a complete working and functional product experience.
B) E-Portfolio - 10%
- Students describe and reflect on their social competencies within the design studio context, supported by evidence. Reflect on how to empathise with others within group settings, interact positively within a team, and foster stable and harmonious relationships for productive teamwork. The reflective writing is part of the TGCP.
Requirements
- Project file and Folders
- Application installation files (APK for Android, iOS Build Folder for IOS/iPhones)
- Online posts in your E-portfolio as your reflective studies
- Video walkthrough (Presentation)
Review my latest progress in Task 03.
I’ve completed the MVP features in Task 03, so for this task, I will be refining and enhancing those features as needed. Additionally, I’ve decided to expand the app by adding more features and refining the main page layouts. The app consists of four main pages: the Homepage, Menu Page, Scanning Page, and Promo Page. In this final stage, I plan to further develop the Scanning Page and Promo Page by adding additional content and functionalities.
Final App Flow
- Welcome Page > Log in to the app > Browsing Homepage > Load Menu Page > Browse Menu Page > Add Sushi to the Cart > Check Out and Proceed to the Payment > Track Your Order >Scan Code to Earn Point > Redeem Voucher > View Promotions
Refinement
Scanning Page
I initially designed the Scanning Page to allow users to scan their account QR code and collect points. In this stage, I’ve added a new feature that enables users to redeem vouchers directly within the app, which they can use for future purchases.
To support this feature, I created a new query for the voucher list view and added a new collection to store voucher information. This process was relatively easier, as it followed a structure similar to the existing sushi item list.
Figure 1.1 Scanning Page
Figure 1.2 Voucher Firebase Collection
Promo PageThe next step is to complete the Promo Page, which allows users to view current promotions and find the most suitable offers when dining in the physical store. I used carousel and page view elements to complete the design.
Figure 1.3 Promo Page
Navigation Bar ButtonI updated the navigation bar so that when users click on any of the buttons to navigate between pages, the corresponding icon turns red. This was achieved by using a page state and adding an action to update the page state accordingly. After setting up these two steps, I assigned a dynamic value for the icon color, allowing it to change based on the active page.
Figure 1.4 Update Navigation Bar Button Value
Figure 1.5 Adding Action Update Page State
Figure 1.6 Update Value for Icon Button
Sushi Items ContentBefore the final task, I had only added 4 sushi items to the menu list. However, after adding all the items, I noticed they weren’t automatically grouped by their respective categories. To resolve this, I needed to reorganise the items and assign them to their specific category lists.
I started by updating the document with 45 sushi items, then added a page state to the current page. This allows the PageView to update the page state dynamically for each category page.
Figure 1.7 Update Sushi Items Document
Figure 1.8 Update Page State for The Menu Page View
Figure 1.9 Adding Action
Order Summary PageThe Order Summary Page allows users to view the details of their previous orders, including a timeline for each order. After a successful payment, users can click on the 'Track Your Order' text, which will navigate them to the Order Summary Page.
Figure 1.10 Adding Action to Track Order
Figure 1.11 Previous Order List
Figure 1.12 Order Process Timeline
Final Submission
Click HERE to view my app on the web.
Final Application Walk Through Video
Figure 1.13 Final Walk Through Video
Final Application Video PresentationFigure 1.14 Final Video Presentation
REFLECTION
Finishing the final task of the Application Design II module has been a fulfilling but demanding experience. Beginning with the MVP features developed in Task 03, I focused on refining the user experience and expanding the overall functionality of the app. The final task gave the opportunity to bring together all the skills and knowledge gained during the semester into a complete, functional product.
One of the major findings along the way was how important it is to structure data in Firestore. As I expanded the list of menus to 45 sushi items, I discovered that my initial flat list approach was not going to cut it. Items did not automatically get grouped by category, and I had to implement logic around page state and dynamic filtering to group the items correctly. This drove home the value of up-front data architecture design, especially for apps with complex content relationships. The other key lesson was how repurposing familiar UI logic, like making the voucher list view a copy of the sushi list, can speed development without compromising consistency. Leveraging existing design patterns not only saved me time but also reduced the possibilities for bugs or usability issues.
Throughout the project, I observed how subtle UX elements, such as icon color changes and page transition smoothness, contribute significantly to user satisfaction. Creating the Order Summary Page with a timeline and “Track Your Order” feature highlighted how crucial clear feedback and transparency in the user experience are. Moreover, reflecting on my work experiences in this module, I’ve learned the importance of empathy, open communication, and adaptability. Though most of the development was individual, discussing ideas and receiving feedback from peers and lecturers helped me refine my design decisions. Being part of a supportive learning environment fostered not only technical growth but also personal growth in collaboration and problem-solving.
Comments
Post a Comment