APPLICATION DESIGN 2 - FINAL PROJECT
30/06/2025 - 29/07/2025 (Week 11-15)
Chan Suet Yee 0358427
Bachelor of Design (Honours) in Creative Media
Application Design II | DST60504 | Sec 01
Task 04 | Final Project
LIST
TABLE OF CONTENTS:
INSTRUCTIONS
TASKS
INSTRUCTIONS
In this final task, we are required to synthesise the knowledge and work developed in Task 1, 2, and 3 to create a fully functional and refined app prototype. This involves integrating all visual assets, interactive components, and animations into a complete product experience. The focus is on polishing the overall design, ensuring smooth navigation, and delivering a cohesive user interface and user experience. By the end of this task, the app should demonstrate a clear flow, functional features, and a visually consistent design that aligns with the initial concept and user goals.
FIGMA PROTOTYPE LINK
PROCESS
For this task, I created an animation for the order confirmation screen using LottieFiles. I began by selecting a sample animation from the LottieFiles library that closely matched the style I was aiming for. Instead of creating everything from scratch, I customized the sample by changing its color, scale, and position to better fit my app’s visual style. I also added extra elements that were relevant to my design concept, making the animation feel more personalized and aligned with the overall look of my app. Once completed, I exported the animation and integrated it into the prototype to enhance the user experience during the order confirmation stage.
Fig 1.1 Task 4 Process
After finalizing the animation, I exported it and successfully inserted it into my FlutterFlow project, where it plays during the order confirmation process. This added a polished, engaging touch to the user experience.
Fig 1.2Task 4 Process
Once the animation was in place, I continued working on the remaining pages that I hadn’t completed in the previous task. These included the Profile, Account Settings, and Notification Settings pages. I focused on keeping the design consistent across all screens while ensuring the user flow remained smooth and intuitive. This step was important in finalizing the app and making sure every section was functional and visually cohesive.
Fig 1.3 Task 4 Process
Lastly, I checked the overall app flow to ensure everything worked properly. While most of the main features functioned as intended, I did encounter some minor issues—such as layout inconsistencies after publishing, which appeared differently compared to how they looked in FlutterFlow, and a few buttons that didn’t navigate, even though actions were already set. Despite these small problems, I tried my best to ensure the main user flow was complete and usable, and this experience gave me valuable insight into the final refinement process of app development.
FINAL SUBMISISSON
Walkthrough Video
REFLECTION
Experience
Task 4 was a challenging but fulfilling stage in my app development process. It required me to bring together everything I had learned and created in the previous tasks to build a complete and functional prototype. One of the highlights of this task was working with LottieFiles to design a custom animation for the order confirmation screen. It was my first time customizing an existing animation, and I enjoyed the creative process of adjusting its color, scale, and layout to match my app’s style. Completing the unfinished pages like the Profile, Account Settings, and Notification Settings also gave me a sense of accomplishment, as I was able to build a more complete and structured user experience.
Observation
Throughout this task, I observed that even when components seem to work perfectly in the design environment (FlutterFlow), they may behave differently after the app is published. For example, some layout elements became inconsistent, and a few buttons failed to respond even though I had already set the correct navigation actions. This showed me the importance of thorough testing after deployment and how small technical errors or platform-specific issues can affect the final product. I also realized how detailed and time-consuming the refinement process can be, especially when working on multiple screens that need to stay visually and functionally consistent.
Findings
From this task, I learned the importance of not only designing and building components but also testing and refining them to ensure a smooth user experience. I found that visual polish—such as using animations—can significantly enhance how users feel when navigating the app, but functionality should always come first. I also discovered that solving issues often takes time and patience, and while I wasn’t able to fix everything perfectly, I was still able to deliver a working prototype with a complete main flow. This task helped me strengthen both my technical skills and my understanding of the final steps involved in preparing a digital product for real-world use.
Comments
Post a Comment