Application Design 2 || Final Project : Completed App
07.07.2025 - 27.07.2025 || Week 12 - Week 14
Hanson Pea Wei Hao || 0359463
Application Design 2 || Bachelor of Design (Honours) in Creative Media || Taylor's University
Final Project - Completed App
Hanson Pea Wei Hao || 0359463
Application Design 2 || Bachelor of Design (Honours) in Creative Media || Taylor's University
Final Project - Completed App
Lists
1. Instructions
2. Feedbacks
3. Reflections
Figxx, Walkthrough for Socar App
Working on my SOCAR-inspired app in FlutterFlow has been a new but exciting experience that helped me connect design and development in ways I hadn’t explored before. Unlike static tools like Figma, FlutterFlow allowed me to bring my designs to life with animations and real backend logic through Firebase. It didn’t just feel like designing screens—it felt like actually building an app.
I began by experimenting with basic transitions like fade-ins and slide-ins for the splash screen and homepage ads. Even small animations, such as a car sliding into view or a button gently expanding, made the app feel more polished and engaging. These animations helped guide user attention and created a better flow between screens.
As I progressed, I used Firebase to handle data storage, user interaction, and real-time updates—features that brought the app closer to functioning like a real-world product. Setting up app state variables, user authentication, and Firestore logic made the process feel more like software development than just visual design.
That said, the journey wasn’t always smooth. Some functions I wanted to implement—like full payment gateway integration or advanced logic—were left unfinished due to time or complexity. I also faced challenges with animation timing and overlapping effects. However, I learned a lot through trial and error, tutorial videos, and guidance from my lecturer.
One feature I was especially proud to implement was a working dark mode toggle. With FlutterFlow’s prebuilt options, I learned how to connect design systems to dynamic user preferences.
Overall, this project taught me that building an app is not just about how it looks but also how it works and feels. I’ve gained more confidence in using Firebase and FlutterFlow together, and even though the app isn’t perfect, finishing it has made me eager to keep improving and learning.
I began by experimenting with basic transitions like fade-ins and slide-ins for the splash screen and homepage ads. Even small animations, such as a car sliding into view or a button gently expanding, made the app feel more polished and engaging. These animations helped guide user attention and created a better flow between screens.
As I progressed, I used Firebase to handle data storage, user interaction, and real-time updates—features that brought the app closer to functioning like a real-world product. Setting up app state variables, user authentication, and Firestore logic made the process feel more like software development than just visual design.
That said, the journey wasn’t always smooth. Some functions I wanted to implement—like full payment gateway integration or advanced logic—were left unfinished due to time or complexity. I also faced challenges with animation timing and overlapping effects. However, I learned a lot through trial and error, tutorial videos, and guidance from my lecturer.
One feature I was especially proud to implement was a working dark mode toggle. With FlutterFlow’s prebuilt options, I learned how to connect design systems to dynamic user preferences.
Overall, this project taught me that building an app is not just about how it looks but also how it works and feels. I’ve gained more confidence in using Firebase and FlutterFlow together, and even though the app isn’t perfect, finishing it has made me eager to keep improving and learning.
Comments
Post a Comment