Show people, not just boats
I built the visual story around real guest moments, crew interactions, families, couples, and life on the water. Boats and Maui scenery support the story rather than becoming the entire story.
Web Design · Booking · Responsive
Sea Maui
Designing the experience around the people who make it memorable
- Role
- Sr. Web Designer
- Timeline
- 3 weeks · Discovery through developer handoff
- Scope
- Discovery, experience strategy, responsive web design, component system, and developer documentation
Overview
The challenge
Modernize a website that already converted, and show what makes Sea Maui different.
The approach
Keep the proven booking path. Put guests and crew at the center of the story.
The outcome
A responsive, people-first site with reusable components and a seasonal content system.
What shaped the design
I led discovery with Sea Maui’s stakeholders, which revealed four priorities:
- Families and couples were the primary audiences.
- Public tours needed greater emphasis than private charters.
- FAQs and What’s Included were the most-used activity-page content.
- Guests needed clearer expectations about beach loading, destinations, and the family-friendly experience.
I used these findings to prioritize clarity and confidence over unnecessary restructuring.
Key design decisions
Make activity discovery responsive
I designed featured activities as a more visual browsing experience on desktop and a simpler stacked presentation on mobile, making tours easy to compare across screen sizes.
Design seasonality into the system
I treated whale watching as a reusable seasonal state with promotional, seasonal, and out-of-season treatments instead of a page that had to be repeatedly added and removed.
01 · Promotional
02 · Seasonal
03 · Out of season
Visual direction
I combined large experiential photography with organic shapes, wavy transitions, rounded components, playful color blocking, and generous spacing.
The result feels recognizably Sea Maui: polished but not pretentious, energetic but not overwhelming, and premium without becoming a luxury-resort experience.
Primary teal#108384
Light teal#41C0C1
Banner button#F7EA31
Text#0D0D0D
Grey#A2A6B1
Off-white#F2F0EF
Heading · Montserrat Bold
Snorkel, sail and spot whales off Ka’anapali
Body · Karla Regular
Board right from the beach, settle in with a cold drink and let the crew take care of the rest. Snorkel gear, lunch and reef-safe sunscreen are included.
Why Montserrat and Karla
Montserrat’s wide, geometric letterforms give headlines a confident, friendly voice that holds up over full-bleed ocean photography. Karla pairs with it as a relaxed, slightly quirky grotesque that stays legible at small sizes on mobile, so planning details like times, inclusions and FAQs read easily without feeling corporate.
Clarifying the experience
I used photography, video, FAQs, and destination content to answer questions before booking.
I designed a Where Do We Go experience around the destinations Sea Maui visits, and used visual storytelling to make beach loading easier to understand than text alone.
Responsive system
I created reusable patterns for:
The system gave the website a consistent visual identity while keeping content flexible and maintainable.
- Activity cards
- Booking actions
- Seasonal badges and states
- FAQ and What’s Included content
- Image and video galleries
- Crew storytelling
- Destination information
- Desktop and mobile navigation
Type scale (rem)
Base 16px. Never below 14px on mobile.
| Style | Desktop | Tablet | Mobile |
|---|---|---|---|
| H1 | 2.5–3rem | 2.2rem | 1.8–2rem |
| H2 | 2rem | 1.8rem | 1.6rem |
| H3 | 1.75rem | 1.6rem | 1.4rem |
| H4 | 1.5rem | 1.4rem | 1.25rem |
| H5 | 1.25rem | 1.2rem | 1.1rem |
| H6 | 1.125rem | 1.1rem | 1.05rem |
| Body | 1rem | 1rem | 0.95–1rem |
| Small | 0.875rem | 0.875rem | 0.85–0.9rem |
White bg
#108384#0D0D0D#7C7C7C
Off-white bg
#0D0D0D
Blue bg
#0D0D0D#FFFFFF
Black bg
#FFFFFF#41C0C1
Developer handoff
Over three weeks, I led the project from stakeholder discovery to responsive design and developer-ready documentation.
My handoff defined component behavior, responsive layouts, visual styles, content priorities, and seasonal states so the experience could be implemented consistently.
Reflection
The strongest solution I found was not a complete reinvention. It was a focused evolution that protected proven booking behavior while making Sea Maui’s most valuable differentiator—its people—visible throughout the experience.
Next project
Vagabond Cruise
Web Design · Booking
View case study →
