Loading

Ux Process for cruisewatch.com Michaela Ebert

The project is to redesign cruisewatch.com, a cruise website designed to help customers find their cruise. I started with competitor research, and key points to a cruise website. Followed by pain-points, and understanding the client needs for the redesign. Next step is to do some user research on the navigation while wireframing the new layout, and improving the companies overall brand. Finally, I created the high-fidelity mockup of the homepage in XD, and began the final rounds of user testing. The end result is a new, improved, and streamlined version of the cruisewatch website.

COMPETITORS
Left to Right,Top to Bottom: Carnival, Princess,Trip Advisor, Norwegian, Expedia, American Discount
PAIN-POINTS: HOMEPAGE
  • too many options in the navigations.
  • search icon too thin, hard to see.
  • drop down arrows are too small and thin in navigation
  • drop down arrows in filter are too small and thin
  • icons in filter section are too small to be useful
  • filter takes up center of hero image mean to sell the user, not annoy them
  • once clicked on, what are we searching
  • colors seem dull, especially the yellow
  • nothing to lead you down the page past the fold
  • the word cruise is mentioned too often, gets redundant
  • covid update is below the fold
  • blue and pink color fights each other
  • not enough imagery overall to sell the cruise experience
  • too much text and data viz
  • "more cruise deals" & "cruise price drops" blend in to selections
  • tabs have no organization, should be alphabetized for easier search when all options are listed
  • footer is massive and redundant for information
CLIENT NEEDS & GOALS: HOMEPAGE
  • Improved main navigation.
  • Improved filtering system above the fold
  • Would like to delete the "cruise finder"
  • Promote the price drops and deals.
  • Promote all cruises lines available on the website.
  • Simplify footer
  • Develop clear mobile experience
REFINING THE NAVIGATION
Original Process Flow
Sorting Card Activity

I gave two separate people a stack of cards with each card representing a link on the navigation bar of cruisewatch's original navigation. First, I asked them to categorize all the cards. Second, I asked them to group things they felt belong under the same category. Third, questioned if anything seemed unnecessary, or redundant, and should be removed. Fourth, I asked them to order and rename any card that seemed odd, or confusing. And based on that information I reworked the navigation bar.

In conclusion, both participants moved "destinations", and "ports" under the "find your cruise" navigation. One removed "ships" completely from the navigation. The other placed it under "find your cruise". Both participants added a "Deals" category to the navigation. Another participant moved "cruise price alerts" as a main navigation link. Some "cruise guide" articles were removed from the section by one person. The other left all of them. Both disliked the category name "cruise guide" and would like to see it changed to something along the lines of information. And one participant commented on how often the word "cruise" was used throughout the navigation and thought it to be redundant.

Updated Process Flow Based on User Feedback
RE-BRANDING SHEET
WIREFRAME
Left: Desktop | Right: Mobile
USER PERSONAS
USER TESTING

User 1:

User 1 is a male user in his 50s, with minimal computer skills. He was able to give some great feedback to how he would use the site. When first entering the site, and looking at cruises, he would look at the deals in the navigation. With that it can be inferred that many would check out the deals section if placed in the main navigation a lot of the time. This user rarely went below the fold, and told me he would use the search bar in the top, rather than look through any of the navigation itself. When asking where he would go for information on Covid updates, he completely missed it at the top. So it needed to be something brighter and apparent. Something for the company to be aware of, from user testing, the user got stuck on the "How We Help Plan Your Cruise" as a place to find a link for help. For future updates, adding a chat option in that section might be worthwhile for consideration. Based on his testing, it is good to put contact information in both the header and footer, as he 1. never made it down to the footer until directed, and 2. he did not know contacts is generally located in the footer of the page. He was a good user tester for someone in the mid to high age bracket when it came to user feedback.

User 2:

User 2 is a male in his 20s, with decent computer skills. His first response was to also look at deals first, and then look up some information guides. He had no issue finding the Covid updates after changing the button color and design. This user used the filter system when he had a specific date he was looking for. Otherwise, he used the "Find Cruises" link in the nav bar.

User 3:

User 3 is a female in her 20s. She is a fellow designer, and gives a different perspective to user testing, as she questions design elements over user elements, along with nav bar choices. She questioned some of the hovers, and more of the intended functionality of the overall site. She questioned my decision of placing ports and ships together, and inside the "Find Cruises" link. But we agreed in the end that it works, especially after considering the card sorting activity that was done earlier in the process.

THEORY IN PRACTICE PT.1

Hick's Law

The more choices present, the longer it takes a person to made a decision, potentially leading to unnecessary frustration. It is best to keep things short, simple, and organized into categorize when possible.

The navigation is filled with choices. By categorizing the sections into heading and subheadings, the choices are made easier and faster.

Miller's Law

The average person can remember 7(+/-2) items at a time. Making it better to chunk like items together.

I used Miller's Law to group each trip into a single card by placing a box around it, and within the box is text hierarchy that allows for easier reading as it is broken up by category, and then consistent throughout the other trips for easier memory recognition.

Fitt's Law

The faster and smaller a target on a page is, the more error or time it takes to find and click on the button.

On this page there are three buttons shown. Each have their own purpose. The "health & travel" button is bright yellow so it could be found easier due to its smaller size. The "login" button is intended to stand out from its surrounding, but not draw extra attention from the main button. "Find your cruise" button is the largest on the page, and is filled with a bright color. This is intended to create a large target that is easy to see, and easy to click.

Mobile Redesign

UX PROCESS FOR REDESIGNING A CRUISE PAGE

The second half of the project is about redesign the cruise page: mobile version only. Again, it starts with the pain-points of the original site, and then a low-fidelity wireframe using Figma. After prototyping was complete, I created a journey map based on the previous personas, and began user testing, completing the UX Process of cruisewatch.com.

PAIN-POINTS : CRUISE PAGE
  • no clear CTA
  • data viz is confusing and underwhelming to hype up cruise
  • itinerary disappeared from desktop to mobile
  • hidden features in dropdown, not clearly labeled
  • too much too close to each other
  • overwhelming to look at between the information and the colors
  • so little hierarchy
  • price is the largest thing on the entire page
  • room selections does not change based on imagery
  • why random % at corner of room selection
  • room selection makes you think it is a final choice before booking when its actually just to compare
  • booking button does not show up unless actually on a mobile phone.
CLIENT NEEDS & GOALS: INDIVIDUAL CRUISE PAGE
  • add ship data to mobile
  • add itinerary to mobile
  • do not add 'price history' and 'dates and future prices'
  • want more people to choose the ’suite’
  • improve data visualization
  • show similar cruises
LOW FIDELITY PROTOTYPE
THEORY IN PRACTICE PT.2

Occam's Razor Principle

The simplest solution is generally the best solution to a problem. If there is an option between two functions, the simpler one tends to be better. So edit a lot.

I used this principle to edit the amount of useless, redundant and unnecessary data viz graphs found throughout the page to what it is now, and giving the overall design more air. I also created hierarchy with a clear CTA from the start.

Von Restorff Method

The method states that the object that is most different from the rest is the most likely to be chosen, or remembered out of a multi-selection.

There is a multi-choice room selection that I used this method's reasoning for. The client wanted to sell more suite rooms. In order to draw attention to it, I changed the color of the bar, so it would stand out from the rest of the options.

Zeigarnick Effect

Uncompleted, or interrupted tasks are generally remembered more than the completed counterparts.

This section can be used to slow a viewer down. There is a carousel of images which the user can look through one at a time in order to soak in some of the entertainment value found on the ship. Along with some of the extra highlighted features as icons in the section below.

USER TESTING: JOURNEY MAP
Journey Mapping Using Persona 1
Journey Mapping Using Persona 2
Journey Mapping Using Persona 3

Findings

After doing some user testing, I have a few changes to make to the design. I need to make the entire room section an overlay, not just an info button. Even being a large image, it was still recognized as something clickable, and I should play into that for easier functionality. I also had the reviews placed on the itinerary page, thinking it would show up on all pages, but quickly decided to remove that after testing with User 1. User 1 also made a comment about room sizes that I did not expect, which was that the room was too large. I had max capacity written, but I should make that a range instead. By making it a range, I would not be alienating people that think a room is for a specific number of people. User 2 did not have many issues. His issues normally resulted from not reading the information. But just to be safe, I changed the color of the first CTA from the text that follows after it. User 3 enjoyed pictures and icons. She would definitely prefer more imagery added throughout. This user did not like the placement of "similar cruises" and liked the suggestion of switching it with "reviews." User 1 and 3 disagreed on the circle data viz chart in the reviews, but I am making the decision to keep it as more people liked it compared to not.

TRY THE MOBILE CURISE PAGE YOURSELF

Designed by Michaela Ebert | For Educational Purposes Only