Website Redesign
Cruises should be relaxing and fun, but planning them can 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 cruise booking experience and to give Cruisewatch a rebrand that conveys credibility and dependability. Visual hierarchy was established, the navigation was simplified, and a new brand guide was created.
UX Design
Art Direction
User Research
User Testing
Figma
Adobe XD
Adobe Illustrator
Cruisewatch is a travel agency website that allows users to browse and book cruise deals from different cruise lines.
Cruisewatch’s website is info-heavy, but lacks hierarchy and has inconsistent design elements/UI, making it difficult to navigate and use. Furthermore, there are some general errors that can affect the brand’s credibility such as geographically incorrect labels on map images.
Branding Solution:
Use fonts, colors, and visuals to create a brand identity for Cruisewatch that demonstrates dependability, consistency, and the brand’s oceanic ties.
Website Solution:
Create a highly accessible website that has clear visual hierarchy and consistent UI and is intuitive to navigate.
To start my redesign of the Cruisewatch website, I had to begin by analyzing its existing site. From my analysis, I picked out pain points that can cause confusion or frustration to users.
Old website
Pain Points: Homepage
Pain Points: Cruise Details Subpage
Because there is so much information on Cruisewatch.com, I looked to other cruise and travel websites to see how they organized and showcased information.
Some of the elements that I liked from other sites included:
To get a better understanding of cruisers and Cruisewatch’s potential audience, my colleagues and I interviewed past cruisers and shared our results. I interviewed a 20 year old college student who cruised once with his extended family and a 70 year old seasoned cruiser.
Based on my research, I created three semi-realistic personas from different demographics. These personas varied in age, background, income, and website goals.
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 sub pages 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.
For my initial wireframes, I used pen and paper which allows me to think and draw out my ideas quickly. I created multiple layouts on paper and picked the best options based on peer feedback and critique.
I then created digital wireframes in Adobe XD and Figma. (I would not use two different prototyping software for a real project, but since we wanted to gain as much UX exposure during the course of this project, we used both XD and Figma.)
The new branding aims to convey the site as dependable, yet friendly and welcoming. The logo is a ship's wheel that represents a sun rising and setting behind ocean waves. For my color palette, I utilized a tan and a variety of blues as colors that are calming and soft on the eyes
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.
To make my prototype, I combined my low-fidelity wireframes with my brand guidelines and photography.
Check out the prototype below!
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.
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."
I applied Fitt's Law in the main cruise searcher. I made the "search cruises" button a different color and shape, and I placed it close to the last drop down selector in 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.
Using my created personas and user journeys as a script, I asked two users to test my static mockup. After those were tested, I made revisions and tested the animated prototype.
User 1: 20 year old college student majoring in engineering
User 2: 70 year old retiree who has been on over 20 cruises
User 3: 20 year old college student majoring in design
User 4: 23 year old student majoring in design
If I were to do this project again, here are things I would do differently.
Although I did lots of research to find layout and information architecture inspiration, I did not realize that there would be so many button/typography tiers until I was deep in the design process. For instance, I did not consider how I would style sale and deal callouts in the early stages. If I had determined from the start, the stylings for all my button and typography levels, it would've saved me a lot of time.
For my user research, I only reached out to two people. Although they had different experiences cruising, they both enjoyed cruising. I would love to also interview people who've had bad experiences with cruising and booking cruises to know more user pain points.
For my user testing, the majority of my participants were college students, some of which were also studying design. As a result, most tests went pretty smoothly. I would love to test and interview more older people as well as people who have more experience booking cruises and finding cruise deals to see what are the best design choices