Application Design II Task 3

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

MMD 60204 | Application Design II
Week 8 — Week 11


Task 3:  Interactive Component Design & Development

After a series of design planning on my SPayGlobal app, now it's time for me to start making the minimum viable product (MVP) of my e-wallet app. This task has really challenged me to use the whole new app I've never tried to build a real interactive and responsive application apart from the visualization and design concept in Figma during the second task.


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 build upon the knowledge gained in Task 2 to create micro-interactions and animated micro-interactions for their app. This will greatly elevate the user experience of the app. The aim of this task is to get the students to explore and make creative decisions on the type of interactions they would want to integrate into their app."

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



    Work Process

    Pages Planning

    According to the features in my MVP version of SPayGlobal app, I first start off to creating pages dedicated to each screens, for example: the login and signup page, homepage, Pay with QR code, Scan & Pay, Receive payment, Top up page, transaction history as well as the profile page.

    Total pages created

    Widget Trees

    To build the content layout in my app, I quickly analyze what widgets will be needed, such as whether to use the column or row according to the element alignment in my design. In this task, I got to explore the different widgets in Flutterflow that aid me in reaching the goals, such as using the page view widgets, tab bar widgets, grid view widgets, and more to enable my design work in Flutterflow.

    Homepage building with wrap, column, and row widgets to align the elements

    I also explored the free templates from the Flutterflow community to search for the specific features like how to set up a dialog box (pop-out panels) and I found the ways to use the components and set page parameters to them in order to link the button to show components like confirmation page, Payment authentication with PIN, filter page, email statement etc.

    Components as dialog boxes

    To allow the single selection on multiple options, like the payment card selection during top up, as well as the filter page on transaction history, I've taken reference to use the conditional builder to toggle the visual icon button between active and inactive.


    Payment Card selection


    History filter selection


    This is where I've also used the local page state variables to control the icon feedback change.

    Local page state variables


    Firestore data manager

    As the firebase only registers the email address and the password upon creating a new account during the sign-up page, I went on to set up a data schema for the app to record the user name, mobile number, as well as the PIN number during registration.

    User Information Data Schema

    This way, unique data will be recorded according to individual accounts, and this information will be retrieved and shown on various pages like the homepage, profiles, and the payment page (PIN)

    User name on the homepage

    Account information on the profile page



    Limitations

    Due to some limitations on Flutterflow's end and my skills, there are some aspects in the Flutterflow design that don't fit my expectations. The aspects are as mentioned below:

    Complete screen responsion
    The current pages across the MVP will not be responsive enough across different screen dimensions. 

    Thus, please use the canvas dimensions of width 440px and height 956px for a more optimal viewing experience.

    Tab bar animation and design
    Some of the UI designs don't adhere to the original designs, such as the animation aspects on click on my tab bar.

    Difference between intended design and workable design

    Pie chart design
    Another UI/graphic that couldn't be added as the original design is the pie chart on the transaction expenses page, where the chart widget provided by Flutterflow isn't flexible enough to adjust the small details.

    Intended design

    Last design resort (using the chart widget)

    QR scanner
    Finally, as in Flutterflow, there is no widget for a QR code scanner to be added to my Scan & Pay features. Even if I try using the custom widget code using the Dart (searching online to use a simple QR scanner), the results it provides me are not up to my liking.



    However, I'm still looking for a solution to this issue with the QR scanner. For now, I will use the tap function on the screen in the Scan & Pay page to mimic the user's action of scanning the QR code.

    Further research on the official Flutterflow website using the Scan QR code action, but I need to find out how to enable QR code scanning on page load. Maybe just to mimic a successful QR code scanning, the output variable name needs to be used, and conditions are required so that the value in the QR code will be recorded and compared to the condition to enable navigation to the payment page. 

    Official Flutterflow guide




    Submission

    Flutterflow web publish



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

    • You may need to use the inspect mode in Google to scale the screen size, as I disable the responsive UI for tablet and desktop views, 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. 



    App Walkthrough Video


    Or view the YouTube video here:

    YouTube Redirect


    My reflections

    Working on Task 3 gave me mixed feelings throughout the process. There were moments of joy whenever something worked exactly as I intended in FlutterFlow, and seeing the layouts come together or the logic run correctly was genuinely satisfying. However, there were also times of frustration, especially with how indirect some functions in FlutterFlow are. Certain components that looked simple in design took me far longer to build than expected.

    One of the biggest challenges was not being able to fully follow my intended design. The QR scanner functionality and the tab bar design were particularly disappointing because the results didn’t meet my expectations despite multiple attempts. It felt like a real bummer, but I’m still determined to keep looking for workarounds that bring the final app closer to my original concept.

    Overall, the experience had both highs and lows. Some parts, like aligning icons and text using widgets such as wrap, column, and row, felt easier because of my prior experience with HTML. But there were also steep learning curves in other areas that pushed me to keep adapting. Despite the setbacks, I’m glad to see the MVP shaping up and I’m motivated to keep refining it.



    Comments

    Popular posts from this blog

    Information Design | Exercises

    Information Design | Project 1

    Application Design II Task 1