Application Design II - Task 3: Interactive Component Design & Development

13.6.2024 - 8.7.2024 (Week 7 - Week 11)
Tan Yi-Tyng (0353327)
Bachelor of Design (Hons) in Creative Media
Application Design II 
Task 3: Interactive Component Design & Development

---

INSTRUCTIONS

---

TASK 3 - INTERACTIVE COMPONENT DESIGN

Instruction

We will build upon the knowledge gained in Task 2 to create micro-interactions and animated for our app. This will greatly elevate the user experience of the app. The aim of this task is to explore and make creative decisions on the type of interactions we would want to integrate into our app. This will be created using HTML/CSS and JavaScript with the use of animation frameworks if necessary.

Process

Based on the feedback given by Mr. Razif on the previous Task 2: High-fi Prototype, he mentioned that the speed of the animation could be faster and more interesting interactive animations could be added using LottieFiles or After Effects. So, I decided to start coding the app directly and add more animations to the app at the same time.

Prototype in Figma:

Below is the list of pages that need to be coded and animated, focusing only on the primary purpose and the main user task flow in the Batik Air app, which is to book flight tickets.

1. Splash Screen
2. Home Screen 
3. Flight Selection page
4. Cabin Selection page
5. Seat selection page
6. Checkout page
7. Payment page
8. Payment Loading Page
9. Confirmation page
10. Notification Page 
11. My Trips Page
12. Profile Page

Splash Screen

For the previous prototype, I built the animation for the splash screen in Figma. Initially, I tried to directly import it through the LottieFiles plugin, but the result didn't look the same as in Figma, the speed had changed in certain part. So, I switched to After Effects to redo the animation and then exported it through LottieFiles and added it to the script. Creating the splash screen animation in After Effects took me almost the whole day. It was quite time-consuming, as I had almost forgotten how to use After Effects after not using it for a long time. This animation was slightly difficult because it required a lot of masking effects and the utilization of the pre-composition method to work with different elements.

Fig. 1.1 - Working the animation in After Effects

Fig. 1.2 - Copy the embed link from LottieFiles

I then tried to link the splash screen with the home page with a fade-out transition. However, I'm having an issue where, during the transition to the homepage, there is a brief moment with a blank white screen, causing the animation to not look smooth enough.

Fig. 1.3 - Splash screen progress in HTML

Fig. 1.4 - Screen recording of the splash screen animation

Home Page

For the animation of the navigation bar, I found some interesting designs online with provided scripts that can be applied to this app. 

Fig. 2.1 - Online Template

I experimented with the navigation bar design in a separate document first by modifying the icons with two variations (outline and filled color) and replacing the circle color. Below is the final outcome of the navigation bar animation.

Fig. 2.2 - Animation of the navigation bar after modification

However, when I tried to combine the nav bar with the home page, I noticed a weird border line around the circle. I spent quite some time trying to fix this issue and concluded that the black border line is the curved edge of the nav bar panel. Based on the template, it’s not a space between the circle and the white panel, instead, it uses a black line to create that visual effect. This did not seem obvious in the template because the border line is the same color as the background, but when I applied the design to my app, it became noticeable. As I spent too much time on this navigation bar issue, I decided to leave it for now and move on to other parts.

Fig. 2.3 - Animated nav bar on the homepage

I also tried to find an alternative design for the navigation bar and found an interesting template for the animated navigation bar.

Fig. 2.4 - Online Template

I had to make some changes to the nav bar design, including changing the icon design and color. However, despite trying many ways to adjust the script and import the icons with two versions (outline and filled white color), the animation still didn't look like the template. So, I decided to take this as an experiment and use the previous animation for the nav bar.

Fig. 2.5 - Animation of the navigation bar after modification

Due to time constraints, I quickly started creating the Home Page, as this page has more animations based on what I proposed in the previous task. Utilizing JavaScript to create the homepage animations worked perfectly fine. When users load the page, the animation starts with the plane flying in from the left side of the screen, and the text fades in with opacity changes. Following this, the content panel slides up. The only issue I faced is that initially, I wanted the panel to slide up and stop at a position that covers the plane. However, I couldn't find a way to do that. I think it might be the arrangement of the div, which might also affect the animation. So, I need some time to solve this issue. For now, I have to put this part aside and solve it later on.

Fig. 2.6 - Home screen progress in HTML

Fig. 2.7 - Screen recording of the Homepage Animation

Flight Selection Page

Actually, this is the first page I started coding when working on this task. At first, as I am still not quite familiar with coding the app, I decided to start with the simplest pages to familiarize myself with HTML and CSS. For the current progress, I have only made the design and layout of the page so that users can scroll vertically to view the ticket options and scroll horizontally for the date options. I am planning to create an animation for the top section of the flight indicator, where the flight icon moves from the PEN to KUL texts.

Fig. 3.1 - Flight Selection Page progress in HTML

Fig. 3.1 - Flight Selection Page

Fig. 3.2 - Screen recording of the Flight Selection Page

Seat Selection Page

Next, I moved on to the seat selection page. At first, I was confused about how to code the arrangement of the seats and allow users to click and select them. I sought help from ChatGPT, and it finally worked. I also added animations for the page: the legend first slides in, followed by the seat selection sliding up. When the user selects a seat, an info panel pops up.

Fig. 4.1 - Seat selection page progress in HTML

Fig. 4.2 - Seat Selection Page

Fig. 4.3 - Screen recording of the Seat Selection Page

Checkout Page

To make the app more interactive and engaging, I have a new idea for animating the progress bar. I created the animation for the progress bar in After Effects. As usual, to ensure the animation is smooth, I kept making changes, which took a long time. This animation shows the user transitioning from the seat selection page to the next step. This progress bar animation will be used for all three pages (seat selection, checkout, payment), but I am currently focusing on the checkout page first.

Fig. 5.1 - Working animation of the progress bar in AE

Fig. 5.2 - Animation of the Progress Bar

Then, I also created an animation for the Total Fare section in Figma using the LottieFiles Plugin. This was easier for me than working in After Effects. The animation for the Total Fare section will slide down one by one to resemble an action of summarizing the order and calculating the total fare.

Fig. 5.3 - Animation with LottieFiles

Fig. 5.3.1 - Animation of the total fare section

I also created an interesting animation for the button when clicked. It shows a cart icon moving in and filling up, then sliding out to indicate to the user that their order has been placed into the cart and is ready to be paid for on the next page.

Fig. 5.4 - Animation for the Button

Next, I started coding the design and layout for the page and added all the animations. I used JavaScript to arrange each section to show up sequentially, making it more organized and interactive.

Fig. 5.5 - Checkout page progress in HTML

Fig. 5.5 - Screen recording of the Checkout Page

Animations

Here are some animations I created and experimented with in a separate document but haven't yet incorporated into the app pages:

1. Animation of the plane icon that can be added to some pages to make the app more interactive.

Fig. 6.1 - Animation of flight icon

2. Animation of a flight flying through the sky, passing through clouds. This will be added to the payment loading page.

Fig. 6.2 - Animation of payment loading icon

3. Animation of a flight ticket being printed out once the user successfully makes their payment. This animation will be added to the confirmation page.

Fig. 6.3 - Printed Flight Ticket Animation

Above is the current progress, with 5 pages completed. I will proceed to further work on creating other pages and adding more interactive animations.

Pages yet to be done:

1. Payment page
2. Loading payment page
3. Confirmation page
4. Notification page  
5. My Trips page
6. Profile page

---

FINAL SUBMISSION

*View in Iphone 12 Pro (390 x 844) 

Google Drive Link: https://drive.google.com/drive/folders/14h7NgVzMDi79aw8cn9tG7mwUkF3tLJHP?usp=sharing

Presentation Video:

https://youtu.be/Sofvj7zXLFA?si=0Xnvc2SfoQiiU36w

Fig. 5.6 - Task 3: Presentation Video

---

REFLECTION

As I expected, coding the app was the hardest part. Designing the app has always been my favorite part and the most motivating aspect for me, as I have a passion for it. However, in contrast, my motivation and confidence dropped immediately when it came to this task because I didn't build a solid foundation in CSS and JS. That's why I found this part so difficult. At the beginning, I was confused and struggled with how to start, but as I became more familiar with it, I felt slightly better, especially since the pages I created matched what I proposed in the previous task. However, I sometimes felt disappointed when I had interesting ideas for animations but couldn't implement them due to time constraints and my limited abilities. For example, I spent almost the entire day trying my best to fix the issue with the nav bar, but in the end, it still didn't work, and I had to give up :( Nevertheless, I don't want to sound too passive. At least I successfully built a few pages, which isn't too bad, right? (This is how I encourage myself to step up and keep working T_T )