Within the Product & Design team, we wanted to create reusable components and modules library that we could use on other landing pages, to achieve this we created the UX/UI designs for the cruise ship pages.
UX Research Methods: Review user behaviour videos and heatmaps using Hotjar of the current content pages, then analyze competitors websites.
Working within the Search & Landing pages team, The project consists of one Project Owner, a UX/UI Designer and two Developers. Product & Design Team reviews throughout the key stages of the process!
UX Design for the Cruise ship page
UX Research Methods: Site Audit of what components and modules we have, Competitors Analysis, used SketchApp to create the UX Wireframes
- User interaction only provided a very low conversion rate
- We needed only one clear conversion goal of getting a new user into the search pages, and then make sure every element of your page supports this conversion goal.
- The one CTA (call-to-action) button always visible, so the user can decide any time.
- We needed to break up long content with subheadings, bullets and improve formatting to make it easier to read.
UI Design for the Cruise ship page
I decided it was more structured with the use of the components and modules! I started with the areas that had the greatest potential to improve conversion rates.
- I increased the font size and spaced out so it’s easier to read
- Developing a Style Guide within the Design Team for UI components and modules, Typography, Buttons, Colour Palette
- Example: Added pulse animation on buttons that will work on all devices so the user knows when they have clicked, CSS hover effect won’t work!
- Designed and built reusable Components and Modules Library which use there own individual style sheet so can update once and will update throughout the website
Cruise ship page concepts
Made change to the HTML/CSS structure for content pages, which improved the Google natural search results views by 20%