APPLICATION DESIGN II - FINAL PROJECT

on
16/12/2024 - 7/1/2025 (Week 12 - Week 14)
Lee Wing Kie / 0364251
Application Design II/ Bachelor of Design (Hons) in Creative Media
Final Project

INSTRUCTIONS



Final Project
Students will synthesize the knowledge gained in tasks 1, 2, and 3 for application in task 4. They will create an integrated visual asset and refine the prototype into a complete working and functional product experience for 1 task flow.

Process
In Task 3, I coded several pages and incorporated interactive animations. Below is a list of the completed components.

Completed Component in task 3:
- Splash Screen & Homepage
- Sidebar: Slide in/out animation
- Search Results: Date Picker scrolling button
- Seat Selection: Fade animation and seat selection button
- Payment: Pay transition loading animation

Home Page
Since I had already developed the homepage layout and animation in the previous task, my current focus is on adding more details to enhance the user experience. This includes refining elements such as buttons, adjusting opacity for better visual appeal, improving the sidebar functionality, and ensuring the overall transitions and animations run more smoothly.

Fig 1.1 Home Screen progress in HTML

Fig 1.2 Screen recording of the Homepage Animation

Search Result
I previously completed the layout for this page, including the button and animations.

Fig 1.3 Search Result progress in html

Fig 1.4 Screen recording of the Search Result Animation

Choose Seat
I completed this page in a previous task, but there is still room for improvement in some animations. I changed the seat selection animation so that when a user clicks a seat, a box jumps out below, making the flow smoother.

Fig 1.5 Choose seat progress in html


Payment Method & Confirmation Page
Once the user clicks the payment option button and submit, the payment loading page animation will automatically appear for a few seconds before displaying the boarding pass.


Publishing
After completing the coding of all the page layouts, adding animations, and ensuring all buttons are clickable and linked to the appropriate pages, I uploaded the files to an app called Netlify.

FINAL SUBMISSION

*Recommend to view on iPhone 14 Pro Max (430 x 932)


Presentation Video:


REFLECTION

Finally completing the project, to be honest my foundation in JavaScript is not very strong, which made it really challenging for me to complete the project initially. It was also quite difficult to present the outcome I envisioned. AI helped me a lot when I faced coding issues. I’m also deeply thankful to my course mate who helped me fix device size issues as my layout was very messy at the beginning. Through this module, I learned the importance of good communication and understanding between frontend and backend development. This experience has helped me build a stronger foundation in understanding app structure and coding more clearly.

Comments

Post a Comment