Seamless Boat Booking Experience for Travel Enthusiasts
Boatmu is an online boat ticket booking platform designed to streamline the process of finding, comparing, and booking boat trips across various island destinations with zero friction.
MAIN GOAL
To digitize and streamline Malaysia’s marine tourism landscape by transitioning traditional boat operators to a centralized digital management system while giving travelers a seamless, reliable platform to discover and book island hopping, ferry transfers, private charters, and sea activities.
Problems
Manual Operations: Boat operators rely on paper logs, phone calls, WhatsApp messages, and cash payments, leading to double bookings and lost revenue.
Lack of Visibility: Operators struggle to showcase their services and to stand out in the competitive market.
Fragmentation: Users have to "hunt" for prices in social media, as there is no central system dedicated specifically to marine tourism.
The Payment Loop: Users must send a bank-in slip manually via WhatsApp and wait for a human to verify it. This creates "booking anxiety" Did they get my money? Is this a scam?
Solutions
Digitalize System: A single digital dashboard for boat operators to manage booking, seat availability, passenger manifests, and payments in real time.
Clarity: Product implementation on the Boatmu main page, and also create a special link for each provider to showcase all of their trips.
Centrelize: Implemented a trip card that provide all of the information about the trip that breaks down the itinerary, destinations, item include and map.
Automated Trust: Integration of local payment gateways (FPX/Card) with an Instant Confirmation Screen. No more sending screenshots of bank slips.
DESIGN PROCESS
Research
- User Research
- User Persona
- Competitive Analysis
Ideation
- User Flow
- Design Direction
- Wireframe
Design
- Visual Concept
- Design system
- Icon Design
- Prototype
Evaluate
- User Testing
- Gather Feedback
Field Research Report: Pulau Redang
On-ground research conducted at key maritime gateways to validate ecosystem bottlenecks across boat operators and travelers.
On-ground qualitative interviews with boat owner, boat operator, and booth operators.
Structured quantitative/qualitative intercept surveys with domestic and international travelers.
1. Boat Provider Insights (Operator Side)
Tide & Monsoon Weather Uncertainty
Issue: Schedules frequently shift due to low river tides or sudden sea condition shifts.
Current Friction: Operators manually inform dozens of travelers individually via WhatsApp/phone when trips delay, causing jetty chaos.
Fragmented Direct & Resort Bookings
Issue: Operators balance walk-ins, resort package tie-ins, travel agencies, and direct WhatsApp chats.
Current Friction: Overbooking and double-booked seats occur frequently during school holidays and long weekends.
Manual Manifests & Compliance
Issue: Marine authorities require accurate passenger lists (IC/passport numbers, names) prior to departure.
Current Friction: Handwritten paper manifests at counters create long lines, delay departures, and risk compliance fines.
Payment Reconciliation & Cash Dependency
Issue: Walk-in passengers pay cash or individual DuitNow QR transfers on-site.
Current Friction: Captains lose track of who paid online vs dock, creating major end-of-day accounting headaches.
2. Traveler Survey Insights (User Side)
Current Booking Behaviors
Direct message from social media, and recurring customers.
Direct walk-in purchase at Merang or in Pulau Redang
General online travel agencies or messaging boatmen.
Surveyed travelers strongly favor a platform dedicated specifically to Malaysian marine tourism.
Key Traveler Pain Points
- Schedule & Gate Confusion: Uncertainty over departure times, platform locations, and physical ticket passes.
- Hidden Marine Park Fees: Unclear separation between Marine Park entrance fees, terminal fees, and boat fares.
- Lack of On-Demand Activities: Snorkeling, turtle trips, and water taxis are hard to book without middleman markup.
3. Recommended Core Features (Field Feedback Driven)
Merchant App / Admin Dashboard
Delay, cancel, or re-route departures with 1-tap, triggering automated SMS/WhatsApp alerts to all booked passengers.
Auto-collect IC/passport numbers at checkout and instantly export compliant PDF manifests for marine authorities.
Real-time seat allocation across direct sales, resort partners, and walk-in counters to completely eliminate overbooking.
Mobile scanner app for boat captains or jetty staff to scan digital QR tickets for frictionless check-in.
User App / Web Portal
Pay boat fare, Marine Park fee, and jetty access fees together in a single transparent transaction.
Real-time boat status updates, designated jetty counter/platform numbers, and weather advisories.
Instant booking for local island-hopping, private charters, and snorkeling trips with verified local boatmen.
Digital tickets saved offline with embedded QR codes—essential for low-coverage island jetty environments.
USER PERSONA
Sarah, 27
Professional Kuala Lumpur 4 Trips / Year"I want a seamless, instant way to book island trips with my friends without worrying about scam agents, hidden fees, or sending manual bank-in slips."
Bio
Sarah is a 27-year-old Kuala Lumpur professional who frequently organizes weekend island trips for her friends. Tech-savvy and safety-conscious, she relies on digital tools to plan itineraries but gets frustrated by manual booking steps, hidden costs, and unverified boat operators.
Goals
- Book group trips (e.g., snorkeling for 4 friends) in under 5 minutes without friction.
- Easily distinguish between different service packages (e.g., "Sunset Cruise" vs. standard "Day Transfer").
- Secure instant booking confirmation to guarantee seat availability before traveling.
- Have a single, trusted platform for managing marine tourism activities across Malaysian islands.
Core Needs
- Transparent All-in-One Pricing: Upfront breakdown of boat tickets, marine park fees, and add-ons with zero hidden charges.
- Instant Digital Verification: Real-time seat allocation, direct e-tickets, and instant digital payment confirmation (FPX / e-Wallet).
- Curated & Visual Listings: High-quality photos, clear trip itineraries, and verified provider reviews for shareable, "Instagrammable" experiences.
Frustrations (Pain Points)
Wan, 42
Professional Local Boat Owner Pulau Redang 25 Bookings / MonthTired of checking his bank account for manual transfers, and hates writing out the passenger data by hand in a log book.
Bio
Wan, 42, is a boat owner in Kuala Terengganu running about 25 island trips a month. While experienced on the water, he struggles with admin work and needs a simpler way to manage passenger details and payments outside of messy WhatsApp chats.
Goals
- Fill his boat to full capacity every day to maximize revenue.
- Completely avoid "Double-Booking" drama and schedule overlapping.
- Automate customer payments and receive direct payouts to his account.
- Spend less time answering repetitive WhatsApp inquiries manually.
Core Needs
- Automated Payments & Payouts: System-handled transactions so he doesn't need to manually verify bank transfer slips.
- Digital Passenger Manifests: Complete passenger data reports automatically generated for marine safety compliance.
- Shareable Booking Links:A single link to send prospective customers via WhatsApp instead of typing out details one by one.
Frustrations (Pain Points)
USER FLOW
Boatmu streamlines the maritime booking experience into a high-conversion journey: from Discovery (Trip Selection) and Customization (Trip Details) to a seamless Fast-Track Check-out (Registration & Passenger Info), concluding with a Secure Payment gateway.
WIREFRAMES
Low-Fidelity Layouts & Visual Exploration focusing on mobile usability and clear call-to-action placement.
1. Boatmu Main Page (User)
2. Dashboard (Operator)
BRAND IDENTITY
The overall style is modern, clean and slightly adventurous to strike the balance between functional and friendly.
Nunito-san
Chosen for geometric precision, high legibility on mobile screens, and approachable, modern travel brand identity.
DESIGN SYSTEM
Design token and component library.
Colors
Background
Primary
Neutral 0
Minimal
Neutral 30
Disable
Neutral 70
Text
Primary
Neutral 100
Secondary
Neutral 80
Placeholder
Neutral 60
Onbutton
Neutral 0
Brand color
Primary 80
Button
Primary
Primary 80
Hover
Primary 60
Disable
Neutral 60
Notify
CA3B3B
Icon
Primary
Neutral 80
Hover
Neutral 60
Active
Primary 80
Disable
Neutral 60
Invert
Neutral 0
Status
Success
1DC800
Info
Primary 80
Warning
EA9B08
Error
CA3B3B
Typography
Nunito Sans
Radius and Spacing
Cards:
16px (rounded-lg)
Buttons & Image:
10px (rounded)
Horizontal Gaps:
40px / 32px / 24px / 16px / 8px
Pills:
9999px (rounded-full)
Icon Size
Badges:
34px
Social Media Icon:
18px
Product Icon:
62px
Avatar Icon Size:
34px
HOME PAGE
A user-friendly homepage prioritizes the user's needs on clarity, speed, and "frictionless" interaction.
Information Architecture:
Structured visual hierarchy and distinct section for filters and products.
Encourage Engagement:
Filter system to act as a discovery tool, educating users on the variety of tour experiences and destination available in Boatmu.
Centralized Control:
Compile all the trips and destination into a single, dedicated page, simplifying navigation.
PRODUCT PAGE
Every information of the trip that users need to know is in one place.
Visual Hierarchy:
Guide users with clear visual and steps to book the trip easily.
Promotes Understanding:
Clear explanations each details of the trip that help users grasp the value one.
CHECKOUT PAGE
A high-converting checkout page usually includes, order summary, billing information, payment gateway and place order button.
Order summary as a confrimation to the users.
User billing informations form.
Payment Method (FPX & Card).
Visible CTA button to the user.
Reduced Overload Effort:/h4>
To make checkout flow seamless, we only let the users fill the important details only.
User Accessibility:
Payment method options, FPX and card for user accessibility local or foreigner.
FINAL NOTES
Completing Boatmu marks a significant milestone in my journey as a designer. As my first end-to-end UI/UX project, it served as a high-stakes training ground where I transitioned from theoretical knowledge to delivering a live, functional product for a startup.
KEY TAKE AWAY
Learning Experience:
Handling the entire lifecycle from initial UX research and user flow mapping to high-fidelity prototype taught me the importance of design consistency and how every small interaction impacts the overall user journey.
Problem-Solving Under Pressure:
Building for a startup meant finding the "sweet spot" between user needs and business feasibility. I learned to prioritize features that reduced friction, such as a simplified the available date for trip selection logic.
Foundation for Growth:
This project provided me with the hands-on experience and confidence needed to tackle complex product design challenges in the future.