Redesigning the Cruise Details Page
Our process from ideation to launch
The team and I have been hard at work redesigning our booking flow, starting with our cruise details pages. After a year or so of barely touching the design, it was time for us to finally take another look at this page. I am going to share a bit of our process, the challenges we faced and solutions we arrived at to redesign these pages.
My role: Web/UX Designer
My responsibilities: Design research, user research, concept sketches, wireframes, visual design and prototyping.
Details is one of our most visited pages on the Princess.com. People come here from search results to find out more about a specific cruise. These pages are meant to inform people of the cruise, point out any specific differences (sales, special guests or cruisetours for example) and easily allow people to progress to the next steps in order to book.
What we found out through our analytics is that our details pages were failing to meet our goals. We ran user tests on our own and with our good friends at Nielsen Norman Group. The user tests showed that we were overwhelming users with the amount of content that was being shown up front.
We received valuable feedback from our quantitative/qualitative user tests and community polls. We were able to determine five problems to address:
- Content is overwhelming and not well-prioritized.
- Itinerary is not enticing–links for port details overlooked.
- Ship features are not easily discovered.
- Stateroom information is not easily accessible.
- Too many tabs which are not essential.
The big over-arching problem with our details page seemed to be the content. Too much of it that is not well prioritized. We decided to focus on the content as our main goal and address other issues which had been lingering from before that we can now finally include–for example, responsive design.
- Provide top-level content that informs the user of the cruise voyage.
- Streamline and strategize content. It must be useful and relevant.
- Transition to a responsive layout for a good mobile experience.
- Establish the beginning of a guided continuous booking experience.
We also like to do user research as early as possible to get a sense of the community’s needs. We conducted a community survey during this phase to gauge what people expected to see at this point of the website. This helped us determine a hierarchy and show people what they wanted to see first.
With this large project looming, we decided to establish a creative brief to help communicate the objectives, requirements and process across the team. We listed down our goals, personas, findings and process.
Other requirements that we had to adhere to but was not mentioned in the creative brief were our technical limitations. Even with a creative brief agreed upon, sometimes issues can still arise later on. We had to make sure that we could redesign the page while using our same content. Changing our content was not possible in our desired timeline.
With our creative brief complete, we were able to start on the sketching.
The sketches allowed us to flesh out a few ideas much faster than on the computer. We can filter down the designs from sketches to wireframes and see what is still working and what is not.
Once decisions are made on which sketches to move forward with onto the wireframes, we continue the process on the computer.
After nailing down the layout and content we wanted on our details page, we felt confident enough to start on hi-resolution mockups. From this point our visual design process starts with utilizing our pre-established style guide to handle most of the visual design decisions–color, typography, interactions, imagery, etc.
The important part to keep in mind is that the visual design should be consistent with that of the company, in this case Princess Cruises. Given that we are a team of designers working on different areas of the website, it is important that our work looks cohesive with one another.
Validating our solution
At this point, we like to conduct some more user tests before we start coding the final design. This is where prototyping comes in. Our tool of choice for larger prototypes is Axure. I created a prototype that detailed out the flow between search results, cruise details and stateroom selection (the page just after cruise details). With this prototype, we conducted a user test with five people to see what they thought.
You can view the Axure prototype we created here (psst… it’s responsive so feel free to see this on your phone or desktop).
We received successful results with our user testing that gave us the confidence we needed to move forward (yay!). We also noted certain areas we could improve on moving forward such as content changes or quick layout adjustments.
From here we started the development process and started setting up an A/B test to get quantitative results.
With such a high amount of traffic we get on our details page (we get over 5,000 page views per day!), it is important to thoroughly test the design and make sure there are no huge problems.
We finished our testing after a few weeks once the test determined a winner–our redesign won! I am glad to say that we met the majority of our goals; engagement went up by 1.6%, progression into the next step of booking went up 47.5% and clicks on the tabs to view excursions, onboard, etc. went up by an average of 125%.
With this information our team got the green light to move forward and prepare to launch the new redesign on production. You can view the new cruise details page on the princess.com website. I have included a direct link to a cruise here to make things easier (let’s go to a Pacific Coastal cruise!).