Application Design 2 - Final Project: Completed App
APPLICATION DESIGN 2 DST 61004
WEEK 12 - Week 14 (10.07.2025 - 24.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 - Final Project: Completed App
- LIST -
1. INSTRUCTIONS
Module Information Booklet
Module Information Booklet (MIB)
Requirement:
- Finalize and submit your complete working app. (30%)
- Reflect on teamwork and your design journey in your e-portfolio. (10%)
- Submit PDF slides + online reflection posts.
2. FINAL TASK: COMPLETED APP
In this final task, I will focused on adding action and animation to make
the user experience feel more realistic and smooth for the application.
2.1 Flutterflow - Add action
Figure 2.1 Action added to the pages
2.2 Flutterflow - Add animation
There are total of 2 animation inside the application.
Figure 2.2 Lottifiles Animation
(a) Splash Screen Animation
The splash screen serves as the first impression of the application, offering
a brief loading screen while establishing brand identity and visual tone.
The animation starts with a transparent background, creating focus on the
animated elements. A logo (Padini Logo) gradually fades in to attract the
user's attention. The logo fade in smoothly and appears centered with clearly
visible. The splash screen animation lasts on 3 seconds, keeping the wait time
short. After the animation completes, the screen transitions seamlessly into
the onboarding screen or login page.
Video 01 Splash Screen Animation
(b) Confirmation Tick Animation
The confirmation tick animation is used to visually signal the successful
completion of placing an order.
The animation begins with a circular loading stroke and a pulsing
background, then a checkmark (✓) smoothly pops in inside the circle. The
animation is fluid and timed precisely, gives a satisfying feedback loop.
The colour of the tick is same as the colour theme of my application.
Moreover, the animation is about 2 seconds to ensure not to interupt the
flow.
Video 02 Confirmation Tick Animation
3. FINAL SUBMISSION
3.1 Flutterflow Published Link
📌 Flutterflow Published Link: Click
HERE
3.2 Presentation Video
📌 Presentation Video: Click HERE
3.3 Previous Task Blog Link (Compilation)
4. REFLECTION
In this final task, I focused on refining the app by adding actions and
animations to enhance the user experience. Implementing navigation actions
taught me how important smooth and logical flows are in an app. The two
animations—a splash screen and a confirmation tick—helped reinforce branding
and provide satisfying user feedback.
Throughout the project, I improved my skills in Flutterflow and learned how
to turn design concepts into a fully functional app. While working mostly
independently, reviewing earlier tasks helped me refine my decisions and
maintain UI consistency. This task helped me understand the importance of
interaction design, user experience, and attention to detail in building a
professional app.
