Application Design 2

 Application Design Journey

Student ID:0379395

Student Name:HE KEHUA

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

From Prototype Design to Functional Mobile Application Introduction Throughout this module, I developed my understanding of mobile application design and development through different stages, starting from interface design, user experience improvement, application prototyping, interaction design, and finally building a functional MVP application.

At the beginning of this module, my focus was mainly on creating visually attractive interfaces and designing user flows. However, as the projects progressed, I gradually learned that a successful application is not only about the appearance of the interface but also requires interaction logic, database management, user authentication, and consideration of user experience.

This portfolio documents my learning journey throughout the module, including the improvements I made from my initial design concept, my experience using FlutterFlow and Firebase, the implementation of interactive elements, and the development process of my final application.

Project 1: Application Design Improvement and Prototype Refinement Overview The first stage of this module focused on reviewing and improving my previous application design based on feedback received from my original Figma prototype.

Before this task, my main focus was creating a complete interface with attractive visual elements. However, after reviewing my design, I realised that some areas needed improvement, especially regarding user flow, layout organisation, and usability.

(Insert screenshot: Original Figma Design)

Design Improvements Improving User Flow One of the main improvements I made was restructuring the user journey. Previously, some functions required unnecessary steps, which could make the application experience less efficient.

I reorganised the page structure and created a clearer navigation system so users could understand the purpose of each page more easily.

(Insert screenshot: Improved User Flow)

Improving Interface Consistency I also improved the visual consistency of the application by adjusting spacing, component placement, typography, and colour usage.

The previous design focused more on visual presentation, while the improved version considered how users would interact with different elements.

Through this process, I learned that good application design requires a balance between aesthetics and functionality.

Reflection This project helped me understand the importance of receiving feedback and continuously improving a design.

Before this task, I usually judged my design based on personal preference. However, I learned that professional designers need to consider users’ needs, accessibility, and usability when making design decisions.

This became an important foundation for my later application development projects.

Project 2: FlutterFlow Application Development and Firebase Integration Overview After improving my design concept, the next stage was transforming the static Figma prototype into a functional application using FlutterFlow.

This was a significant step because I needed to move beyond visual design and start considering application logic and backend integration.

(Insert screenshot: FlutterFlow Development Interface)

Building Application Structure Using FlutterFlow, I recreated the designed interfaces and developed different application pages.

The main development process included:

Creating application screens

Setting up page navigation

Designing reusable components

Adding user interaction workflows

Compared with my previous Figma prototype, FlutterFlow allowed me to test how users would actually interact with the application.

I learned that an application prototype should not only demonstrate the appearance of the product but also show how users complete tasks through interaction.

Firebase Integration During this stage, I started exploring Firebase integration with FlutterFlow.

Firebase helped me understand how real applications manage user information and dynamic data.

The main functions I explored included:

Firebase Authentication

Firestore database connection

Data retrieval and management

Initially, connecting FlutterFlow with Firebase was challenging because I needed to understand the relationship between the interface and backend services.

However, through testing and troubleshooting, I gradually learned how frontend actions connect with database operations.

Reflection This project changed my understanding of application development.

Previously, I mainly focused on interface design, but this task showed me that a complete application requires both design thinking and technical implementation.

I started to understand the importance of backend systems and how they support the user experience.

Project 3: Micro Interaction Prototype Overview The third project focused on improving the application experience by adding micro interactions and animations.

The purpose of this project was to make the application feel more responsive and provide users with better feedback during interaction.

(Insert screenshot/video: Animation Examples)

Animation Implementation During this project, I implemented different interaction effects, including:

Button click responses

Disappearing effects

Rotation effects

Fade-in and fade-out animations

Page transition effects

These animations were designed to support user actions instead of only adding decorative effects.

For example, button interactions provide users with immediate feedback after clicking, while transition animations create smoother movement between different pages.

Learning Outcome Through this project, I realised that animation plays an important role in user experience design.

A good animation should help users understand what is happening in the application rather than making the interface unnecessarily complicated.

This knowledge was later applied to my final application development.

Final Application: Takeaway Food Recommendation App Application Concept For my final application project, I developed a Takeaway Food Recommendation App using FlutterFlow.

The purpose of this application is to help users quickly discover suitable takeaway food options based on their preferences.

The idea was inspired by a common problem among students. Many students spend time deciding what food to choose, especially when they have different tastes or dietary requirements.

Therefore, this application provides a simpler way for users to explore food choices.

(Insert screenshot: Final Application Homepage)

Development Process Interface Development The first stage of development was creating the application structure in FlutterFlow.

The main pages included:

Welcome page

User preference selection

Food recommendation page

Food information page

User profile page

I focused on creating a simple and clear user journey so users could complete tasks with fewer steps.

Firebase Firestore Database To make the application more functional, I integrated Firebase Firestore as the database system.

Instead of using fixed information, food recommendation data was stored dynamically in Firestore.

The database contains information such as:

Food name

Food image

Food category

Food description

Food preference type

The application retrieves data from Firestore and displays it dynamically.

I also implemented CRUD operations:

Create New food information can be added into the database.

Read The application reads and displays food information from Firestore.

Update Existing food information can be modified.

Delete Unnecessary records can be removed.

This process helped me understand how real applications manage and update data.

(Insert screenshot: Firebase Firestore Structure)

Firebase Authentication Firebase Authentication was implemented to provide secure user account management.

Users are able to register and log in using email authentication.

This improved the professionalism of the application because user information is managed through Firebase instead of being stored manually.

Through this process, I learned that application development requires responsibility towards user data protection and privacy.

(Insert screenshot: Firebase Authentication Setup)

Animation and Interaction Implementation To improve the overall user experience, I implemented both micro and macro animations.

Micro animations included:

Button interaction feedback

Loading effects

Image movement

Selection animations

Macro animations included:

Page transition effects

Modal interactions

These animations helped create a smoother and more engaging user experience.

Challenges and Solutions Firebase Configuration Issues One of the biggest challenges during development was connecting Firebase correctly with FlutterFlow.

At the beginning, some database functions did not work properly because of configuration problems.

I solved this by checking the Firebase settings, database structure, and FlutterFlow backend connection step by step.

Understanding Application Logic Another challenge was changing my thinking from designing screens to building a functional application.

A visual prototype only requires good design, but a real application requires workflows, conditions, and data management.

Through this project, I improved my understanding of how different parts of an application work together.

Time Management Since the final application combined design, database, authentication, and animation, managing development time was challenging.

I learned to prioritise important features first and gradually improve additional details.

Professional and Ethical Considerations During the development process, I considered professional responsibility when creating the application.

Firstly, user data should be handled securely. Firebase Authentication provides a safer method for managing accounts.

Secondly, only necessary information should be collected from users to reduce privacy risks.

Lastly, database operations should be carefully managed to avoid incorrect information updates.

This project helped me understand that professional application development requires not only technical skills but also responsibility towards users.

Overall Reflection Looking back at my journey throughout this module, I can see a clear improvement from creating a simple interface prototype to developing a functional MVP application.

At the beginning, I mainly focused on visual design and user interface presentation. However, through each assessment task, I gradually learned the importance of interaction design, database integration, authentication, and application logic.

The biggest achievement of this module was learning how to transform an idea into a working application using FlutterFlow and Firebase.

Although I still need to improve my technical knowledge, especially in backend development and advanced programming, this experience gave me more confidence in creating interactive digital products in the future.

Overall, this module helped me understand that a successful application requires a combination of creativity, technical ability, user consideration, and continuous improvement.