Application Design II - Final Task Compilation

on

20.04.26- 24.07.26

Celine Christabelle Patricia / 0374872 

Application Design II / Bachelors of Design (Hons) in Creative Media / The Design School

Application Design II - Final Task Compilation

Table Contents

1. Tutorials and Practical

2. Project

  • Task 1
  • Task 2
  • Task 3
  • Task 4

3. Presentation

4. Reflection

Tutorials and Practical

Week 1 - The AI Design Audit

We were engaged to ask AI to be the Senior UI/UX designer, to critic our previous App Design I design. 


Week 2 - Mobile UX teardown

We need to redesign some certain app, by identifying the usability, functionality, pleasure and reliability, and what can be improved from it.


Week 3 - Transitioning UI to backend logic

Week 4 - 12 

Flutterflow Practical


Project Breakdown

Task 1 - Redesign

Fig 1.1 - Re-designing in Figma

In this task 1, I redesign the current my app that I have done previously in Task 1. The goal here is create a user friendly UI that helps and engages user experience. In this task, I mainly redesigned the user profile and product page.


Task 2 - Main Task Backend

Fig 2.1 - Authentication
To make the authentication, users need to put their display name, email and password. For this part, I used a template that is provided from FlutterFlow. It is using the textfield widget, which allows users to enter their email address and so on. Before connecting it to the Firebase, I must go to the project settings and make sure it has been deployed to Firebase.

Fig 2.2 - Authentication (2)

Luckily here, FlutterFlow has its own function for User Authentication, which makes it simpler to do the backend. It has Three automatic actions, to create account, log in to an account, and also log out from the account that has been created. For logging out, I create a log out page in the Profile page. For this one, the profile page is still a dummy. 


Fig 2.3 - Product page

This one is for the product page. I added page parameter so the product data based from the product schema can be passed. For add to cart button, I added page state so they can remember the data and pass to cart page. 

Fig 2.4 - Cart page


For cart page, I added query collection from the product page, so it will be passed from previous product page. For the quantity, I use text combination, getting the quantity amount from the previous product document to the cart document.

Fig 2.5 - Cart page (2)


This is for the update and delete, so when the checkbox is selected, the page state of the cart will be updated, and when the delete icon is clicked, the document of the cart will be deleted as well, from the page and the database.

Fig 2.6 - Cart page (3)
Added inline function for the price list, so the price will be regenerated every time the checkbox/delete is updated, and it syncs with the price and quantity selected. Set from variable for the name, updated from the product document as well. 

Fig 2.7 - Cart page (4)

Added a page state for cart total and same new calculations. Increment is to take the current cartTotal bucket, and add the result of price*quantity. Therefore there a function of "??" and "0" for a safety net incase the cart is null, preventing from error. 

Fig 2.8 - Cart page (5)


For the checkout button, here is the flow. Added a loop action since the cart items keeps updating, and there will be moments it gets deleted. When items are checked, backend will read the cart document, create a document from the order page, and then transfer it to orders, deleting the items in the cart. If no objects were selected, an alert dialog will appear. 

Fig 2.9 - Cart page (6)

Here is the alert dialog if proceeding checkout without choosing any item/ having no item in cart. 

Fig 2.10 - Orders
In the order page, the items will be passed to the order page, then the items passed will be deleted in the cart as they are already processed. 

Task 3 - Animation

Micro Animations

Fig 3.1 - Button Disabled

To create button disabled, I use the button disable from the inspector and use OR condition, when both of the email fields and password is not yet filled, the button will be disabled and users cannot proceed or even click the button.

Fig 3.2 - Showing SnackBar


Continue to showing SnackBars, when users click the buttons, they need feedback whether the actions they have done is already conducted or not. By that, this snackbar shows an alert/feedback so they know about it. 

Macro Animations

Fig 3.3 - Show BottomSheet


Showing Bottom Sheet is also part of the user feedback. After they ordered, this feedback shows that the order has been submitted, they can either close the bottomsheet window or proceed to the orderpage. 

Fig 3.4 - Widget Animation 

Widget animation is quite simple, in the action, when page is updated, the widget will fade and slide in. 


Fig 3.5 - Sliding Animation 


Similar to the previous animation is quite simple, in the action, when page is updated, the widget will fade and slide in. 

Fig 3.6 - Scale Animation (Search)

Scale animation is added on the search, when it's clicked users will get the feedback. 

Animation Walkthrough:



Task 4 - Functional App

Fig 4.1 - Address Manager
Previously in Task 2, my address flow was quite illogical, so I decided to refine it in task 4 by adding these new pages and widgets (components). 

Fig 4.2 - Address Manager (2)

A new field is added, a boolean called is_selected. So when users select Change to main address, the document will be updated, and it syncs to the cart page as well.

Fig 4.3 - Address Manager (3)
For the cart page, I add a new parameter for address details, so it can pass the current selected address to the cart page. Not limiting the users to only be able to change the address in the address page. 

Fig 4.4 - Simple Search

For simple search, I used search input, having a new searchQuery as a new page parameter. And then for the grid view, I put lists and add filters, adding it accordingly to the current product filters i have added. Simple search only works by searching the entire product name (completely typed) or the product category. Works in both lowercase and uppercase.

Fig 4.5 - New Review Page (Dummy)

Because this page is not part of the main task, but since its part of the navigation bar, I decided to make a dummy page of this page based on the redesign I have done previously in Task 1. I also added the same fade and slide in animation like the rest of the pages to ensure the consistency of the animation styles. 


back to top


Final Presentation




Links

Flutterflow Link:
https://app.flutterflow.io/run/fccYROESEtUMT9y.gvuef

Flutterflow Publish Link:
https://app-design-i-i-jausfu.flutterflow.app/

Presentation Video and App Walkthrough:
https://youtu.be/RkZHzstCN80

Presentation Slides Link:
https://canva.link/lfyn58qtanlj0i9

Blogger Link:
https://celinepatdesign.blogspot.com/2026/05/application-design-ii.html


Reflection

I genuinely find this module quite difficult to go through, especially because FlutterFlow is a completely new software to me. I do understand that the goal of using FlutterFlow is to make both the backend and design process easier, but as someone with basically zero backend knowledge, it is still quite challenging for me to understand how everything works. The tutorials provided in class were helpful as a starting point, but I feel like they were not enough to fully understand the software. A lot of the learning comes from exploring the features yourself, trying things out, and figuring out what works and what does not. Because of this, the learning process can feel quite overwhelming at times, especially when I am not familiar with backend concepts in the first place.

Despite the difficulties, I think this module has also pushed me to become more independent in learning and problem-solving. I realized that I cannot always rely on step-by-step tutorials, and sometimes I have to spend extra time researching, experimenting, and troubleshooting things on my own. It is definitely challenging to manage this project while handling assignments and projects from other modules at the same time, but I think the experience has helped me understand more about the development side of creating an app. Although I still find FlutterFlow difficult, I believe that with more practice and exploration, I will gradually become more comfortable with it and understand how the backend and design aspects work together.




Comments

Post a Comment