Application Design 2: Final

-
Final Project ㅤ  ㅤ  ㅤ  ㅤ  ㅤ ㅤ  ㅤ  ㅤ  ㅤ  ㅤ  ㅤ  ㅤ  ㅤ  ㅤ  ㅤ  ㅤ  ㅤ  ㅤ  ㅤ  ㅤ  ㅤ  ㅤ  ㅤ  ㅤ  ㅤ  ㅤ  ㅤ  ㅤ  ㅤ  

 Table of Contents 


  1. Todo
  2. Task 3 Recap
  3. Wireframe Changes
  4. Checkout Page
  5. Apple Pay
  6. Final Checkout Pages
  7. Final Submission & Web Deployment

 Instructions 


Find out other information about this module below

Module Information


 Links to Tasks 



 Final Project 

Todo:
  • Finalize and submit your complete working app (30%).
  • Reflect on teamwork and your design journey in your e-portfolio (10%).
  • Submit PDF slides + online reflection posts.


Task 3 Recap

To conclude what I have done for Task 3 in Flutterflow, I have done the onboarding, home page, product detail page, cart page. The next screens to complete during Task 4 are the checkout pages and fixing the overall backend query. Below writes the breakdown of my development progress.

✅ What has been done:
  • Loading Page (Splash)
  • Sign In & Sign Up 
  • Homepage
  • Product detail page
  • Cart page
  • Custom navigation bar, page transitions (macroanimations), elements (microanimations)
⏭️ What to do next:
  • Checkout pages
  • Paying page
  • Fixing the overall backend query
This will make sure all features are included in Flutterflow and a complete MVP end-to-end shopping experience with Temu.



Wireframe Changes

Whilst going through my checkout pages to indicate a payment method to complete the flow, I realised that the checkout pages I have designed is not as detailed, and too straightforward. Hence, before I started doing the other pages on Flutteflow, I went ahead and planned the changes on Figma.

Figure 3.1 Wireframe Changes Planning on Figma


The attachments below shows the changes that have been made to the Checkout Pages.


Figure 3.2 Checkout Page: Payment

The changes I have made for the checkout payment pages is that I added icons to the payment methods for easier recognition and it enhances the overall UI of it. Besides this, I also changes the billing address icons to shipping trucks. Also, there is ticks now which allows users to choose a payment method to proceed. For this task, I am planning to do Apple Pay flow on Flutterflow.

Figure 3.3 Checkout Page: Review

As I said, I removed the toggle to expand option into ticks / checkboxes so the process is more intuitive. Users will now get to review their order summary on a seperate page with the final total including SST, shipping, and merchandise prices.

Figure 3.4 Checkout Page: Placing Order

The placing order page has no more top bar and the loading animation is changed to a cart with a small loading indicator on top, this makes the overall aesthetic better as it incorporates more visuals rather than having plain indicators. Users' attentions will be captured more easily and that the text typography has been changed to Poppins to match the other pages, there is also enough white space to enhance readability.

Figure 3.5 Checkout Page: Order Placed

To match with the previous screen's cart design, I used the exact same cart but added a few elements to indicate that the cart is now full. The top bar has been removed and the back to home button maintains at the bottom for easy navigation.

After concluding the final designs for my checkout pages, I have started to do it on Flutterflow.



Checkout Page

For the page design, I replicated it based on the design I did on Figma (Wireframes). The Continue to pay
button will redirect users to the payment page.

Figure 3.6 Checkout Page 1



In the payment page, the checkboxes can be ticked or unticked as it is interactive, users can press the Review order button to proceed to the next screen.

Figure 3.7 Checkout Page 2


In the review page, there is the order summary and payment details as well as a shortcut to appy vouchers if needed. After everything is carefully reviewed, users can press the place order button.

Figure 3.8 Checkout Page 3

All the bottom containers with the buttons are components done in a seperate layer/

Figure 3.9 Components


Finally, after completing the first few steps of the checkout progress which is the details and information. I started focusing on completing the flow for Apple Pay.


Apple Pay

I used Shopee to checkout a few items and screen recorded the process for my reference. I will attach the screenshots of the screens below. It is also linked in my Figma file.

Figure 3.10 Apple Pay Flow Reference

After figuring out the flow, I started designing the pages directly on Flutterflow. The first page is the Apple Pay page that shows the total payment and includes a button to proceed with paying with Apple Pay.

Figure 3.11 Apple Pay 1


Just like the previous checkout pages, I made sure to use components to create the button at the bottom and added necessary shadows and icons to replicate the exact design from my references. I also added an action to the action flow editor where the button on tapped will navigate to the next process. 

Figure 3.12 Apple Pay button

In the next screen, it is just a dimmed screen but with an overlay on top showing a loading indicator. I used the action delay and set it to 1 second to automatically redirect to the next screen.

Figure 3.13 Apple Pay 2

The next screen shows the apple pay option pop up and double-click to pay shortcut. Usually after double clicking, face id will be scanned to proceed to the next step. In flutterflow, I made the navigation to clicking anywhere on the card screen pop up to go to the next step.

Figure 3.14 Apple Pay 3

In this screen the Face ID will be activated and the payment is processing, this screen stays on for 5 seconds and will automatically go to the next screen.

Figure 3.15 Apple Pay 4

The next screen shows that the paymenti is done and card transaction notification that indicates successful transaction. This screen will show for 3 seconds before transitioning to the next.

Figure 3.16 Apple Pay 5

In the last apple pay payment process is the payment successful pop up on the screen. After the animation has loaded, it will transition to the next immediately.

Figure 3.17 Apple Pay 6

The last checkout pages are the placing order and order placed page. Theres microanimations which is the loading indicator, and macroanimations of sliding in from the left after payment is successful.



Final Checkout Pages


Figure 3.18 Placing Order


Figure 3.19 Order Placed

That is all the pages that I have done to complete my Main Flow for the redesigned Temu Application for this module. Before submitting everything, I did go through the tests modes and made sure all macroanimations and microanimations are loaded properly, and that the buttons linked to correct page transitions. All further refinements have been made and feedback has been received to improve my overall app design.




Final Submission & Web Deployment

Web URL Link: Temu App (Web Version or Iphone 15 Pro Max)
Figma Wireframes & Planning : Figma 
Walkthrough Video: Google Drive
Presentation Video: Google Drive

Figure 3.20 Storyboard on Flutterflow


Figure 3.21 Web Deployment

Figure 3.22 Final Project Presentation Video


Figure 3.23 Walkthrough Video


 Reflection 


Completing this final project has been both a challenging and incredibly rewarding experience. It pushed me to think beyond conventional approaches and encouraged me to explore both static and animation design more deeply. Throughout the process, I had to apply everything I’ve learned so far — from UI/UX principles to motion graphics and overall visual consistency.

In the beginning, using unfamiliar tools like FlutterFlow and LottieFiles felt overwhelming. There were moments of confusion, especially trying to get comfortable with new workflows and design systems. However, by consistently practicing, watching tutorials on YouTube, and exploring the software through trial and error, I gradually became more confident and efficient.

One of the most important things I’ve learned is how essential it is to continuously iterate. I consistently made improvements to my app prototype, not only to enhance aesthetics but also to ensure that every page was designed with empathy in mind. I took the feedback from Mr. Razif seriously and made meaningful changes based on his suggestions — something that really helped my project evolve.

This project has greatly deepened my understanding of user-centered design and taught me the value of thoughtful prototyping in FlutterFlow. I’ve realized how much of a difference the small details — like animations, transitions, and validation flows — can make in shaping the overall user experience and improving usability.

I’m especially thankful for my classmates who supported and encouraged one another throughout the journey. Having a collaborative environment made the process less stressful and more fulfilling. I’m also incredibly grateful to Mr. Razif for being so patient, approachable, and genuinely committed to helping us whenever we felt stuck. His guidance made a huge difference, and it was truly rewarding to see my final prototype come to life.



←                    ↑                   →
      task 3                                                   top                                              task 1