Application Design II /Final Project: Completed App

Start from 27.12.2024

16.12.2024 -29.12.2024 /Week 12- Week 14
Kong Cai Yi / 0363862 
Application Design II   / Bachelor of Design (Hons) in Creative Media 
Final Project: Completed App

---

INDEX

• Task 1:App Design 1 Self-Evaluation and Individual Reflection
• Task 2: Interaction Design Proposal and Planning
• Task 3: Interactive Component Design & Development

---

INSTRUCTIONS

Task 3 Revise

What have been done in Task 3:

1. Navigation Menu with interactive icons
2. Pop up window (Seat details)
3. Extension of payment options
4. Page/Screen transitions (Onboarding Page)
5. Loading Page (Bus animation)
6. Call to action buttons (Payment processing)

Fig 1.1 Navigation Menu with interactive icon (20.11.2024-Week 9)

Fig 1.2  Pop up window-Seat details  (26.11.2024-Week 10)

Fig 1.3 Extension of payment options (30.11.2024-Week 10)

Fig 1.4 Loading Page -Bus animation  (9.12.2024-Week 11)

Fig 1.5 Page/Screen transitions -Onboarding Page (9.12.2024-Week 11)

Fig 1.6 Call to action buttons -Payment processing (9.12.2024-Week 11)

Animation will be added in Final Project:

• Scrolling page (Home, Seat details, Search Cities)
• Keyboard 
• Digital Ticket Open overlay 
• Payment Failed 

Final Project/ Completed App

Instructions:

• Students will synthesise the knowledge gained in task 1, 2 and 3 for application in task 4. 
• Students will create integrate visual asset and refine the prototype into a complete working and functional product experience.

Submission Requirements:

• Presentation Slide to be submitted in PDF format
• Online posts in your E-portfolio as your reflective studies
• 
  

Log In Page

After Loading and Onboarding page, will direct user to log in page, they can choose any platform like Facebook, Google, Microsoft or apple to log in. I only activate email log in option. If they have not Sign Up before, can click the bottom "SIGN UP HERE" button to navigate to sign up page.

Fig 2.1 Add Logo for other log in option (15.12.2024-Week 12)

Fig 2.2 Easybook Logo (Black)  (15.12.2024-Week 12)

Fig 2.3 Log in Page  (15.12.2024-Week 12)

Fig 2.4 Can't log in if you haven't fill in info (15.12.2024-Week 12)

Fig 2.5 Email and password icon (15.12.2024-Week 12)

Fig 2.6 Log in Page HTML and CSS Scripts  (15.12.2024-Week 12)

Fig 2.7 Log in Page Outcome  (15.12.2024-Week 12)

Sign Up Page

If user have not Sign Up before, can click the bottom "SIGN UP HERE" button to navigate to sign up page. Here is the design layout for it: 

Fig 2.8 Sign up page responsive (15.12.2024-Week 12)

Fig 2.9 Able to input personal info (15.12.2024-Week 12)

Fig 2.10 Choose your country - option  (15.12.2024-Week 12)

Fig 2.11 HTML & CSS Scripts for sign up page   (15.12.2024-Week 12)

Fig 2.12 Sign Up Page  (15.12.2024-Week 12)

When the "Sign Up Here" link is clicked:

• Clicking "SIGN UP HERE" adds the active class to the signup-page, triggering the slide-in animation. Clicking the "Close" button removes the active class, sliding the form back out.
• Add a hidden sign-up form that will slide in when the link is clicked.
• Javascript: Add interactivity to toggle the active class.

Fig 2.13 Scripts for sign up page slide in (15.12.2024-Week 12)

Fig 2.14  Outcome (15.12.2024-Week 12)

Home Page 

For home page, I have done for navigation bar in task 3, now I continue working on at the main content layout design and scrollable effect. I have also add on date picker feature which allows user to choose their preferred date, no need to type it manually. 

Fig 3.1 Progress of Home Page (18.12.2024-Week 13)

Fig 3.2 Finally after 3 hour! (18.12.2024-Week 13)

Fig 3.3  Date picker feature (18.12.2024-Week 13)

Fig 3.4 Scrollable content scripts  (18.12.2024-Week 13)

Fig 3.5 Scrollable effect (18.12.2024-Week 13)

Fig 3.6 Home page HTML and CSS Scripts (18.12.2024-Week 13)

Add NavBar

After I finished home page html and css, the last step is to add navigation html that I have done in task 3 (Navigation Menu with interactive icons).

Fig 3.7 Add Nav Bar using iframe  (18.12.2024-Week 13)

Fig 3.8 Home page with navigation bar  (18.12.2024-Week 13)

Search Cities

I decided to add my search cities page as a pop up window when user click either "from" or "to" button.

Function Added: 

• ShowPopup
• HidePopup
• SelectCity
• Function filterCities
• SwapCities

Fig 3.9 Jawascripts for pop up window  (18.12.2024-Week 13)

Fig 3.10 Pop up window HTML and CSS  (18.12.2024-Week 13)

Fig 3.11 Pop up window- Search cities   (18.12.2024-Week 13)

Booking Bus

• Active: On click first option to seat page
• Filter options
• Scrollable content

Fig 3.12 Booking Bus Page    (18.12.2024-Week 13)

Fig 3.13 Booking Bus HTML and CSS  (18.12.2024-Week 13)

Fig 3.13 Booking Bus Page -scrollable  (18.12.2024-Week 13)

Seat Page 

I have done pop up window effect in task 3, so I decided to add seat photo in the white blank content, whenever user click on that area, will activate bottom pop up window.

Fig 3.13 Seat Page HTML and CSS  (18.12.2024-Week 13)

Fig 3.14 Seat Page pop up window  (18.12.2024-Week 13)

• Add a tab section bar at the bottom of your seat page
• Create an interactive feature where clicking on the "Ratings & Reviews" tab expands the detailed rating view, change the color of the icon when the "Ratings & Reviews" tab is clicked, I use JavaScript to add a specific class to the corresponding 

Fig 3.15 Tab section -activate ratings details  (18.12.2024-Week 13)

Fig 3.16 Tab section HTML, CSS and javascript  (18.12.2024-Week 13)

Passenger Details Page 

• Input Option
• Easypoint Rewards
• Personal Accident Protection plan (can choose)
• Continue payment button

Fig 4.1 Passenger details page  (25.12.2024-Week 14) 

Fig 4.2 Passenger details HTML, CSS and Javascript  (25.12.2024-Week 14) 

Payment Page 

• Popup window that displays a voucher when you click the "View My Voucher" button
• Make the "Apply" input automatically fill with the selected voucher code after clicking "Use Now"
• Change the color of the text in the voucher input field after the voucher code is filled in

Fig 4.3 Payment - Apply voucher  (25.12.2024-Week 14) 

Fig 4.4 Payment Page HTML, CSS and Javascript  (25.12.2024-Week 14) 

Payment Successful 

Fig 4.5 Payment Successful HTML, CSS and Javascript   (1.1.2024-Week 15) 

Ticket Details

• Add External Map 
• Make the home icon a clickable button that redirects back to home.html.

Fig 4.6 Ticket details page  (1.1.2024-Week 15) 

Fig 4.7 Final Outcome  (1.1.2024-Week 15) 

Fig 4.8 Ticket Details HTML and CSS (1.1.2024-Week 15) 

FINAL SUBMISSION

Presentation Slides

FINAL PROJECT 

Fig 5.1 Final Presentation Slides (1.1.2024-Week 15)

Final Walkthrough Video

Fig 5.2 Final Walkthrough Video (1.1.2024-Week 15)

---

REFLECTION

Finally, it's time for the final project! I realized that I’m gradually getting on the right track and have started to understand how to effectively utilize HTML, CSS, and JavaScript. The entire app development process has been going more smoothly. Thanks to the solid foundation I built during Task 3, where I completed some critical components, the final project felt relatively easier as I only needed to focus on finishing the remaining pages.

However, there were still many challenges, such as unifying buttons and fonts. Working with content in HTML wasn’t as simple as I had initially imagined, and it required a significant amount of time and effort. At first, I thought adding my completed navigation bar to the homepage would be a difficult task, but through this project, I learned about iframes, which allow linking to another frame — an incredibly convenient feature.

After completing everything, I felt a huge sense of relief. Thank you to Mr. Shamsul for his guidance, which allowed me to have such a fulfilling semester!