Application Design II / Task 4: Final Project

on
14.07.2025 - 28.07.2025 (Week 12 - Week 14)
Gunn Joey / 0366122
Application Design II / Bachelor of Design (Hons) in Creative Media
Task 4: Final Project 
TABLE OF CONTENTS

1. Module Information Booklet 
2. Task 4
3. Feedback 
4. Reflection
MODULE INFORMATION BOOKLET


TASK 4

Description

For Task 4, you are required to deliver a complete, functional version of their mobile app, integrating all design and interaction elements developed earlier. Alongside the final app, students will submit a reflective e-portfolio highlighting their process, improvements, and learning throughout the project.

Requirements

1. Final Project – Completed App (30%)
  • Complete and functional mobile app integrating tasks 1–3.
  • Visual assets and interactive components must be fully integrated.
  • Focus on delivering a cohesive, usable experience.
  • Polish UI, interactions, navigation, and app logic.
  • Prepare a presentation slide deck in PDF format.
  • Demonstrate your app’s user flow, features, and usability.
2. E-Portfolio Reflection (10%)
  • Reflect on your collaboration, problem-solving, and personal learning.
  • Describe how you interacted in team or class settings.
  • Explain how you applied feedback and improved your design.
  • Submit reflection as online blog post in your e-portfolio.

        A. Modification of FlutterFlow

1. Splash Screen

For the updated splash screen, I added a button that appears right after the animation finishes playing. To enhance user interaction, I included a hover effect that responds visually when the user moves the cursor over the button, making it feel more dynamic and engaging. Once clicked, the button triggers a smooth transition to the onboarding page, guiding users naturally into the app experience.

Instead of relying on the default “on page load” action to handle this transition, I created the button manually. I found that the page load trigger didn’t work reliably when combined with the splash animation, causing inconsistencies in the user flow. By manually adding and timing the button, I gained better control over how and when it appears, ensuring the experience feels polished and seamless.



2. Home Page

I decided to remove the circular scale-up animation effect on the home screen after testing revealed that it didn’t run smoothly. The animation appeared laggy and lacked the polished feel I was aiming for, which could potentially disrupt the first impression users have of the app. Smooth performance is essential, especially on the home screen, where users expect a seamless and responsive experience.

Since I want the Sasa app to maintain a clean, professional look, I felt it was better to cancel the effect altogether. Rather than compromising the app’s quality with an animation that feels forced or poorly executed, I chose a simpler, more stable approach to keep the user interface elegant and visually consistent.



3. Product Page

On the product page, I decided to remove the pop-up messages that say “Item added to cart” and “Item added to wishlist” after users click the respective buttons. Instead, I replaced them with a cleaner approach using a snackbar notification. The snackbar briefly appears to confirm the action, then automatically disappears after a 1000ms delay. This creates a smoother, less intrusive user experience while still giving clear feedback to the user.




4. Shopping Cart

I added animations to the containers on the shopping cart page to make the experience feel more interactive and dynamic. The first container slides in smoothly from the left, followed by the next container sliding in from the right. This alternating motion creates a visually engaging flow as the elements appear, making the page feel more lively and responsive to user interaction. 




5. Checkout Flow

If users forget to select a payment method during checkout, I implemented an informational dialog to guide them. The dialog displays a clear message: “Please select a payment method,” ensuring users understand what’s missing before proceeding. It includes only an “OK” button, which must be clicked to dismiss the dialog. This approach prevents confusion and provides a straightforward way to prompt users without interrupting the overall flow of the app.

Once the dialog is dismissed, users are directed to reselect one of the available payment options. This helps maintain the integrity of the checkout process by ensuring no steps are skipped. By adding this safeguard, I aimed to create a smoother, more user-friendly experience that supports completion of the purchase without unnecessary frustration or errors.



      B. Final Submission

Published Web Addressed URL: https://sasa-app-yaqwqx.flutterflow.app/logInForm
Fltterflow Collaborator Link: https://app.flutterflow.io/share/sasa-app-yaqwqx
Walkthrough Video: 


Video Presentation:
FEEDBACK

What matters most right now is that the app works as it should and looks clear and easy to use. Since this was the first time building an app like this, having a working and clean-looking result is already a good achievement. It shows an understanding of how to make something both useful and user-friendly.

REFLECTION

This project has been a valuable and challenging experience, especially as it was my first time building a fully functional and publishable mobile app. Working in FlutterFlow was initially overwhelming, but as I explored its features and workflows, I became more confident in designing layouts, managing navigation, and integrating logic without writing code. Learning to use LottieFiles for the first time added a creative and polished dimension to the app, and after some trial and error, I managed to use animations that made the interface feel more responsive, modern, and visually engaging.

During development, I noticed how crucial it is to focus on both functionality and user experience. Simple things like consistent spacing, intuitive navigation, and well-timed animations helped the app feel smoother and more enjoyable to use. At times, I had to simplify or adapt my initial design ideas to make them more practical and efficient, which taught me to balance creativity with real-world usability. Feedback and testing also helped me make better design decisions.

Overall, this project helped me understand the full process of app development from planning and prototyping to testing, refinement, and publishing. I now appreciate how interactive design choices shape the user journey and feel more prepared to take on future projects with confidence, using no-code tools to create meaningful, functional digital experiences.

Comments

Post a Comment