Application Design II

Week 1/ Introduction to Application Design class

Week 2/ Design an air ticket

Week 3/ Design an app flow

Week 4/ Public holiday

Week 5/ Class cancled

Week 6/ Online class

Week 7/ Public holiday

Week 8/ Start learning FlutterFlow

Week 9/ Create the interface of the Google Maps app

Week 10/ Combining ChatGPT with FlutterFlow

Week 11/ Further study FlutterFlow

Week 12/ Start working on the final project

Week 13/ Complete the final project

Week 14/ Teacher provides guidance on the final project

WEEK1:

In today's class, Mr. Razif began by introducing the course syllabus and the four main assignments for this semester, along with the key objectives of the subject. His explanation left me deeply motivated and full of anticipation for the learning journey ahead. What surprised me next was Mr. Razif's thoughtful gesture—he took a photo of each student paired with their name to remember us better. This heartfelt act touched me deeply, and the classroom was filled with a joyful atmosphere. I am truly excited for the upcoming lessons and eager to explore more in the App Design 2 course.

WEEK2:

We optimized Air Asia’s boarding pass design using information hierarchy principles. The original design (black-white)had three flaws:

1. Data redundancy: Key info (boarding time 09:10/flight QZ7691) repeated 4 times

2.Poor visual hierarchy: Boarding steps mixed with legal terms ("IMPORTANT NOTICE")

3. Weak urgency signaling: Gate closure time (09:30) in small font

Validation of Key Improvements:

Passenger Needs:

Original: Gate shown as "-" → Added dynamic QR refresh zone

Original: Verbose baggage rules → Simplified to icons + metrics

Airline Needs:

Original: Weak branding → Enlarged red AirAsia Logo + "Priority" tag

Security Needs:

Original: Name misspelled (JOHANSYAN) → Added passport photo verification slot

WEEK3:

This lesson revolutionized my understanding of user flow design. When the professor dissected the UI layouts of mainstream apps, I realized design consistency isn't just aesthetic—it's the backbone of intuitive operation. Our group's discussion room booking system initially confused testers because inconsistent button colors hid the "Confirm" action.

Key Implementation Insights:

1. The Art of Simplification

"Every decision node is a dropout risk," warned the professor. Our original 5-step cancellation flow caused 40% user attrition at the refund confirmation page. Streamlining to 3 core steps with red floating action buttons taught me the power of minimalism in interaction design.

2. Cross-Screen Cohesion

Maintaining mint green as the primary color across all screens (from filters to success pages) proved crucial. When testers remarked, "The green progress bar gives me control," I finally grasped how color functions as a silent navigator.

3. Instant Feedback Matters

Our first prototype lacked response cues, causing users to tap the booking button repeatedly. Adding micro-interactions—button depression on click, green checkmark on success—boosted completion rates by 70%. This validated the professor's axiom: "Visual feedback must outpace cognitive delay."

As the interface designer, I clashed with our logic specialist over adding an "add participants" feature. He advocated for a complex branch; I prioritized flow purity. We compromised with a collapsible "Invite Members" menu on the confirmation page—a lesson in balancing user needs and design integrity.

WEEK4:

This week is a public holiday.

WEEK5:

The class was cancled

WEEK6:

This week's online lesson transformed my understanding of animation design. When the professor showcased award-winning UI cases, I realized micro-animations' power—a bouncing music icon in the progress bar made waiting feel 40% shorter.

WEEK7:

This week is a Online class

WEEK8:

Today's FlutterFlow crash course revealed the power of visual development. Watching the professor build a login page in 10 minutes—a half-day coding task—was mind-blowing. But my own attempt exposed critical gaps:

1. The Cost of Inconsistent Components

Copied login buttons to signup pages but forgot corner-radius sync. Users complained: "Square vs round buttons feel like a knockoff." The fix? Style Sheets for batch edits—more intuitive than code.

2. Navigation Flow Pitfalls

Skipped loading states for post-registration jumps. Real-device tests showed 3-second blank screens triggering user panic. Adding skeleton screen animations improved perceived speed by 200%.

WEEK9:

Today's FlutterFlow mapping lesson taught me that "configuration trumps coding". Watching the professor integrate Google Maps API, I thought pasting an API key would suffice—but fell into trap:

Gradient buttons from Figma designs broke on Android. All-nighter debugging showed CSS gradients needed conversion to Hex+opacity combos. My 3AM SOS email to the professor is still in my sent box.

WEEK10:

This week's class focused on building core pages and functionalities for an e-commerce application using Flutter Flow integrated with AI tools.

1. AI Product Generation & UI Construction:

Used ChatGPT to generate images of multiple shoe products.
Learned to build the application's homepage structure using fundamental Flutter widgets (Container, Row, Column).
Implemented a responsive grid layout to display product images, ensuring a good visual experience across different devices, and applied basic styling like background colors and margins.
Added click events to product images to navigate to the product detail page. The teacher explained Flutter's routing system in detail, demonstrating how to pass the product ID as a parameter for the detail page to display corresponding product information.

2. State Management (Provider):

Learned to use Flutter's state management tools (e.g., Provider) to manage application state.
Practiced updating the UI based on state changes (e.g., whether a user added a product to the shopping cart), such as displaying an "Added" badge on the product image.

3. Database Creation & Management:

Created a Products collection in the database, defining fields: name, description, image, price, etc.
Emphasized deleting old product information before creating a new collection to start fresh.
Used generation tools to create uniformly formatted product images, uploaded them to the media assets library, and copied the image links for product data entry.

4. Frontend Display & Navigation:

Created a product list page, using the ListView component to dynamically bind and display product information from the database.
Created a product detail page designed to receive parameters and display detailed information for the specific product clicked by the user.

5. User Comment Function Implementation:

Created a Comments collection, setting fields to store the commenter's username, comment content, rating, and the associated product ID.
Added a comment button on the product detail page, enabling users to submit comments, and saving the comment information to the database.

This lesson systematically covered the entire development workflow: leveraging AI for content generation, frontend UI design and responsive layout, state management, routing navigation and parameter passing, backend database setup (collection creation, data entry & management), and the implementation of a user comment feature.

WEEK11:

This phase focused on implementing a core "Add to Cart" functionality system. Key learnings include:

1. Product Addition Process

Product ID & Quantity: Adding a product requires a Product ID as a unique reference. The Quantity field must be filled in (can be left blank if zero/default).
Session ID Usage: A Session ID is utilized to track the user's shopping cart state. This ID can be associated with user information later, enabling session-based cart persistence without requiring login.

2. Shopping Cart Page Design

Cart List Display: The cart page must display all products added by the user, including the Product ID and related information(e.g., name, image, price).
Dynamic Data Generation:Product details (name, price, image) are dynamically retrieved and generated from the product database (e.g., Firestore), ensuring real-time accuracy.

3. User Interaction & Feedback

Button Functionality: When a user clicks the "Add" button, the system must respond correctly and add the corresponding product entry to the cart.
Error Handling: The system requires robust error handling, providing users with clear alert messages for issues such as violations of pricing rules.

4. Technical Application & Core Achievements

Used FlutterFlow for front-end interface design and logic construction.
Integrated the Firestore database to manage shopping cart data, simulating real e-commerce scenarios.

Simplified the user flow through a Session mechanism, balancing functional integrity and user experience (no forced login required).

5. Future Expansion Directions

The current system serves as a foundational module. Future development could implement a complete checkout process (e.g., payment integration, address collection, order generation).
To deepen the project, contact the instructor for guidance and support on implementing subsequent features (e.g., user login integration, inventory management, order history).

Conclusion: This session provided hands-on experience in the full development cycle of a shopping cart feature, covering product addition logic, dynamic data binding, state management, user interaction feedback, and database integration, resulting in a scalable e-commerce foundation.

WEEK12:

The teacher didn't schedule any offline classes this week in order to help us focus on the final project.

WEEK13:

Continue to complete our final project

WEEK14:

This session focused on the instructor's review of final projects, with key improvement suggestions:

1. Feature Enhancement: Strengthen cart price rule validation (e.g., discount stacking, stock checks) and add an order history page for user tracking.

2. Interaction Refinement: Improve UI responsiveness (e.g., add loading animations during item addition) and clarify error prompts (e.g., explicitly label "Out of Stock" instead of generic alerts).

Under the teacher's careful guidance I completed the enhancement of my final project and it became more beautiful and practical.

LiYuhan's blogs