Application Design 2 - Final Project

⭐ 2/7/2024 - 23/7/2025 (Week 11 - Week 14)

🎀 Yan Zhi Xuan | 0369425 

💜 Application Design 2 | Bachelor of Design (Hons) in Creative Media | Taylor's University 

📚 Final Project

---

TABLE OF CONTENTS  /ᐠ - ˕ •マ ⋆｡°✩

1. Links to Tasks

2. Instructions

3. Final Project

4. Feedback

5. Reflections

---

1. LINKS TO TASKS ⊹ ࣪ ˖₊˚⋆˙⟡

Application Design 2 - Task 1: App Design 1 Self-Evaluation and Reflection

Application Design 2 - Task 2: Interaction Design Proposal and Planning

Application Design 2 - Task 3: Interactive Component Design & Development

Application Design 2 - Final Project

---

2. INSTRUCTIONS ⊹ ࣪ ˖₊˚⋆˙⟡

Fig. 2.1 Module Information Booklet - Application Design 2.

Final Project & E-Portfolio (Week 11–14, 40%):

• 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.

---

3. FINAL PROJECT ⊹ ࣪ ˖₊˚⋆˙⟡

Week 11

Reviewed the Design

Fig. 3.1 Reviewed the design for the Final Project.

For this project, I focused on reviewing and refining the checkout and payment flow to make the user experience feel more realistic and intuitive. After finalising the payment page design, I planned to continue polishing the remaining animations in the app.

Fig. 3.2 Adjustments in Checkout Pages.

A. The Issues in Cart Totals:

• RM0.24 (SST) is already a valid decimal for e-payment.
• There should be no rounding applied when using e-wallets, cards, or online banking.
• The rounding of RM0.04 is not needed and incorrect here.

B. The Issues in Payment Method Page:

(Old Design)

• E-Wallet options included logos, which visually cluttered the section.
• There was an extra “Submit” button under the card fields, which was confusing — should users tap “Submit” or “Next”?
• Focus borders on the input fields looked inconsistent, affecting overall UI polish.

(New Design)

• Removed the “Submit” button — now the user is guided clearly to tap only the “Next” button.
• Standardized input field styles for a more polished and professional appearance.

• Removed e-wallet logos to reduce visual noise and maintain a minimal, streamlined look.
• Adjusted spacing and alignment to make the layout feel more compact and balanced.

• The screen now provides a clearer, distraction-free experience for users navigating payment options.

I tried cleaning up both the Shipping and Payment sections to improve accuracy and visual clarity. For the shipping screen, I removed the unnecessary rounding fee (RM0.04), as RM0.24 is already a valid SST charge and there’s no rounding required when using digital payment methods like e-wallets or credit cards. On the payment screen, I simplified the design by removing brand logos from the e-wallet options, which were previously causing visual clutter. I also removed the redundant “Submit” button beneath the credit card input fields, as it created confusion between pressing “Submit” or “Next.” These adjustments help streamline the user flow and make the checkout process cleaner, more intuitive, and closer to real-world standards.

Week 12

Redesigned Checkout and Payment Scene in Flutterflow

Checkout Pages 

Fig. 3.3 Cart Page with Added Item to First Page of Checkout Process - Address Page.

After the user taps the “Checkout” button in the cart, they’re directed to the first stage of the checkout process, which is the Address page. Here, users can view and select their Shipping Address and Billing Address. The design keeps things simple and user-friendly with clear icons for editing or removing addresses. Once the address information is confirmed, users can tap the “Next” button, which is programmed to navigate them to the Shipping Page (CheckoutShippingPage) — the second step in the checkout flow. This ensures a smooth, guided experience as users proceed through the purchase process.

Fig. 3.4 Second Page of Checkout Process - Shipping Page.

 After selecting their address, users are directed here to choose a delivery option. Two delivery types are displayed: Express Delivery (within 2 hours during operating hours) and Standard Delivery (within 3–8 working days). Below the options, a summary of the cart totals is provided, including item subtotal, delivery fee, SST (6%), and the final total. Once the user confirms their delivery choice, tapping the “Next” button will navigate them to the Payment Page.

Fig. 3.5 Third Page in the checkout process - Payment Method Page.

After users select their delivery option, they’re brought here to choose a payment method. The page is neatly organized into three payment categories: Online Bank Transfer, E-Wallets or Store Credit, and Credit/Debit Card. Each option is clearly grouped, making it easy for users to browse and choose their preferred method. In this example, Maybank2u is selected under Online Bank Transfer. For card payments, users can enter their card number, name, expiry date, and CVC. Once a payment method is selected and details are filled in (if needed), users can tap the “Next” button to proceed to the final confirmation page. The flow is designed to feel simple and realistic, just like in real e-commerce apps.

Fig. 3.6 Last Page in the checkout process - Order Summary & Place Order page.

After selecting the payment method, users are brought to this screen to review all order details before confirming their purchase. The Order Summary section displays a clear breakdown of costs, including the unit price total, delivery fee (with and without SST), and the final payable amount. Users are also given the option to apply a coupon code or gift card, though these fields are optional. At the bottom, there's a privacy notice and a final “Place Order” button that confirms the transaction. This page is designed to give users confidence in their purchase by summarizing everything in one clean, final review screen.

Maybank2u

Payment Process Pages 

Fig. 3.7 Payment Process - Maybank2u.

Mr. Razif advised that the payment flow should look and feel like a real app, so I started by watching YouTube tutorials to better understand how actual payment systems work. But I quickly realised — since the Guardian app is only a prototype and not a live app, I can't actually set it up to process real transactions or receive payments.

So instead, I turned to apps that I already use in real life, like Shopee and Maybank2u, and studied how their payment flows work. I explored each step, from selecting a payment method to completing a transaction. Based on those insights, I redesigned the Guardian payment page in FlutterFlow to feel more realistic and familiar to users. I simplified the layout, made small UI adjustments, and aimed to keep it as close as possible to real-world payment experiences — while still making sure it's functional and practical for a test environment.

Fig. 3.8 Payment Process - Maybank2u Account Login Page.

Once the user selects Maybank2u as their payment method and confirms their order, they’re directed to this login interface, which replicates the look and feel of the official Maybank2u website. The screen includes fields for the user to input their username and password, along with helpful links for forgotten login details or creating a new account. A brief security information section is also included to remind users of online safety practices. While this is only a prototype and not linked to real banking, it was designed to reflect a believable and familiar banking experience, improving realism in the checkout process.

Fig. 3.9 Payment Process - Maybank2u Account Selection Page.

After logging in, users are brought to the Account Selection Page (Step 1 of 3), where they confirm the account to be used for payment. The screen displays key transaction details such as the merchant name (Guardian Malaysia), payment reference number, transaction ID, total amount (RM24.54), and fee amount (RM0.00). A visible countdown timer and FPX branding add to the realism of this flow.

Fig. 3.10 Payment Process - Maybank2u Confirm Payment Page and Payment Approval Page.

In Confirm Payment Page (Step 2 of 3), users are prompted to perform Secure Verification. A notice informs them that a notification will be sent to their smartphone to approve or reject the transaction. This step mimics real FPX flow, helping simulate a trusted, real-world banking experience within the app prototype. Users can then tap “Confirm” to proceed to the final transaction screen.

In the Payment Approval Page, users are prompted to approve or reject the transaction via Secure2u — a real-life security feature that pushes a notification to the user’s smartphone. The system asks users to confirm once they’ve approved the transaction externally. A sample notification at the top reinforces the realism of this step, adding a familiar mobile banking touch.

Fig. 3.11 Payment Process - Maybank2u Successful Payment Page.

Upon successful approval, users are directed to the Final Confirmation Page (Step 3 of 3). This screen shows the payment status marked as “Successful,” along with a full summary that includes the reference number, transaction date and time, total amount paid, merchant details (Guardian Malaysia), and updated account balance. There are also options to return to the merchant’s page or print the receipt. This complete simulation was designed to mirror the FPX online banking experience, enhancing user trust and adding credibility to the checkout process — even within a prototype environment.

Fig. 3.12 Order Status, Payment Status, E-invoice and Empty Cart Pages.

After the successful Maybank2u transaction, users are redirected back to the merchant app where they land on the Order Status page. This screen confirms that the order has been placed, using a cheerful illustration and a brief message to reassure users that everything went smoothly. By tapping “Next,” users are brought to the Payment Status page, which displays a confirmation that the payment has been completed along with a thank-you message. From here, users can choose to either request an E-Invoice or go back to the cart.

If users tap “Request for E-Invoice,” they’re directed to the E-Invoice page, which contains a full summary of their transaction — including the order ID, delivery method, address, time and date, and a breakdown of the charges. The screen also offers options to download the invoice or return to the cart. These final touches not only help simulate a real-world shopping experience but also reinforce user trust by providing clear documentation of the purchase.

After completing the payment process and reviewing the E-Invoice, users can return to the cart, which now redirects to the Empty Cart page. This screen gently informs users that their cart is currently empty, using a friendly message and cheerful illustration to encourage them to start shopping again. The “Start Shopping” button is clearly presented to lead users back to the product selection flow, ensuring a seamless loop between purchase and repurchase. This reinforces an intuitive and continuous shopping experience, encouraging re-engagement in a natural, user-friendly way.

Fig. 3.13 Order Status Animation and Payment Status Animation.

Week 13

Further Refinement

Sign Up Status Animation on Sign In Page

Fig. 3.14 Old Sign Up Scene VS New Sign Up Scene.

Fig. 3.15 Sign Up Page and Sign In Page Flow.

Fig. 3.16 Sign Up Status Animation.

After tapping the “Sign Up” button, a signup status animation plays to confirm successful registration. Once completed, users are redirected back to the Sign-In screen, where they re-enter their email and password. After logging in, they’re taken straight to the Home page to start browsing products. This smooth transition reinforces clarity and flow while keeping the experience interactive and responsive.

Category Animation on Home Page

Fig. 3.17 Auto-Cycling Category Bar.

On the Home page, users are welcomed with a lively interface featuring the Category Bar, which automatically cycles through different categories using a vertical sliding animation every few seconds. This subtle motion draws attention to the variety of product options without requiring user input, creating a dynamic and engaging browsing experience right from the start.

Like Animation on Product Detail Page

Fig. 3.18 Like Animation.

To enhance interactivity, a like animation has been added—when users tap the heart icon to favorite a product, a quick pop animation gives visual feedback, making the interaction feel more responsive and satisfying. These micro-interactions not only improve user engagement but also elevate the overall browsing experience.

Add To Cart with Quantity +1 Animation on Product Detail Page

Fig. 3.19 Added to Cart Animation.

On the Product Detail page, when the user taps the “+1” button to select quantity and then clicks the Add to Cart Icon, the cart icon at the top right smoothly rotates left and right, giving a visual cue that the item has been added. At the same time, the cart item count increases by one, and a confirmation message briefly appears on screen with the text “Added to Cart.” This combination of motion, count update, and feedback message creates a seamless and reassuring user experience, letting users know their action was successful.

Virtual Try-On Page

Fig. 3.20 Virtual Try-On Page with Different Colors.

Fig. 3.21 Picture Was Taken Animation.

To enhance the shopping experience, I added a Virtual Try-On page that allows users to preview how different nail colors would look before making a purchase. Users can tap through various color options and see them applied visually on a hand model in real time. To make it more interactive, there’s also a photo-taking feature, allowing users to capture a snapshot of their selected look — perfect for sharing or saving for later. This feature adds a fun, AR-like experience that helps users make more confident, informed decisions.

Warning Sign within the Checkout Process

Fig. 3.22 “Please Select One Method Before Proceeding” Animation.

Within the checkout process, if users try to proceed without selecting a shipping method, a warning message appears to remind them to choose one before continuing. This ensures users don’t accidentally skip essential steps and helps maintain a smooth, error-free checkout flow.

Download Message on E-invoice Page

Fig. 3.23 Downloaded Animation.

On the E-Invoice page, when users tap the “Download” button, a downloaded confirmation message pops up to let them know the invoice has been successfully saved. This feedback adds clarity and reassures users that the action was completed.

Week 14

Further Refinement

Publication of Guardian App

Web URL: https://guardian-yanzhixuannnn7.flutterflow.app/

Fig. 3.24 Guardian App Storyboard Overview and Web Deployment.

Fig. 3.25 Guardian App.

⭐ Final Submission

1. Flutterflow Published Web URL: Guardian App (https://guardian-yanzhixuannnn7.flutterflow.app/)

2. Presentation Walkthrough Video Link: YouTube (with explanation)

3. Presentation Slide Link: Canva Slide

4. Flutterflow Project's Name: Guardian

Important Notes for Web Preview:

• In the web version, some Lottie animations may not fully load on the first visit due to rendering limitations. If the animations appear incomplete, simply reload the page to see the full animation flow as intended — matching the walkthrough video experience.

• Due to limitations in FlutterFlow, the countdown timer in the payment process does not auto-start. Instead, I’ve set it so that when users tap the countdown container, the timer will begin manually. This simulates the intended behavior within current platform constraints.

Presentation Video + Walkthrough Video of Guardian App (Web Version)

1. Presentation with Slide (00:00 - 01:56)

2. Walkthrough Video with Explanation (1:57 - 07:47)

Fig. 3.26 Presentation Walkthrough Video.

*** Please watch the video in 1080 HD for clearer quality.

Presentation Slide of Guardian App (App Design 2 - Tasks)

Fig. 3.27 Guardian App - Slide (AD2).

---

4. FEEDBACK ⊹ ࣪ ˖₊˚⋆˙⟡

Week 11

Mr. Razid mentioned that for Task 3, we should focus only on building the macro and micro animations in FlutterFlow. If anything doesn’t work as expected, we can troubleshoot and refine it later during the final stage of the project.

Week 12-13

No feedback given.

Week 14

Mr. Raizf said good that I was able to finish on time and proceed to submit my project.

---

5. REFLECTIONS    /ᐠ - ˕ •マ

Working on this final project has been both a challenging and rewarding experience that pushed me to apply everything I’ve learned in UI/UX design, animation, and app prototyping. The goal was to redesign the Guardian app with a focus on enhancing the checkout and payment flow while making the entire user experience more polished, intuitive, and realistic. From the start, I wanted the app to feel close to a functioning product, even though it’s a prototype. To achieve that, I did research on real platforms like Shopee and Maybank2u, using them as references to design flows that users are already familiar with.

Throughout the process, I constantly refined the user flow, from the Sign-In and Sign-Up system to the multi-step checkout process — including Address, Shipping, Payment Method, and Order Summary pages. I made sure the logic, transitions, and feedback were clear. I also explored how to simulate a real FPX payment process, even within the limitations of FlutterFlow. For instance, I manually designed the countdown timer to start on tap and created the illusion of real banking flow through a series of linked pages that resemble Maybank2u’s UI.

In terms of visual and interactive enhancements, I paid close attention to microanimations and feedback cues. I added animations to the cart icon when items are added, a pop effect for the like button, a confirmation message when items are added to the cart, and even included a Virtual Try-On feature for nail products with a snapshot function — all to make the app feel more responsive and engaging. The Category Bar auto-slide and Lottie-based loading screen also contributed to a more dynamic user interface.

Of course, there were some platform limitations — for example, some Lottie animations don’t auto-play properly on first load in web view, and automatic countdown logic isn’t supported, but I worked around them creatively to preserve the user experience. These small challenges helped me better understand how to balance design intention with technical constraints.

This project has significantly improved my understanding of user-centered design, prototyping in FlutterFlow, and how small details like animations and flow validation can greatly improve usability. It also reminded me that good UX isn’t just about clean visuals — it’s about guiding users naturally and giving them clarity at every step. I'm proud of how far this project came, and it has given me more confidence in both designing and communicating interactive experiences that feel real and thoughtful.