Dream Cruises Website

An official website of a newly established luxury cruising brand that is launched in 2016. Product owner aims to improve brand image and distinguish the brand from the competitors after focus group section.

Pain points for informative & booking engine

  • Hard to find information based on section title / structure (e.g. Food / entertainment)
  • Quite lots of levels to view details (too many clicks)
  • Images occupy the page, does not attractive & confused
  • Comparing stateroom & privileges
  • Review Itinerary
  • Fill in personal information for all guests
  • Cannot check-in online
  • Slow loading speed


Competitive research

To compare the features with other cruise lines, see what’s features and the priority are defined by the product manager.

Information architecture

IA has been rearranged based on the internal user interview insight and my observation. I have separated pre-cruise, booked guests these two periods which enabled users to quickly locate product information and preparation checklist before cruising in a few seconds. Several enhancements are in progress based on business strategy and roadmap.

According to the interviewed users, here is the ideal priority when they are looking for a package.
However, Dream Cruises does not have many itineraries (1 cruise with max 2 itineraries), plus the shore tour does not attract enough, that’s why the priority is lower than others.

 Priority from users (8 users)  Displayed priority in revamping
  1. Destination / Itinerary
  2. Price
  3. Cruise facilities
  4. Offer
  5. Duration
  6. Suite / Cabin
  7. Ship Model
  1. Offers – promotion for package or wedding
  2. Cruise facilities – submarine, zip line, slides
  3. Company background – build up the brand image
  4. Destination / Itinerary – routines




In the coming future, ‘Destination’ will be rearranged more upfront, since the new itinerary would be more appealing and more destinations. Rearranged the items in the footer by purchase stages so that users can scan the related items swiftly.

Wireframe & UI Design

Discussed with product manager and development team in Philipines.

 Before  After


For visual, the brand elements, such as gradient wave, brand color, and stylized icons have been utilized on the new design. Therefore, the brand standard can be aligned for both online and offline.

It is observed that the vertical search engine blocks on hero banner all the time, it contains redundant searching criteria to users.
In the revamped version, hero banner, search engine, navigation all the important elements can be seen in the first fold (laptop).


Duration 8 months
  • Review on existing website
  • Information architecture
  • Wireframe
  • UI design
Year 2017

UX, wireframe, UI, website: A website revamp for e-commerce and informative cruise website

Category: Web Design