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

on

20/11/2024 - 14/12/2024 / Week 9 - Week 12
Joey Lok Wai San / 0350857
Application Design II / Bachelor of Design (Hons) in Creative Media 
Task 3: Interactive Component Design & Development


TABLE OF CONTENTS


LECTURES
All lectures and exercises completed in Application Design II - Lectures & Exercises


INSTRUCTIONS

https://drive.google.com/file/d/159_U4ajXP-Km8y8h6Gh64JjTjVKQ6xEX/preview


TASK 3: Interactive Component Design & Development

For this task, we will build upon the knowledge gained in Task 2 to create micro-interactions and animated micro-interactions for their app. This will greatly elevate the app's user experience. The aim of this task is to get the students to explore and make creative decisions on the type of interactions they would want to integrate into their app.

The output of this task is a working animation element that is ready to be integrated into their final app. This means it’s no longer a visualisation like it was in Task 2. This will be created using HTML/CSS and JavaScript with the use of an animation framework if necessary.

Interactive Components/Elements can be:
  • Navigation Menu with interactive icons.
  • Side Menu interaction
  • Pop Up boxes
  • Call to action buttons.
  • Page/Screen transitions
  • Etc. (discuss with the module coordinator for further clarification)

Chosen Interactive Components 
To begin this assignment, I started looking at my prototype and choosing the best components to develop. The interactive components I have chosen to do are: 
  1. Onboarding Logo Animation
  2. Onboarding Screen Transitions
  3. Home Page Carousel 
  4. Bottom Navigation Menu
  5. Reservation Screen Transition 
  6. Button Animations (e.g. Pax, Date, Time selection)
  7. Pop-Up Box Animation (Reservation confirmed)
Once the components were approved by Mr. Shamsul, I started coding using HTML and CSS to get the layout of the prototype. This was all done in separate files as recommended, so each component has its own file. This is the Figma prototype for reference.

Fig. 1.1 Figma File with Interactions, Week 7 (10/11/2024)

Managing Pages
For this task, I used DaisyUI, GSAP, and Blackbox AI. Blackbox AI was really helpful when it came to solving any errors along the way that I could not solve, which saved a lot of time in the process.

Fig. 1.2 Screens in Order, Week 12 (14/12/2024)

I created all the components in their respective pages as it would be simpler to assemble later on. In the end, all I would have to do is link the pages together for my final project instead of making each component separately. This is the task list I made so I would not die from coding (aka making it more manageable):
  1. Introduction to App
    • Onboarding splash screen animation
    • Onboarding screen 1, 2 & 3
    • Log in page
  2. Home Page
    • Bottom navigation menu
    • Carousel
    • Restaurant lists
    • Search bar
  3. Restaurant Page
    • Favorites icon
    • Scroll details
  4. Reservation Screen 1
    • Pax selector
    • Calendar selector
    • Time selector
    • Promo selector
    • Progress bar
    • Next/ Clear buttons
  5. Reservation Screen 2
    • Input bar
    • Progress bar
    • Confirm button
  6. Reservation Screen 3
    • Progress bar
    • Edit/ Cancel buttons
  7. Pop-up Confirmation Box
    • Animation of transition
  8. Reservation Page
    • Upcoming/ Historical reservations tab
    • Before and after of booking restaurant
*The screens are not coded in order of the list. During the process, I just coded whatever I wanted whenever I felt like it. Sometimes going back and forth between screens if I was stuck on an error I could not fix.

1. Onboarding Splash Screen 
The onboarding animation took some time to figure out and code. The background change was easy to do, starting from a circle that expands and fills the background with a new colour. This animation was done using GSAP functions. However, replicating the logo change as shown in the prototype proved to be a bit difficult.


Fig. 2.1 Splash Screen Background Animation, Week 12 (12/12/2024)

I took some time away from doing this to think about the animation and worked on other screens first. After revisiting the code, I decided to use two images that were the same dimensions just different colors of the logo, and make the images switch during the background change. To do this, I used AI which suggested me to use the onUpdate function instead of onComplete so the change happens during the animation of the background.

I made two variations of the splash screen by playing around with the code, one is using onUpdate and the other using onComplete.


Fig. 2.2 Final Splash Screen Animation #1, Week 12 (12/12/2024)

Fig. 2.3 Final Splash Screen Animation #2, Week 12 (12/12/2024)


2. Onboarding Screens 
Moving on, Mr. Shamsul asked me to create one of the onboarding pages during my consultation with him on Week 10. This is so the final experience would make more sense. I was not planning to make any onboarding pages originally, just decided to do it in the end and created all 3 onboarding screens.

This was fairly simple to do, I did my best to replicate the design on one screen then duplicated it and replaced the image and text. When duplicating and replacing, I found that some of the content was not in the same place. To solve this, I used Inspect and adjust the elements until all screens were the same.


Fig. 3.1 Final Onboarding Screen 1, Week 11 (06/12/2024)


Fig. 3.2 Final Onboarding Screen 2, Week 11 (06/12/2024)


Fig. 3.3 Final Onboarding Screen 3, Week 11 (06/12/2024)


3. Log In Page
The login page was by far the most simple and least headache inducing screen. Everything was smooth sailing and I encountered few to no issues at all. I am really happy with it especially how accurate it looks to the Figma prototype and how it took really little time compared to the other screens. This was also one of the first screens I made so it really made my ego huge gave me a confident boost that I could code the rest. 

Fig. 3.4 Final Login Page, Week 10 (30/11/2024)


4. Home Page 
For the home page, I began by making the carousel which would move automatically. I created this from scratch, later realizing that Daisy UI and GSAP have components specifically for that. In the end, I wasted quite a fair bit of time coding the carousel when I could have easily done it using existing components.

Prior to the feedback from Mr. Shamsul, I created all the restaurant cards from hand too. It was not the most difficult thing in the world but still would have been nice to save time using pre-existing components. 


Fig. 4.1 Making One Row of Restaurant Cards, Week 10 (26/11/2024)


Fig. 4.2 Duplicating Restaurant Cards, Week 10 (26/11/2024)


Fig. 4.3 Adding Details into Restaurant Cards, Week 10 (26/11/2024)



Fig. 4.4 Progress of Carousel and Restaurant Cards in Home Page, Week 10 (28/11/2024)

The design above was already approved by Mr. Shamsul during the consultation. All I had to do left was insert all the restaurant information, which was quite time consuming to duplicate multiple times, but hey I got it done in the end. I also added additional animations of how the content will transition in using GSAP and some help from AI to make the cards pop up.

Fig. 4.5 Final Home Page, Week 12 (13/12/2024)


5. Bottom Navigation Menu
The bottom navigation menu is nothing that special, it features a hover animation for each navigation item, from Home to Profile. When the page is hovered or active, the icon will turn orange. It will also decrease in size on click and then expand to its original size. This will make it clear to users which page they are on as well as add micro interactions. 

Seems fairly simple right? It was the one of the top 3 headache inducing moments I had with this task. When the SVG icon is clicked, some strokes still remained grey. I asked Mr. Shamsul and AI several times but the problem still persisted. I took a couple days away from this monstrous thing and came back days later by asking AI once again. I have no idea how I solved this issue, it was something with stroke-fill in the HTML document and a bunch of other stuff, but I'm just glad it worked in the end.



Fig. 5.1 Issue with Stroke Color of SVG icon, Week 12 (09/12/2024)


Fig. 5.1 Fixing Issue with Stroke Color, Week 12 (09/12/2024)

Once the problem was fixed, I used GSAP to make animations on the icons. This was done by scaling down the icons on click then having it return to its original size in a short duration of time.


Fig. 5.3 Final Bottom Navigation Menu, Week 12 (09/12/2024)


6. Reservation Screens
The reservation process screens was the most challenging part, as there were lots of components to it. As Mr. Shamsul recommended, I should start by doing the hardest thing first and then proceed to make the easier components. This is great advice but not at the time when I was struggling with making the code work and spent at least a good week doing this lmao

Reservation Screen 1
The first page included a calendar and a few buttons to select your reservation details. However, some components did not work properly and it was hard to replicate the prototype design. 

The first sign that this screen would be a challenge was this styling issue which took me a few hours. In the code there was no way of changing the padding to be none, meaning even when I set the padding to be 0, there was still a lot of space between the lines. Placing it in a <div> did not solve the issue either. In the end, I asked AI and the solution seemed to be something about line space.


Fig. 6.1.1 Line Spacing Issue, Week 10 (26/11/2024)


Fig. 6.1.2 Progress of Styling Screen, Week 10 (26/11/2024)

I was trying to add the lines to the calendar, trying at least 5 different methods but not of them really worked. Mr. Shamsul solved the issue in 5 minutes though. However, even after this it was still difficult to style the calendar since there are a lot of issues when I tried to change the spacing of the line. In the end, making 3 lines was taking too much time and I decided to scrap it and leave it as is.


Fig. 6.1.3 Adding Line Issue, Week 10 (26/11/2024)

There are a lot of other problems I faced. Mainly the problem was everything really, here is a list of headaches on this one screen alone:
  • Progress bar - Did not think of using DaisyUI at the time so I made it by scratch and by searching for tutorials
  • Calender - Not the right size, could not add lines like the prototype without disrupting the flow
  • Time and Promo button - Clicking on the time button does not allow the promo button to be clicked and vice versa
  • Buttons - The border of the selected buttons turn grey at first. It will only turn orange when another button is clicked
  • Spacing issues with line height
There are no more progress pictures for this screen because the last thing I was thinking of doing was showing my suffering while suffering. I decided to just solve all the issues and hope the screen works out in the end.


Fig. 6.1.6 Final Reservation Screen 1, Week 12 (13/12/2024)

Reservation Screen 2
The second screen has less components but still had errors with it. It seemed simple enough it was just duplicating and adding some information here and there. Nope, when I thought it was going to be smooth sailing the most annoying thing happened. I could not adjust the font sizes without having drastic changes in the size (e.g. 2em was a small font, 2.1em was a large font - same with using px and rem)


Fig. 6.2.1 Struggling with Font Size Error, Week 12 (09/12/12024)

I put the whole code into AI but the issue was still not solvable. I redid the whole page but the issue still persisted. To fix it and test it out, I created another <div> hoping it was just one sections problem but after recreating it 3 times the issue was still there. 


Fig. 6.2.2 Recreating and Duplicating to Troubleshoot Issues, Week 12 (09/12/12024)

I begged AI one more time for help, and the issue was somehow fixed with a few meddling. This was solved by using line-height and putting it in a column.


Fig. 6.2.3 Final Reservation Screen 2, Week 12 (14/12/2024)

Reservation Screen 3
The last reservation screen was somehow the least problematic of them all. For this, all I had to do was duplicate the first screen and replace the information as needed, change the buttons and animation dura


Fig. 6.3.1 Final Reservation Screen 3, Week 12 (14/12/2024)


7. Pop-Up Box Animation 
The pop-up box animation was fairly simple to do as there was not much to code. The only major thing was using GSAP to achieve the desired look like my prototype. It took a few amendments for it to be accurate, mostly playing with stroke width and position of the icon.


Fig. 7.1 Original Pop-Up Box Animation, Week 11 (28/11/2024)

Fig. 7.2 Pop-Up Box with Styling, Week 11 (28/11/2024)

I realized it wasn't as accurate as I wanted it to be so I styled the pop-up box quite a few times to make it look similar to the prototype. From the previous styling, I made the stroke even thicker and inserted an SVG icon to show instead of just a tick symbol. 

Fig. 7.4 Final Pop-Up Box Animation, Week 12 (13/12/2024)

Things to be done for Final Project:
  • Link all the different screens together 
  • Make the 'Restaurant Page' with 'Reserve Now' button
  • Make the 'Reservation Page' to show confirmed reservation

Final Task 3: Interactive Component Design & Development
Walkthrough Video Presentation 

Fig. 9.1 Final Interactive Component Design & Development - Presentation Video, Week 12 (15/12/2024)

FEEDBACK
WEEK 9
  • Doesn't have to go in flow, you can create one component just to show how it looks like
  • Can import the onboarding animation as a GIF, but it would be great if you could do the animation if it's not too time-consuming
  • Main Components: 1) Menu animation, 2) Page transitions, 3) Loading animation, 4) Reservation confirm pop-up, 5) Buttons

WEEK 11
This was the week we found out Mr. Shamsul is leaving, I am utterly heartbroken and crying on the floor WHY SIR WHY
  • The design looks good, nothing wrong with it 
  • Send the files over to help troubleshoot the issues
  • The cards and carousel can be done using DaisyUI, but since you have already done it from scratch it's still fine, since it works
  • Maybe create one of the onboarding screens to make the experience smooth for your users

REFLECTION

Experience
I'm not really sure how I feel about this project. I am proud that I managed to code all this in a short period of time, while I would have struggled to make one page a few semesters ago. At the same time, there were so many errors I had to figure out to make the layout look right and accurate. AI is helpful, but I try not to rely on it too much because of how inaccurate it can be sometimes. 

Observations
From my observations, I find JavaScript to be hard and I honestly have no idea what's happening half the time but to mess around and find out. This is the same when I did CSS, I forgot most of the code I learned so it was just a matter of revising and relearning quite a bit. I also observed that my code is usually very messy and I don't really organize it as well as I should, which can cause a lot of issues down the line but hey as long as it works.

Findings
From this project, I found that it is much easier to do my components altogether, as in developing the page with the components itself. Since my code is usually messy, putting it all on one page helps to avoid getting any of the tags mixed up with one another. I also found how helpful DaisyUI and GSAP were, it is much easier to understand than learning JavaScript from scratch. I only wish I used it earlier when developing my more difficult components.

Comments

Post a Comment