APPLICATION DESIGN 2 FINAL

Student ID : 0379395

Name : He Kehua

Public share URL link:https://app.flutterflow.io/project/text3-0sr0ko

Presentation link:https://youtu.be/fiijDeYOBNU

My final project app is called E LE MA


Essential Pages Developed

During development, I developed and built the following pages based on actual application requirements:

1. SplashPage

2. OnboardingPage

3. LoginPage / SignupPage / ForgotPasswordPage

4. VerifyPage / ResetPasswordPage

5. BasketPage / CheckoutPage / OrderDetailPage / MyOrderPage

6. WriteReviewsPage / FeedbackPage

7. CallPage / AddNewCardPage / AddNewAddressPage

8. CategoryPage / DeodorantsPage / GroomingsPage / SearchPage

9. FavouritePage / PrivacyPolicyPage / BottomPage

10. MyProfilePage / EditProfilePage / ChangePasswordPage / SecurityPage

   Fig 1.1  All functional pages designed and implemented iFin the application, ranging from onboarding to checkout, review, and profile management.


 Animation Implementation and Interaction

I added simple transition animations to some page elements (such as buttons, navigation bars, and pop-up windows), mainly using:

• CSS animations: page slide-in/slide-out, button click feedback

• A small amount of JavaScript control: form validation feedback, page transition logic

The addition of animations enhances the user experience and adds a sense of dynamism to the interface.






Fig 2.1 Screenshot of animation logic used for modal opening and button interactions using CSS and JavaScript.\


Technical Stack
• Frontend: HTML, CSS, JavaScript
• UI Animations: CSS transitions, DOM manipulation
• Development Platform: Visual Studio Code
• Deployment: Not yet deployed (see Reflection section)


 Application Design II Final Submission Guidelines (Final Submission)

This is my final project submission for  "ELE MA – Online Food Delivery Service Application." The application has implemented core functional modules such as user registration and login, product browsing, order placement, payment, order tracking, and personal information management.

Due to time and technical constraints, I have not yet deployed this application to Netlify nor completed the PWA (Progressive Web App) settings. As a result, the application cannot currently be directly installed via a browser or subjected to performance testing. In the future, I will prioritize deployment and PWA configuration to ensure users can add the application to their home screen via a browser, thereby achieving a more complete user experience.


Reflection and Shortcomings

In this task, I successfully completed the interface design and development of most of the application's core functionalities, including user registration, login, product browsing, adding items to the cart, placing orders and making payments, order details, address management, and account management. The overall structure is relatively complete, with a clear user flow that can simulate a preliminary real-world food delivery service experience.

However, the project still has some limitations. First, due to tight time constraints and limited technical expertise, I was unable to deploy the project to online platforms such as Netlify, nor did I complete the configuration for Progressive Web Apps (PWAs). This means users cannot currently install the app on their device's home screen or access offline features, which somewhat limits the project's completeness and usability.

Second, this project has not been integrated with a real backend database or API. The page data is static content and cannot perform actual data transmission and storage. For example, order information, user reviews, or product status cannot be retained after refreshing the page. This also indicates that the current version is more of a frontend prototype and has not yet reached a commercially viable level.

Additionally, although the pages are largely complete, there are still shortcomings in animation and user experience details, such as the absence of transition animations during page transitions, lack of clear feedback when clicking buttons, and basic form validation. These issues may impact users' actual experience during use.

Finally, the entire development process was primarily conducted in a browser environment and has not undergone comprehensive testing across multiple terminal devices. Some interfaces may have compatibility issues on mobile devices, and further testing is needed to ensure compatibility across different resolutions and platforms.

In summary, while the project has achieved the expected number of pages and process design, it still requires improvements and enhancements in deployment and deployment, dynamic data management, interaction experience optimization, and device compatibility. In the future, I will continue to learn relevant technologies and gradually address these shortcomings in subsequent versions.




Comments

Post a Comment

Popular posts from this blog

Spatial 2 assignment 1

Image
Here are the project what we shuld do. 🧠 Assignment Overview: You are required to conduct a precedent study and analysis of two retail stores: One international (overseas) store – researched online. One physical store – that you can visit in person. This assignment is individual and counts for 20% of your final grade. 🎯 Objective: To apply design processes critically and creatively by analyzing real-world retail environments. You will propose innovative, context-specific solutions that improve spatial quality, customer experience, and brand identity. 📌 Analysis Areas to Cover: Store Overview Name, location, and type (e.g., fashion, electronics, lifestyle) Brief brand history or background Design Features Layout: Floor plan sketch; how the layout guides flow and interaction Materials: What materials are used and their functional/aesthetic effect Lighting: How lighting contributes to mood and experience Color Scheme: How color supports brand identity and ambiance Brand Identity How...
Read more

Embedded systems

Image
                                                       In this lesson, the teacher gave us a general explanation of what is called an embedded system. Then he gave us a general introduction to the tasks that we need to complete this semester and the courses we have learned. We were then given homework for the lesson, and the following is an example of an assignment. This is our first group assignment This class was supposed to be a public holiday, but the teacher was very responsible, so he gave us an online class to teach us how to use python, and under the teacher's step-by-step teaching, we had a rough understanding of python software In this lesson, the teacher continued to distribute some of the tools needed for embedded systems and taught us how to use them. Of course, the teacher also gave us a deeper understanding of what an embedded system ...
Read more

Spatial design 2 FINAL

Image
Starbacks Name:HE KEHUA Student ID:0379395 This is my spatial design. This is my sketch at the beginning. This is my initial modeling. The teacher asked me to modify it. Put the order area at the door. Add a little designed locker to the empty area. After the teacher gave feedback, I revised and improved the content. Light In the last class, the teacher continued to give me some feedback, asking me to continue to make changes on my existing basis, slightly increase the children's area, the bad material of the floor of the service area, and install a window at the gate, and put two small mats under my two apple core cabinets. Here are the final project i made
Read more