Application Design 2 / Task 4: Final Project - Completed App
Teh Ming En/0364908
Application Design 2-Bachelor of Design (Honours) in Creative Media--Taylors University
Task 4: Final Project - Completed App
Instructions
Final Project - Completed App
In Task 4, we were required to further develop and refine the MVP main flow that we had previously built in Task 3 using FlutterFlow.
Review of Task 3: Interactive Component Design & Development
In Task 3, I completed the main flow starting from the Onboarding screens all the way to the point where the user taps the “Place Order” button and a confirmation animation appears.
For Task 4, my goal was to build upon that by adding a transition after the confirmation animation finishes playing and the user is redirected to the Profile Page. From there, the user can tap the “Track” button to navigate to the Tracking Page and check the status of their order.
 |
| Fig 1.1 Add Action |
To achieve this, I added three actions to the Place Order button. Instead of navigating immediately, the app waits for the animation to complete before automatically redirecting the user to the next page.
 |
| Fig 1.2 Profile Page |
After finishing the Profile Page, I connected the action from the Place Order button to navigate directly to this screen once the confirmation animation ends. As with previous pages, I used rows, columns, and containers to structure the layout. I also added the On Page Load animation.
For the E-member card, I had already designed it in Figma since App 1, so I simply exported it and imported it into FlutterFlow. Since I couldn’t find a suitable icon for the Tracking Order section in FlutterFlow’s built-in icon library, I decided to import one myself.
 |
| Fig 1.3 Order Tracking Page |
 |
| Fig 1.4 Tracking Details Page |
To further complete my MVP main flow, I also created the Order Tracking Page and the Tracking Details Page. These pages allow users to easily follow up on their order status after making a purchase.
From the Profile Page, users can tap the “To Receive” icon button to navigate to the Order Tracking Page, which shows an overview of their current and past orders. If they want to see more information about a specific order, they can tap on it to enter the Tracking Details Page, where it shows the information such as shipping progress and delivery steps. I also added the On Page Load animation on these pages.
Submission
Youtube Link: https://youtu.be/lpm9pHbx8x0
Publish Web Link: https://senheng-app-mingen.flutterflow.app/
Reflection
Throughout Task 4, I was able to further refine and complete the main flow of my app, which allowed me to deepen my understanding of how to build user journeys using FlutterFlow. One of the biggest improvements was implementing smooth transitions between the confirmation animation and the Profile Page, which made the overall experience feel more complete. I also learned how to handle more detailed navigation flows. This helped me improve my understanding of app logic, user interaction, and page connections. Additionally, importing custom assets such as the tracking icon and my previously designed E-member card gave me experience integrating Figma with FlutterFlow. Despite there being some challenges, overcoming these difficulties helped me develop stronger problem-solving skills and gave me a better grasp of how to balance visual design with functional development.
Comments
Post a Comment