Application Design 2 - Final Project: Completed App

 xx.xx.2025 - xx.xx.2025 / Week 11 - Week 15

IAN CHOO XIN ZHE / 0369451

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



MIB


 Task 3: Final Task

Students will synthesise the knowledge gained in task 1, 2 and 3 for application in task 4. Students will create integrate visual asset and refine the prototype into a complete working and functional product experience.



I began working on the final version of my app, starting with the onboarding pages. My initial focus was purely on getting the UI in place, ensuring that the visual design matched my planned layout. I built the onboarding screens first as a foundation before moving into interactions or animations. This allowed me to establish the look and flow of the app before refining functionality.




After completing the onboarding pages, I moved on to developing the mechanics and interactions for the login page. I set it so that the login button remains inactive by default, only becoming clickable when both the email and password fields are correctly filled in with the required credentials. Once the correct inputs are provided, the button changes to an active state and allows the user to navigate to the home page of the app. This ensured a smooth, secure, and functional login experience.


Above is the final storyboard, which maps out the complete user flow from the very start of the app at the onboarding screens, through the login process, and all the way to the purchased page. This storyboard serves as a clear visual reference for how each screen connects, illustrating the overall journey and navigation structure within the app.



With all the UI completed from start to finish, along with the interactions and conditions set for the app, it was time to move on to animations. I began with macro animations, as these transitions form the foundation of the app’s flow. I first set up the on-tap transition effects between pages, ensuring that navigation felt smooth and natural. Once the base transitions were in place, I moved on to more detailed macro animations, such as adding a delayed blur effect on the home page after selecting a game card, and incorporating a success animation for the purchased page. These animations added depth and polish to the overall user experience.






For the blur effect, I created an app state variable to control its visibility. This was important because the value needed to reset to 0 whenever the user navigated back using the arrow button. Without this, the blur would remain active unintentionally. I also applied a similar approach to the purchased page, linking the button that returns the user to the home page to the same app state logic. This ensured that every time the user returned to the home screen, the animations and effects reset properly, maintaining a consistent and seamless experience.






Next, I worked on the purchased page animation, focusing on creating a satisfying and celebratory moment for the user. I added a delay to the check icon so that it appears slightly after the page loads, building a sense of anticipation. To enhance this effect, I incorporated a confetti animation, which I sourced from LottieFiles. I downloaded the file and embedded it directly into FlutterFlow. This combination of animations gave the purchased page a more polished, rewarding, and professional feel, perfectly marking the completion of a purchase.

After successfully applying all the macro animations, it was very satisfying to see how they enhanced the flow and feel of the app. With the big transitions and key effects in place, I was ready to move on to working on the micro animations. These smaller, detailed animations would add extra polish and subtle feedback to the user interactions, making the experience more engaging and intuitive.




I started with the home page game cards for the micro animations. When a game card is clicked, it slightly scales up and bounces, accompanied by a subtle shimmer effect. This combination provides tactile feedback and a visually appealing response to the user’s interaction, making the app feel more lively and responsive.



Next, I applied animation effects to the "Add to Cart" button, following my design interaction plan from Task 2. When clicked, the button gives tactile feedback by slightly compressing and showing a brief color overlay. This effect reassures users that their action has been registered, enhancing the overall usability and interactivity of the app.




Then came the most challenging page to animate — the payment page. I needed to apply a bounce and fade-in effect to the “Code Applied” tag that appears after the user enters the correct promo code and taps the apply button. However, I ran into some issues with the logic controlling this animation. After consulting ChatGPT for guidance, I was able to troubleshoot and resolve the problems, successfully implementing the desired animation and improving the overall feedback experience on the payment page.

Finally, after a long journey filled with challenges and problem-solving, my app was complete and ready for submission. The process taught me a great deal about UI design, interaction logic, and the importance of animations in enhancing user experience. Seeing the app come together was incredibly rewarding, making all the effort worthwhile.


App MVP Flow Details 

Log In page

Email: ianchooxinzhe@gmail.com

Password: steam123




Payment page

Promo code: STEAMWINTERSALES


Reflection

Working on this final task of completing my app was both a challenging and deeply rewarding experience. Throughout the process, I encountered numerous hurdles, from understanding how to translate my Figma designs accurately into FlutterFlow, to managing the complex logic needed for interactivity and animations. One of the biggest struggles was grasping the nuances of page state management and binding variables correctly, which are essential for making buttons responsive and dynamic feedback possible. It took a lot of trial, error, and external help — especially from tutorials and ChatGPT — before I could confidently implement these features.

Another significant learning curve was animation. While macro animations like page transitions helped set the overall flow and mood of the app, it was the micro animations—those subtle but crucial touches like button presses and feedback tags—that truly brought the app to life. These small details greatly enhance user experience by providing clear, tactile feedback that makes the interface feel intuitive and polished. Troubleshooting animation logic, especially on the payment page with the promo code, tested my problem-solving skills and patience, but overcoming those issues was incredibly satisfying.

This project also reinforced the importance of iterative design. Constantly refining the UI, responding to feedback, and improving the flow based on real testing helped me create a more user-friendly and visually cohesive app. Overall, the journey taught me not only technical skills but also patience, persistence, and the value of seeking help when needed. Completing this app has boosted my confidence and prepared me for future, more complex projects in UI/UX and app development.


Flutterflow published link: https://steam-app-ianchoo.flutterflow.app/


App run link: https://app.flutterflow.io/run/27NoZSvR1XWogheUpYg8


Video walkthrough link: https://drive.google.com/file/d/1p-ZK8fgwVwTTe3qGIfzetCT0qXJ468H5/view?usp=sharing



Comments

Popular posts from this blog

Major Project 1

Experiential Design - Task 3: Project MVP Prototype

Minor Project - Warisan XR