Planning A Memorable Vacation Redesigning Cruiseline.com

Cruiseline.com helps users find their dream cruise vacations through verified cruise reviews, photos, professional advice and with the help of a huge community of seasoned cruisers more than happy to answer any cruise-related questions.

Screenshot of Cruiseline.com Website

01. Goal

Update the visual design of the site to coincide with the new branding. Improve the user experience by making it easier for users to navigate the site so they can find the best cruise vacations, read reviews, get advice, learn about ships, destinations and learn more about the many other features offered by Cruiseline.com. Lastly, to improve the placement of advertising and sponsorship opportunities.

Team

General Manager, Design Lead (Yours truly), JavaScript Developer, Lead Engineer

My Role

As Design Lead and sole designer, I owned and the led the entire process including:

  • UX Research
  • Wireframes and prototypes
  • UI Design
  • HTML/CSS

Tools

  • Google Hangouts
  • Hotjar
  • Pen and paper
  • Sketch
  • InVision
  • Coda

02. Discovery

I started by doing a competitive analysis, reviewed click heatmaps and conducted user interviews and usability testing. I then gathered feedback internally from management, sales, editorial and our development team.

Results

  • Competitive analysis revealed more of a focus on editorial content.
  • Internally the team felt the homepage was long and could feel overwhelming.
  • From a business perspective I needed to improve the positioning of banner ads and sponsorship opportunities.
  • Analyzing heatmaps revealed that many users did not get past the initial cruise search functionality.
  • User interviews and usability testing revealed that users wanted to see more deals on the homepage and felt that the cruise results were very text-heavy and left them feeling overwhelmed with the amount of data being presented. They felt like they were doing work and not having fun planning a dream vacation.

Homepage Heatmap

Screenshot of Cruiseline.com Homepage Heatmap

Cruise Search Heatmap

Screenshot of Cruiseline.com Cruise Search Heatmap

03. Ideation

After presenting my findings to the team and reviewing their feedback I began to sketch out my ideas. I then created wireframes based on those sketches. Using a lo-fi prototype I user tested the wireframes and the feedback I received was very encouraging. Users felt the new layouts were clearer and easier to navigate. Users liked the idea of seeing destination photos within the cruise results instead of the usual ship image and felt it broke up all the necessary data they needed to digest when making a cruise purchase decision.

Homepage
Sketch

Screenshot of Cruiseline.com Homepage Sketch

Cruise Search
Sketch

Screenshot of Cruiseline.com Cruise Search Sketch

Homepage
Wireframe

Screenshot of Cruiseline.com Website Wireframe

Cruise Search
Wireframe

Screenshot of Cruiseline.com Website Wireframe

04. Final

With wireframes in hand and the feedback I received from users and the team I began producing the final UI. I made a final tweak to the layout and improved the visual style of the site utilizing the new branding.

Project status: The new website is currently under development.

Homepage

Screenshot of Cruiseline.com Homepage

Cruise Search

Screenshot of Cruiseline.com Cruise Search Page