Application Design 2: Weekly Learning WEEK 1-WEEK 14

APPLICATION DESIGN II:

 Weekly Learning WEEK 1-WEEK 14 

Start from 21.4.2025
21.4.2025 -21.7.2025 /Week 1- Week 14
LI XIN LI / 0379305
Application Design 2 / Bachelor of Interactive Spatial Design 

WEEK 1:

This is the first lesson of Applied Design II. In this class, the teacher mainly introduced the course modules, phased tasks, and the differences from Application Design 1.

The teacher focused on Task 1, which mainly included self-evaluation and personal reflection on the final project of Application Design 1.
This is the task of this semester：

Then the teacher led us to register "Flutterflow" like this：

Reflection:

After this class, I have a preliminary understanding of the course framework and design thinking, and also clarified the subsequent learning direction and ability improvement goals.

WEEK 2:

This class mainly learned the importance of information design.

1. Analyze content elements: Before designing a website or application, comprehensively analyze the content elements, reasonably sort and structure them according to their characteristics and logic, build a clear information architecture, and help users understand and operate efficiently.
2. Identify the target audience: Accurately distinguish the primary and secondary target audiences, customize the information display method according to different audience characteristics, needs and preferences, and improve the user experience.

Application of design principles

• Proximity principle: Arrange functionally related or logically related elements close to each other in space, so that users can quickly perceive the internal connection between elements and reduce cognitive costs.

• Similarity principle: For information of the same type or attribute, adopt a unified design style, such as color, shape, font, etc., so that users can intuitively classify and identify information.

• Alignment principle: Ensure that elements are neatly aligned in horizontal or vertical directions to create a simple and regular visual effect, enhance the sense of order and readability of the design.

• Contrast principle: With the help of differences in color, size, thickness, light and dark, highlight important information, weaken secondary content, guide users' visual focus, and facilitate information screening.

Then we did a practical exercise. The teacher released a flight information chart and asked us to rearrange it in groups based on what we learned. The actual time was two hours and then we shared it.

In order to optimize the design of boarding passes, we need to fully consider the different needs of passengers, airlines, and security personnel. 

For passengers, key information such as flight number, boarding gate, and boarding time should be prominently displayed for quick identification. 

Airlines should ensure the clarity of information transmission and brand image, while security personnel need to effectively identify passenger information to improve passage efficiency. 

Therefore, the design should display information in a hierarchical manner, use colors and icons for visual guidance, enhance the scanning function of QR codes and barcodes, and provide concise and clear boarding process instructions to enhance the overall passenger experience.

Flight Nuber QZ 7691，作者 Ko

Reflection:

This information design course has been highly rewarding. I've grasped the importance of analyzing content elements and identifying target audiences, which emphasizes the significance of user - centered design. The design principles, such as proximity and similarity, seem straightforward but can significantly enhance information transmission efficiency in practice.

n the case study of boarding pass redesign, I realized the necessity of presenting information hierarchically according to different audiences. In the future, I will practice more, study excellent cases extensively, and improve my ability in information design.

WEEK 3:

Through this application design, I learned how to design a user flow map.

• Basic design points: Communication design should have a clear structure to facilitate understanding by users in different regions, and a feedback mechanism should be set up; in interface design, the use of colors should consider its meaning and user perception, and the functions of each element must be clear to facilitate user interaction.

• Flowchart design: The decision nodes in the flowchart should be clearly defined, and the process should be simplified so that users can intuitively grasp the direction of the process.

• User-level considerations: Pay attention to the diversity of user groups, meet the needs and habits of users of different age groups, and avoid single design; in mobile application design, pay attention to the fluency and consistency between multiple screens, maintain the unity of interface elements, and enhance user experience.

• Key points of interaction design: Distinguish between user flow and task flow, and build a clear interaction path; give visual feedback in time after the user's operation to avoid confusion in operation and help users achieve their goals smoothly.

After learning the theoretical knowledge, we started to practice. Our group chose the online reservation process for the school discussion room. Our ideas were very clear. First, we determined that we needed to provide student ID, student email, reservation time, and discussion room conditions. Then we discussed adding steps such as the number of reservations and special circumstances to cancel the reservation and change the time to ensure completeness. In the final stage, we only made example diagrams for some important steps to make the operation clearer. 

This is our final result：

Log in，作者 Ko

Reflection:

In this mobile application design class, I systematically learned about communication structure design, interface element function planning, and user interaction feedback. In the group cooperation of appointment practice in the school discussion room, I applied theory to practice, from login and registration information design, appointment process optimization to feedback setting, and gradually improved the plan. However, the practical process also exposed my lack of control over functional details and the problem of inconsistent opinions in teamwork. In the future, I will strengthen case study, improve detail design ability, and enhance communication awareness in cooperation, so as to combine theory and practice more closely.

WEEK 4:

This week is a public holiday, so I reviewed the previous content at home.

WEEK 5:

This week, the teacher said that because we were working hard to catch up with our schoolwork, the class was cancelled and learning materials were sent to us. However, we had already learned the content of the learning materials, so this Monday was to review the previous content.

WEEK 6:

This week is an online course. We've come to Task 2. The main content is to add animation design to the modified application model. Subsequently, the teacher explained the animation design and we used LottieFiles to create animations.

• Importance: Standard animations bring the interface to life and enhance the user experience; when designing animations, attention should be paid to the easing effect to ensure smoothness and naturalness. 
• Relevance to Interaction Design Planning: Use arrow flowcharts to display screen navigation to reflect the user flow; macro animations involve a wide range of interactive elements, while micro animations focus on details such as touchpoint feedback.
• Necessity: Provide visual feedback for user operations to help users understand the operation results; appropriate animations enhance the product's attractiveness and interactivity, improving the overall user experience. 
• Principles: Control the animation duration between 150 - 500 milliseconds to balance smoothness and response speed; use ease - in and ease - out easing effects to avoid abrupt movements.

This is my in - class exercise：

Reflection:

Through the study of this class, I realized that in interactive design, the rational use of animations can guide users through visual feedback, enhance the user experience, and make the design more attractive and interactive. At the same time, during the practical operation, I made mistakes in adding keyframes. I will practice more. This is my in - class exercise.

WEEK 7:

This week is a public holiday, but I didn’t take a break. I tried to find animation prototyping tutorials on the website to practice and improve my proficiency.

WEEK 8:

Today I mainly learned how to use Flutterflow and the key points of designing software.

1. Advantages of Using Visualization Tools

•  Simplify the Development Process

Visualization tools reduce reliance on code, enabling developers to design and layout more intuitively and avoid tedious code adjustments.

• Improve Development Efficiency

By using flow - based design and component - based approaches, developers can quickly build application interfaces and functions, shortening development time.

2. Project Structure and Design

• Page Layout

When designing pages, consider the arrangement of content, including horizontal and vertical layouts, as well as the combination of columns and rows.

• Use of Components

Each page consists of multiple components. For example, a login page requires text input boxes, labels, buttons, etc. Ensure the uniformity and aesthetics of components during design.

3. User Authentication and Navigation

• Login and Registration Functions

The system needs to provide user login and registration functions, ensuring that users can verify their identities by entering an email and password.

• Navigation Between Pages

After users complete login or registration, smooth navigation between pages needs to be achieved to enhance the user experience.

This is the in-class exercise for this class：

Reflection:

Through this course, I learned the basic operation of flutterflow and mastered the key points of software development. I am not very proficient in using flutterflow yet, but I will work hard to practice.

WEEK 9:

Today we learned how to create a map page with flutterflow.

1. Project Selection and Setup

Select the project created last week

• Users need to select the project created last week, such as 'Gift Finder', and perform login setup.

Register and set up a billing account

• Users need to register and set up a billing account. Google provides a free usage quota, and there will be no charges initially.

2. Create API

Enable APIs and Services

• Users need to enable the Google Maps API in APIs and Services and turn on the required APIs one by one.

Generate API Key

• Users need to create an API key, and perform naming and restriction settings to ensure it is only used for specific platforms.

3. Set Up Firebase Database

Create a Firestore Database

• Users need to create a Firestore database in Firebase, and set up collections and documents to store relevant location information.

Add Data to the Database

• Users need to add location information of interest to the database, including names and coordinates.

4. Integrate Google Maps

Display Maps in the Application

• Users need to add the Google Map component to the application and perform data queries to display markers.

Set Up Map Markers

• Users need to set up map markers based on the data in Firestore to display locations of interest.

WEEK 10:

This week the teacher introduced how to create and manage a product database, including the creation of collections, the entry of product information, the display of front-end pages, and the implementation of user comment functions.

1. Create a database and collection

Set up a product collection

• You need to create a collection called Products in the database and add fields such as name, description, image, price, etc.

Delete old products

• Before creating a new collection, make sure to delete the old product information so that you can start from scratch.

2. Product information entry

Use the generation tool

• Use the generation tool to create product images, ensuring that the image format is consistent for easy display.

Upload media assets

• Before uploading product information, upload product images to media assets and copy the image link.

3. Front-end display and page navigation

Create a product list page

• Set up a product list page and use the list view component to dynamically display product information in the database.

Implement product details page

• Create a product details page and set page parameters to display the specific product information clicked by the user.

4. User comment function

Create a comment collection

• Create a comment collection and set fields to store the commenter's username, comment content, and rating.

Implement comment submission

• Add a comment button to the product details page to allow users to submit comments and save the comment information to the database.

WEEK 11:

1. Product Addition Process

•  Product ID and Quantity
• When adding a product, a Product ID is required as a reference, and the quantity field should be filled in. If there’s no quantity, it can be left blank.
• Use of Session ID
• The Session ID is used to track the status of the user’s shopping cart and can be associated via user information.

2. Shopping Cart Page Design

• Display of Shopping Cart List
• The shopping cart page needs to show all products added by the user, including the Product ID and related information, ensuring users can view a detailed product list.
• Dynamic Generation of Product Information
•  Information needs to be retrieved from the product database, and product details in the shopping cart should be generated dynamically for users to view.

3. User Interaction and Feedback

• Button Function Testing

• When a user clicks the “Add” button, the system should respond correctly and add the corresponding product entry to the shopping cart.

• Error Handling and Alerts
• The system needs to handle errors and provide appropriate feedback to users, such as warnings about price rules.

The article mainly discusses the design processes for product addition and shopping cart pages. It emphasizes the use of Product IDs, quantities, Session IDs, and the feedback mechanisms for user interaction.

WEEK 12:

Assignment 2 was submitted this week, and the teacher changed it to an online consultation class to give us enough time to complete the assignment.

WEEK 13 :

This week classes are cancelled due to the teacher being ill.

WEEK 14 :

The teacher gave me one-on-one feedback in this class. The teacher suggested that I could add more animations to enhance the user experience. And I could add failure pages to the appropriate pages to make it look more like a real application.