Application Design || Compilation

 

Application Design II | Final Compilation

23/04/2026 - 28/07/26 | Week 01 - Week 15

Jesslyn Octavia Tjong / 0374562 / Bachelor of Design (Honours) in Creative Media

OVERVIEW

JOOX Revamped expands the music-streaming experience by allowing fans to browse artist merchandise and manage purchases within the app.

The final application was developed in FlutterFlow using Firebase Authentication, Firestore, CRUD functions, and interactive transitions.

Task 1

The project began with an evaluation of my previous JOOX redesign. I reviewed the homepage, search, FanHub, VIP, account, playlist, and artist pages to identify issues with repetition, spacing, contrast, and visual hierarchy.

This process helped refine the overall design and led to the merchandise feature becoming the main focus of the application. 

Task 2

The application was narrowed down into one complete shopping flow:

Sign Up / Login → Home → Merch → Product Detail → Add to Cart → Shopping Cart

Firebase Authentication handles user signup and login, while Firestore stores the merchandise and cart data.

The application includes:

1. Create

Add a product to the cart.

2. Read

Display merchandise and cart items.

3. Update

Increase or decrease the cart quantity.

4. Delete

Remove an item from the cart. 

Task 3

Micro and macro interactions were added to make the application clearer and more responsive.

Micro Interactions

• Featured Items auto carousel
• Merch loading shimmer
• Add-to-cart confirmation overlay
• Cart quantity feedback
• Delete-item feedback

Macro Interactions

• Login page to Home page
• Merch page to Product Detail
• Delete confirmation bottom sheet
• Checkout confirmation

These interactions provide feedback and help users understand each stage of the shopping journey. 

FINAL APPLICATION

The final application allows users to:

• Create an account and log in
• Browse merchandise from Firestore
• View product details
• Add products to their cart
• Update quantities
• Delete cart items
• Receive feedback through animations and transitions
• 
  

Final Presentation 

Appplication Design II 

Video Walkthrough

REFLECTION

Developing the final application required more time and energy than creating the visual design alone.

FlutterFlow required me to understand how the interface, embedded logic, Firebase data, queries, and user actions worked together. Even simple features such as adding a product or changing its quantity required the correct fields, references, and action flows.

Much of the process involved testing, identifying errors, understanding the data, and improving the application step by step. Overall, the project shows the effort involved in turning a static design into a functional application and helped me become more confident with FlutterFlow, Firebase, CRUD operations, and interaction design.