Menu

Menu

Case Studies

About Me

Home

Contact

Home

Case Studies

Margaritaville at Sea

Case Studies

About Me

Home

Contact

Case Studies

About Me

Home

Contact

Home

Case Studies

Margaritaville at Sea

Responsive Design Project

Responsive Design Project

Created for

Created for

Designlab UX/UI Academy

I ran across Margaritaville at Sea when a friend of mine wanted to go on a cruise and I wanted an all-inclusive vacation. After extensive research I found the Cruise and Stay option. I found their mobile website to be impossible to navigate becasue the website is not responsive and the items in the navigation bar either stacked on top of eachother or were hidden behind the logo.

View Prototype

I ran across Margaritaville at Sea when a friend of mine wanted to go on a cruise and I wanted an all-inclusive vacation. After extensive research I found the Cruise and Stay option. I found their mobile website to be impossible to navigate becasue the website is not responsive and the items in the navigation bar either stacked on top of eachother or were hidden behind the logo.

View Prototype

Project Type

Responsive Web Design

Involvement

UX/UI Design, UX Research, Usability Testing

Tools

Figma, Framer

Project Type

Responsive Web Design

Involvement

UX/UI Design, UX Research, Usability Testing

Tools

Figma, Framer

Project Type

Responsive Web Design

Involvement

UX/UI Design, UX Research, Usability Testing

Tools

Figma, Framer

Project Overview

Background

Margaritaville at Sea is a cruise line that operates out of Florida to the Bahamas and the Caribbean. The cruise line has 2 ships that offer a tropical themed floating resort experience with a variety of activities, entertainment, and dining options. The cruise line offers a cruise and stay option in addition to the regular cruise options.

Problem

The Margaritaville at Sea mobile website is impossible to navigate because the website is not responsive and the items in the navigation bar either stack on top of each other or are hidden behind the logo. The cruise and stay option is very difficult to find.

Goals

I want to redesign the Margaritaville at Sea website to be more responsive for both desktop and mobile. A more user-friendly, responsive website will increase revenue by keeping users engaged. It will also reduce administration costs by reducing the need for users to call for simple questions.

The
 Process

Research

Competitor Analysis

User Interviews

Affinity Mapping

Define

User Personas

Project Goals

Problem Statement

Ideate

User Flows

Site Map

Mid-Fidelity Wireframes

Usability Testing

Design

High-Fidelity Wireframes

Prototyping

Test

Usability Testing

Revisions

The
 Process

Research

Competitor Analysis

User Interviews

Affinity Mapping

Define

User Personas

Project Goals

Problem Statement

Ideate

User Flows

Site Map

Mid-Fidelity Wireframes

Usability Testing

Design

High-Fidelity Wireframes

Prototyping

Test

Usability Testing

Revisions

The
 Process

Research

Competitor Analysis

User Interviews

Affinity Mapping

Define

User Personas

Project Goals

Problem Statement

Ideate

User Flows

Site Map

Mid-Fidelity Wireframes

Usability Testing

Design

High-Fidelity Wireframes

Prototyping

Test

Usability Testing

Revisions

Research

Research

Competitor Analysis

Competitor Analysis

A competitor analysis was conducted on three major cruise lines.

A competitor analysis was conducted on three major cruise lines.

A competitor analysis was conducted on three major cruise lines.

None of the competitors offer a cruise and stay option in a tropical location

The competitors ships are larger and more crowded

None of the competitors offer a cruise and stay option in a tropical location

The competitors ships are larger and more crowded

User Interviews

User Interviews

User interviews were conducted with five participants that had booked a cruise online.

User interviews were conducted with five participants that had booked a cruise online.

User interviews were conducted with five participants that had booked a cruise online.

Cruise & Stay

80% of participants did not know about the Cruise &Stay option. 100% said they would be intersted.

Satisfaction

The only participants that were happy with their cruise were the 40% that cruised with Margaritaville at Sea.

Call to Book

The only participants that opted for the Cruise & Stay package had to call to book because they could not find it on either desktop or mobile.

Affinity Mapping

"

I would absolutely try a cruise and Stay vacation."

~Roger

"

I really wanted to do the cruise and stay vacation, so I had to call to book."

~Cindy

In summary: Margaritaville at Sea could increase revenue by redesigning its website to be fully responsive, allowing users to easily book cruises from any device. Currently, on mobile screens, the navigation either stacks awkwardly or is hidden, making it difficult to access. Additionally, providing users with the ability to find and book cruise-and-stay packages online would further enhance the user experience and drive sales

Affinity Mapping

"

I would absolutely try a cruise and stay vacation."

~Roger

"

I really wanted to do the cruise and stay vacation so I had to call to book."

~Cindy

In summary: Margaritaville at Sea could increase revenue by redesigning its website to be fully responsive, allowing users to easily book cruises from any device. Currently, on mobile screens, the navigation either stacks awkwardly or is hidden, making it difficult to access. Additionally, providing users with the ability to find and book cruise-and-stay packages online would further enhance the user experience and drive sales

Affinity Mapping

"

I would absolutely try a cruise and stay vacation."

~Roger

"

I really wanted to do the cruise and stay vacation so I had to call to book."

~Cindy

In summary: Margaritaville at Sea could increase revenue by redesigning its website to be fully responsive, allowing users to easily book cruises from any device. Currently, on mobile screens, the navigation either stacks awkwardly or is hidden, making it difficult to access. Additionally, providing users with the ability to find and book cruise-and-stay packages online would further enhance the user experience and drive sales

Define

Define

User Personas

Two user personas were developed based on research findings to represent the needs of individuals to search for cruises online.

Two user personas were developed based on research findings to represent the needs of individuals to search for cruises online.

Two user personas were developed based on research findings to represent the needs of individuals to search for cruises online.

How might we redesign the Margaritaville at Sea website to be responsive to all devices and allow users quick and easy access to information so that they do not have to call to book? Fewer calls will reduce administration costs.

Project Goals

Problem Statement

The Margaritavilla at Sea website is unresponsive and not user friendly on any device. In a business sense, they are losing potential customers because they are unable to quickly and easily find information, causing them to use other sites.

Ideate

Ideate

User Flows

Two user flows were developed and tested to gain insight into how the users navigate the platform.

Two user flows were developed and tested to gain insight into how the users navigate the platform.

Two user flows were developed and tested to gain insight into how the users navigate the platform.

Search Cruise & Stay options

Search regular cruises

Site Map

A sitemap was created to gain a clearer understanding of the website's structure.

A sitemap was created to gain a clearer understanding of the website's structure.

A sitemap was created to gain a clearer understanding of the website's structure.

Mid Fidelity Wireframes

Mid Fidelity Wireframes

Mid-fidelity wireframes were created to conduct usability testing with five participants, focusing on the user flows. The goal for the first test is to find out where users look to find the Cruise & Stay package, whether it be the banner or the navigation menu. The goal for the second test is to find out where users look to find activities onboard ships.

Mid-fidelity wireframes were created to conduct usability testing with five participants, focusing on the user flows. The goal for the first test is to find out where users look to find the Cruise & Stay package, whether it be the banner or the navigation menu. The goal for the second test is to find out where users look to find activities onboard ships.

Mid-fidelity wireframes were created to conduct usability testing with five participants, focusing on the user flows. The goal for the first test is to find out where users look to find the Cruise & Stay package, whether it be the banner or the navigation menu. The goal for the second test is to find out where users look to find activities onboard ships.

Book Cruise & Stay package

Search activities

Usability Testing

Design the Cruise & Stay, escape to the Bahamas, and adventure to the Gulf sections into cards to separate them.

Add the Cruise & Stay option to the destinations and the find a cruise pages.

Redesign the CTA buttons or make the entire card clickable.

Add Cruise & Stay to the navigation bar.

Design

Design

High Fidelity Wireframes

High-fidelity wireframes and a prototype were developed to conduct more in-depth usability testing of the platform. I wanted insight into the ease of finding the Cruise & Stay package, and the pain points in using the filters that require horizontal scolling.

High-fidelity wireframes and a prototype were developed to conduct more in-depth usability testing of the platform. I wanted insight into the ease of finding the Cruise & Stay package, and the pain points in using the filters that require horizontal scolling.

High-fidelity wireframes and a prototype were developed to conduct more in-depth usability testing of the platform. I wanted insight into the ease of finding the Cruise & Stay package, and the pain points in using the filters that require horizontal scolling.

Book Cruise & Stay package

Book a cruise using filters

Desktop screen

Prototyping

View Prototype

View Prototype

Test

Test

Usability Testing

Usability testing was conducted with five participants , and revisions were made based on the insights gathered.

Usability testing was conducted with five participants , and revisions were made based on the insights gathered.

Usability testing was conducted with five participants , and revisions were made based on the insights gathered.

Redesign the Find a Cruise page to include all filter options without sctolling.

Redesign filters to be more prominent and allow users to easily identify which filters they have already chosen.

Redesign the filter dropdown to have active and inactive states and allow users to know how many options to expect

Revisions

Revisions

Find a cruise filters were redesigned so users don't have to scroll horizontally.

Find a cruise filters were redesigned so users don't have to scroll horizontally.

Filters options were redesigned to allow users to know how many to expect.

Filters options were redesigned to allow users to know how many to expect.

Summary

Summary

Designlab UX/UI Academy

This project was the responsive design project for the Designlab UX/UI Academy bootcamp.

Main Challenges

My main challenge in this project was the use of auto-layout to allow the website to maintain continuity between designs.

Key Takeaways

In this project, I learned a great amount about using auto-layout to make the product responsive. I also strengthened my skills at prioritization since there were a great number of features that needed to be addressed with minimal time to complete the tasks.

Designlab UI/UX Academy

This project was the responsive design project for the Designlab UX/UI Academy bootcamp.

Main Challenges

My main challenge in this project was the use of auto-layout to allow the website to maintain continuity between designs.

Key Takeaways

In this project, I learned a great amount about using auto-layout to make the product responsive. I also strengthened my skills at prioritization since there were a great number of features that needed to be addressed with minimal time to complete the tasks.

Ready to discuss your project?

Let's connect

Ready to discuss your project?

Let's connect

Ready to discuss your project?

Let's connect

Ready to discuss your project?

Let's connect