Application Design II Final Task

Melvin Yung Khun Yew | 0357241 | Bachelor of Design (Hons) in Creative Media

MMD 60204 | Application Design II
Week 12 — Week 15

Task 4:  Final Project - Completed App

Working on top of my integration of visual assets, I further refined my app prototype from a minimum viable product to intended completed app features, which is essentially what makes my SPayGlobal app whole, the loyalty rewards mechanism.

App Redesign on Figma



These are the jump links to each part of this portfolio


Instructions

Mr Razif Mohammed, my section lecturer for the Information Design module for this short semester, gives us a heads-up on the upcoming tasks and exercises.


MIB - Module Information Booklet


Here are the task details:

Description
"Students will synthesise the knowledge gained in tasks 1, ,2 and 3 for application in task 4. Students will create and integrate visual assets and refine the prototype into a complete working and functional product experience."

Requirements
1. Flutterflow app building
2. Video presentation/app walkthrough 


    Work Process

    New Feature Addition

    To complete my SPayGlobal app redesign, I started to work on my loyalty rewards page design and made some minor redesigns to the previous design from the Application Design I module in order to match the overall app aesthetic. 

    As in Task 2, which is focusing on the MVP features of the app, I left out this feature to be redesigned and planned out, thus I took reference back to my previous Figma design files to retrieve the designs and made modifications to it.

    Loyalty Rewards Page Design in Figma

    For a start, I began to plan and create the component required for the loyalty reward page, where the users can redeem various vouchers ready to be used using the point system that can be earned through transactions with partnered merchants. 

    Following the design, I quickly set up the number of pages that will show different information for the loyalty rewards system. 

    Pages Hierarchy in Flutterflow

    First things first, the main page of the loyalty reward section, where the users can check their point balance, the available vouchers to be redeemed, as well as the section to view the claimed vouchers.
     
    Loyalty Rewards

    I also include a button to let the users check how the point system works in the loyalty rewards feature, which will show up a dialog box using the component and utilizing the parameters to make this possible.

    For example, RM 1 spent on a transaction equals 1 point, while the decimals don't count as a point.

    For the voucher grid carousel, I followed what I've learned from Mr Razif during the tutorial class and set up the voucher list as well as the inventory (purchased voucher). Using the grid list, I positioned the list on the screen to centre, and added tap actions on the voucher container that have reference parameters to the Firebase database on the details of the vouchers, so the users can check on each voucher's details on the grid.

    Firebase Database for different DataType


    Voucher Details Page
    In this page, this is where the users can view on more information about the voucher to check on any descriptions, usage guide and terms & conditions of the vouchers. 

    Voucher Details

    But ultimately, what's important is the redeem button positioned at the bottom of the screen, where it will check the voucher price from the Database. By using the conditional value, I made it so that the redeem button will be disabled upon the are insufficient points for the price of the vouchers. 

    Button disable conditional value

    The text color of the current points will change between green and red to show the claimability of the vouchers. When the user's point is less than the voucher price, it will change to red color and turn green if the point is more than the required voucher price.
    Text color conditional value

    If the users claim the vouchers, the redemption success visual will be shown to provide immediate feedback to the users that they have successfully claimed the vouchers. Then, the users will be directed to the voucher page, where they can directly use the voucher immediately by showing the QR code.

    Successful redemption

    Use the voucher with the QR code

    Users can also review the vouchers that they have claimed in the My Voucher section on the tab bar, in case they don't use the voucher now and save it for future use.

    Viewing claimed vouchers

    Functional Reward Points System

    Linking up the loyalty reward system, I added the ways for the users to earn points, that is, through making payments with the partnered merchants, where the points earned are tied to the payment amount.


    To make this work, I use the database to record the payment amount and save that amount, and transfer it from a double data type to an integer type.

    Payment Database
    Previously, I've tried using the page parameters to pass through the data from he payment page to the result page. Due to the transaction processing animation page I've added in between them, the dual pass through seems to break the Flutterflow, and didn't provide the intended results I've wanted, where the data references are missing from the variables.

    The update document function is called in to update the latest information the users provided in the payment page, so that the information projected on the result page is always up to date.

    Backend Call for Payment Database update


    Functional Wallet Balance

    As following Mr Razif's feedback, I also added a mechanism that the account balance will work, which the functions are tied to the top-up features as well as the payment feature.

    For this function, I've added the new data field just for the money balance (as well as the reward point)
    Datafield tied to the user

    So, in the top-up page, any amount entered by the users will be incremented and updated in the database. The same goes for the payment page, where the money balance data will be decremented by referencing the payment amount text field.

    Backend Call Update Document for money balance on Top Up page

    Backend Call Update Document for balance and points on Payment page


    Final Minor Touch Up

    SPayGlobal is essential a e-wallet app where the information are sensitive, such has the money balance that are shown on the home page, thus I make the visibility button functional so that the button will toggle on and off the amount text for the users to check and hide the money in their account.

    Conditional Builder for the visibility icon

    To further make this work, I utilize the conditional builder so I can make use of the state change to change the icon state between visible and hidden. To hide the amount text in an asterisk symbol, I set up the conditional value for the balance text, where it will reference the button toggle to determine what value to show.

    Conditional Value on the txtBalance on the homepage


    Submission

    Flutterflow web publish



    IMPORTANT!
    • Adjust screen dimensions to 440 x 956 px or larger (mobile phone size) for an optimal viewing experience.

    • You may need to use the inspect mode in Google to scale the screen size, as the responsive UI for tablet and desktop views is disabled, if Flutterflow's Canvaskit isn't working.

    Inspect mode to adjust screen dimensions


    Flutterflow Project File
    Editor access has been granted to Mr Razif, my lecturer. 



    Canva Presentation Slide



    App Walkthrough Video



    Or view the YouTube video here:

    YouTube Redirect

    My reflections

    Wrapping up the Application Design II module has been an eye-opener in transforming visual concepts into working, functional applications. Unlike the previous semester where the focus was on simulating app interfaces, this module pushed me to go beyond the visuals and make every feature work like a real product—especially when integrating with databases and building conditional interactions in Flutterflow.

    One of the recurring challenges was linking data correctly from the CMS to ensure that interactions like voucher redemptions worked smoothly. While not overly complex, it consistently tested how well I understood the relationship between frontend components and backend logic. Experimenting with conditional logic—such as toggling the visibility of the account balance—gave me hands-on experience in making the UI feel dynamic and responsive to user inputs.

    More importantly, I found myself shifting my mindset from simply designing screens to thinking more deeply about the overall user experience. I became more attentive to details and how users would actually interact with the app. Creating a system where the balance and reward points update correctly after transactions made me appreciate the importance of simulating real-world behavior as accurately as possible.

    Throughout the process, I also gained better problem-solving skills, especially when navigating bugs or limitations within Flutterflow. It wasn't always straightforward, but each obstacle helped me think more like a developer—adapting, rethinking, and improving.

    If I had more time, I’d definitely want to expand the interactivity across more pages, especially in areas like the profile section. Features like PIN and password changes, bank card integration, or even biometric verification are exciting areas I’d love to explore. I’m also curious about improving responsiveness across various screen sizes—something that would really polish the app’s usability.

    Overall, Application Design II gave me a much deeper appreciation for the full app-building process—beyond the UI into real functionality. It’s been a challenging yet rewarding step forward in my journey as a designer and aspiring developer.

    Comments

    Post a Comment

    Popular posts from this blog

    Information Design | Exercises

    Image
    Melvin Yung Khun Yew | 0357241 | Bachelor of Design (Hons) in Creative Media GCD 60504 | Information Design Week 1 — Week 2 Exercise 1: Quantifiable Information To give us a brief idea of how information can be quantified and categorised into separate sections, the first exercise we receive gives us students the chance to simulate quantifying raw data and visualize data for easier interpretation and analysis. JUMPLINKS These are the jump links to each part of this portfolio Lectures Instructions Exercise Work Process My reflections Lectures Week 1: Type of Infographics In the first week, I was introduced to the various types of infographics. The lecture made me realize there is so much infographic content, that I've always s...
    Read more

    Information Design | Project 1

    Image
    Melvin Yung Khun Yew | 0357241 | Bachelor of Design (Hons) in Creative Media GCD 60504 | Information Design Week 3 — Week 5 Project 1 : Animated Infographic Poster After learning about the information design by further applying the L.A.T.C.H principles into the second assignment, I started on developing an infographic that presents a series of different processes as visuals. This assignment allows us to tackle on existing infographic posters, which can be revamped and enhanced to provide a better comprehension of the content. GIF via Giphy ...
    Read more

    Application Design II Task 1

    Image
    Melvin Yung Khun Yew | 0357241 | Bachelor of Design (Hons) in Creative Media MMD 60204 | Application Design II Week 1 — Week 4 Task 1:  App Design 1 Self-Evaluation and Reflection In contradiction with a statement, design itself is not truly perfect. Thus, I launched another self-evaluation on my previous application design on SPayGlobal, an e-wallet app that provides monetary services in Sarawak state for the residents. In this first task, I explored the many design details I lacked previously and made adjustments to each of the mistakes to provide a more intuitive and user-centric design. App Redesign on Figma JUMPLINKS These are the jump links to each part of this portfolio ...
    Read more