Every seat, from WhatsApp to the dock
Ruta is a booking panel for small boat tour operators in Costa Rica. It brings bookings from every channel into one day, keeps capacity honest per boat, reconciles SINPE deposits and moves a whole departure when the weather turns. It is the second product built on Trama, designed in Figma and built as a working prototype.
Small boats, many channels
On Costa Rica’s Pacific coast, whale-watching and snorkel tours are run by small teams: an owner, a coordinator in the office, two or three captains and a van driver. They have a few boats and sell the same seats through WhatsApp, their website, Viator, GetYourGuide and people who walk up to the dock.
I chose this case because I know it from client work on a boat tour website, and because it is the opposite of Hilo: less conversation, more logistics. A good test for a design system meant to serve both.
The day starts with lists that don’t agree
Bookings live in a spreadsheet, a notebook and four inboxes. Seats get sold twice, a deposit screenshot gets lost in a chat, and when the swell rises at noon someone has to message every passenger by hand.
Goal: one view of the day that is true for every channel, so the coordinator can see what leaves next, who has paid and what needs a decision, and the guide can check people in from the dock.
What the design covers
- 7screens: 6 for the office and a mobile check-in for the dock
- 4booking channels in one list: WhatsApp, web, Viator and GetYourGuide
- 1AI function: turning a WhatsApp message into a booking draft
- 48pixel touch targets on the dock, where guides check in passengers in the sun
The office and the dock
The coordinator
“What leaves next, is it full, and has everyone paid?”
Works at a desk from 6:30. Takes new bookings all day, confirms deposits and decides what to do when the weather changes, with the owner.
The guide or captain
“Who is here, who is missing, and can we sail?”
Stands on the dock with a phone 30 minutes before each departure, checks people in and needs to know right away if someone still owes money.
One AI function, on purpose
Hilo taught me to decide what the AI may do before drawing screens. In Ruta the answer was even narrower: the AI drafts bookings from messages, and nothing else. Money and safety stay with rules and people.
| Task | Who decides | Why |
|---|---|---|
| Read a booking from a WhatsApp message or a platform email | The coordinator reviews every field and creates it | Typing the same details into a form is the slowest part of the day. Each field the AI filled says so. |
| Match deposits with the bank | A fixed rule, not AI. A person confirms | Money needs results anyone can predict and explain: same amount and same name, or it waits for a person. |
| Decide whether to cancel for weather | The owner or coordinator, always | Ruta shows the official forecast and who is affected. Whether it is safe to sail is not a model’s call. |
From the first booking to the last passenger
The content is a fictional whale-watching operator in Uvita: three boats, five departures a day, prices and deposits in colones, and numbers that add up across every screen.
The choices that shaped Ruta
Today is a list of departures, not a calendar
The coordinator’s question at 7:00 is “what leaves next and is it ready?”. The day reads top to bottom by time, and the next departure is highlighted with its one action: check-in.
Capacity is a number and a bar, per boat
Overbooking happens when seats are counted across channels in different places. Every departure shows seats taken out of the boat’s capacity, and the calendar shows the same count for the whole week.
Deposits show the proof next to the bank
SINPE Móvil transfers arrive as screenshots on WhatsApp. Ruta puts the client’s proof beside the real bank movement, so confirming is a comparison, not a search through two apps.
Weather moves a whole departure at once
When the swell rises, the coordinator used to message eleven people one by one. Now they pick a new departure that fits everyone and send one message, translated for each client.
Check-in is built for the dock
The guide holds a phone in one hand, in direct sun. Light mode, 48 px buttons and one tap per booking, with payment warnings on the card that needs them.
Built from Trama, themed as Ruta
Ruta uses the same components and tokens as Hilo. Switching the brand mode changed the color and the corners everywhere at once; the screens only needed new content and a few icons.
Same components
Metric cards, tabs, chips, buttons, the AI card and the switch come straight from Trama, unchanged.
Ruta’s theme
Sunset orange and squarer corners (6/8 px) make it feel operational, next to Hilo’s softer indigo.
New icons
Boat, wallet, waves, cloud, pin, list and checked-in user, drawn to match the existing set.
Departure row
Time, tour, capacity and status in one row: a pattern Ruta adds for anything scheduled.
Readable in the office and in the sun
Every color comes from Trama’s tokens, already checked against WCAG 2.2 AA in Ruta’s light and dark themes. I tested the prototype with the keyboard and with automated checks on every screen, the two dialogs and the mobile views: zero violations.
- Status is always in words: “Full”, “2 seats short”, “Not in the bank yet”, never only a color
- Capacity is a number first and a bar second
- Mobile check-in uses the 48 px size and light mode, for one-handed use outdoors
- Every AI-filled field is labeled under the field, not only with a color
- The weather warning names its source and time, so people can judge it
- The booking panel and the reschedule dialog trap focus, close with Esc and return focus
From the prototype to the dock
The prototype runs the whole morning: create the AI-drafted booking, confirm a deposit, check in the 9:30 boat and move the afternoon departure for weather. The next step is to test it with two operators during whale season. I want to know whether the coordinator trusts the AI drafts and whether the guide can check in a full boat in under five minutes.
What I learned
- A design system pays off on the second brand. Ruta took a fraction of Hilo’s time because the hard parts were already solved.
- Not everything that could use AI should. Money and safety stayed with rules and people, and the screens are clearer for it.
- Design for the place, not just the screen. The dock in the sun shaped the check-in more than any other constraint.