Final Project

 Application Design II / Week 8 – Week 15

Final Project

Low J- Yin / 0352888

---

Introduction

---

Exercise 

User Flow:

Master Plan:

Building on the progress from Task 3, I concentrated on improving the app's interactivity and enhancing the overall user experience. This involved seamlessly integrating animations and linking various components together using HTML, CSS, and JavaScript. The goal was to create a dynamic and engaging user interface that feels intuitive and enjoyable to navigate.

Key enhancements included:

• Interactive Animations: Developed animations to bring the app to life, ensuring fluid transitions and smooth user interactions.
• Loading Navigation Menu: Integrated smooth animations and interactive icons for an intuitive browsing experience.
• Side Menu Interaction: Added transitions and responsive elements to ensure smooth navigation.
• Pop-Up Boxes: Designed interactive pop-up boxes for notifications, alerts, or user actions, ensuring clarity and accessibility.
• Call-to-Action Buttons: Improved button interactions, including hover effects and transitions, to make actions more engaging.
• Responsive Tickbox: Designed and implemented a tickbox to let user choose which they like to add on. 

These features were carefully designed to create a cohesive and fluid browsing experience, making the app more dynamic, engaging, and user-friendly.

Home Page

Delivery Page

Mart Page

Receipt Page

Profile Page

User Scenario: Exploring and Purchasing on the App

1. Home Page - The user opens the app and lands on the Home Page with a search bar, recommended restaurants, and favorite restaurant section.

2. Searching - The user searches for a dish, restaurant, or cuisine, refining results with filters like price, rating, or cuisine type.

3. Favoriting - The user adds a restaurant to Favorites by clicking the heart icon, with a brief confirmation pop-up.

4. Browsing & Adding to Cart - The user browses the menu, selects items, customizes them (e.g., toppings, portion size), and adds them to their cart. 

5. Add On Topping - add toppings or customizations through the pop up page, or back to brows any other food.

6. Checking Out - The user reviews the cart, adjusts items if needed, and proceeds to checkout, confirming their payment method. A success message confirms the order.

7. Delivery Page - After payment, the user is directed to the Delivery Page to track their order in real time and view delivery details.

Walkthrough HTML:

Presentation Video:

Work Proof:

Zip Files:

https://drive.google.com/file/d/1sBQ0Rj8CI0OWXCbyNP4ry7x9duVmipqx/view?usp=sharing

---

Reflection

For this project, I focused on enhancing the app’s interactivity and user experience by incorporating a range of dynamic features. The aim was to create a user-friendly, visually appealing, and intuitive interface for the app. I made several key improvements, including interactive animations, a responsive navigation menu, and smooth pop-up interactions, all aimed at making the user experience more engaging.

One of the most important aspects of my design was ensuring that the app's transitions and interactions felt seamless. By using HTML, CSS, and JavaScript, I was able to integrate fluid animations that made the user interface feel more alive. This was particularly evident in the navigation menu and the call-to-action buttons, which now feature smooth hover effects and transitions.

Through this project, I deepened my understanding of application design, particularly in terms of user interaction and responsive layout. Moving forward, I aim to continue refining my skills in these areas, focusing on creating even more immersive and intuitive user experiences.