Application Design 2 - Task 4 - Final Project – Completed App

07/07/2025 - 29/07/2025 (Week12 - Week14)

Teu Yu Tian / 0371923
Application Design 2 | Bachelors of Design (Honour) in Creative Media | Taylor's University
Task 4 - Final Project – Completed App

---

1. LECTURES:

---

2. INSTRUCTIONS:

REQUIREMENT:

Students will synthesis the knowledge gained in task 1, 2 and 3 for application in task 4. Students will create integrate visual asset and refine the prototype into a complete working and functional product experience. 

 Requirements 

1. Flutterflow published link
2. Flutterflow project (provide the App name as it appears in your flutterflow and add razif.mohamed@taylors.edu.my as collaborator)
3. Walkthrough Video Presentation of your app.
4. Blog link directly to your final project blog post

Work Progression

In Task 3, I built the basic structure and explore animation for my parking reservation app — basic sign-up/login, an interactive map, and initial booking flow.

Now in Task 4, I refine the app with completed interface building of the booking flow, integrated Firestore for actual function, and improved usability with animations, filters, and payment flow.

Function include:
1. sign up/login

2. Map and search function

3. Book parking and make payment

4. Save to favourite

5. other screen

Here is the overview screen and storyboard for the project.

Sign Up / Login (Now with Firestore Integration)

Task 3:

• Splash screen animation with logo

• Email & password sign‑up/login

• Slide left/right page transitions and navigation

Task 4 Updates:

• Username field added at sign-up

• Created user collection in Firestore to store profile details (email, username, etc.)

• Profile data such as username and email is now linked to the Settings page, updating dynamically based on user reference
  

Final Sign Up page

Firestore collection - User

User collection content

2. Map exploration and Search function

In Reserve page(Home page), user can ineract with the map, with zoom in and zoon out, they can search parking location by list or click on the horziontal parking list at the bottom to view details, recenter map to the location.

Map Exploration & Search Function

Task 3:

• Interactive Google Map (zoom & pan)

• Single static marker

• Horizontal parking list with shimmer loading

• Search bar, notification icon and Nearby Me button together slide in from top. Relocate button slide in from right side but with no function.

Task 4 Updates:

• Multiple map markers showed. Location refers to Firestore parkinglocation collection.

• Parking info expanded: added address, operating hours, price, booked status, and favourited location. 

• When tapping parking list card, map will recenters to corresponding location; tap arrow button to open Parking Information page

I replaced the location marker with my design, unfortunately, it can only show 1 type of marker, so the idea for showing different icon based on availability were unable to execute. 

Firestore Collection - parkinglocation

parkinglocation collection content

Google map function

Search & Filters:

• When tapping the search bar in the Reserve page, it opens the Search page with instant transition

• Search bar includes a scale animation for dynamic visual feedback after tapping

• Added parking type filter with workable function + location dropdown

• Price & distance filters not functional due to Flutterflow’s filter limit (only 1 >= or <= condition allowed)

• Bug: Filters update only after re-entering the page (unfixed)

filter bottom sheet

Booking & Payment – with Date/Time Picker

Task 4 New Page and Features:

• Parking Information Page: Displays parking location details (image, name, type, availability, distance, price rate, address, operation hours)

• On load transition and animation: Slide in animation for information card applied.

• Schedule Booking: Date & time pickers for start/end selection. 

• Schedule booking: when tap on the red edit button, user navigate to a Schedule Booking page to select date, start time and end time.

Schedule Booking page

I used Date and Time picker action in Flutterflow to show the pop up calendar and clock for user to set up the time. 

Date Picker

Time Picker

• After pressing Confirm button, it will go back to parking information page
• the time will update.
• Click Reserve Now button to go to confirmation page.

• Confirmation Page: Choose payment method from popup list

• Booking Successful Screen: Payment in process (animated loading circle) → Payment Successful (animated tick confirmation) → detail summary 

• Then, detail information slide in from bottom, with all element set with delay gap with 50ms for a more engaging animation.

• Navigation Navigate Me button: Choose between Google Maps or Waze

Reservation details

Payment Method bottom sheet

• Booking Successful Screen: Animated loading → tick confirmation → detail card reveal

• Navigation Option: Choose between Google Maps or Waze

Payment Successful 

Save to Favourites

• Users can save parking spots to favourites by tapping heart icon in Parking information page

• Saved locations stored in Firestore and displayed in “Saved” page

Favourited Location

FlutterFlow Project Files:

https://app.flutterflow.io/project/park-easy-8npg38

published link

https://parkeasy-yutian.flutterflow.app/

Recommend to resize to 393x852 for better experience

App Walkthrough:

Presentation video:

---

3. FEEDBACK

---

3. REFLECTION

Experience:

In Task 4, I focused on transforming the app from a functional prototype into a complete, polished product. I integrated Firestore to manage user profiles, parking locations, favourites, and booking data to ensuring all content updated dynamically. The booking and payment flows were finalised, including date and time selection, payment confirmation, and navigation options for Google Maps or Waze. Map interactions were enhanced with multiple markers linked to the horizontal parking list, animated payment processing, and confirmation ticks — were added for an engaging experience. I also polished the UI with improved transitions, animated button feedback, and consistent visual styling across screens.

Observation:

Throughout this process, I noticed that while FlutterFlow’s built‑in animation and transition tools are convenient, they have limitations in customisation. Firestore integration significantly improved responsiveness and created a more realistic experience for users. Small touches, like the scale animation when tapping the search bar and staggered element reveals, made the app feel more interactive and engaging. I faced some problem in setting up severe function. Flutterflow is both convinient yet hard to pick up for me. I some times to learned how to set up filter and search function, at the end it is still not polished yet. Other than that, I found that behaviour sometimes differed between Run Mode and Test Mode, making continuous testing essential. Most of the time my Test mode could not load my screen at all, so i have to keep testing on run mode, which takes longer time. 

Findings:

From this task, I learned that data integration and user interface feedback must work hand in hand to create a seamless user experience. Even small micro‑interactions can significantly enhance the perceived quality and user engagement. I also realised the importance of design‑solving skills, as adapting ideas to platform limitations can still result in effective and appealing outcomes. Most importantly, I found that delivering a stable and polished set of features is far more valuable than forcing in complex functionality that may not work reliably within the tool’s constraints. This task felt extremely practical as part of the UI/UX process, adding to my knowledge in designing a developable app and giving me a more professional perspective. Although I’ve only explored a small portion of FlutterFlow’s capabilities, this experience has shown me there’s still much more to learn.