Labels

APPLICATION DESIGN 2: PROJECT COMPILATION

Week 1-Week 15 (22/04/2026-27/06/2026)

Jennifer Michelle Hiendrawan/0374682

Application Design II/Bachelor of Design (Honours) in Creative Media

Project compilation

TABLE OF CONTENT

1.Lectures and Tutorial 
2.Instructions
3.Task 1
4.Task 2
5.Task 3
6.Task 4
7.Feedback

LECTURES AND TUTORIAL 

Week 1
Ms.Nurul briefed us about our project and gave us an exercise about AI critique, where we should use AI to critique our project and then we must also give our arguments based on the AI critique.

Fig 1.1 Exercise 1 AI critique

Week 2
Tutorial 2: Mobile UX audit 

Fig 1.2 Exercise 2 Mobile UX Audit 

This week, we also learn how to create a project on flutter flow 

Fig 1.3 Create new project flutterflow 

Week 3

Tutorial 3: Transitioning UI to backend logic

Fig 1.3 Exercise 3 Transitioning UI to backend logic

This week we also learn how to import figma colors to flutterflow. We need to make color styles and then import it to flutterflow

Fig 1.4 Color import 

Fig 1.5 Color import 

Week 4

This week we learn how to create firebase integration and also learn how to make sign in page and connect it to the firestore

Fig 1.6 Create firebase integration 

Fig 1.7 Create sign up 

Fig 1.8 Connect the date to firestore 

Week 5

This week we learn how to update and create document 

Fig 1.9 Update and delete document

Week 7

This week we learn how to read and delete document using direct action button, so i immediately implemented it to my project

Fig 1.10 Read document

Fig 1.11 Firestore

Week 8

This week, we learn about basic animation and micro interactions.

Fig 1.12 Result

Week 9
No class

Week 10
Today we learn to create hero animation, lottie animation, rive animations, and page transitions

Fig 1.13 Hero animation 

Fig 1.14 Lottie animation 

Fig 1.15 Page transitions

Fig 1.16 Page transitions

Week 11

This week we learn how to make simple search, alert dialog, and confirm dialog

Fig 1.17 Simple Search 


Fig 1.18 alert dialog and confirm dialog 

Fig 1.19 alert dialog and confirm dialog 

Fig 1.20 alert dialog and confirm dialog 


Week 12
This week we learn how to make bottom sheet  

Fig 1.21 Bottom Sheet 


TASK 1

For this task, we need to re-design our application from our previous task (application design I), we need to explain and make a reflection based on our mobile application from application design I.


First, i looked at my application and then i tried to write the reflection first about what should be mantained and should be improved based on it.


After that, i move to figma to improve and redesign my application.

Fig 3.1 Redesign Process 

FINAL OUTCOME TASK 1

Fig 3.2 Final Outcome task 1 PDF 

Figma Link: https://www.figma.com/design/6CK6ZYHhNC5jBTfTuRQQcr/Untitled?node-id=0-
1&t=7Zj8uq7ZKpCmgH0C-1

\

For this task, we need to build the CRUD for our application. The CRUD must be complete and can function well. 


First, i start to import all of my colors to flutterflow and then make the design one by one.

Fig 4.1 Import color

I start to build the home page first 

Fig 4.2 Progress


Fig 4.3 Progress

Next, i created the user authenticarion. For this page, i used a template however i adjust it and changed the design based on my application. I also added a "create profile page" for users who are signing up for the first time.

Fig 4.4 Progress

Fig 4.5 Progress

Fig 4.6 Progress

After that i continue to make the design for the other pages. Here are some of the progresses for the other page. At first, it was quite confusing to adjusting the design of each element individually and setting the spacing in flutterflow.

I redesigned several parts of the interface because I felt that some of the designs from my Task 1 redesign were overly complex and the user flow was too long. Therefore, Ms. Nurul said it was acceptable to redesign it again in Task 2.

Fig 4.7 Progress

Fig 4.8 Progress

Fig 4.9 Progress


After designing all of my pages, i set up the firestore by creating the firebase integration 


Fig 4.10 Firebase

Fig 4.11 Firestore

1.User authentication 

After that, i started to create the user authentication first. First i enabled the authentication (sign in method)

Fig 4.12 Process

Next, i made a new collection called "users" 

Fig 4.13 Firebase collection


After that, i add an action on the sign up and log in button so that it can navigate to the next page and also save the data on the firebase and firestore.


Fig 4.14 Action

Fig 4.15 Action 

Fig 4.16 Action

After adding the action and set up the firestore, i test it to know if it's already function or not. Here is the final outcome of the user authentication and the firestore and the photo of the firebase and firestore

Fig 4.17 Firebase

Fig 4.18 Firestore


Flow:
A.If user already sign up -> Go to log in tab -> fill email and password --> go to home page
B.If user have neveer sign up to the application -> go to the sign up tab -> fill email and password -> go to "create account" page and fill their data -> go to log in tab (must use the same email and password) -> go to homepage


Fig 4.19 Screen record user authentication

2.Create

I use create for top up balance, because users need to input their data for top up.

Flow: Go to purchase page -> click top up balance -> choose debit card -> enter the amount and choose the bank -> fill the card information -> check and confirm your information on pre-confirm ->there will be an animation to show that your process already completed

First, i created the collections called "top up balance"

Fig 4.20 Collection

Here are some of the actions. Almost all of the actions are "navigate to" because i need to navigate user to the next page after clicking the buttons. However, for the pre confirm, i need a backend call to save the users data.

Fig 4.21 Action

Fig 4.22 Action

Fig 4.23 Action


I used parameter also so that i can pass the date from the previous page to the pre confirm page (so user can check their data again before confirming to top up)

Fig 4.24 Parameter

Fig 4.25 Parameter

Fig 4.26 Parameter 


After adding the action and set up the firestore, i test it to know if it's already function or not. Here is the final outcome of the create and the firestore  and the photo of the firebase and firestore.

Fig 4.27 Firestore

Fig 4.28 Firebase

Fig 4.29 Screen record Create and firebase

3.Read

I use read to top up data

Flow: User click purchase page / click top up balance from home page -> user choose which internet data package they want to buy -> user choose discount -> there will be pre confirm order (this part is where user need to read) -> if correct, there will be an animation

Fig 4.30 Read

There will be a lot of choices for user to choose, each of the package can be clicked, and later when user click it, the total of their order will be different (so its all based on what user click) because i already use parameter to pass the data

Fig 4.31 Read

Next i add a new collections to collect the user data when they top up internet 

Fig 4.32 Firebase

Next i add a parameter and then pass the data one by one, so that the price and description will be different based on the data that is clicked by the user

Fig 4.33 Parameter

Next i add an action and a function to calculate the discount, because there are some discount choices and also the price are all different. Here are some of the actions and also function. This is the hardest part




Fig 4.34 function

Fig 4.35 Action

After adding the action and set up the firestore, i test it to know if it's already function or not. Here is the final outcome of the create and the firestore  and the photo of the firebase and firestore.

Fig 4.36 Firestore

Fig 4.37 Firebase

Fig 4.38 Screen record Read and firebase

4.Update

For this one, at first i use it to update subscription, i made this for almost a week but i faced a lot of error. The inital concept was: User subscribe to netflix -> user choose package -> user click update -> there will be some packages displayed (not the same package that user already buy) -> user click update -> the package will be updated on the subscription page and on the firebase. Here are some of the progress. 
Fig 4.39 Update

Fig 3.40 Update


After i consulted with Ms.Nurul, she said that it is hard to do that and then she recommends me to do the update by updating the profile (edit profile), therefore here is the new flow:
After user sign up/log in->click edit profile-> fill in their data -> if they want to change it, they can just immediately go to edit profile again and then it will automatically display the new data. 

Also, on this profile page, user can click log out (after clicking it, user will be directed to the sign up and log in page again)

Here is the action, so after using that action, it will automatically display the newest data of the user (so when update, it will automatically change)

Fig 3.41 Actions

Fig 3.42 Profile

After adding the action and set up the firestore, i test it to know if it's already function or not. Here is the final outcome of the create and the firestore  and the photo of the firebase and firestore.

Fig 3.43 Firebase

After adding the action and set up the firestore, i test it to know if it's already function or not. Here is the final outcome of the create and the firestore  and the photo of the firebase and firestore.

Fig 3.44 Screen record Update and firebase


5.Delete

This is the flow: User click subscribe -> user choose which package -> user read the pre confirm -> user click confirm -> user click cancel -> the package will automatically deleted and removed from the firebase and firestore

Here are the progress and design:

I add conditional actions for the subscription part, so that when user havent subscribe, it wont be appear to display user's subscription.

Fig 3.45 Progress 

Here i also pass the data using parameter

Fig 3.46 Progress

Fig 3.47 Progress

This is the actions that i added to delete the document

Fig 3.48 Actions

After adding the action and set up the firestore, i test it to know if it's already function or not. Here is the final outcome of the create and the firestore  and the photo of the firebase and firestore.

This is the collections

Fig 3.49 Collections

Fig 3.50 Firebase


 
Fig 3.51 Screen record Delete and firebase

TASK 2 FINAL OUTCOME

PDF file

Fig 3.52 PDF file

Flutterflow link

Screen record google drive
https://drive.google.com/drive/folders/1xRpobHFqnXDOOjQiyCxQiGtN5VNxPFL0?usp=shari
ng
TASK 3

For this task, we need to make micro and macro animation for our application.

MICRO ANIMATIONS

1.Interactive elements visually respond when pressed (scale to 95% when pressed and color transition when pressed.

I made all of the buttons from each of the pages are made to be scale to 95% when pressed and color will be changed when pressed.

Here are the processes:

1.First, i created an app state

Fig 4.1 App state

2.Next, i add a function on the button color, so that it will be change if pressed.

Fig 4.2 Function for the button

3.Next i add an animation for the button (scale animation) on the container, so that it will be scaled 95% when pressed

Fig 4.3 Scale animation

4.After that, i add 3 actions

Fig 4.4 Actions

Fig 4.5 Actions

Here are the result: (It scaled 95% and change to different color)

Fig 4.6 Result
* Can see the other examples on the flutterflow file

This is the screen record for the demonstration of the first animation: 

Fig 4.7 Screen record 

2.When user interact with input fields, An input field shaking horizontally when an error occurs, red border and red text will appear if user left the input fields empty. Snack bar will also appear smoothly.

Here are the processes:

1.First, i add validate form and then put all of the text fields into one form, and then click automatically validate

Fig 4.8 Validate form

2.Next,i add an animation on the form  and then add an error border color

Fig 4.9 Animation

Fig 4.10 Error border 


3.After that, i add an action on the button.

Fig 4.11 Actions

This is the results:

Fig 4.12 Result
* Can see the other examples on the flutterflow file

This is the screen record for the demonstration of the second animation: 

Fig 4.13 Screen record

3.Integrate custom loop animation so that user won’t ever guessing whether the actions already work or not

I add a loading spinner on the button for a few seconds so that user won’t confused whether their actions already work or not.

Here are the processes:

1.First, i enable the loading indicator 

Fig 4.14 Loading indicator

2.Next i add delay on the action so that it can show that there the actions is already confirmed and can show the user that the app is processing the action.

Fig 4.15 Action

Result:
Fig 4.16 Result
* Can see the other examples on the flutterflow file

This is the screen record for the demonstration of the second animation: 

Fig 4.17 Screen record

5.Confirmation dialogue that appear smoothly when user needs to confirm something

This is the process:
1.I add alert dialog on the action (button)

Fig 4.18 Action
Result:
Fig 4.19 Result

Screen record:

Fig 4.20 Screen record

5.Animation of progress bar (internet data and balance left in circular progress bar)

1.This is the process:

Fig 4.21 Progress bar animation

Result:

Fig 4.22 Screen record

MACRO ANIMATIONS

1.Using sliding new scenes from the left and right to make it interesting)

This is the process:

I add this to all of the pages

Fig 4.23 Actions

Result: 

Fig 4.24 Screen record

2.When triggering overlays (such as confirmation dialogs for a Delete operation, or an overlay form to Update/Edit a database item), the modal are already transition smoothly. Use a slide-up from the bottom of the screen

Result:

Fig 4.25 Screen record

3.Use fade in for each of the page to make it feels more smoothly

Fig 4.26 Screen record


TASK 3 FINAL OUTCOME

PDF 

Flutterflow link

Screen record for the animations demonstration
https://drive.google.com/drive/folders/1VWm9kYysX8Mz73eB-XaDZDzAEIZOXgBP?usp=dri
ve_link

Screen record for the complete CRUD flow animation

TASK 4

For this task, we need to make an improvement for our final application submission, however when i consulted with Ms.Nurul, she said that my application overall already okay (for the CRUD and animation), she said it is okay if i dont want to add something for task 4, however she said it's also okay if i still want to improve it, maybe add the timer animation and make all of the design neat.


Therefore, for this task, i decided to improve the animation by adding the timer animation.

This is the process:

Fig 4.27 Process

Next, i also added the google sign up and log in (it's already function now)
This is the process:

First i add the action (because before this i already enable the google authentication method on firebase)

Fig 4.28 Action

Next, i open google cloud console and then copy all of these links

Fig 4.29 Google cloud console

Next i add this link on my firebase

Fig 4.30 Firestore


FEEDBACK

Week 2
We had a consultation and showed our app design assignment from the previous semester. After that, we discussed and determined the CRUD functionalities that we would implement for this module's assignment. At first, I was unsure how to incorporate the Update and Delete operations. However, Ms. Nurul suggested making them part of a subscription flow, where users can subscribe to the application, update their subscription details, and delete (cancel) their subscription. Ms. Nurul also said that the application that i redesigned already okay.

Week 5
I asked Ms.Nurul about the design of my application and she said that i can modify some parts of the design to improve it and remove some flows that are too long.

Week 6
This week i consult with Ms.Nurul to show my progress and also ask about one of my feature that cannot function well, which is Update subscription. Ms.Nurul said that i must change it to update/edit profile rather than update subscription because it is too hard if i use that flow.

Week 13
I asked Ms.Nurul about my final application (user authentication and all CRUD) and animation. Ms.Nurul said that overall it's already okay and for task 4, it was optional whether I wanted to further improve my application. If I wanted to add any new features or enhancements from the previous task, I could include them in Task 4. Ms. Nurul also suggested that I tidy up my application's layout, as some of the layouts from the previous task did not display properly during testing for some reason.


REFLECTION

I felt really happy and relieved that I was able to finish this module successfully. I think flutterflow was quite complicated and confusing at first because I had never used it before. I also didn't really understand backend development, Firebase, Firestore, and other related concepts, so this was one of the biggest challenges I faced this semester. Even so, I was happy because I slowly started to understand flutterflow better every week while working on my assignments. I managed to create user authentication and complete all the CRUD functions successfully. All the data was stored properly in Firebase and Firestore. I also added animations to my app and completed all the tasks required for this module. I faced a lot of challenges throughout the process. Every time I worked on the user authentication or CRUD features, there was always some kind of problem. Sometimes I got random errors, sometimes the layout became messy even though I had already fixed it, and sometimes the actions were set up incorrectly, so nothing happened. The hardest part for me was creating the total amount calculation. Since every user could buy different data plans and choose different vouchers, the total amount had to be different for each user. I had to use a lot of functions and actions to make it work, and it took me several days because I kept running into errors. Another challenge was the Update function. I worked on it every day, but it kept failing. I couldn't figure out what was wrong because my data in Firebase and Firestore wouldn't update properly. At first, I didn't really understand actions, functions, app states, and many other FlutterFlow features, but as I kept practicing and fixing my mistakes, I gradually understood them better. Looking back, I'm glad I didn't give up because I learned a lot throughout this module.







Labels:

Comments

Post a Comment

Popular Posts