UI Revamp & Multi-Theme Branding for a Rideshare App
Redesigned FLEET's rideshare app for accessibility and speed, cutting payment time by 10–20% and building a multi-theme system that lets the business onboard new clients instantly.
Context
The rideshare booking app was built by developers using off-the-shelf UI libraries — functional, but not designed around the people using it. Inaccessible, friction-heavy flows led to booking errors and abandonment, and because the interface was tied to a single brand, every new transport client meant a costly custom build. I led the end-to-end redesign, improving usability and accessibility for riders while building a multi-theme, white-label system to help the business scale faster.
Problem
The app's UI was assembled without UX input, creating three compounding issues:
Poor usability – An outdated, cluttered interface made booking a ride frustrating rather than seamless.
No accessibility standards – Undefined visual hierarchy and small font sizes made it hard for visually impaired riders to pre-book and pay with confidence.
No scalability – Without a themeable brand system, the business couldn't onboard new transport clients quickly – limiting growth and revenue.
[Old app screens: Home, Booking, Loading, Confirm Location, Add Payment. Small font sizes fell short of accessibility standards, and poor visual hierarchy increased cognitive load – creating friction throughout booking and costing taxi organisations lost conversions.]
Research
The challenge – solving for external riders based largely on internal stakeholder knowledge, with limited direct access to customers. I combined five research methods to validate assumptions before and after launch.
Heuristic audit – Evaluated the existing app against Nielsen's 10 usability heuristics and mobile best practices, flagging 20+ issues.
Several fell below accessibility compliance thresholds, spanning visual hierarchy, touch target sizing, and colour contrast.
Accessibility testing – Ran accessibility spot-checks with 5 internal staff using screen magnification, maximum font sizes, and screen readers.
Key finding: participants using maximum font-size settings couldn't read critical CTA and payment text — the original UI wasn't built for variable text scaling. This became the catalyst for the card-based, variable-height component approach used in the redesign.
QA testing – Validated design iterations against maximum device font-size settings, confirming the standard font size broke legibility.
I mocked key screens at larger font sizes and annotated card components with variable height, enabling developers to build for legible copy and CTAs at any font size.
[Image: Annotated screens — QA testing for the variable card height developer handover]
Comparative review – Benchmarked 3–5 competitor rideshare apps (13 Cabs, Uber, DiDi, GM Cabs, Waze).
This surfaced patterns in CTA placement and colour contrast that directly informed the new design direction.
Stakeholder input – Ran a workshop with the CEO and sales team to understand onboarding pain points for new transport clients.
This surfaced the need for a themeable, white-label system as a core business requirement — not just a design nice-to-have.
Solution
1. Rebuilt the UI foundation
Applied core UI principles — consistent spacing, card-based layouts, and responsive design across devices — using icons and colour to signal function.
2. Clarified visual hierarchy
Defined primary, secondary, and tertiary CTAs, headings, and colour treatment so the most important action was always obvious, reducing friction throughout the journey.
[Video: Before/after home screen]
3. Designed for accessibility
Increased font sizes, improved colour contrast, and enlarged tap targets on key buttons for visually impaired users. Testing revealed the initial font sizing didn’t account for riders using maximum device settings — I mocked key screens at larger sizes and annotated card components with variable height for developer handover.
Testing revealed the initial font sizing didn’t account for riders using maximum font-size settings on their devices. I mocked key screens at larger font sizes and annotated card components with variable height for developer handover – ensuring copy and CTAs stayed legible at every setting.
4. Solved for business scalability
Built a multi-theme system using Material 3 Design Kit, updating Figma variables and colour schemes to enable instant switching between light, dark, light monochrome, and dark monochrome modes. Material 3 was chosen over a custom system to reduce build time and align with platform-native accessibility defaults.
[Video: multi-theme switching]
5. Added a trust and feedback loop
Introduced a “Rate Your Driver” screen at trip end, giving future riders confidence to book based on peer-rated drivers.
Results
100% UI redesign completed in 3 months across the full app experience — onboarding, booking, and payment — supporting the company's tight timeframe and speed to market
10–20% reduction in payment time, driven by clearer visual hierarchy — translating to a 10–15% income increase for drivers and higher revenue for taxi operators
Multi-theme, white-label system now lets new client brands be applied instantly, directly supporting client acquisition and scaling goals
[Final image]
