APPLICATION DESIGN II: Weekly Learning WEEK 1-WEEK 14

APPLICATION DESIGN II: 

 W eekly Learning WEEK 1-WEEK 14

WEEK 1:

• Module Briefing & Introduction to Mobile App Experiences
• Overview of mobile usability and user needs 
• Setting up personal project space and design journal 
• Understanding the app design workflow

In this class, the teacher mainly introduced the module content, weekly tasks, and a brief introduction to the plan for this semester. He specifically talked about the requirements of Task 1 and told us where to submit the blogger link on MYTIMES.

The teacher asked us to open the Flutter Flow website link and taught us to register and log in. We can use this tool to create and export project files for subsequent modification and improvement.

Reflection:

Regarding the new semester, I think that I will have to conduct in-depth research on application design in the future. I will work hard to preview new knowledge, learn how to use application design tools, watch some teaching videos and articles, and hope to achieve better learning results this semester.

WEEK 2:

In the second week, the teacher mainly focused on information design:

• The importance and concept of information design: When creating a website or mobile app, information design is similar to information architecture. The key is to analyze conceptual elements, construct content reasonably, and present the most important information to users. It is necessary to clarify the target audience, including primary, secondary, and other potential audiences; understand users through research; and ensure that users can quickly find key information.
• 
  
• The teacher introduced the Gestalt principle of design principles, including the proximity principle (the closer the elements are, the more they belong to the same group, which helps to structure the content), the similarity principle (elements with similar design styles belong to the same group), the alignment principle (making elements look more regular, standardized, and belonging to a specific part), and the contrast principle (using size and color to highlight important parts).

The teacher sent a picture of flight information on WhatsApp for us to practice. We will take the flight information application as an example and ask us to analyze the information from the user's perspective, determine the target audience, arrange the information according to importance, redesign and organize the content display method, and not delete the information. needs of the target audience.

Flight Nuber QZ 7691 by Ko

Reflection:

This week's information design course has given me a lot of gains, but it has also made me aware of my own shortcomings. In terms of knowledge understanding, I understand the importance and concepts of information design, and I have also learned the Gestalt design principles, but I am still unable to apply these principles skillfully in practice. In practice, the exercises using flight information as an example are difficult. I am not accurate enough in grasping user needs, the communication efficiency of group collaboration is not high, and I am not proficient in the use of Canva tools.

After that, I will analyze more design cases to deeply understand the Gestalt principles, take the initiative to do more exercises to improve my practical ability, carefully learn the advanced functions of the Canva tool, and focus on improving communication skills and enhancing teamwork ability, striving to make greater progress in information design learning.

WEEK 3:

In this mobile application design class, the teacher explained several key points of mobile application design. The teacher mentioned that when designing, information should be integrated and presented according to different target audiences; just like boarding passes, different people will have different experiences when using them, which reflects the diversity of the same product facing different users. In terms of design layout, mobile applications are interrelated systems involving multiple tasks and multiple screens. avoid confusing users.

The teacher also introduced the common structure of mobile application design, such as the master-slave structure, which can be seen in many applications. For example, when searching for a restaurant, the list is the master, and the details after clicking on the restaurant are the slave. At the same time, form design and confirmation screen design are also very important. The confirmation screen can give users feedback on their operations to prevent misoperation. In addition, the teacher explained the relevant knowledge of the design process, compared the flowchart and the user task flow, emphasized that the project should have arrows to indicate the direction, and mentioned methods such as using model canvas to sort out ideas, conducting competitive product analysis, and brainstorming to improve ideas.

Then, we conducted group exercises and chose one of the two scenarios of borrowing books in the library and booking a discussion room for design. Our group chose the reservation discussion room, and we had a lively discussion and considered many aspects. be generated for easy confirmation and use, and email notifications could also be sent. During the process, we also discussed interface design details, such as button location, information display method, etc., and promoted the design task through continuous communication and experimentation.

This is our final result.

Log in，Author Ko

Reflection:

In this mobile application design course and group practice, I have gained a lot, but I also found that I have many shortcomings.

In terms of knowledge, understanding, and application, the design concepts explained by the teacher in the course, such as integrating information according to the target audience and ensuring the continuity and consistency of the design, have given me a more systematic understanding of mobile application design. However, when practicing designing the library discussion room reservation application in the actual group, I found that although I understood these theories, I found it difficult to apply them flexibly. some button styles with the overall interface, affecting the visual effect and user experience, which reflects that my ability to transform theory into practical operations needs to be improved.

During the team collaboration process, I actively participated in the discussion and proposed the idea of ​​generating a QR code for user convenience after adding a reservation successfully, which was recognized by the group. But I also realized my lack of communication skills.

The ability to solve problems also needs to be improved. When I encounter logical design problems such as time selection and number limit in the booking process, I cannot quickly come up with effective solutions and often rely on the ideas of other members of the group. This shows that I lack the ability to think and solve problems independently and lack innovative thinking and a proactive exploration spirit.

In response to these problems, in future learning and practice, I will strengthen the combination of theoretical knowledge and practical operations, conduct more design exercises, and deepen my understanding and application of design concepts through actual cases. At the same time, I will focus on improving communication skills, learn to express my ideas clearly and accurately, listen to others more patiently, respect the views of team members, and actively participate in team collaboration. In addition, I will also cultivate my ability to solve problems independently, actively think and consult materials when encountering difficult problems, try to find solutions from different angles, exercise innovative thinking, and strive to make greater progress in the field of mobile application design.

WEEK 4: (Public Holidays)

WEEK 5: 

There will be no classes this week, as most of you will be working late to get your assignments turned in. The teacher will upload the lecture and tutorial videos later this week.

WEEK 6: 

This week we are having online classes.

Task Objective: 

We need to prepare for Task 2. We need to plan the micro and macro animations in the application interaction design. Each interactive action must have feedback, such as button color change, page switching transition effect, etc.

Planning Method:

Display the interaction process in a way similar to a user flow chart, and mark the macro (such as the overall transition of the screen) and micro (such as the interaction of elements within the page) animations. The animation effect needs to be described in detail and combined with examples or reference cases made by software when necessary.

Principles of motion design

Attention guidance: 

Use animation to attract users' attention to key information, such as the icon bounce animation when downloading is complete.

Speed ​​and timing: 

UI animation duration is usually 150-500 milliseconds. Small animations (such as button hovering) take a shorter time, and large transitions can be slightly longer. It is necessary to balance speed and user experience to avoid animation interfering with operations.

Easing function: 

Avoid linear animation; use "ease in," "ease out," "ease in out," etc. to make the animation more natural and smooth, close to the movement rules of the real world.

The teacher recommends using Lottie Files (which can be used to create simple animations online), or you can use Adobe After Effects (powerful and suitable for complex animations), Figma, Sketch, etc. Pay attention to the file format (such as SVG vectors, which are convenient for layered animation).

WEEK 7: Public Holidays

WEEK 8:

Interface design

- Design three pages: login, registration, and dashboard. Text fields and buttons need to be added to the login page, and the content of the registration page is similar to that of the login page.

- Optimize the interface by adjusting the layout (such as column and row settings) and component properties (such as color, spacing, and padding). The "Extend" function can be used to make components fill the space along the main axis.

Function implementation

- The teacher taught us how to connect to the Firebase database and set up the project in the Firebase console

- Set up authentication, enable email and password authentication, and associate the buttons and text fields of the login and registration pages with the backend database and Firebase authentication.

Tool use

- The teacher mentioned the use of Flutter Flow for APP development. It supports visual design of interfaces, setting interactions and animations, and can explore its own simple animation effects (such as sliding effects from right to left). There are AI tools that can automatically make APPs, but the control function may require payment. It is also mentioned that you can try low-code (no-code) tools to quickly build applications.

Practical problems

-If you encounter problems such as abnormal interface display, incorrect password field settings, button functions that cannot be triggered normally, and problems with backend connection, you can solve them by checking component selection, property settings, code logic (or visual scripts) and network connections. For some problems, you can refer to similar teaching videos or ask ChatGPT (but pay attention to accuracy).

TASK 3:

The teacher changed the content of our task 3 homework. We need to submit it in week 11. Move the micro animation content and page of task 2 in figma to Lottie Files and Flutter Flow to do our task 3 content together. We don’t need to make it so perfect, because we need to make the best design perfect in the final project. So for task 3, we can build the page design and animation, and we don’t need to add colors or photos, but we need to see the animation and UI design.

WEEK 9:

This course mainly explains the process of setting up the Google Maps API and building related projects in application design. The specific contents are as follows:

1. Google Maps API registration and configuration

•  Enter the console: Log in to the Google Cloud Console and select the created project (such as "middle planner" or "case finder").

•  Enable API: Find and enable "Maps SDK for Android", "Maps SDK for iOS", and "Maps JavaScript API" in the API service.

• Create a key: Generate an API key, rename and set platform restrictions (such as Android), and copy the key to the Google Maps settings of Flutter Flow.

•  Cost description: Google provides free quotas, and the actual usage fee is very low, such as only about 0.15 cents per month.

2. Firebase database and storage settings

• Enable Firebase: Open the Firebase console, enable the Firestore database, and select "test mode" (free reading and writing within 30 days).

• Storage activation: Activate Firebase storage, and use the "Spark" free package by default (10GB free quota per month, and the excess is charged at 10 cents/GB), so you don't have to worry about the cost.

• Project upgrade: If prompted to upgrade to the "Blaze" package, just confirm it, and you don't have to pay for the free quota.

3. Add and manage Firestore data

• Create a collection: Create an "Interesting Places" collection in Firestore to store location information.

•  Add a document: Add a location document, including the name and longitude and latitude (which can be obtained by right-clicking on Google Maps).

•  Field settings: Set the field type, the name is a string, and the location is a longitude and latitude type.

4. Flutter Flow map configuration

• Associate data: Add a Google map component in Flutter Flow and associate the "Interesting Places" collection of Firestore.

• Tag settings: Set the tag to "multiple", bind a document list, and customize the tag icon (default red dot).

•  Interaction settings: Enable map interaction and zoom functions, and set the initial center position (you can manually enter longitude and latitude or use device positioning).

5. Page navigation and testing

• Add button: Add a "Go to Map" button to the dashboard page, and set it to navigate to the map page when clicked.

• Test preview: Preview the app through the "Play" function of Flutter Flow to ensure that the map markers are loaded correctly and click the button to jump.

6. Release and deployment

• Release preparation: Confirm that the Firebase configuration is correct and click "Play" to generate the latest version.

• Online release: You can change the app name in the settings and click "Publish" to publish it to the web page. Before publishing, you need to ensure that it is the latest version.

WEEK 10:

In this class, the teacher gave a comprehensive explanation of the development and parameter settings of the product review function. First, he emphasized the need to add a "write review" button at the bottom of the product description page. The initial plan is to place it below the pricing information for quick operation by users. After clicking the button, the navigation function must be used to jump to the review editing page. At the same time, the product ID parameter must be carried as a unique identifier. This parameter must be defined through the "document reference product" type and accurately correspond to the product document in the database to avoid data matching errors. In terms of back-end database design, when creating a new review collection, multiple core fields must be strictly defined, among which the ID is used to identify a single review, the product reference field is associated with the product document ID to ensure that the review is bound to the product, the user information field extracts the email address from the authentication variable of the logged-in user as the user name, the review content field supports rich text or plain text input, the rating is set to a numerical field of 1-5 stars for quantitative feedback, and the timestamp automatically records the submission time. In terms of front-end interaction design, the comment editing page can use the default area (such as Visa style editor) or custom space, reserve text input boxes and rating selection components, and automatically fill in the logged-in user's email address as the user name to simplify operations; in the parameter verification stage, when navigating to the comment page, it is necessary to confirm the validity of the product ID parameter to ensure that the comment data can be accurately associated with the corresponding product. In addition, potential problems such as advertising review need to be handled. Finally, the teacher emphasized that after completing the comment submission, it is necessary to verify whether it is successfully displayed in the topic. The structured information display tutorial will be further explained later. The whole process explains in detail the key details such as parameter transfer logic, user information acquisition methods, and database field association rules, covering the key points of the entire process from front-end interaction to back-end data storage.

WEEK 11:

The teacher mainly explained the implementation process of the shopping cart function in the e-commerce platform, covering the product ID reference, quantity and price field settings, as well as the steps of creating a shopping cart page, associating product data, setting filtering conditions and page layout design. At the same time, it also mentioned the problems and coping methods that may be encountered during operation, such as system errors and price rule settings. The following are the specific contents:

Shopping cart related fields and functions

• Product ID: As a reference to the actual product, it must be correctly set in the document.

• Quantity field: If this field exists, a specific value can be passed. If it does not exist, it is processed by default.

• Session ID: You can consider using user-related values, and you need to pay attention to its impact on the system.

• Price setting: When the Add to Cart button is clicked, an entry will be created based on the relevant document.

Operation and testing process

• Add product test: Add to the shopping cart from the product page, confirm whether the button function is normal, and check whether the entry is displayed correctly.

• Handle warning information: If you encounter warnings related to price rules, you need to check and adjust the rule settings, such as checking whether the price rules are set correctly.

• Navigation and page jump: Set navigation actions through the editor to jump from the product page to the shopping cart page.

Shopping cart page creation

• Basic page settings: Create a new page named "Crop Page", add navigation actions, and select the jump method.

• Data association and filtering:

◦ Associate the product database to obtain product descriptions, pictures, prices and other information.

◦ Filter shopping cart data by user ID and Session ID to ensure that only the current user's shopping items are displayed.

• Page layout design:

◦ Add a list view to the page to display the products in the shopping cart.

◦ Add containers to the list items to display details such as product name, price, and pictures, and adjust the layout and style, such as setting spacing and alignment.