Booking flow for a sailing charter company
Product Designer

Booking flow for a sailing charter company

This design project aims to deliver a seamless online experience to bring a breath of fresh air to a complacent industry in the Pacific Northwest: sailboat charters.
This project is ongoing. I am currently plucking along at it in my spare time. If anything, this case study provides a window into how I organize & work on projects in Figma.

Design Problem

This is perhaps a good time to disclose that I am the co-instigator behind Fjord Sailing. We are in the launching phase of this new business—currently gathering necessary permits, getting loan approval, acquiring a boat, etc.

Our mission is to provide a customer-centric approach to the sailing charter & tour industry in the Salish sea.

Our focus is on young professionals driven by a mantra of experiences over material possessions who are seeking adventures. We’ll cater to them with two distinct offerings: 3-hour sailing experiences and flexible bareboat charter.

Now comes my role in this: develop a brand concept and design a digital experience that will be wow enough to pull millennial clientele away from the incumbents and towards our shores.

Fortunately for us, the bar set by the established charter businesses in terms of online experience isn’t very high.

Just a small sampling of the experience waiting for would-be guests looking to charter a sailboat.

Unfortunately for would-be guests, "renting a sailboat" is more akin to opening a bank account than it is to show up at a Hertz counter. And so, there are a few steps that must be taken but it can be dramatically improved from its current state.


The approach is to elevate the booking process—which remains a tad lengthy—by simplifying the input of information and guiding the guest along the way.

Since the planned trip is often months ahead and the guest is only expected to pay for a deposit to make a reservation, I have decided to remove certain superfluous steps that will be pushed closer to the check in date (ex.: information about other guests).

Typically, the more strenuous part is filling out the captain requirements section—to ensure that the charterer is indeed capable of operating a sailboat.

In this case, I’ve designed a choose your own adventure flow where the certification step can be postponed to a later date—with a catch. A reduced down payment is offered if the captain certification is completed at the time of the booking.

As a kicker, removing any need to "submit an inquiry" by providing transparent pricing, clear date picker, and a clear explanation of the process (booking, payments, check-in, check-out, etc)

Design Process

Being the latest project underway, it’s the least embarrassing one to share—it's also currently a work in progress.

And so, I figured I’d embed the full Figma file that encloses:

  • Booking flow design & prototype
  • Design system (developed concurrently)
  • Color Palette Moodboard — inspiration for the color styles

For a better experience, give it a shot in full screen!
For a better experience, give it a shot in full screen!