ANODA Discuss your product

Boat rental booking, every charge on the table

Sailo is a global marketplace for renting boats, yachts and other watercraft.Over seven releases we designed its iOS app, web product and destination site.

Sailo boat page on the web: 97ft Luxury Yacht in NJ/NYC with its rating, location and owner, a photo gallery, the boat’s size and capacity, and the booking card with a 10% saving and free cancellation 24 hours before; Sailo iOS map search in Monaco: boats pinned in the harbour and the card of Party Boat Mia, $950, rated 4.5, 33 feet, 12 guests
1,000+
screens and states across the app, the web product and the site
7
releases one product, refined release by release
3
surfaces iOS app, responsive web product, public site
2
sides of the market renters and boat owners, plus visitors

Sailo is a two-sided marketplace where people rent boats, yachts and watercraft from owners and charter operators around the world. We audited the product, mapped it for renters, owners and visitors, and designed the iOS app , the web product at desktop, tablet and phone sizes, and the public site with its destination guides, on one design system , across seven releases.

What a boat rental asks of both sides

The renter’s path from a search to the dock, then the owner’s side that answers it:

  1. Find

    • Place, dates and guests
    • Filters
    • Map

  2. Choose

    • Boat page
    • Extras
    • Owner
    • FAQ

  3. Book

    • Trip length
    • Captain or bareboat
    • Paid now or at the boat

  4. Wait

    • Inquiry
    • Free reservation
    • Owner’s answer

  5. Talk

    • Inbox
    • Special offers

  6. Host

    • My boats
    • Bookings calendar
    • Payouts
Pay now Pay at the boat
Two bills for one trip, and the renter should never meet the second one at the dock.
Owner in control Renter wants a yes
Owners approve renters, set prices and make private offers; renters still need to know where they stand at every step.
Phone Browser
The same boat, price and booking status on the iOS app, a desktop browser and a phone browser.

A boat page that answers the questions in order

Found
A renter deciding on a boat wants the look of it, what it is, who owns it and whether they can ask first, and a long listing buries the answers.
Decided
Photos first, then the boat in one line of facts, then the owner with their rating, response rate and the free cancellation window, then two ways to ask before booking. Where it sails, extras and reviews follow below.
For the user
A renter who has never chartered anything knows in one scroll what the boat is and whom they would be dealing with.
Sailo iOS boat page for Perfect Luxury Cruiser: photos, rating 4.5 from 20 reviews, 50 feet, 12 guests, Cranchi Mediterranee 2009, a description, owner Andrew Johns with his rating and response rate, free cancellation 24 hours before booking, and View profile and Send Message buttons
After: The top of an iOS boat page

  1. The boat

    Photos you can swipe, and a way to share or save it.

  2. What it is

    Name, rating, length, guests, make and year, then a short description.

  3. Who owns it

    The owner’s rating, how fast they reply, and the cancellation window.

  4. Ask first

    The profile and a message, before any booking.

How the work progressed

From an audit of the product Sailo had to seven releases of one design, one question closed at a time.

  1. Audit and research

    Where renters and owners lost their way, and what other rental marketplaces had taught them to expect

    Artifact An audit with a redesign plan, product and competitive analysis, and personas for renters and owners

    Two personas, each with a photo: a boat renter on a pier who wants memorable trips without complex booking, and a boat owner at a marina who worries about upkeep, costs and a boat that sits unused; each with pain points, joy points, motivations and goals

  2. Architecture and flows

    Who can do what, in which order, for renters, owners and visitors who haven’t signed up

    Artifact A multi-role information architecture, user flows, wireframes and screen maps

  3. iOS app

    Search, the boat page, booking, reservations, payment screens, messages and offers for both sides on the phone

    Artifact The complete iOS UX and UI with its states and clickable prototypes

  4. Web product and public site

    The same booking at a desk and in a phone browser, and destination pages that bring renters in

    Artifact Responsive web UX and UI at desktop, tablet and phone sizes, and the public site with destination guides

  5. Design system and releases

    One kit behind every surface, kept consistent through seven releases

    Artifact A full design system, UI kit and components with states, and a developer handoff for each release

    Sailo style guide: the colour palette of black, blue, light blue, green and yellow with their hex values, and the Urbanist typeface

Three roles, mapped before they were drawn

Found
Renters, owners and visitors who haven’t signed up see different things, and one person can be a renter today and an owner tomorrow.
Decided
The whole app was mapped by role first, from onboarding to both accounts, and the renter’s way from a search to a booking was wireframed in grey before any colour. One profile holds both sides: an owner switches accounts rather than signing up again.

  1. The app by role

    Onboarding, sign-up, search, the boat card, trips and inbox, and the renter’s, owner’s and visitor’s accounts, with how each connects.

    Open the full map
    Sailo information architecture: Welcome, Sign Up, Log In, Search, Boat Card, Trips, Inbox, Unknown User, Renter Account and Owner Account, each with its sections and linked in order

  2. From a search to a booking

    Featured boats, results for a place, the filters and the boat with its payment plan, linked screen to screen in grey.

    Open the full map
    Sailo wireframes linked in order: the home screen with featured boats, boats in Monaco, filter search results with dates, duration, guests and boat type, and a boat with captain, fuel and extras and a payment plan
Sailo renter profile for Mandeep Carson: general information, boating qualifications, favorites, settings, general account, Switch to boat owner account and Log Out, above the tab bar

One profile, both sides

The renter’s profile holds qualifications, favourites and settings, and the switch to the owner’s account.

  • Information architecture for three roles
  • User flows and wireframes
  • Screen maps
  • Clickable prototypes

What renters and owners get done

The renter’s way from a search to a confirmed trip first, then the owner’s side, and the same booking on the web.

Finding a boat worth the day

Found
People often start from a place and a date, not a boat type, and a list of look-alike yachts doesn’t tell them which one fits their group.
Decided
Search starts from a place, dates and guests. Results show price per day, the saving, size, guests and whether a captain comes with the boat, and the filters follow how people choose: trip length, boat type, length, price, captain and facilities.
Sailo iOS home: Boating for everyone, everywhere, a search for place, week and guests, top yachting destinations with boats from $450, and popular boats
Sailo iOS results for boats in Monaco: Perfect Luxury Cruiser at $650 a day instead of $720, and Party Boat Mia at $470 instead of $520, each with a 10% saving, rating, size, guests and captain
Sailo iOS filters: check-in and check-out dates, number of guests, trip duration from a quarter day to weekly, boat type and boat length

The whole price before the request

Found
A charter is paid in parts: some at booking, some to the crew at the boat, plus a refundable deposit. Renters who meet the second bill at the dock feel tricked.
Decided

Trip length sets the base price in the calendar.

Extras are split into required and optional, each marked as payable at booking or at the boat, and the payment details repeat that split with its totals, with a line that the card is charged only once the owner confirms.

Sailo iOS date picker: May and June 2022 with the chosen dates highlighted, flexible dates, trip length from a quarter day to weekly and $2460 per day
Sailo iOS extras: required extras payable at booking such as the security deposit, service fee and tax, and at the boat such as the first mate and crew gratuity, then optional extras such as a captain and extra hours
Sailo iOS payment details: charges payable now for the boat, security deposit, captain and extra hour totalling $2,900, charges payable at the boat, and the refundable security deposit, with a note that the card is charged only when the owner confirms

Captain or bareboat

Found
Some renters can skipper a boat and want to; most can’t and don’t know how to say so. Owners need to know who will be at the helm before they say yes.
Decided
A short boating resume in five steps: first the choice between skippering the boat yourself and having a captain, then experience by boat type and propulsion, then an optional captain’s licence and its scan. Owners read it with the booking request.
Sailo iOS boating resume, step 1 of 5, About your Qualifications: I would like to captain my bareboat, or I will require a captained boat
Sailo iOS boating resume, step 3 of 5: power boat experience with the boat’s length and type of power, from outboard to twin propellers with bow thruster

A status for every stage of a booking

Found
An inquiry, a boat held for free, an owner’s acceptance and a paid trip are different promises. If they look the same, renters show up for trips that never existed.
Decided
Every booking carries its own label, from inquiry to accepted, reserved or rejected. A free reservation says how long the boat is held and what happens when time runs out, and cancelling states the refund before anything is sent.
Sailo iOS My Bookings, current tab: Perfect Luxury Cruiser marked Inquiry with its date, guests, confirmation code and $2460, and Party Boat Mia below with its own status
Sailo iOS Reservation Created for Perfect Luxury Cruiser, Aug 12 to 14, 2022: the boat is held for free for 23 hours, then released; a bareboat notice that the renter drives the boat; Cancel reservation
Sailo iOS cancellation request: a reason, the boat’s flexible policy with a full refund less the service fee before Jun 18 and no refund from Jun 19, a message and Submit cancelation

Offers made in the conversation

Found
Renters ask about dates and discounts before they book, and owners want to answer with a price of their own without leaving the chat.
Decided
The owner builds a special offer, with dates, times, guests, trip length and a message, and sends it into the conversation. The renter sees it as a card with the price and deposit, and accepts or rejects it there.
Sailo iOS special offer by the owner: departure and return date and time, four guests, trip duration from a day trip to weekly, and a message to the renter
Sailo iOS chat with owner Andrew Johns about a weekly rental of Perfect Luxury Cruiser, ending with a special offer card of $2,260 and a $500 deposit at North Cove Marina for 12 guests, with Reject and Accept

The owner’s side

Found
Owners run several boats and many requests, and want to see who pays what before accepting a renter.
Decided
Bookings on a calendar, sorted by accepted, inquiry and completed, each with the payout split into what is paid at the boat and what comes through Sailo. The owner accepts or declines a request from its details, and a decline asks for confirmation.
Sailo iOS owner bookings for March 2022: Farewell Wind confirmed and Party Boat Mia as an inquiry, each with its dates, renter, a $990 payout, $350 paid at base and $640 paid on Sailo
Sailo iOS booking details for the owner with Decline and Accept, and a dialog saying the booking has been declined with Cancel and Confirm

The same booking in a browser

Found
Many renters plan a charter at a desk, and the web had to tell the same story as the app, not a second version of it.
Decided
The web search shows the same facts per boat, and checkout keeps the app’s split: charges payable now, charges payable at the base, and the refundable deposit, each with its own total.
Sailo web search for New York: filters for price, guests, boat type, captain and cabins, 28 boat rentals, and boats such as Captain Romeo at $2,500 a day with length, guests and captain
Sailo web reservation summary for a Lagoon 420: departure and return, 3 guests, half a day; charges payable now with the boat, crew gratuity, docking fees and service fee totalling $1,030.82; the captain payable at the base; and a $250 refundable deposit

One system for the app, the web and the site

Found
The same boat appears in the app’s results, on a web page and in an owner’s list; if it looked different in each, nobody would trust they meant the same boat.
Decided
A full design system and UI kit: one palette, the Urbanist type scale in the app and the same boat card logic on the web, with components drawn in every state, from empty lists to errors.

A boat reads the same everywhere

Photo, name, place, size, guests, captain and price per day, in the same order on the phone and on the web.

  • Sailo iOS boat card: a photo with a 10% saving badge, Perfect Luxury Cruiser rated 4.9 in Monaco with a captain, 50 feet and 22 guests, $650 a day instead of $720
    iOS: The boat card in the app’s results.
  • Sailo web boat card: a photo with a save button, Captain Romeo in Port Washington, 47 feet, 6 guests, captain, $2,500 a day
    Web: The same card in the web search.

Drawn for the moments in between

A place with no boats, an owner with no listings, a wrong email: each says what happened and what to do next.

  • Sailo iOS search with a sailboat illustration and the message Sorry, we couldn’t find such location
    No such place
  • Sailo iOS owner’s My Boats, empty: a sailboat illustration, You don’t have any boats in your account, and Add boat
    No boats yet
  • Sailo iOS reset password with the email field in red and the message Wrong email, try again
    Wrong email

The same booking card at every size

Kept
The price with its saving, free cancellation, duration, guests and dates, captain and fuel, the itemised price and the total, and Request to book.
Changed
On a desktop the card sits beside the boat’s details and follows the scroll; in a phone browser it opens as its own screen, with Message owner and the charges payable at the base below.
Sailo web boat page at 1440 pixels: details, crew and extras on the left, the Book Boat card on the right with duration, guests, dates, captain included, fuel not included, the itemised price, a $2,130 total and Request to book
1440 · Desktop The booking card beside the boat’s details.
The same booking at 375 pixels in a phone browser: the price, free cancellation, duration, guests, dates, captain and fuel, the itemised price and $2,130 total, Request to book, Message owner and the crew payable at the base
375 · Phone browser The same card as its own screen.

The site that brings renters in

Found
Most charters start with a place, not a boat, and people search for where to sail before they look for what to sail.
Decided
Destination guides with a map and regions, then a page per country with the reasons to go, itineraries on a map and boats to book there, all in the web product’s look.
Sailo Destination Guides page: a map, a question search, region tabs from North America to Oceania and guides such as Annapolis, Baltimore, Brooklyn, California and Canada
Sailo destination page for Croatia, Sailing the Adriatic Sea: an aerial photo of Dubrovnik, an introduction and cards on its ports and islands
Sailo Itineraries in Croatia: a route map of the Dalmatian coast beside a list of one-week itineraries and yacht charters

  • Clickable prototypes

    The flows of each release, tappable end to end.

  • Screen maps

    Every screen and state of each role, in the order they are used.

  • Developer handoff

    The design system, the UI kit and the screens of each release, ready to build.

Where the product ended up

One design for the whole marketplace: renters find a boat, see the full price split between booking and the dock, choose a captain or skipper it themselves, and follow each booking from inquiry to confirmation; owners answer in the chat with their own offers and run their bookings and payouts.

Development was not ours, and no business figures are claimed here.

screens and states
1,000+
releases
7
views of the case on Behance
13.6K

In the client's words

The boat-booking concept connects discovery, vessel details and a proposed reservation journey. We appreciated how the design makes the different steps visible within one visual direction.

Magda Marcu Cofounder & COO, Sailo

5.0

Afraid your customers only see the full price at the dock?

In Sailo, every charge says when it is paid: at booking, at the boat, or held as a deposit, on the phone and on the web alike. Show us how your product charges, and we’ll show you where the total stops adding up for the people paying it.

Discuss your product Explore more case studies

What we brought to Sailo

The product

The interface and the work