Royal Rides OS
Business Operations Platform
- Role
- Lead Product Designer · End-to-end build
- Focus
- Product Design · SaaS · B2B · Design System
- Built with
- Figma · Lovable · React · Supabase
- Product Design
- SaaS
- B2B
- Design System
The operating system behind Royal Rides.
As Royal Rides grew from a small fleet to 11 motorcycles, spreadsheets and computer notes became increasingly difficult to manage.
I designed and built an internal platform that connects bookings, fleet management, maintenance, documents, freelancer payments and parts inventory in one system.
The problem
Spreadsheets worked. Until they didn't.
Royal Rides started with three to five motorcycles, where bookings and maintenance could still be managed manually. As the fleet grew to 11 bikes, important information became increasingly difficult to keep connected, from booking details and customer IDs to maintenance, documents and freelancer payments.
The problem wasn't simply having more information. It was keeping it connected.
The system
One system for the whole operation.
I designed the OS around the way Royal Rides actually works, connecting bookings, fleet management, maintenance and financial information in one place.
The system needed to give us a quick overview of the business while making detailed information available when it was needed.
The daily overview
Summary Dashboard
A central view of the operation with quick booking entry, revenue tracking and freelancer commission breakdowns, alongside a calendar timeline for managing fleet availability and upcoming bookings.
Summary Dashboard
Royal Rides OS
Finding the right direction
Concept Board
Early UI exploration comparing navigation, layout and component approaches before refining the product into a calmer, more focused visual system.
Concept Board
Royal Rides OS
A system designed to grow
Components
A reusable component library covering the booking system's core building blocks, keeping the interface consistent and providing patterns that can be reused as the platform expands.
Components
Royal Rides OS
Fleet management
From 3–5 motorcycles to 11, without relying on memory.
When the fleet was small, remembering mileage and maintenance was manageable. With 11 motorcycles, it became increasingly difficult to remember when brake pads were changed, how much mileage each bike had accumulated, or when servicing was due.
The OS gives every motorcycle its own operational information, including specifications, mileage and service alerts.
Fleet Management
A dedicated fleet view showing each motorcycle's specifications, mileage and service information. Quick feature tags make important details easier to find when answering customer questions, while service information helps the team keep track of upcoming maintenance.
Fleet Management
Royal Rides OS
Responsive
The office isn't always a desk.
Royal Rides is a physical business, so the platform needs to work while managing customers and motorcycles away from a large desktop screen.
The core workflows were adapted for smaller screens rather than simply shrinking the desktop interface.
Summary · Mobile Responsive
The mobile layout replaces dense desktop tables with booking cards and a simplified calendar view, keeping quick booking and scheduling information accessible in the browser.
Summary · Mobile Responsive
Royal Rides OS
Fleet information on the go
Fleet · Mobile Responsive
Motorcycle cards keep specifications and pricing accessible on smaller screens, making it easier to check and update fleet information while working with the bikes.
Fleet · Mobile Responsive
Royal Rides OS
What changed
From WhatsApp notes to complete bookings.
Dates, pickup time, motorcycle and client ID are now captured together during the booking conversation. The team can then generate the required PDF document immediately and send it to the customer.
From memory to a maintenance history.
Mileage, servicing and parts changes stay connected to each motorcycle and can be checked whenever the team needs them, whether that's in two weeks or two months.
From manual calculations to automatic tracking.
Freelancer fees are calculated automatically from each booking, making it easier to track what needs to be paid, what has already been paid, and total spending across monthly and yearly periods.
From boxes to visible stock.
Common replacement parts such as tyres, clutch and brake handles and turn signals can now be recorded and tracked, so the team can see what's available without searching through physical storage.
Figma to product
Designed in Figma. Built into a working product.
I didn't want the project to stop at a prototype.
I designed the product in Figma and built the working application using Lovable, React and Supabase, taking the UX architecture and component system into a deployed internal tool.
Design → Prototype → Build → Deploy
What's next
Turning local knowledge into personalized trips.
We're currently mapping Malaysia and building a curated collection of places and points of interest based on our own experience, from beaches and food to attractions, hotels and places worth visiting.
The next step is to connect that knowledge to the booking experience.
A short questionnaire could capture what a customer is looking for, then an AI agent could use our curated locations and routes to generate a personalized trip plan, delivered as a PDF with maps and recommendations.
The goal isn't generic AI travel planning. It's turning our own experience of Malaysia into part of the product.
More than a dashboard.
Royal Rides OS started as a way to replace spreadsheets and scattered notes. It has become the internal system we use to manage bookings, motorcycles, maintenance, payments and inventory as the business continues to grow.
It's not a concept. It's the system we actually use to run Royal Rides.
The brand behind the system
Before Royal Rides OS, Royal Rides started as a brand, website and booking experience. The same design thinking that shaped the operating system also built the customer-facing side of the business.
Royal Rides
Royal RidesMotorcycle Rental Platform