The Process
This is a documentation site for my redesign of the website cruisewatch. Cruisewatch is a cruise navigation site, free for users to search for their 'dream cruise' for a bargain. This redesign is intended to give a better user experience and an updated, refreshed look. This is my entire process of the redesign.
Current Process Flow
Below is the current process flow for the cruisewatch website.
Competitive Sites
https://www.icruise.com/ | https://www.ncl.com/ | https://www.expedia.com/Cruises
Card Sorting Activity
The main purpose of this exercise was to take the information from the navigation/drop-downs and have users sort through and place them in categories that made sense to them. This was an interesting way to understand the user's thought process when they're looking for a particular section. I used Miro (https://miro.com/) for this activity, which was great to see my testers' mouse movements, since everything is virtual.
Revised Process Flow
I didn't want to change entirely too much of the original site. Instead, I wanted everything to make sense, and narrow down the navigation.
New Branding
The previous branding was not cohesive and consistent. I wanted to brand the site to be simple and clean; something easy to understand. The contrasting color scheme of cooler and warm tones add a nice balance to the site (inspired by the ocean and sunset skies). I wanted to keep the lighthouse and simple sans serif typeface. The branding should represent the site's mission, and represent simple navigation. The imagery should not overwhelm the user, considering the extensive information on the site.
Personas and Interview
Below are the personas and scenarios for the site. Also below is an interview with a cruiser. The interview was helpful to understand the main points of interest when booking a cruise and where to improve.
Pain Points of Current Site
Paper Wireframes
Fitt's Law
states that the amount of time required for a person to move a pointer (e.g., mouse cursor) to a target area is a function of the distance to the target divided by the size of the target. Thus, the longer the distance and the smaller the target's size, the longer it takes.
To combat this, simply removing 'dead space'. As negative space can be of importance for allowing the page to breathe, it can effect reaction time for user testing. I wanted to keep links and buttons fairly close together. Everything is relatively in close proximity of each other.
Miller's Law
It is often interpreted to argue that the number of objects an average human can hold in short-term memory is 7 ± 2.
For the drop-downs/options, I tired to narrow down the main choice to a mere seven. If the user wanted to find more information or other options, they then could go to that category's specific page.
Hick's Law
describes the time it takes for a person to make a decision as a result of the possible choices he or she has: increasing the number of choices will increase the decision time logarithmically.
My goal was to keep the page simple, and not overwhelm the user. I can imagine planning a cruise can be stressful. Having a simplified categories and narrowed down options will help user reaction time. Ultimately getting the user through the site smoothly, and painlessly.
Testing Personas
PERSONA 1 - Henry really wants to take his family on a big trip! He wants to book for a family of 12. He would like to research what cruise lines are good for families and how COVID is affecting travel. He needs help and would like to talk to someone.
- book for a family of 12
- research what cruise lines are good for families
- find out how covid affects travel
- needs help
PERSONA 2 - Betsy is 22 year old KU college student. She wants to book a trip for Spring Break 2022 for her and her college roommate. They want somewhere warm and fun! Looking for a deal.
- book a trip March 2022
- search of a trip somewhere warm
- searching for a deal
PERSONA 3 - Deb and Roger are retired. They want to depart from a city a few hours away (they live in Kutztown). They would like to go on an Alaskan or Northern Europe Cruise. They do not have specific dates.
- want to depart from NE USA
- would like to go to Alaska or Northern Europe
- no specific dates in mind
Interactive XD
Below are links to the prototypes for the cruisewatch homepage. It includes some simple animations such as hovers and drop-downs.
User Testing Videos
Ken and Danny were my volunteers to test my prototype of the homepage. I did not have the animations completed at this stage, so some of the discussion is hypothetical. My findings for this was to utilize a chat feature and more clarification of the 'Your Perfect Cruise Starts Here' section. The users' first instinct was to use the navigation.
Christian was my other user tester. He suggested similarly as Ken and Dan. He also suggested some aesthetic changes, which I agreed with.
Individual Cruise Page Process
After the homepage redesign, the next step was to create an individual cruise page for mobile. Researching other competitor sites and utilizing my peers' critiques significantly helped this part of the project. While learning about several theories throughout the course, it was necessary to design my mobile site with ease of usability and a clean design. An individual site can be overwhelming, so narrowing down the abundance of drop-downs and information from the original site was important to me.
Pain Points of Individual Page
- The rating feature was unnecessary. It just was a distraction from the main information.
- Information was scattered generally, not in proper placement. Such as the reviews; would be more effective to have all reviews in one area, instead of multiple placements.
- More clarification of icons and sections.
Occam's Razor
"...the problem-solving principle that "entities should not be multiplied without necessity", or more simply, the simplest explanation is usually the right one."
Making the booking aspect simple and easy I felt was important in comparison to the original site. Giving the user two simple options; learn more about the rooms or go straight to booking. Straight foreword.
Zeigarnik Effect
"...tendency to remember interrupted or incomplete tasks or events more easily than tasks that have been completed."
Making the drop downs and the corresponding information in order corresponds to this theory. In the previous site, the options were all over the place, causing interruptions. I wanted each large sum of information to have it's own dropdown to minimize confusion or overwhelming the user. This way the user can focus on each section, one at a time.
Van Restorff Effect
"...in any given number of items to be learned, an item that is notably different from the rest in size, color, or other basic characteristics will be more readily recalled than the others."
Making the hierarchy differentiate from each other was the primary focus. Such as the booking section, making the 'Book Now' button visibly different will visually make going to next step easier for the user.
Journey Mapping
These correspond to the previous personas. These were used for more user testing.
Interactive Layout
User Testing
When these were recorded, I was still finishing the design of the mobile site. I was still wanting more critique, as you will see in the videos. The site tested was still the flat version, however the hypothetical comments were sufficient to gain a understanding to what made sense.
User Tester 1: Desiree
Summary: Trying to understand the concept of the site. Findings were some glitches and mishaps in regards to my design. Her feedback was helpful for what to move forward with for the interactive part.
User Tester 2: Christian
Summary: Since he user tested previously, he had a better understanding of the project. He successfully browsed the site, understood some links. Gave great suggestions.
Credits:
Created with an image by Foundry - "anchor marine nautical"