Application Design II // Task 4 : Final Project & E-Portfolio

 14/7/2025 - 28/7/2025 / Week 12 - Week 14

Angel Tan Xin Kei / 0356117

Application Design II  / Bachelor of Design (Hons) in Creative Media 

Task 4  / Final Project & E-Portfolio

⋆ ˚｡⋆୨୧˚ Index ˚୨୧⋆｡˚ ⋆
  • Instruction
  • Task 4:  Final Project & E-Portfolio
  • Feedback
  • Reflection
⋆ ˚｡⋆୨୧˚ Instruction˚୨୧⋆｡˚ ⋆


Timeframe: Week 12 – Week 14

Description:

A) Final Project – Completed App – 30 %

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

B) E-Portfolio - 10 %

Students describe and reflect on their social competencies within the design studio context, supported by evidence. Reflect on how to empathize with others within group settings, interact positively within a team and foster stable and harmonious relationships for productive teamwork. Reflective writing is part of the TGCP.

Requirements:
  1. Presentation Slide to be submitted as pdf format.
  2. Online posts in your E-portfolio as your reflective studies
⋆ ˚｡⋆୨୧˚ Task 4 :  Final Project & E-Portfolio˚୨୧⋆｡˚ ⋆

Figma Link:


A. Modification and Overall Enhancement of FlutterFlow

1. Splash Screen
Due to an issue with the previous logo animation, I’ve updated the loading sequence. Now, the loading circles animate differently using Lottie JSON files, and once that animation is complete, the logo pops out and bounces using a FlutterFlow animation. 

Fig 1.1 Redesigned Splash Screen in LottieFlies

Fig 1.2 Lottie.Json Files and Logo PNG animation setting in FlutterFlow

Fig 1.3 Refined Splash Screen

2. Onboarding Page 
Previously, I used three separate onboarding screens, but I felt the experience wasn’t seamless. I later discovered a much simpler approach using the PageView feature, which allows for a smoother transition between screens along with an automatic page indicator at the bottom.

Fig 2.1 PageView Features Implemented
Fig 2.2 Refined Onboarding Screen Screen


3. Get Started - Log In / Sign Up
I’ve added slide-left and slide-right animations to the Get Started, Login, and Sign Up pages to enable smooth transitions between them. I also added a button to navigate back from the Sign Up page to the Login page, as I had previously forgotten to include it.

Fig 3.1 Navigate back from sign up to log in page 

Fig 3.2 Navigate back from log up to sign in page 
Fig 3.3 Overview of Sign Up / Log In Page 

4. Home Page 
I have made some amendments to the homepage so that it seems more like a membership loyalty app with more infomation:

  • New Page Added: A "My Loyalty" page has been integrated into the app to help users easily track and understand their current tier status. 
Fig4.1 My Loyalty Button
  • Tier Reference: The page provides a clear and accessible breakdown of the loyalty tiers, making it easier for users to understand their progress and benefits. Carousel Feature: A carousel component has been implemented for a smoother and more interactive experience, allowing users to swipe through tier details or loyalty benefits efficiently.


Fig4.2 My Loyalty Page

  • Carousel Feature: A carousel component has been implemented for a smoother and more interactive experience, allowing users to swipe through tier details or loyalty benefits efficiently.
Fig 4.3 Carousel Features in for Tier Information

Fig 4.4 Video of Carousel Autoplay

5. Redeem Voucher Page 
  • Shortened Redemption Timer: The countdown timer for redeeming a voucher has been reduced to 15 seconds, encouraging faster action and preventing delays or misuse.If false to redeem within the given time then will show invalid snackbar and reverse to previous page.
Fig 5.1 Action set for Redemption TImer

    Fig 5.2 Overview of False to Redeem Vouchers
    • Confetti Animation after completing redeem voucher: A celebratory confetti animation now plays when a user successfully redeems a voucher, enhancing the sense of reward and satisfaction.

    Fig 5.3 Overview of Completion of Voucher Redemption

    C. Final Submission

    Video Presentation: https://youtu.be/kZY1LpyCoEo


    ⋆ ˚｡⋆୨୧˚ Feedback˚୨୧⋆｡˚ ⋆

    General Feedback: 

    As long as the MVP is completed, that’s fine especially since the app is new to everyone. What’s important is that it’s functional and UI presentable.

    Week 14 We-Fie
    ⋆ ˚｡⋆୨୧˚ Reflection˚୨୧⋆｡˚ ⋆

    Completing this project has been a huge relief and a rewarding milestone. Fortunately, the FLutterFlow App is what I found to be somewhat like Figma, but more advanced and code-based. This made the development process easier in some ways, yet still challenging since everything was new to me.

    I had many creative ideas for layouts and animations, but bringing them to life was difficult especially with limited time to experiment and test out features. AI tools and online resources, especially ChatGPT, were extremely helpful and sped up my progress. One of the biggest challenges was working with LottieFiles animations. It was my first time learning how to use Lottie JSON files, but since they’re quite similar to Adobe After Effects, I was able to understand them with some guidance.

    One major takeaway from this module is the importance of clear communication and alignment between frontend and backend development—especially when it comes to things like column containers. It’s important to check whether a design is not only visually appealing but also feasible to implement.Overall, this experience has helped me build a solid foundation in app development and given me valuable insights into real-world workflows. I now feel more prepared to keep learning and eventually contribute with confidence in the industry.

    ⋆ ˚｡⋆୨୧˚ Quick Links ˚୨୧⋆｡˚ ⋆


     

    Comments

    Post a Comment

    Popular posts from this blog

    Information Design / Exercises

    Image
    3/2/2025 - 28/3/2025 / Week 1 - Week 7 Angel Tan Xin Kei / 0356117   Information Design  / Bachelor of Design (Hons) in Creative Media  Information Design / Exercises ⋆ ˚｡⋆୨୧˚  Index  ˚୨୧⋆｡˚ ⋆ Instruction Lectures Exercises 1: Quantifiable Information   Exercises 2: L.A.T.C.H Infographic Poster Feedback   Reflection ⋆ ˚｡⋆୨୧˚  Instruction  ˚୨୧⋆｡˚ ⋆ Exercise 1: Quantifiable Inform...
    Read more

    Game Development // Task 2: Art Asset Development

    Image
    21/4/2025 - 8/6/2025 / Week 1 - Week 7 Angel Tan Xin Kei / 0356117 Games Development  / Bachelor of Design (Hons) in Creative Media  ⋆ ˚｡⋆୨୧˚  Index  ˚୨୧⋆｡˚ ⋆ Instruction Task 2: Art Asset Development Siang Huey Yee Angel Tan Xin Kei Phoon Yuk Guan Feedback Reflection ⋆ ˚｡⋆୨୧˚  Instruction ˚୨୧⋆｡˚ ⋆ Module Information Booklet Task 2: Art Asset Development  Timeframe: Week 05 – Week 07 Description:   Students will be given the task to produce the art asset for their games. This includes characters, environment, items, props, obstacles, power ups and HUD design. ...
    Read more

    Information Design / Project 1: Animated Infographic Poster

    Image
    17/2/2025 - 9/2/2025 / Week 3 - Week 5 Angel Tan Xin Kei / 0356117   Information Design  / Bachelor of Design (Hons) in Creative Media  Information Design / Project 1: Animated Infographic Poster ⋆ ˚｡⋆୨୧˚  Index  ˚୨୧⋆｡˚ ⋆ Instruction Lectures Project 1: Animated Infographic Poster Part 1: Infographic Poster Part 2: Minimal Animated Infographic Feedback   Reflection ⋆ ˚｡⋆୨୧˚  Instruction  ˚୨୧⋆｡˚ ⋆ DESCRIPTION:   After time exploring media and learning about information design, you will now develop an infographic that presents a series of different processes as visuals rather than text.   REQUIREMENT:  Your main intention is to analyse the “delivery mechanism’s” that affect the outcomes of your infographics. Though content is important, however the aim of this presentation is too look at what makes an infographic presentation work or does not work. This includes content but only as one of the many components of an infographi...
    Read more