Application Design 2 - Task 03: Interaction Design Submission
APPLICATION DESIGN 2 DST 61004
WEEK 08 - Week 11 (12.07.2025 - 03.07.2025)
NAME: Chin Tze Wei
I.D: 0357423
COURSE: Application Design 2 / Bachelor of Design (Honors) in Creative Media
GROUP: Class 01 Sec 01
Application Design 2 - Task 03: Interaction Design Submission
- LIST -
TABLE OF CONTENT
1. Instructions
2.2.2
Splash Screen
2.2.3
Log In and Sign Up
3.1 Flutterflow
4.
Reflection
1. INSTRUCTIONS
Module Information Booklet
Module Information Booklet (MIB)
Requirement:
- Build an interactive application in Flutterflow.
2. TASK 03: INTERACTION DESIGN SUBMISSION
2.1 Flutterflow - Setup and Configuration
During Week 8, I started to conduct our project (application) in Flutterflow.
Before I start to build my app, I start to initialize the app settings.
Figure 2.1 App Settings
Project Name: Padini
Project Description: Founded in Malaysia.
Package Name: com.tzewei29.padini
Display Name: Padini
Entry Name: OnboardingPage_01
Lagged in Page: Home_Page
After I have do the basic settings to my application. I then have setup all
app's typography and colour styles to align with my Padini App. I import those
colours and fonts from Figma to Flutterflow based on the tutorial video I
found in YouTube.
Video 01 Tutorial Video - Figma Import
Figure 2.2 Colour Setup
Figure 2.3 Font Setup
2.2 Flutterflow - Developing Stage of App
Next, after setup all the settings, I then start to develop the app in
Flutterflow. In the developing stage I decide not to do the animation assets
first. I decide to develop the animation part after finnish the developing
stage.
2.2.1 Onboarding Stage
For Onboarding Page, there are 3 pages.
Figure 2.4 Widget Tree for Onboarding Page 1-3
Video 02 Onboarding Page Preview Mode
2.2.2 Splash Screen
After the Onboarding Page, I then start to develop splash screen. The splash
screen I decide to do fade in animation to the Padini Logo, but this will be
done during the last stage.
.png)
.png)
Figure 2.5 Widget Tree for Splash Screen (Haven't develop the
animation) and Splash Screen Page Preview Mode
2.2.3 Log In and Sign Up
Next, was Log In and Sign Up page, this page will appear after the splash
screen.
Figure 2.6 Widget Tree for Log In and Sign Up and Video 03 Log
In and Sign Up Page Preview Page
The video attached above, you can see how the Log In and Sign Up page interact
in the app.
2.2.4 Home Page to Product Listing Page
There are six pages in the section "Home Page to Product Page".
Figure 2.7 HomePage_to_Product Page
(a) Home Page
First is Home Page.
Figure 2.8 Widget Tree for Home Page and Video 04 Home Page
Preview
(b) Product Listing Page
Next is Product Page, there are five categories in Product Listing Page, which
include Female, Male, Kids, Shoes and Accessories.
Figure 2.9 Widget Tree for Product Listing and Video 05 Product
Listing Preview
2.2.5 Product Page to Payment Page
There are a total of 7 pages in the section "Product Page to Payment Page".
Figure 2.11 ProductPage_to_Payment Page and Video 06 Product
Page to Payment Page Preview
2.2.6 Component Used
I have created several reusable components to streamline the app development
process and maintain UI consistency. These components include "Post,"
"Product_Drop," "Voucher_1," "Voucher_2," and "Voucher_Drop_Complete," each
designed to serve specific interface functions such as displaying posts,
product options, or voucher selections.S
Figure 2.12 Component Used
(a) Post
Figure 2.13 Post (Component) and Widget Tree for Post (Component)
This display a user-generated content post similar to those on social media
platforms. The left side shows the visual layout of the component, including
the user's profile picture, name, timestamp, post text, a row of product
images, and interactive buttons for likes, comments, and shares. On the right,
the widget tree reveals the structure of the component, built using a
combination of Container, Column, Row, Image, Text, and IconButton widgets to
organize the content hierarchically and ensure a responsive and organized
layout.
(b) Product_Drop
Figure 2.14 Product Drop (Component) and Widget Tree for Product Drop
(c) Vouchers
There are two vouchers.
Figure 2.17 Vouchers (Component)
Figure 2.18 Widget Tree for Voucher (Component)
2.2.7 Other Page
I also have done several page that are not listed in the chosen flow. Which
include
Community Page, Favourite Page, Profile Page and Search Page.
Figure 2.19 Other_Page
(a) Community Page
This page is for users to share their outfits purchased from this store.
Figure 2.20 Community Page
(b) Favourite Page
Figure 2.21 Favourite Page
(c) Profile Page
Figure 2.22 Profile Page
(d) Search Page
This page is for users to search their favourite outfits before added into
favourite or cart to checkout.
Figure 2.23 Search Page
2.3 Flutterflow - Preview of Developing Stage
After finnished the developing stage, I have recorded a preview video.
Video 07 Preview Video (Developing Stage)
3. FINAL SUBMISSION
3.1 Flutterflow
📌 Flutterflow Publish Link: https://appdesign2-final-0357423.flutterflow.app/
📌 Flutterflow Project Link: https://app.flutterflow.io/project/application-design2-final-task-f9x01o
3.2 Presentation Video
4. REFLECTION
Throughout this assignment, I gained valuable hands-on experience in
building functional and visually cohesive mobile application using
Flutterflow. This task alllowed me to understand how interaction
design goes beyond static mockups, this involves real-time user navigation,
UI consistency, and maintaining responsiveness across screens.
In the early stages, I focused on setting up the application structure,
including typography and colour styles, which I successfully imported from
Figma. This process helped me reinforce the importance of design
consistencty and branding in UI design.One of the most challenging aspects
was translating my design vision into interactive components. Initially, I
avoided working on animation due to its complexity, opting instead to focus
on developing functional flows such as Onboarding, Splash, Log In/Sign Up,
Home, Product, and Payment pages. Later, I plan to revisit and enhance the
animations to further improve the user experience.
Creating reusable components (e.g., Post, Product_Drop, Vouchers)
significantly streamlined my workflow. It taught me how scalable design
systems can improve both speed and consistency in app development. I also
explored additional pages (Community, Favourite, Profile, and Search),
allowing me to expand the app beyond the core user journey and consider
extended user needs.
This task not only strengthened my technical proficiency with Flutterflow
but also improved my problem-solving skills—especially when working with
navigation logic and widget structures. More importantly, it helped me
better understand how each design decision affects user interaction and
experience.
In the future, I aim to explore more advanced features in Flutterflow such
as custom animations, API integrations, and conditional logic to further
enrich the app's functionality. Overall, this task was an essential step in
bridging my UI/UX design knowledge with interactive application development.
