Role
Product
Duration
MAU
Overview
This project involved designing and implementing new features in the TADA Driver App to comply with upcoming Singaporean regulations for Platform Workers, specifically focusing on Central Provident Fund (CPF) contributions and injury compensation. (CPF is comparable to RRSP in Canada)
The primary objective was to create a new feature screen within the TADA Driver App that clearly displays CPF contributions and related information, ensuring compliance with Singapore's new regulations aimed at providing better benefits and legal representation for private hire drivers. This involved extensive UI/UX design, iterative development, and collaboration across global teams.
Background
New regulations in Singapore mandated that TADA, along with other platforms, provide enhanced benefits to Platform Workers (e.g., private hire drivers), including compulsory CPF contributions, injury compensation, and legal representation for improved bargaining rights.
Collaboration
PM Team: CPF Logic, Team Review, Hi-fi Plans.
Design Team: Wireframes, UX Flow, UI Design, A/B Testing, Interaction, Design System.
Engineer Team: Native App Development.
QA Team: Data Analysis, Usability Optimization.
Requirement
The Singapore Product Team requested design mockups and ideas from the Korean Design Team to clarify the logic and specifications for implementing the new CPF features.
Outcome
Through a multi-round iterative design process, a final UI for the CPF feature was developed and integrated into the TADA Driver App's new balance screen, enhancing clarity and driver access to CPF information.
The project involved a comprehensive iterative design process across multiple rounds:
Round 01
Design Idea & Iteration Selection
Austin's initial design ideas were presented, leading to the creation of new UI screens for Iteration 1-4.
After discussions with the Global PM team and consensus from the Design team, Iteration 3 was selected as the foundation for further development.
Round 02
Detail UI Component Iteration
Based on Iteration 3, detailed UI components were refined. This included iterating on the Upper Section's background color, tab shapes, status icon arrangement, and the CPF Contribution Screen UI.
For the CPF Contribution Screen UI, the design team specifically addressed text overflows, dropdown button usage, the choice between flat vs. glassmorphism backgrounds, and the method for displaying tooltip windows.
Round 03
Content Consolidation & Visual Emphasis
Consolidating the consensuses from previous rounds, the contents were applied to the Round 3 UI screens.
A key design decision was to structure the CPF estimation into distinct tabs based on Net Earnings (NE) ranges (e.g., NE below 50, NE below 500, NE below 750, NE above 750).
To emphasize the estimated CPF application amounts for each NE range, a glassmorphism effect with CPF's green color was applied to parts of the background, making it visually prominent.
Further discussions focused on the dynamic movement of the range indicating bar and the display method for estimated calculation figures when selecting different range items.
Round 04
Integration into Driver App Flow
The consolidated UI screens from Round 3 were applied to the driver app's flow, specifically integrated into the new balance screen.
Two new tabs were created on the balance screen: "My Balance" and "My CPF."
In the "My Balance" tab, CPF data information was displayed alongside existing UI components.
The "My CPF" tab was dedicated to displaying detailed CPF information, allowing drivers to easily check their CPF progress.
My Approach & Impact
When this project began, the concept of CPF was entirely new to me. I meticulously analyzed the materials shared by the Singapore PM team, which helped me fully grasp the policy, functionality, and how to effectively display CPF information within the app's UI. Given the extremely tight schedule, the Singapore PM team provided a Hi-fi Plan incorporating all calculation formulas and policies. This significantly streamlined our work, allowing us to efficiently apply UX, UI, and design system elements. During the final stages of UI/UX work, I communicated with backend developers about integrating actual data based on CPF calculations. It was fascinating to learn about the complex logic and code behind how these numbers are displayed in the app, especially since backend developers rarely collaborate directly with UX designers.