Loading

UX Process for cruisewatch.com Kaity Cochran

Creating a new user-friendly experience for the website: cruisewatch.com through competitive analysis, re-framing organization, breaking up information, researching potential users, finding pain-points, prototyping, and user testing.

COMPETITORS

INITIAL PROCESS FLOW

CARD SORTING

REVISED PROCESS FLOW

BRANDING

PERSONAS

PAINPOINTS

  • Icons and dropdowns are too small
  • No incentive to scroll on home page
  • Images are pixelated
  • Color scheme is too bright / not pleasing to the eye
  • Too many overwhelming options
  • Unnecessary data visualization
  • Search bar takes up whole width of page
  • Search bar also covers navigation when open
  • Really busy Footer
  • No hover animations on home page
  • Navigation does not have good contrast on hero image
  • Confusing wording & way too much repetition

WIRE FRAMES

UX PSYCHOLOGY LAWS

  1. Fitt's Law: The amount of time it takes for a user to move their cursor/finger to a target area. Making the important links the obvious choice, allowing breathing room between choices, and grouping items together help communicate functionality.
  2. Miller's Law: The *magic* number 7 +/- 2, for the minimum and maximum amount of content to be displayed. Chunking items together, using hierarchy, and limiting the amount of "Call to Actions" are all great ways to convey organized information.
  3. Hick's Law: Keep it short and simple! The more options available to users, the longer it will take them to make a decision, so keeping things broken up into steps gives them smaller bites to "chew".

HOMEPAGE

Desktop & Mobile Screenshots of Homepage

USING THE UX LAWS

1. Combination of Fitt's and Miller's Law by highlighting the CTA's with the yellow brand color, and limiting the amount of them to point out the most important information:

2. Using Hick's and Miller's Laws to give users fewer options at a time by chunking and breaking them up so they can make decisions more efficiently. I used scrolling sections to display fewer chunked options for Best Deals and Cruise Lines/Destinations. I also limited the initial above the fold cruise choices to 8 dropdowns, and limited the navigation information to display when the user hovers on the category or selects the dropdown on mobile.

PROTOTYPES

user testing

Mildly embarrassing, but in the end very helpful to get the prototype to where it is now (:

INDIVIDUAL mobile CRUISE PAGE

creating an enhanced mobile experience for cruisewatch's individual cruise page and its features. accomplished by catering to the client's goals by adding useful information and removing unnecessary elements, increasing user potential of choosing a suite, improving data visualization, and create a new section to view similar cruises to keep users on the website longer. finding pain points, journey mapping, user testing, and applying ux theories allowed me to end up with a successful end product.

PAINPOINTS

  • poor data visualization
  • clunky mobile layout
  • no access to tabs that are available on desktop
  • too much information in itinerary section
  • book now button covers content, always static

ux theories

  1. Occam's Razor: Used when problem solving, to simply get rid of unnecessary elements that could make a design less efficient, "Simplicity is refreshing and shows care"
  2. Von Restorff Method: With multiple similar items, one item with a distinctive feature is going to be the easiest to remember creating the "isolation effect" by using color, size, placement, etc.
  3. Zeigarnick Effect: users will remember tasks that are incomplete more so than ones that are complete, like a cliffhanger at the end of a movie or tv show episode

individual cruise page

SUMMARY TAB

Screenshots of Summary Tab on Individual Cruise Page

SHIP OVERVIEW TAB

Screenshots of Ship Overview Tab on Individual Cruise Page

ITINERARY TAB

Screenshots of Itinerary Tab on Individual Cruise Page

using the ux theories

  1. I implemented Occam's Razor Principle by making a decision to remove the times in the itinerary and replacing them with the activities' icons, as well as simplifying and breaking up the ship's parameters to be easier to understand.

2. To incorporate Von Restorff's Method, I took advantage of the client's ask by highlighting the Suite room first to be the first room option that users see as they scroll down the summary portion.

3. In order to keep the users engaged and putting the Zeigarnik Effect into use, I made sure that both of my horizontal scrolling image sections were peeking in as previews on the sides. I also decided to include a button below the rooms section to tease that there are cruise activities to be viewed after my user testing.

journey mapping

high fidelity prototype

user testing

FINDINGS

While user testing, here are the things I found that needed to be tweaked or that were helpful:

  • activity locations need to be added in itinerary page
  • when comparing room prices, some users went for the similar cruise section to see different options
  • found it helpful that the ship's initial rating was in multiple locations
  • would be more effective if the rooms section had a book now button so the users don't have to scroll back to the top in order to book
  • needs more context for finding kid and family friendly activities on the itinerary page, some users had trouble finding it at first
  • could be useful to have a teaser for the activities on the summary page

thanks! (:

Created By
Kaity Cochran
Appreciate

Credits:

Created with an image by Dannysee - "cruise ship travel"