APPLICATION DESIGN 2 DST 61004
WEEK 08 - Week 11 (12.07.2025 - 03.07.2025)
NAME: Chai Wei Yi
I.D: 0369561
COURSE: Application Design 2 / Bachelor of Design (Honors) in Creative Media
GROUP: Class 01 Sec 01
Application Design 2 - Task 03: Interaction Design Submission
INSTRUCTIONS
Timeframe: Week 08 – Week 11
Description:
In this task, students will build upon the knowledge gained from Task
2 by developing
interactive and animated micro-interactions
to elevate the user experience of their app. The objective is to
explore and make creative decisions about the types of interactions
that best suit their app’s design and functionality.
The final output will be a
working animation element
that is ready to be directly implemented into the app. Unlike Task 2,
where animations were conceptual or visual-only, this task requires
students to create fully functional animations using
FlutterFlow, ensuring
they are integrated seamlessly within the app environment.
Interactive Components/Elements can be:
Navigation Menu with interactive icons.
Side Menu interaction
Pop Up boxes
Call to action buttons
Page/Screen transitions
Requirements:
1. Interactive components/elements created with Flutterflow and
Lottieflies.
Submission:
1. Project link & Video Walkthrough.
2. Collaborator Links.
3. Online posts in your E-portfolio as your reflective studies
TASK 3: INTERACTIVE COMPONENT DESIGN AND DEVELOPMENT
A. Animation in Flutterflow
Payment Done
This page appears immediately after a user completes their purchase, confirming a successful checkout. At the top is a clear header labeled “Cart,” followed by a central visual confirmation—a recognizable Steam logo to reinforce branding. Below the image, a green box with the message “Successful Checkout” reassures the user that their transaction was processed correctly. A short thank-you message (“Thank you. Your purchase was successful”) provides additional confirmation.
At the bottom, the user is presented with a "Continue Shopping" button in blue, allowing them to return to the homepage and explore more games. This interaction helps maintain user engagement and encourages further browsing or purchases. The overall design is clean, centered, and easy to understand, providing a positive closure to the buying process.
C. Final Submission
FEEDBACK
WEEK 8
General Feedback: -
Specific feedback: -
REFLECTION
Observation
Throughout the development of my Steam-inspired mobile app in FlutterFlow, I observed that while the platform makes it relatively easy to structure multi-screen apps, achieving a polished, professional look still requires careful customization. For example, I initially relied on basic layout components, but as the project evolved, I realized the importance of consistent spacing, icon placement, and font hierarchy to create a more immersive gaming interface. One notable issue I encountered was with UI scaling—some elements, such as images and buttons on the Cart and Game Details pages, appeared too large or unbalanced during preview, prompting several adjustments. Navigating between core screens like Home, Library, Game Details, Cart, and Wallet was structurally smooth, but I had to refine visuals like button contrast and icon alignment to maintain consistency across the experience.
Finding
One key finding during this task was the significant impact that micro-interactions and visual feedback have on the overall user experience. By adding a simple animated confirmation screen after checkout (e.g., “Successful Checkout”), I noticed that users are more reassured and engaged. Even though I didn’t use LottieFiles, crafting smooth screen transitions and well-timed page responses contributed to a much more dynamic feel. Another insight was the importance of information clarity—using card-based layouts in the Library and Cart pages made browsing and managing games intuitive. Pages like the Store (Top-Up) screen also benefited from having visually distinct buttons with clear CTAs. These design decisions taught me that while functionality matters, visual clarity and user guidance are equally crucial in retaining attention and improving usability.
Experience
This project gave me valuable hands-on experience in building a multi-functional app inspired by the Steam platform. I learned how to structure different types of screens such as Home, Game Details, Store, Library, and Checkout, each with unique layouts and user flows. It was my first time applying conditional visibility logic and designing in FlutterFlow with a gamer-centric theme, which pushed me to think not only about layout but also about user behavior and flow. I improved on earlier drafts by refining UI sizes, replacing static placeholders with meaningful content, and ensuring button placements made sense on mobile. Looking forward, I plan to further enhance transitions and add subtle animations to make the app feel even more responsive. This task also helped me understand how to publish projects through FlutterFlow and document them clearly—skills I will continue to apply in future digital product presentations and video walkthroughs.
Comments
Post a Comment