Role
Product
Duration
MAU
Overview
This project focused on improving the TADA Rider App's pending screen UI/UX to visually clarify the driver matching process and provide various useful information, thereby making the rider's waiting experience more interactive and positive. It integrated a Pin & Radar animation, looping status messages, and multi-purpose messages and animations editable via an admin tool, enhancing information delivery efficiency and user engagement.
Background
Recognizing a need for a more engaging and transparent waiting experience, the design team was tasked with revamping the rider app's pending page.
Collaboration
PM Team: Data Review, Low-fi Plans.
Design Team: UT, Wireframes, UX Flow, UI Design, A/B Testing, Interaction, Design System.
Engineer Team: Native App Development.
QA Team: Data Analysis, Usability Optimization.
Problem
Through in-depth analysis of user testing data and comprehensive competitive analysis against rival apps like Grab and Gojek, significant UI/UX differences were identified in the pending screens.
The existing TADA Rider App's pending page was found to be static and non-interactive, failing to effectively communicate the ongoing driver matching process or provide reassuring updates.
This made riders feel worried or confused while waiting. Because of these important findings, we set up the scope for revamping the Rider App's Pending flow, and the design work began.
Solution
A redesigned pending screen was implemented, featuring dynamic animations, a looping status indicator, and multi-purpose informational messages, all aimed at enhancing interactivity and rider engagement.
The solution involved a comprehensive overhaul of the pending screen UI, incorporating several key interactive elements:
Solution 01
Pin & Radar Animation:
The existing Pin & Radar Animation was static. Based on competitor analysis (specifically Gojek), we decided to apply a dynamic Pin motion and expand the Radar Animation to fill the entire map, enhancing visual engagement.
Solution 02
Status Indicator:
The previous Status Indicator was fragmented, positioned at the top of the map. To resolve this, we relocated the Status Indicator to the bottom information area and integrated a progress bar-style loading animation, consolidating similar information for better clarity.
Solution 03
Multi-Purpose Text and Animation:
This was a new element introduced to the screen. Considering TADA's service in five countries, I designed the UI/UX for Multi-Purpose Text and Animation with scalability in mind, allowing the operations team to easily upload/delete text content and animations via an admin tool.
Content Categories (Total 10): Examples of the diverse content displayed include:
General Reminder Animation: "Please check your ride product and payment method" / "When using the cash service, please make sure that you have available cash."
Fun Fact Animation: "Did you know TADA is available in 5 countries" / "Tada is a ride-hailing service that continues to grow every year. Feel free to use it."
Traffic/Road/Safety Advisory Animation: "Please remember to wear your seat belt" / "When you get off, make sure to look around and get off"
Upcoming Event Animation: "F1 is coming to Singapore soon!" / "Happy New Year!"
Partnership/Marketing Campaign Animation: "Complete a ride with DBS credit card and get a voucher" / "Do your mission and receive special prizes and vouchers"
Solution 04
Animation Section Design Evolution & Fidelity:
During the placement of animations to the right of the Multi-Purpose Text in the lower information area, we discussed the optimal size and level of detail for animation production.
After comparing Low and High fidelity versions, we decided to produce animations in Low fidelity. We also identified that animations created at the app's display size (80x80px) would distort, necessitating production at 320x320px for optimal quality.
My Approach & Impact
During this project, I traveled to the Singapore branch to conduct direct competitor analysis and user testing on ride-hailing apps like Grab and Gojek. This provided a crucial insight: interactive UIs were extensively applied in their pending flows. I then worked closely with my team, considering TADA Rider App's existing design system, to discuss and implement solutions from a UI/UX perspective. This experience reinforced that even great ideas require thorough discussion and iteration—considering usability, aesthetics, and accessibility—before they can be successfully applied to a live app. I particularly enjoyed applying interactive UI elements to an operational app.