Application Design 2 - Final Project
Application Design 2 - Final Project
For this project, my primary goal was to elevate the app's interactivity to move beyond a static prototype. I started by focusing on micro-interactions, specifically integrating Lottie animations for the "Favorite" feature. Initially, I simply placed the animation file, but I quickly realized it needed to respond to user input dynamically. I spent time configuring the Action Flow to ensure the "heart burst" effect only triggers On Tap and plays Once, successfully transforming a mundane click into a rewarding visual moment.
However, the journey wasn't without setbacks. I ambitiously attempted to redesign the payment gateway interface to mimic real-world local services like Maybank2u and Alipay. I wanted the checkout process to feel 100% authentic by embedding similar web-view styles and UI layouts. Unfortunately, this implementation proved to be overly complex and visually inconsistent within the FlutterFlow environment. The "realistic" interface clashed with my app's design system and created a disjointed user experience.
Recognizing this, I decided to pivot. I scrapped the complex banking UI in favor of a cleaner, more streamlined in-app payment summary. To compensate for the simplified payment screen, I focused on closing the feedback loop elsewhere—specifically by building the "Downloaded" success HUD for the invoice page. This experience taught me that in prototyping, consistent user flow often outweighs forced realism.
1. Animation Selection & Preparation I started by using the LottieFiles editor to select a specific heart animation. Instead of a simple color change, I chose an animation that transitions from an outline to a filled red heart with a "burst" effect. This provides immediate and satisfying visual feedback to the user.
2. Widget Configuration in FlutterFlow
In FlutterFlow, I replaced the standard static icon with the LottieAnimation widget. To ensure the animation functions correctly as a UI control rather than a looping video, I had to adjust the properties carefully. I specifically disabled "Auto Animate" in the settings panel. This step was crucial to prevent the hearts on the product cards from playing automatically when the page loads.
3. Setting Up the Action Flow
The final step was programming the interaction logic. Using the Action Flow Editor, I configured the trigger to be "On Tap." I set the action to Lottie Animation -> Play. This setup ensures that the heart animation only activates when the user intentionally clicks the button, transforming a static tap into a responsive, high-fidelity micro-interaction.
Booking Date System
I moved on to implementing the essential Booking Date Page, which allows users to select their rental duration.
Calendar Integration: I built a dedicated
BookingDatePageincorporating a calendar widget.Date Selection Logic: The UI is designed to clearly display the "Start Date" and "End Date" at the top. I configured the layout to dynamically update these text fields based on the user's selection on the calendar.
User Flow: I added "Clear" and "Confirm" buttons to give users full control over their selection, ensuring the booking data is captured correctly before proceeding to checkout.
Week 12-13: Micro-interactions & Booking Logic Implementation
For these two weeks, I focused on two major areas: enhancing user engagement through animated micro-interactions and building the core functionality for the booking system.
1. "Like" Interaction with Lottie
To replace static icons with dynamic feedback, I integrated Lottie animations for the product "Favorite" feature.
Asset Customization: Using the LottieFiles editor, I selected a heart animation that transitions smoothly from an outline to a filled state.
Logic Configuration: In FlutterFlow, I replaced the standard icon with the
LottieAnimationwidget. I specifically disabled "Auto Animate" and configured the Action Flow to trigger "On Tap -> Play". This ensures the "heart burst" effect only occurs when the user actively interacts with the item.
2. Booking Date System
I moved on to implementing the essential Booking Date Page, which allows users to select their rental duration.
Calendar Integration: I built a dedicated
BookingDatePageincorporating a calendar widget.Date Selection Logic: The UI is designed to clearly display the "Start Date" and "End Date" at the top. I configured the layout to dynamically update these text fields based on the user's selection on the calendar.
User Flow: I added "Clear" and "Confirm" buttons to give users full control over their selection, ensuring the booking data is captured correctly before proceeding to checkout.
Week 14
Working on this final project has been both a challenging and rewarding experience that pushed me to apply everything I’ve learned in UI/UX design, animation, and app prototyping. The goal was to redesign the Trevo app with a focus on enhancing the booking and payment flow while making the entire car-sharing experience more polished, intuitive, and trustworthy. From the start, I wanted the app to feel close to a functioning product, even though it’s a prototype. To achieve that, I did research on real platforms like SoCar and Maybank2u, using them as references to design flows that users are already familiar with.
Throughout the process, I constantly refined the user flow, from the Sign-In and Verification system to the multi-step booking process — including Car Details, Rental Duration, Insurance Selection, and Payment Method. I made sure the logic, transitions, and feedback were clear. I also explored how to simulate a real FPX payment process, even within the limitations of FlutterFlow. For instance, I manually designed the countdown timer to start on tap and created the illusion of a real banking flow through a series of linked pages that resemble Maybank2u’s UI.
In terms of visual and interactive enhancements, I paid close attention to micro-animations and feedback cues. I added animations to the booking button, a pop effect for the "Favorite Car" feature, and a confirmation message when a booking request is submitted. I even included a Document Upload simulation for the driving license verification using the snapshot function — all to make the app feel more responsive and engaging. The Car Category auto-slide and Lottie-based loading screen also contributed to a more dynamic user interface.
Of course, there were some platform limitations — for example, some Lottie animations don’t auto-play properly on first load in web view, and automatic countdown logic isn’t supported, but I worked around them creatively to preserve the user experience. These small challenges helped me better understand how to balance design intention with technical constraints.
This project has significantly improved my understanding of user-centered design, prototyping in FlutterFlow, and how small details like animations and flow validation can greatly improve usability. It also reminded me that good UX isn’t just about clean visuals — it’s about guiding users naturally and giving them clarity at every step. I'm proud of how far this project came, and it has given me more confidence in both designing and communicating interactive experiences that feel real and thoughtful.
评论
发表评论