↑
Nori Page
Web Design · Booking

Mexico Whale Shark

A modern, immersive refresh of an existing booking website

Role
Sr. Web Designer
Timeline
1 week · Discovery through developer handoff
Scope
Redesign
Mexico Whale Shark desktop homepage hero
Mexico Whale Shark mobile homepage hero

Overview

Design goal

The primary goal was to simplify how visitors explore and book a whale shark tour. The existing activity setup made the available options feel more complicated than necessary, so the new design focused on clearer tour organization, stronger hierarchy, and a more direct path to booking.

Key priorities
  • Introduce a completely new visual direction
  • Simplify how tours are presented
  • Make the booking journey easier to follow
  • Keep primary calls to action prominent
  • Use TripAdvisor and Google reviews to build trust
  • Preserve useful content within a clearer structure
Design approach

The homepage uses immersive marine photography to establish the experience, followed by simplified tour options and clear booking actions.

Prominent review content helps reassure travelers before they commit, while the streamlined page structure reduces unnecessary decisions between discovering a tour and checking availability.

UI Design

The full desktop homepage, from hero to footer. Scroll inside the frame.

Mexico Whale Shark full desktop homepage
Explore tours by location cards
Eight location cards let visitors start from where they’re staying.
Featured Cancun Whale Shark Tour
The featured tour shows price, duration, ages, location and group size before the click.
Five-star review carousel
Reviews sit on a white card row so they read clearly against the dark page.

Responsive experience

Each section is reworked for mobile rather than scaled down.

Hero, desktop
Hero, mobile
Hero: the stacked title and copy move into a single column, and buttons go full width for easier tapping.
Location cards, desktop
Location cards, mobile
Locations: the four-column grid becomes a single column of large cards.
Featured tour, desktop
Featured tour, mobile
Featured tour: the photo moves above the details, and the buttons stack.

Design system

A small set of colors, two typefaces and a few booking components carry the whole site.

Color
Deep ocean#00030f
Navy#091c2c
Sun yellow#ffb938
Lagoon#64cddf
Typography
OutfitHeadings · Bold, uppercase
Helvetica NeueBody, prices and buttons · Medium
Components
BOOK TOURLEARN MORE
MOST POPULAR
7 HOURSAGES 4+CANCUNUP TO 10 GUESTS
Primary and secondary buttons, the featured badge and tour detail tags, taken from the homepage.

Intended outcome

A more engaging and trustworthy website that helps visitors understand their options, feel confident booking the experience, and move from discovery to availability with less friction.

Next project Aster Lane Floral Web Design · E-commerce View case study →
Aster Lane Floral device mockup