Application Design II: Task 03

| 05.06.2025 - 26.06.2025 (WEEK 7-WEEK 10)
| Application Design II / Bachelor of Design in Creative Media
| Interaction Design Proposal & Planning

| Tang Chin Ting [ 0366473 ]

---

INSTRUCTIONS

---

LECTURES

All lectures and exercises are completed in this Blog.

---

SUBMISSION

Task 03: Interactive Component Design & Development

Instructions:

Students will build upon the knowledge gained in Task 2 to create micro-interactions and animated micro-interactions for their app. This will greatly elevate the user experience of the app. The aim of this task is to get the students to explore and make creative decisions on the type of interactions they would want to integrate into their app.

The output of this task is a working animation element that is ready to be integrated into their final app. Meaning it’s no longer a visualisation like how it was in Task 2. This will be created using HTML, CSS, and JavaScript, with the option to utilize an animation framework if necessary.

Interactive Components/Elements can be:

• Navigation Menu with interactive icons
• Side Menu interaction
• Pop-up boxes
• Call to action buttons
• Page/Screen transitions
• Etc. (Discuss with the module coordinator for further clarification.)

Task 02 Interaction Planning

Figure 1.1 Master Plan & Storyboard in Figma

Sushi King App MVP 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.

Page To-Do:

• Welcome Page
• Onboarding Page
• Homepage
• Menu Page
• Sushi Detail Page
• Cart Page
• Payment Page
• Payment Successful Page

Since this was my first time using FlutterFlow, I wasn’t familiar with it. I found it somewhat challenging to understand the logic behind each widget, page state, parameter, and query. However, I followed the tutorial video provided by our lecturer during the class activity.

Welcome Page

For the welcome page, I simply added the logo animation I created earlier and used it as a transition to the login page. I set up an action so that the animation plays to the end, then automatically navigates to the onboarding page.

Figure 1.2 Logo Animation

Figure 1.3 Action for the Welcome Page

Onboarding Page

I created three pages for this section, and for each page, I added animations to the images, text, buttons, and the progress bar. I found this part quite functional and easier to work with because FlutterFlow has a feature that lets you preview all the animations you create. This makes it simple to adjust the timing in milliseconds and see the results immediately.

Figure 1.4 Onboarding Page

Figure 1.5 Onboarding Page 2

Figure 1.6 Onboarding Page 3

Figure 1.7 Onboarding Page Showcase Video

Login Page

After the onboarding pages, the next screen is the login page. I added a simple animation to the panel, making it swipe up with a slight delay. For now, I’ve only implemented the function for the login button, and I plan to add the functionality for the sign-up button in the final task.

Figure 1.8 Login Page

Figure 1.9 Login Page 2

Figure 1.10 Login Page 3

Additionally, I learned that I can set the login button to be clickable only when both text fields are filled in. The button will also change to red after the user enters their phone number and password.

Figure 1.11 Text Field

Figure 1.12 Login Page Showcase Video

Homepage

On this page, I simply used a container and a column to organize the content, and I added animations to each section to make it more interactive when loading from another page.

Figure 1.13 Homepage

Figure 1.14 Homepage Animation Showcase Video

Menu Page

For the menu page, it took me a considerable amount of time to complete. I initially created container widgets for each section, but I also wanted to add a list view for the sushi menu, similar to what we did in the class activity. Although I failed several times, I eventually managed to get it working in the end.

I set up the query and page state on this page to let users choose between “pick up” or “dine in,” with the selected option turning into a black button. I also implemented category selection, where each category icon links to a different page view of the sushi menu. Since I couldn’t find any sushi-related icons, I just used some generic icons instead. When a user clicks on a category button, its container turns red and the icon changes to white. This is very useful for the incoming design on each page.

Figure 1.15 Menu Page

Figure 1.16 Menu Page 2

Figure 1.17 Menu Page 3

Additionally, for the sushi menu, I used a Firebase collection because it’s very helpful and makes it easy to manage the sushi item content. I also added a search bar so users can look up sushi by name. When they enter a sushi name, the matching item will appear at the top of the list, making it easier for them to find what they want.

Figure 1.18 Menu Page Firebase Collection

Figure 1.19 Menu Page Search Bar

Figure 1.20 Menu Page Showcase Video

Product Detail Page

Actually, this page was easier to complete. I just added the image and text and linked them to the Firebase document. In my initial Figma design, I used icons for the ingredients, but since it was difficult to find specific icons in FlutterFlow, I used images of the ingredients downloaded from the Sushi King website instead. The final result actually looks better this way.

Figure 1.21 Sushi Detail Page

I initially wanted to set up the counter column so users could adjust the quantity before adding items to the cart, but I couldn’t get it to link properly to the cart page. As a result, users can currently only add one sushi item at a time, and while the counter button can be clicked to decrease, it doesn't support adding multiple quantities. I also used a similar if...else function to let users save their favorite sushi, with the favorite button turning red when selected.

Figure 1.22 Save Button in Sushi Detail Page

To notify users that their sushi has been successfully added to the cart, I created a confirmation panel on the “Add to Cart” button. When they click the button, the panel appears and the sushi is added to their cart.

Figure 1.23 Add to Cart Button Actions

Figure 1.24 Added Successful Botton sheet

Figure 1.25 Sushi Page Showcase Video

Cart Page

For the cart page, I first added the "cart" query and displayed the list view of sushi items that had been added to the cart. Initially, I wanted to implement the functionality for calculating the subtotal, service tax, and total amount, but I wasn’t able to get it working. So for now, I’ve just placed static text for the subtotal, service tax, and total.

Figure 1.26 Cart Page

Figure 1.27 Cart Firebase

Additionally, I updated the red dot indicator on the cart icon in the menu page. If the cart is empty, the red dot doesn’t appear, but if there’s at least one item in the cart, it shows up. This makes the interface more interactive and helps users easily see whether they have items in their cart.

Figure 1.28 Cart Icon Red Dot Update

Figure 1.29 Add to Cart Showcase Video

Payment Page

Moving on to the payment page, I added three payment method icon buttons and styled them similarly to the category buttons. When a user clicks on one, it gets a red border with a white fill color.

Figure 1.30 Payment Page

For the text field, I used a different input mask to match the debit card number format, so when users enter their number, it automatically appears in the correct debit card format.

Figure 1.31 Debit Card Number Text Field

After the user clicks on the pay now button, there will be a loading animation for 3 seconds, and it will directly jump to the payment successful page.

Figure 1.32 Loading Animation Bottom Sheet

Figure 1.33 Payment Showcase Video

Payment Successful Page

When users reach the payment success page, an animated checkmark icon appears, and they can browse the sushi items they’ve purchased.

Figure 1.34 Payment Successful Page

Final Walk Through Video

Figure 1.35 Final Walk Through Video on YouTube

---

REFLECTION

This was my first task using FlutterFlow to complete an application, and at first, it was really challenging. I wasn’t familiar with the interface or how the logic worked, especially when it came to setting up queries, managing page states, and linking between pages. Initially, I struggled to understand how each widget worked and how to structure the app properly.

However, after watching the tutorial video provided in class and getting step-by-step guidance—both from the video and by asking AI for help—I started to feel more comfortable. The tutorials really helped break down the functions and explain how to use them effectively. I learned how to set up queries, manage page states, and apply conditions to make the app more interactive and responsive.

Overall, although it was hard at first, I found the process rewarding. I observed that FlutterFlow’s visual approach can make app development more intuitive once you understand the logic behind it. The ability to preview animations, test queries, and set up interactions directly on the platform was especially helpful. This experience definitely made me more confident and familiar with using FlutterFlow for future projects.