Costa Ballena Experience Builder: Product Concept

ROLE

Product design · UX strategy · AI experience design

YEAR

2026

LINKS

CREDITS

Photography: Luis Aguilar Vargas and Unsplash contributors.

01 — Final UI: Mobile, the primary flow

02 — AI Chat: Guide

03 — Home (Desktop)

04 — Discover (Desktop)

01 —

Planning a meaningful trip means navigating search engines, maps, reviews, booking sites and social media. As ideas pile up from different sources, organizing them into a personal journey gets harder, and the result is decision fatigue and experiences that don’t reflect what travelers are looking for. Most travel platforms sell accommodations or activities instead of helping people build a complete, personal experience. Costa Ballena Experience Builder is a concept that explores how AI can help people discover and build meaningful experiences in Costa Ballena, Costa Rica, while keeping them in control of every decision.

02 —

I was the sole designer and owned the end-to-end product design process: product strategy, UX research, information architecture, user flows, wireframing, interaction design and AI experience design. I used AI tools to speed up ideation and exploration; every product decision, the UX strategy and the design direction were mine.

03 —

I started with a project brief and a problem statement, then mapped the user journey, user flows, information architecture and sitemap. From mobile and desktop wireframes, I explored UI directions and a 60/30/10 color system, then built a UI guide, a component library, and states for forms, loaders, tooltips and modals. It started as a linear mobile flow and grew into a full system: two platforms, an AI chat feature, a component library and real desktop-scale pages, built one honest correction at a time.

04 —

Experiences, not itineraries. Users explore, save and organize ideas in a dedicated My Experience workspace, and refine them there, instead of following a predefined plan.

Mobile-first, then a real desktop. The primary flow was designed for mobile. Desktop only started feeling real once it stopped being a stretched mobile screen and became its own 1440px layout with its own hierarchy.

AI as a quiet guide. AI gives contextual recommendations along the way, but the user decides. On the Home screen, the AI card says it plainly: “A quiet guide, not the center of the trip.”

An AI chat that knows the plan. The AI chat guide acknowledges what the user has already chosen instead of repeating it, and accepts text or voice.

Reversible suggestions. AI suggestions can be added and removed, not dismissed forever, so trying an idea never costs anything.

05 —

This is a concept case study: there are no real users, bookings or results, and it hasn’t been tested with users yet. What exists is a complete design system across mobile and desktop, an AI chat feature, a component library and an interactive Figma prototype. It shows how I approach a product from the problem to the interface, and how I design AI that supports decisions instead of making them.

06 —

Usability testing of the AI chat’s reversible-suggestion pattern with real users.

Multi-day experiences: the Builder currently assumes a single “Day 1”.

Design share and export, planned in the sitemap but not built.

Final photography for three placeholder cards in Discover (Yoga, Kayak, Snorkeling).

Refining the whale-tail icon, which is still a provisional mark.

07 —

Type hierarchy is the fastest tell between “designed” and “stretched.”

A 15px hero headline reads as an accident, not a choice.

AI guidance only feels trustworthy when it visibly knows the current state:

acknowledging what’s already chosen, not repeating it.

A masonry gallery communicates variety; a repeated grid of equal squares communicates a template.

Reversible actions matter more for trust than for the interaction itself.

Concept case study, 2026. No real users or bookings.