Product Design for Dispatch Solutions Startup in Singapore
Overview
RIO TechMobility is a startup based in Singapore that was established in 2022.
RIO is a dispatch SAAS platform that utilises its fleet mechanics and booking aggregator to address the problem of providing users with reliable and efficient transportation services.
It stands apart from competitors like Uber and Lyft by allowing businesses to provide ride services to their clients through its white-labelled driver and passenger apps.
RIO comprises four core dispatch services: Parcel, Ridesharing, Food and Grocery.
My Role
Product Design Lead for Ridesharing Platform
Deliverables
Design System, Screen Flows, High-Fidelity Design
Team
2 Designers, 4 Software Engineers, 1 Stakeholder
Scope
RIO Passenger and Driver Apps
Tools
Figma, Slack, ClickUp
Project Status
Pilot Testing (Partial NDA)
Challenge
The goal was to create an easy-to-use, intuitive ridesharing mobile app design for drivers and passengers apps. The stakeholders provided the following mockups and instructed to use RIO’s brand color.
Passenger App Mockup
Driver App Mockup
Execution
Design Process
1
Research & Analysis
2
Design System
3
Flows & Hi-Fi Design
4
Feedback & Iteration
1. Research & Analysis
Stakeholder Engagement: In discussions with RIO TechMobility and our team at Tech Kunja Pvt. Ltd., we recognised the need for a unified approach to our dispatch system. We decided to develop a design system that ensures consistency across both apps, a simple, scalable, and easy to update that perfectly aligns with the future requirements of RIO’s passenger apps and fleet services.
Competitor Analysis: I studied Uber and Lyft to understand their effective use of colour, layouts, and user flows, and how they overcome cognitive barriers in various instances.
2. Design System: Atomic Design Implementation
“Design System promotes consistency and cohesion, speed up your team’s productivity, establish a more collaborative workflow, establish a shared vocabulary, provide helpful documentation, make testing easier, and serve as a future-friendly foundation.”
—p96, Atomic Design by Brad Frost
2.1 Atoms
2.2 Molecules
2.3 Organisms
2.4 Components & Variants
3. Screen Flows & High-Fidelity Designs
After creating the design system and components, I started working on the screen flows and designs for both the Passenger and Driver apps. Below are some of the screen flows.
4. Feedback & Iterations
Working with my teammates at Tech Kunja, I iterated multiple times based on feedback and client discussions. We used Figma’s comment system to highlight screen areas, enabling faster responses and iterations.
Outcome
160+ Screens and 30+ Screen Flows for the ridesharing platform, one of the 5 core services of the RIO app.
Reflection & Future Work
The initial phase had strict time constraints, requiring us to prioritise certain features and design elements.
The main challenge was creating a cohesive design for RIO’s services: “Food,” “Grocer,” “Parcel,” and “Ride.” We focused on ride-sharing first due to the project’s scope and timeline.
With more time, the design system could have been refined at the atomic level, aiding future iterations.
RIO plans to extend the design system to food, grocery, and parcel services, each with unique interactions.
The Ride service apps will be pilot tested in specific areas. This phase is crucial for testing the design, gathering feedback, and making improvements.