Application Design II: Exercises

| 24.04.2025 - 24.07.2025 (WEEK 1-WEEK 14)

| Tang Chin Ting [ 0366473 ]

| Application Design II / Bachelor of Design in Creative Media
| Exercises

---

INSTRUCTIONS

---

SUBMISSION

Exercises

Week 01:

This week, Mr. Razif gave us a briefing on the module, covering the task requirements and assessment guidelines in detail. After the session, he instructed us to begin Task 01, which involves exporting the application interface we developed in the previous module, Application Design I. He also introduced a design-focused version of ChatGPT, which we can use to seek feedback and suggestions for improvement.

After consulting the AI, I gained a clearer direction on how to enhance my interface design for Task 01. Based on the feedback provided, I will analyze my current design and refine it to improve navigation and overall user experience.

We don't have any lectures and exercise for this week.

Figure 1.1: Asking Feedback from AI

Week 02:

In the second week, our class fell on a public holiday, so the lectures and exercises for that week have been rescheduled to the third week.

Week 03:

In the third week, we were tasked with completing the activity from the previous week, which was to redesign the AirAsia boarding pass. Mr. Razif provided us with an example for reference. 

Figure 1.2: Boarding Pass Example from Lecturer

For the redesign, we were instructed to highlight only the essential information, such as the passenger's name, departure time, gate number, and flight number, while excluding any unnecessary details. We decided to do it in Figma.

This is our initial design. We organized the information to enhance readability and used a red color scheme to align with the AirAsia brand identity. Additionally, we incorporated airplane icons to make the design more visually engaging.

Figure 1.3: Progress While Redesigning Boarding Pass

However, we felt that the design was too simple, so to make it more visually engaging, we experimented with adding background illustrations and a cover design.

Figure 1.4: Progress While Redesigning Boarding Pass

After the presentation, we received feedback from Mr. Razif. He explained that the purpose of redesigning the boarding pass is not just to improve its visual appeal, but also to clearly communicate the most important information to the user. The layout should guide the passenger’s attention to key details, such as the gate number and flight number, which we had overlooked in our initial design. As a result, we need to refine our design to better emphasize this critical information.

After making the necessary refinements, this is our final outcome. We highlighted the key details and simplified the remaining information to ensure clarity and easy readability.

Figure 1.5: Boarding Pass Final Outcome

Figure 1.6: Boarding Pass Final Outcome

Week 04:

This week, we learned something new: the Wireflow Chart. It was a fresh concept for us, as we had only covered user flowcharts and wireframes in the previous module, Application Design I. However, after Mr. Razif’s lecture, I now have a clear understanding of how it works. Below is an example of a wireflow chart.

Figure 1.7: Wireflow Chart Example

It is quite similar to a user flowchart, but with more detail. We need to expand the layout for each app page and indicate which buttons or interactive elements are included. We also need to write a short description for each page to ensure the flow is clear and easy to follow.

After discussing it with my group member, we decided to create a workflow chart for the flight booking process, using Starlux, a Taiwan-based international airline, as our chosen platform.

Figure 1.8: Progress of Designing Wireflow Chart

Figure 1.9: Progress of Designing Wireflow Chart

Figure 1.10: Progress of Designing Wireflow Chart

Figure 1.11: Progress of Designing Wireflow Chart

Figure 1.12: Wireflow Chart Final Outcome in Figma

This is our final outcome, which we refined based on the feedback from Mr. Razif. In our first version, he pointed out some confusing elements, such as using two "Yes" icons at a decision point, which we corrected in this revision.

After viewing my classmates’ presentations, I came across many interesting and well-structured wireflow charts, which helped deepen my understanding of this stage in user research. Recognizing the importance of wireflow charts enables UX designers to plan more effectively and create applications that are both interactive and user-friendly.

Week 05:

This week, we are required to create a logo animation using Lottie File, as it offers a relatively simple method for animating logos in Task 02. While using the platform, I found it user-friendly—the tools are easy to understand, and the layout is more straightforward compared to Adobe After Effects.

To start this activity, we first need to download an SVG file for the logo we want to animate. I chose to animate the Google logo. After that, import the file into Flutter Flow and start animating for each layer.

Here is the animation timeline for each elements:

Figure 1.13 Animation Timeline in Lottie File

Figure 1.14 Animation Timeline in Lottie File (1)

Figure 1.15 Animation Timeline in Lottie File (2)

Figure 1.16 Animation Timeline in Lottie File (3)

Since we export the animation in Lottie File, the animation will be very blurry. I tried to screen record the outcome, which should be clearer.

Final Outcome

Figure 1.17 Final Outcome of Logo Animation

Week 06

This week, we need to start exploring FlutterFlow, as it will be essential for Task 03, where we’ll use it to develop our application and implement all its features.

When I first used this platform to design the interface, I found it a bit difficult to navigate. We didn’t fully understand how it worked at the beginning. For example, to create an input field, we had to first create a column, then insert the input field, and finally adjust the padding and margin. The process is quite different from using Figma, which feels more straightforward.

Figure 1.18 Login Page in Flutter Flow

Figure 1.19 Dashboard Page in Flutter Flow

Figure 1.20 Sign Up Page in Flutter Flow

We began by creating three main pages for this activity: the login page, sign-up page, and dashboard page. We also learned how to create input fields that allow users to enter their information to sign up or log in.

Figure 1.21 Adding Interaction in Flutter Flow

Final Outcome

(I don't know why although I've change the toggle mode to light mode but it still in dark mode)

Figure 1.22 Final Outcome of Application Design in Flutter Flow

Week 07

This week, we worked on creating an interactive map in FlutterFlow. We started by setting up a Firebase collection named “myplaces2”, where we stored all the relevant location data. Each document in the collection includes the real coordinates from Google Maps, along with other details about each place. By organizing the data this way, we can easily retrieve and display precise locations on the map within the app. This step was important to ensure that the map component in FlutterFlow can dynamically load and show accurate markers for each location, making the user experience more interactive and informative.

Figure 1.23 Myplaces2 Data Collection

Figure 1.24 Added Google Map Widget into The Page

Figure 1.25 Document Management

But eventhough we've place all the data in to the google map widget, when we tested run, it still shows that there is an error for the map.

Week 08

This week, we focused on creating a product list page in FlutterFlow. After entering all the product data into our Firebase collection, we began building the layout by adding a ListView widget to display the product content.

To make the list scrollable—especially when we have more than three products—we also added a Column widget to enable vertical scrolling. Once the layout was set, we linked the product list to the Firebase data collection. We displayed the product name and price by placing Text widgets and binding their values to the respective fields (name and price) in the database.

To successfully connect the product list to the data collection, we needed to add a query to the ListView widget. This query fetches the product data from the Firebase document and automatically updates the content displayed on the page. This step is crucial for keeping the product list dynamic and in sync with the database.

Figure 1.26 Product Page Data Collection

Figure 1.27 Product List Page Design

Additionally, we needed to create a product detail page so that when a user clicks on a product in the product list, it navigates directly to the detail page. We also set up a new Firebase collection specifically for product details and connected it to the product detail page. After linking the data, we began designing the layout to display the product information clearly. Finally, we added an action to the product list items that navigates to the product detail page when tapped, ensuring a smooth and interactive user experience.

Figure 1.28 Product Detail Page Design

Figure 1.29 Product Detail Page Data Collection

Figure 1.30 Product Page Showcase Video

Week 09

For Week 9, we worked on creating the add to cart functionality. After users arrive at the product detail page, they can click the Add to Cart button, which updates the Firebase document to include the product they added to their cart.

First, we needed to create a cart page to display these items. We set up a new data collection called “cart” to store the product details along with the quantity for each item. We then linked this data collection to the cart page’s product list and column, so it dynamically displays the items the user has added.

Figure 1.31 Cart Page Design

Figure 1.32 Cart Page Design 2

Figure 1.33 Cart Page Data Collection

Figure 1.34 Add to Cart Showcase Video