top of page

WHO

RIVER RAT YACHT CLUB

WHAT

Adding an interactive map to an existing site

ROLE

UX/UI design, Research, Prototyping, Testing

GOAL

Provide information about where you go and what you could see while on a pirate cruise with the River Rat Yacht Club

RR Yacht CLUB

Helping passengers get a lay of the land

ITERATIVE APPROACH TO DESIGN

An iterative approach is to create a design, test it with users, analyze the results, and then make improvements based on that feedback. This approach allows for a more flexible and user-centered design process, as it allows for testing and feedback to be incorporated throughout the design process, rather than waiting until the end.

GATHERING INSIGHT

First I performed a competitve analysis to understand what similar companies were doing well (or not). I chose boutique boat excursion offerings with a mix of locales.

USERS TO THE RESCUE

The owners of Siren's Gate indicated the demographic for their customer was around 40 years old. I used this information to conduct 4 in-depth interviews with men and women aged 35-40. I had them explore the current site and provide live feedback on their experience while I asked questions.

 

The standout factor that was missing from the current site was a lack of information about the cruise experience. There wasn't a map of where you'd board the boat, the route you'd take, or what the surrounding area looked like. That led me to the idea of an interactive map that would solve part of this problem in a creative way.

AMBIGUITY

  • Users lacked clear information about where the cruises went

  • There was confusion about what you could and couldn’t bring on the cruise

  • Photos of cruises and the descriptions about them didn’t tell a cohesive story

VISUAL EXPERIENCE

  • The photos on the site could be improved in quality and organization

  • Users wanted to get a sense of what a cruise would be like through videos and extensive photos of the inside and outside of the ship as well as the surrounding areas

  • Users wanted a visual representation of the location(s) of where they would be going and the activities they could do

I wanted more pictures of the surrounding area, where you’d go and stop...where are you going?

I couldn’t access was this tiny map photo, to get a sense of where you’d be going.

It doesn’t say what the tour is...it doesn’t explain what the pirate cove tour is.

ABOUT SIREN'S GATE

River Rat Yacht Club (RRYC) in Lake Havasu, NV operates a pirate ship called Siren’s Gate. They offer private charters for parties, corporate events and special occasions. 

VISITING WITHOUT CLICKING

Although the ship has had consistent bookings, they don't have a high click-through rate for non-referred visitors. Word of mouth works well with locals, but for out of town visitors who are unfamiliar with the ship or Lake Havasu, there is a drop-off when visiting the site.

​

The goal is to figure out what's missing from the current offerings on the website to see what users need to feel more confident in booking a cruise.

​

Currently the site is fairly simple, with a few photos and a third-party software to book charters:

CARTOGRAPHY IS KEY

Rather than settling for a standard Google Map experience, I wanted to give users a thematic and interactive map to match the pirate theme of the cruise.

I applied some of the creative design systems I found when researching other interactive maps: incentive to explore with a reward (discount on a cruise), limit on visual control (no zooming in or out), and a fantasy feel to stay on brand.

Starting with some sketches and brainstorming on paper, I then created a user flow to reveal the interaction for finding three keys on the map. At the end of finding the 3 keys, there would be a CTA button for booking a cruise with a discount. 

PIRATE MAPS

After researching some map making tools, I discovered Inkarnate, a tool for creating fantasy maps online. By creating a flat background layer with basic landmarks and geography, I planned to place the rest of the interactive elements in Figma.

Then I worked on some wireframe options for popup windows with information regarding landmarks you might see on the cruise. In the end, I landed on a torn scroll design to keep with the pirate theme with a gallery of photos to orient the user. The pattern was kept the same when the user found a key.

ALL ABOARD

To test a user flow, I created three clickable locations: two with info/images only, and one where you would discover a key and then see info/images.

WEIGH ANCHOR

I tested the prototype with 3 users, including one who was part of the initial interview process. All three users were able to navigate the map by clicking and dragging, and all were able to find the key and look through the photos of the locations. There was a general sense of enjoyment interacting with the map. 

SAIL INTO THE SUNSET

  • This new feature seemed to have some initial success to orient potential passengers on what the cruise experience would entail

  • Another round of iterations and user testing to implement more functionality into the map

  • A/B testing to see if they get more bookings through the map or a site that features the map vs. without

  • More CTA buttons/images within the map to incentivize booking a cruise

  • Continue to build on user feedback and data to create a site that people engage with to spark excitement for the pirate ship experience

2/3

Users commented this map gave them a better idea of the surrounding area and what you might see on the cruise

100%

Users enjoyed finding the key and exploring the map

2

Users commented they would like the pirate ship to move with them as they selected locations

25%

One tester would like to see photos of the ship as well on the map

bottom of page