Application Design II - Final Project (Task 4)
16/12/2024 - 7/1/2025 (Week 13 - Week 15)
Katelyn Tan Kye Ling (0354148)
Bachelor Of Design In Creative Media (Application Design II)
Task 4 - Final Project
LECTURES
WEEK 13 - 16/12/2024
After that, I coded the profile page. This one was pretty simple as some of my other pages already had similar codes that the profile page needed. So I just copy pasted them and edited the details.
I did not go to campus for consultation this week as today was submission day for this module and 2 other modules. So I stayed home to complete my assignments.
HOLIDAY WEEK - 23/12/2024
WEEK 14 - 30/12/2024
Work on finalising the app's code.
INSTRUCTIONS
Progress
Week 13:
After submitting my 6 Lotus's app features, I started to work on the rest of the user flow. First I connected whatever I already had so far as the 6 features that I previously chose to do were all from user task flow 1 that I had already planned to do in the final assignment.
Then I continued with the rest of the pages, and the first one I continued with was the homepage. I started off with doing an auto scrolling carousel for the advertisements at the top. After that I used the slide in and out animation for the categories section. I made the whole thing an image since I didn't need it to work in this user flow. However, I did need one beverage category button to work so I put that single image directly on the categories image.
Fig 1.1 Home page
Then I coded the beverage category page and the main feature of this page was the horizontal scrolling of the beverage categories. I made it one image though since my user flow did not require that to be a button. I followed a website for this and tweaked the code according to how I wanted my app to look like. (Click here for horizontal scrolling tutorial)
Fig 1.2 Beverage Category Page
Holiday Week:
First I coded the item page for Kinder Bueno, I used the same code for the milo page one that I've previously coded in my prototyping stage and just switched the image and text information. After that, I suddenly remembered that I wanted the item cart count at the top of the page to add 1 every time the "add" button in the pop up is clicked. I researched a bit and found this website that taught me how to do just that and followed the code. (Click here for cart count tutorial)
Fig 1.3 Kinder Bueno Item Page
Fig 1.4 Profile Page
Week 14:
For this week, I worked on the last page of my app which was the payment method page. This page was pretty simple to do but I changed the design of it a little to make it look neater. I also added the toggle button where if clicked the button will check the payment method chosen. I also found a tutorial online for this and changed it according to my design. (Click here for check toggle tutorial)
Fig 1.5 Payment Method Page
After I was done, I did the welcome page transition to the homepage, I struggled a lot with this as I couldn't get the welcome page transition to fully stop and then dissolve. The transition replayed while dissolving and transitioned to the home page. Unfortunately that was the best I could do.
Fig 1.6 Welcome page transition to homepage
After I did the hard parts, I did the rest of the navigations for my user task flow. Which was the navigation bar and the page transitions.
I thought this parts would be easy, but some of the page transitions like the cart page to the payment method page gave me a really hard time. It kept having weird glitches and the pages merged into one another after the transition.
Fig 1.7 Page Merge Together
After testing out here and there what was the issue, it was actually really simple. It was the z-index that was too low that it couldn't overlap the previous page when it slides in.
After I was all done, I uploaded it onto netlify. Of course there were still some minor issues after uploading, so I continuously altered and uploaded the app again a few times till I was somewhat satisfied.
FINAL SUBMISSION
App directly from Dreamweaver:
The positioning of some items from Dreamweaver and netlify are different. Example some images are positioned lower in this video (Dreamweaver), but in netlify the positions are fine. There are also some glitches here and there, like the animation for the order successful is fine here but doesn't load properly in netlify.
Netlify link: https://katelyn-appdesign2-finalproject.netlify.app/
Presentation Slides:
Presentation Video Submission:
REFLECTION
Experience
Throughout the final project for Application Design II, I found myself juggling multiple assignments across different modules, which made time management a crucial factor. I must say that this was one of the moduels that I struggled the most with as there were quite a few pages to code and manage. Organisation of the files and codes as well as time management were key. After looking at tutorials and also slowly learning how coding works I slowly started to get the hang of it. Each page I worked on brought a mix of excitement and frustration, especially when tackling new features like animated transitions. Although I encountered several challenges, the process of coding and refining the app became quite rewarding as I saw the project gradually take shape. Overall, the experience was pretty stressful but definitely rewarding at the end. I wouldn't say that I'm a 100% satisfied with my work but I'm still proud of my final product.
Throughout the final project for Application Design II, I found myself juggling multiple assignments across different modules, which made time management a crucial factor. I must say that this was one of the moduels that I struggled the most with as there were quite a few pages to code and manage. Organisation of the files and codes as well as time management were key. After looking at tutorials and also slowly learning how coding works I slowly started to get the hang of it. Each page I worked on brought a mix of excitement and frustration, especially when tackling new features like animated transitions. Although I encountered several challenges, the process of coding and refining the app became quite rewarding as I saw the project gradually take shape. Overall, the experience was pretty stressful but definitely rewarding at the end. I wouldn't say that I'm a 100% satisfied with my work but I'm still proud of my final product.
Observation
One thing I consistently noticed was how prior work served as a foundation for new tasks. For example, coding the item page for Kinder Bueno was much faster since I could reuse and modify code from the Milo page. I also observed that minor design changes, such as tweaking the payment method page, significantly improved the overall appearance and functionality. However, I also realized that even simple tasks, like page transitions, could lead to unexpected issues, such as glitches and overlapping pages. And through that, I also noticed that sometimes the issues are not as complicated as it seems to fix, trial and error would slowly but surely fix the issue.
One thing I consistently noticed was how prior work served as a foundation for new tasks. For example, coding the item page for Kinder Bueno was much faster since I could reuse and modify code from the Milo page. I also observed that minor design changes, such as tweaking the payment method page, significantly improved the overall appearance and functionality. However, I also realized that even simple tasks, like page transitions, could lead to unexpected issues, such as glitches and overlapping pages. And through that, I also noticed that sometimes the issues are not as complicated as it seems to fix, trial and error would slowly but surely fix the issue.
Finding
Through this project, I discovered the importance of testing and troubleshooting. The page transition errors, caused by an incorrect z-index value, taught me to pay closer attention to the finer details of my code. Uploading the app to Netlify revealed minor issues I hadn't noticed during development, reinforcing the value of iterative testing and refinement. Overall, I gained a deeper appreciation for the coding process and the patience required to bring a design concept to life. I also really started to feel the pain for app developers as it really isn't easy, it takes a lot of time and effort. I can't imagine coding an entire app while mine was just one task flow. This experience not only strengthened my technical skills but also enhanced my problem-solving abilities, which I believe will be valuable for future projects.
Comments
Post a Comment