Application Design II - Final Compilation
Application Design II
Bachelor of Design (Hons) in Creative Media / Taylor's University
Ms. Aiman introduced the software that will be used in this module, FlutterFlow. We then reviewed our previous Application Design 1 project by using AI-generated feedback. This activity marked the beginning of Task 1, which focuses on self-evaluation and reflection, where we identify areas for improvement and refine our previous design. The objective of this project is to document the issues, challenges, and limitations found in the original mobile app design, and propose design improvements based on the findings.
Planning and Build Process
The project began with a self-evaluation of my Application Design I final project by comparing AI-generated feedback with feedback from my lecturer. After reviewing both perspectives, I identified several areas that could be improved to enhance usability and the overall user experience. The redesign focused on reducing cognitive overload by simplifying the Fare Forecast display, adopting a Flat 2.0 design style to reduce visual noise, ensuring all buttons met the 44 × 44 pixel accessibility guideline, improving layout consistency by repositioning interface elements, enhancing the visibility of input fields with rounded containers, and increasing the size of important text and icons to improve readability. Throughout the redesign, I applied UI/UX principles such as consistency, proximity, readability, and aesthetic usability to create a cleaner and more user-centered interface.
Reflection
This project taught me that evaluating my own work is just as important as creating it. Although I had already conducted usability testing in Application Design I, I realized there were still many opportunities to improve the interface. One of my biggest achievements was redesigning the application based on design principles rather than personal preference, resulting in a cleaner and more usable interface. At the same time, I learned that I previously focused too much on visual aesthetics, such as heavy shadows and decorative effects, instead of prioritizing usability. Through this reflection, I developed a more user-centered mindset and recognized the importance of accepting feedback, continuously evaluating my work, and refining my designs to better meet users' needs.
The development process began by designing the application's authentication flow, including the login and sign-up pages. After completing the UI, Firebase Authentication was integrated to enable secure user registration and login. Next, Firestore was connected to store and retrieve ride-booking data, allowing the application to perform full CRUD (Create, Read, Update, Delete) operations.
Firebase Authentication was used to manage user registration, login, logout, and session management using email and password. Firestore was integrated to store user profiles and ride-booking information. The application supports CRUD operations, allowing users to create bookings, view booking details, update ride information such as proposed fare and driver selection, and delete or decline bookings when necessary.
Key Features (Screenshots)
- Login page
- Sign-up page
- Create Profile page
- Splash Screen Page
- Ride booking (Create)
- Propose Fare (Read and Update)
- Driver selection (Update)
- Driver decline or booking cancellation (Delete)
This project helped me gain a better understanding of integrating FlutterFlow with Firebase Authentication and Firestore. Successfully implementing the complete CRUD workflow and authentication system was one of my biggest achievements. However, I faced several challenges, particularly with configuring Firebase, understanding how data is passed between pages, and troubleshooting differences between Run Mode and Test Mode. Despite these difficulties, I was able to resolve the issues through testing and debugging, which improved both my technical skills and confidence in building functional mobile applications.
Micro animations included button shrink effects, loading indicators, and system error messages, while macro animations consisted of smooth page transitions, splash screen animations, and animated pop-up dialogs for booking confirmation and ride cancellation.
- Button Taps: When a user taps any call-to-action (CTA) button, such as "Log In," "Book," or other interactive buttons.The button shrinks 95% that gives the user an instant visual indicator that they tapped it.
- Loading States: When a user taps "Find a driver," a spinning loading circle appears inside the button while the app looks for data so that users do not have to guess if the app is frozen.
- System Messages: If there is an error, for example if the user attempts to log in without an existing account or enters an incorrect email address or password, an error message will be displayed at the bottom of the screen.
- Smooth Page Transitions: Instead of switching pages suddenly, I designed the page transitions to look smooth by adding slide animations when users move between screens, to guide users through the ride-booking process and create a more comfortable user experience.
- Pop-up Menus: When pop-up boxes appear, like the "Toll Charge Notice" or "Cancel Ride Notice", they smoothly slide in from the right side, while their opacity gradually transitions from 0% to 100%, to create a smooth feeling.
- Starting the App: After a successful login, I designed a smooth loading screen that gradually reveals the inDrive logo using a fade-in opacity animation. This transition creates a seamless connection between the login process and the main app, providing users with a smoother entry experience.
Screen Record of the Animations Implemented
This task helped me understand how animations can improve the overall user experience. Before completing this project, my application mainly consisted of static screens. By implementing micro-interactions such as button animations and loading indicators, I learned how to provide users with immediate visual feedback, reducing uncertainty during interactions. I also found that smooth page transitions and animated pop-up dialogs made navigation feel more natural and easier to follow. One of the main challenges was selecting suitable animations without making the interface feel distracting. Overall, this project improved my understanding of creating responsive, interactive, and user-friendly mobile applications.
Comments
Post a Comment