Conversion rate optimization of an Ecommerce website through UX design

Time line

March 2023 - June 2024

Role

Remote product designer (freelance)

For

Cruisecode

Tools

Figma, slack

Introduction

Cruisecode is a E-commerce website that allows cruise visitors arriving to Alaska to schedule excursions according to their cruise itinerary schedule, For every stop of a cruise ship in a city the website will show all the excursion available for booking based on the location and date of arrival of the cruise ships in those locations.

In this project I redesigned this E-commerce for Cruisecode website to increase the conversion rate.

Responsibilities

I played on the elements down bellow to increase usability and apply persuasive design tactics to increase conversion

Copy, Illustration, motion

Effective copy, illustrations, and motion increase e-commerce conversions by engaging users and guiding them seamlessly through the shopping experience. Persuasive copy builds trust, tailored visuals reinforce brand identity, and subtle animations highlight key actions, making users more likely to complete purchases.

Design pattern

E-commerce design patterns increase conversions by creating familiar, intuitive interfaces that make shopping easier and faster. This familiarity builds user confidence and reduces friction, encouraging more purchases.

Usability best practices

Applying usability best practices on an e-commerce website boosts conversion by creating a seamless and intuitive user experience. Principles like discoverability, error prevention, and clear system feedback help users navigate effortlessly feeling confident making purchases. minimalistic visuals reduce friction and decision fatigue, encouraging users to stay on the site and complete their transactions leading to higher conversions.

Psychology

Techniques such as displaying social proof through reviews and testimonials build trust, while creating a sense of urgency with limited-time offers or low stock alerts prompts quicker decision-making. Employing the principle of reciprocity by offering free content or discounts encourages users to reciprocate with a purchase, all leads to increase for conversion rate.

Booking website

When I was first hired in cruise code their priority was to create the CMS portal to manage the users bookings, I suggested the idea to work on the design of the booking website because is the user first interaction with Cruisecode.

The idea was accepted but with minimal changes to the initial design since the priority of the developement team was not given to the website

The legacy website had the following issues:

The design

Cruise selection

Before

After

CRO UX strategies implemented in this section

Copy: The copy reflects the purpose of the entire page and direct the user to the action they need to take.

Illustration: The communicates the travel nature of the website to set the expectation of the user.

Usability best practices: creating attractiveness, minimalistic design that increase trust.

Psychology: Adding scarcity through sales count downs that increase conversion.

Excursions page

Before

After

CRO UX strategies implemented in this section

Motion: Adding hover & selected effect over the card and selection list elements to increase the visibility of system status.

Best practices: Making the search functionality discoverable by the user which increase the time of interaction and therefore conversion, Adding attractiveness, minimalistic design and UI design basics like alignment and spacing.

Psychology: Adding scarcity through sales count downs, adding "best seller" badges as social proof, adding discount badges to increase scarcity all will contributes in increase of conversion.

Individual excursion

Before

After

CRO UX strategies implemented in this section

Psychology: Adding scarcity through sales count downs, adding "best seller" badges as social proof, adding discount badges to increase scarcity all will contributes in increase of conversion.

Pattern: Making the product page designed similarly to the other E-commerce website used by our users to increase learnability and trust.

Best practices: Increase the consistency of the design across the diffrent website by creating a visual identity and UI kit, that will increase trust.

Excursions cart

Order

Before

After

CRO strategies implemented in this section

Patterns: Reinvent the shopping flow to is similar to the website the user is used to increase the learnability of the product.

Best practices: divide the checkout into predefined steps the user can visualize to feel more motivated to complete all the steps.

Thank you page

Live websites before and after the redesign

Before

After

Copyright 2024 © Habib Bourada