RESUME

Cruisewatch Website Redesign & Rebrand

Role

UX Design

Art Direction

Branding

User Research

Tools

Adobe XD

Adobe Illustrator

Lucid Chart

Cruises are the best, but planning them can sometimes be a stressful experience especially when a website is clunky and difficult to navigate.

For the redesign of Cruisewatch’s website, the goal was to create a simpler, more intuitive experience that is also easy on the eyes. The navigation was simplified, a new logo was created, more visuals were added, and the new fonts and colors chosen are dependable, yet subtle and soft like an ocean breeze.

The new design results in a less-stressful experience for the user and an improved sense of security, especially when spending a large sum of money.

Overview & Goals

Cruisewatch.com is a website that monitors and showcases cruise deals. The website gathers deals for many different cruise lines and locations.

After an overview and look at Cruisewatch.com, I found that the initial website lacks hierarchy and is poorly organized. This can make it difficult for users to browse for and find specific cruise deals. Furthermore, there were basic mistakes, such as geographically incorrect labels on maps.

Rebrand Goal: To create a new brand identity for Cruisewatch.com based on conceptual use of fonts, colors, and visuals that convey dependability, security, and oceanic themes.

Website Redesign Goal: To create a website that exudes reliability and is intuitive, easy-to-navigate, and visually appealing.

Redesigning Cruisewatch.com began with redesigning the page that users land on and browse most: the homepage.

User Research and Personas

As someone who has never cruised before, I wanted to gain more insight on cruises, cruise activities, and people who cruise. So, my colleagues and I conducted user research. I conducted interviews with two different people who have been on cruises in the past.

One participant was a 20 year old college student who had cruised once with his extended family. The other participant was a 70 year old seasoned cruiser who has been on over 20 cruises around the world. My colleagues also conducted interviews using the same questions. We then shared our results with each other.

Pulling from my research, I created three semi-realistic personas to account for three different demographics of possible cruisewatch.com users. These personas varied in age, background, income, and website goals.

Original Website Pain Points

After making the personas, I went back onto the Cruisewatch.com homepage with my colleagues for an in-depth look and critique on the website to find its main pain points. Most of the pain points deal with usability and aesthetic changes while others also concern the identity of the website and brand as a whole. For example, geographically incorrect map labels can portray a lack of reliability and security which can make a user feel uneasy and nervous about spending a large sum of money.

Website Inspiration

Because there is so much information on Cruisewatch.com, I looked to other cruise websites to see how they organized and showcased information, and to see how I which elements I could pull inspiration from for the redesign of Cruisewatch.com

Some of the elements from other websites that inspired me include:

Original Website Process Flow

New Process Flow

Before organizing the elements of the redesigned website, I created a flowchart to determine the user's objectives and the steps they would need to get there.

Open Card Sorting

In order to figure out how I can best organize the navigation for my homepage, I utilized the "open card sorting" method. With this method, I wrote down the content that I wanted to group under different tabs of my navigation bar on individual slips of paper. I then asked volunteers to categorize the slips of paper as they saw fit. Afterwards, the participants were asked to title each category appropriately.

All of the user volunteers have never cruised before, but I noticed that users in their early twenties had similar grouping methods, but the user in his 50s, focused more on grouping the content depending on location/continent.

Brandsheet

For my rebrand of cruisewatch.com, I wanted to brand the site as dependable, yet friendly and welcoming. The logo features a sun that resembles a ship's wheel rising and setting behind ocean waves. For my color pallete, I utilized a tan and a variety of blues as colors that are calming and soft on the eyes. These colors are also a nod to the colors of water and sand. The reddish brown is bold and contrasts well against the more pastel blue and tan, yet it still maintains the nautical theme. The chosen fonts include a decorated serif font for headers and a modern, easy-to-read sans-serif for body copy, tabs, buttons, and drop-downs.

Low Fidelity Paper Wireframes

Before designing digitally, I created paper wireframes. Drawing out these wireframes helped me figure out how I wanted to organize and lay out all the information on the homepage as well as simplify and group the content in the navigation bar and footer.

I made two options each for my desktop and mobile layouts. These layouts mostly differed in how I wanted to present certain sections such as "deals" and "popular locations." They also differed in how I wanted the drop-downs to appear in the cruise searcher that I noticed many cruise websites include.

Homepage High Fidelity Wireframes

User Testing

Using my non-prototyped high fidelity wireframe created in Adobe XD, I asked 4 users to test my design in order to see how effective and user-friendly my website would be if it was to be created. Below are recordings of 2 different user tests that I conducted.

After user-testing, I went back into Adobe XD to make changes and prototype the homepage. I also translated the design into mobile so that the webpage is responsive.

User 1

User #1 is a 20 year old college student who has never cruised before. She used the website pretty similarly to how I intended users would use the site, but not exactly. For example, when asked how she would research family cruises, she did not try to find this information under the "Cruise by Topic" section where I have a button for "Family Cruises." Instead, she went into the navigation bar and wanted to research the different cruise lines under the "Cruise Lines" tab.

After the user test, she gave me feedback on how small the Covid alert button and phone number were. We also had a discussion about how indicating the amount of people might not be necessary in the cruise searcher because many people might not know the total amount of people going, but are just browsing deals and different cruise options.

User 2

User #2 is a 70 year old retiree who loves cruising and has been on many cruises. He knows all the ins and outs of cruising. This test really shocked me because the first thing he looked for when given the prompts was a phone number. For example, when asked to find deals or information on family cruises, he searched for the phone number to speak to an agent as opposed to digging around on the website.

Also, he did not notice that the cruise searcher was on the page until later towards the end of the user testing. As a result of this test, I made sure to make the phone number very prominent on the site. I placed it both near the deals, which user #2 recommended so that users know what number to call if they have questions about any deals, and in the footer.

UX Principles & Applications

As part of this redesign, I also looked into the psychological side of User Experience design. In doing so, I learned about different laws and principles that are used within UX design to better help users.

Hick's Law

I applied Hick's Law when I created a mega menu under the "Cruise Lines" tab of my navigation bar. I ordered the long list of cruise lines alphabetically and separated the list items into columns with a maximum of 5 items per column. Users can interpret and process the list items more easily when the items are in order and separated into smaller more manageable chunks.

Miller's Law

Along with chunking for the mega menu items, I also used Miller's Law in the footer of my website. In order to simplify and arrange the footer in a way that makes the most sense, I grouped different items of content under three categories of "About Us," "Deals," and "Cruise Tips."

Fitt's Law

I applied Fitt's Law in the main cruise searcher. I made the "search cruises" button a different color and a slightly different shape, and I placed it close to the last drop down selector of my cruise searcher. The difference in shape and color will help differentiate the button from everything else near it. The close distance will make it easy for users to naturally click the button after making their selections in the cruise searcher.