Application Design 2 Task 2

Application Design 2

Student ID:0379395

Student Name:HE KEHUA

Link：https://app.flutterflow.io/project/food-9iiqf2

Splash page:The splash page is the first screen displayed when users open the application. It introduces the branding of the app and provides a simple and clean visual experience before entering the main system. The purpose of this page is to create a professional first impression and improve the overall user experience.

As a design student, I focused on keeping the interface minimal and easy to understand. The button allows users to proceed directly to the onboarding process.

Onboarding page:

The onboarding page helps new users understand the main purpose of the application. It provides a short introduction to the takeaway food ordering service and highlights the convenience of using the app.

The onboarding process is designed with simple illustrations and limited text so that users can quickly understand the application without feeling overwhelmed. Users can swipe through the onboarding screens and continue to the next step.

Forgot password page:

The forgot password page allows users to recover access to their accounts if they forget their password. Users only need to enter their registered email address and submit a password reset request.

This feature improves usability and accessibility by reducing frustration when login issues occur. Firebase Authentication handles the password reset process securely.

Create account page:

The create account page allows new users to register for the application using their personal information, email address, and password.

Firebase Authentication is integrated into this page to provide secure account creation. User information is validated before registration to ensure data accuracy and security. Once the registration process is completed successfully, users can access the application using their newly created account.

Sign in page:

The sign in page allows existing users to access their accounts using their registered email address and password.

The login process is connected directly to Firebase Authentication, ensuring secure verification of user credentials. If the login information is correct, users are redirected to the main application dashboard. This feature provides a fast and reliable authentication experience.

Firebase Authentication Implementation

Firebase Authentication was integrated into the application to manage user registration and login functionality. The system supports email and password authentication, allowing users to create new accounts, log in securely, and reset forgotten passwords.

The authentication process was tested multiple times to ensure reliability and proper error handling. Successful user records can be viewed in the Firebase Authentication console.

CRUD Functionality

The application also integrates Firebase Firestore Database to support CRUD (Create, Read, Update, Delete) operations.

Create

Users can add new food items or records into the database. The newly added data is immediately stored in Firebase and displayed within the application.

Read

Users can view stored data retrieved directly from Firestore. The interface updates dynamically whenever changes occur.

Update

Users can modify existing records, and the changes are synchronized with Firebase in real time.

Delete

Users can remove records from the database. Once deleted, the item is automatically removed from both Firebase and the user interface.

This implementation demonstrates full database management functionality and satisfies the project requirements.

Reflection

During the development of this project, I learned how to connect a mobile application with backend services using Firebase and FlutterFlow. Before this assignment, I mainly focused on interface design and user experience. Through this project, I gained practical experience in user authentication, database integration, and dynamic data management.

One of the biggest challenges I faced was configuring Firebase Authentication and connecting it correctly with FlutterFlow. Initially, I encountered several errors related to authentication settings and database permissions. After researching documentation and testing different solutions, I was able to successfully implement both authentication and CRUD functionalities.

As a second-year design student, this project helped me understand that good application design is not only about visual appearance but also about functionality and user interaction. Learning how frontend design and backend services work together has improved my overall understanding of mobile application development.

If I were to continue improving this project, I would focus on enhancing the visual design, adding more advanced features such as user profiles and order tracking, and improving accessibility for different types of users. Overall, this project was a valuable learning experience that strengthened both my design and technical skills.



Comments

Post a Comment

Popular posts from this blog

Interactive Design Exercise 1

Image
Exercise 1 Week 1 Website Analysis For this exercise, I have selected five websites to review and analyze. The focus is on examining their design, layout, content, and functionality, while identifying strengths and weaknesses that influence the overall user experience (UX). Each analysis highlights the site’s purpose, main color palette, visual presentation, and interactive features, followed by an evaluation of how effectively the website communicates with its intended audience. Finally, recommendations are provided to suggest potential improvements for usability, performance, and brand impact. 1. https://www.juice.agency 2. https://culinaryodissey.uprock.pro 3. https://joseph-san.com 4. https://atom.uprock.pro 5. https://xlncdigital.com 1.   Website: juice.agency  （https://www.csswinner.com/winners） Purpose and Goals Juice is a creative branding and digital agency. Its main goal is to showcase its capabilities in branding, web design, and marketing, while also attracting po...
Read more

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

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