Design of new SaaS B2B platform for cruises
6k+ operators, consolidators, and agencies searching for and booking nationally and internationally.
TIMELINE
Jul/2024 - In progress
DEVICES
Desktop / mobile
MY ROLE
Senior Product Designer
Synthesis
Introduction
Company: Envision Technology
Client: R11 Travel Co. (Private Label)
Project: B2B SaaS Platform Design – Cruises Product
Objective
The goal was to overhaul the user experience (UX) and redesign the UI of the Cruises platform to make it a market leader in Brazil, surpassing its main competitor, Krooze, in both features and user experience. This was part of a larger initiative to strengthen R11 Travel Co.’s suite of travel tech products, including flights, hotels, buses, cars, and API integrations.
The problem
Although users generally rate the current version reasonably well, they see Krooze as a direct competitor with significant advantages in features and user experience.
My role
I am the only Product Designer in the company. In this senior position, I made it happen, leading the UX and UI design process, and collaborating with a cross-functional team comprising the CTO, software engineers, developers, product owners (PO), and stakeholders, in this tech company.
Product discovery process
User Research: conducted interviews and surveys to understand user pain points, needs, and expectations.
Benchmarking: analyzed the competitor’s strengths and weaknesses, particularly Krooze, which is seen as the primary competitor by users.
Wireframing: designed wireframes based on research insights, aiming to improve usability and streamline the user journey.
Usability Testing: ran iterative usability tests to refine the interface and ensure the design was intuitive and user-friendly.
Outcome
The redesigned Cruises product became a key revenue driver, attracting over 4,500 travel agencies in Brazil. With a subscription fee of $49/month per agency, this resulted in an annual revenue of $2.6M (49 x 12 x 4,500). Previously, the platform was free for agencies.
For every R$1 invested, the sector generated R$4.22 in the country. R11 Travel will expand its operations globally with the new version of the product. In this B2B project, we renewed the user experience and redesigned the UI, making it the consolidator's largest project since 2016. The Cruises product is part of a set of travel tech products: flights, hotels, buses, cars, expenses, and API.
User-centered approach
Problem #1
Agents do not feel confident
using the system
The interface lacks important information expected by the user.
EXAMPLE
The search engine on the Home page does not display ports where the ship passes through, nor country filters, suggesting that no ship passes through the places the traveler desires.
IMPACT
Without the complete result, agents tend to spend less time on the platform and, in the worst-case scenario, replace it with a competitor's solution.
Defining the problem
How might we redesign a better user experience that is superior to the current tool and superior to the direct competitor to become the #1 platform in Brazil?
Objectives
Of the business
Be the agents' first choice
With the new platform introduced, we want to highlight the ease of searching and booking the main ships and cruises in Brazil and around the world. Our goal is to deliver the best search, booking, and fast payment experience for our agents while strengthening the R11 brand globally.
From the user
Greater accuracy in information
Work with the development and engineering team to create a sorting engine that automatically shows users complete lists organized by destination, cruise, stateroom, price , and any applicable filters, based on their needs.
Our users
First, we dove deep into the behavioral data of users from the previous platform to understand them better. We conducted user interviews . We focused on identifying what our users are looking for so they can book cruises, reducing friction.
We defined 3 user archetypes and mapped their respective jobs to be done .
Lays
Travel agent
Use the email quote function
She is a regular user of the platform and values sending quotes via email as the most important sales feature.
JOBS TO BE DONE
When you send a quote via email, you want to be able to show your customer dynamically updating itinerary and pricing information so you can deliver what matters, without rework.
Facilitating the flow
"I expect the best designed quote with dynamic link , it avoids rework. It will make my life and flow much easier."
John
Tourism entrepreneur
Compare tools constantly
Frequent user of multiple cruise platforms, which makes it difficult to convert our platform into your tool of choice.
JOBS TO BE DONE
When you seek to serve your customers through the platform, you want to be able to resolve the task yourself, without support, so as not to give the impression of a lack of credibility to the end customer.
Barriers and impediments
“Since cruise is an expensive product, I need a reliable interface, without having to call support .”
Daniele
Operator Director
Aware of the limitations of the platform .
Travel agents want practicality, so they need to streamline the system to remain competitive.
JOBS TO BE DONE
When you search for cabins for a quote, you want to find complete information in the search results, so you don't have to ask the reservations department, as this makes the process more difficult.
Loyalty and satisfaction
“ There are other tools with a much better experience .
The R11 platform was already my first choice.”
Process
Design sprints
The purpose of remote design sprints was to facilitate cross-departmental collaboration. Product designers, product owners, developers, and the CTO contributed their ideas and knowledge to these sprints on a daily basis.
At the kick-off meeting, I briefed them on the end-to-end UX process that would be used. However, expectations regarding delivery were high and the deadline was short. This project was approached in a non-linear way , starting with a high-fidelity interface redesign , then moving on to low-fidelity wireframes, and working on the other UX techniques in parallel.
Gathering insights
User Interview
Easy-to-use products makes you more money
Loyalty and satisfaction
Facilitating the flow
Barriers and impediments
Wireframes
To get an idea of what we had in our hands and aspects of the flow, possible paths were designed. There were dozens of wireframes to arrive at the high-fidelity versions.
Part of low-fidelity wireframes made with Draw.io
User flows (Miro)
I mapped and designed the user flows by feature, with scenarios and user stories based on the research.
Informed design decisions
Prototypes for usability testing
The designs went through iterations to:
improve usability
make decisions based on feedback
judicious introduction of features
Home Search Engine
We wanted the engine to encompass more search possibilities . After user research, we realized that the old platform’s engine was outdated in terms of features. Why? It was missing what cruise travelers care about. Competitor analysis validated our assumptions.
The search did not deliver all the
results expected by the traveler
The old engine was a discreet popup
with the native system interface
The interface in the mobile version was not planned
BEFORE
New improved engine
AFTER
The Passing Through and Visiting options have been added. Ex: there are travelers who buy a cruise to Greece, only if the ship passes through the Pyrenees.
Even in the beginning, the consultant can enter the Loyalty Program and Promo Code.
New feature. The consultant can choose in which currency the traveler wants to pay, meeting global needs.
Search results (list of cruises)
One of our design principles is that each screen and component has a unique purpose. The information hierarchy has a clear goal: to make it easy for the user to quickly scan the key information .
The result list with a code-based interface, not search and design
It all looks the same
Lack of information hierarchy
BEFORE
New Results List Card
Key information organized by relevance
New Compare feature
Checkbox for the new
feature Compare
Upcoming dates opens a list of upcoming departures, sorted by price. This solution saves space and creates on-demand interaction.
AFTER
New Compare feature
The Compare feature transforms the user experience by allowing customers to choose up to three cruise options and review: Cruises, Ships, Prices and Itineraries .
We are not only elevating the experience, but also increasing conversion and satisfaction rates .
Comparison and Live Chat
Comparison of Cruises, Ships, Prices and Itineraries
The main information
of the comparison criterion
appear above the image
When choosing another criterion through Select, the information is repositioned
CTA at the beginning of the flow
The agent can share with the traveler or send
by email
New Live Chat feature, targeting conversion
NEW FEATURE
Stateroom types
We show users the list of cabins that belong to the chosen super category. We needed a scalable design because there are hundreds of cabins and thousands of fares.
We organize filters and create two comparative sorts by rate types.
Old result for staterooms
Again, lack of information hierarchy
BEFORE
New list of staterooms types
Important point of information architecture:
Super category > Category > Status > Cabin type > Rate comparisons
Chevron expand & collapse
Cart button that works as a B2C shopping cart
AFTER
Understanding feedback
Usability testing (Maze)
To validate our designs, we tested prototypes and conducted usability tests with real users using new design. Moderated remote testing was performed.
6
Scenarios of the main flows
-
Search for cruises that lead to staterooms
-
Sending a quote by email
-
Comparison between cruises
-
Comparison between staterooms
-
Itinerary consultation
-
Checkout
Perspective on impact
Conversion Rate Optimization (CRO)
Since this is a huge project, new designs are delivered in phases. For confidentiality, I have omitted the actual values for these metrics.
+ 50%
Overall increase in searches
+ Search for cruises for 4+ passengers
+ Search for packages with excursions
+ Long cruise searches
80%
Click-through rate on the new Compare feature *
(Cruises, Ships, Prices, Itineraries)
* Design decision based on User Reseacrh
-70%
Reduced calls to support (organized and detailed information)
+ 70%
Increase in conversion rate
without having to ask questions to support
100%
Need for complete presentation of itinerary and ship's technical data sheet .
Unanimity among the users interviewed.
More interactions with fewer clicks
Final design
The platform was not intuitive and did not focus on key conversion actions. Now, the platform has a new, modern look and an improved mobile and web experience, aiming for fewer clicks. We have revamped the product to be the #1 platform in Brazil, Latin America, North America and Europe.
Style guide, libraries, components
Material UI
I started with Material UI Design at the request of the development team. Material UI is an open-source React component library that implements Google's Material Design. It is comprehensive and can be used immediately in production.
It evolves as we go along.
Typography
Icons
Buttons
Colors
Menus
Cards
Modals
Mobile version
What we´ve learned
Adapting to changes in consumer behavior
We needed to stay grounded and user-focused, but also take into account product changes to match the cruise market and B2B user behaviors.
Products do not exist in a vacuum
With a major overhaul of the user experience, internal processes can be affected. For example, the development and engineering team needs to change the backend and the way it searches and lists results according to brokers, and this is not easy.
If I didn’t collaborate with these teams, listen to their constraints, and design according to structured business rules, our beautiful replatform would just be a pretty prototype, but it wouldn’t work when deployed to production.
Work one phase at a time
I've learned to break complicated sprints into smaller chunks. This makes it easier to design and address obstacles as we go.
Future
Iterations and refinements
In a product of this scale, even though we have refined a lot before launch, it is certain that we will encounter small bugs.
Post-launch optimization
Crucial step for UX improvement and product launch. With key actionable insights, we can design a better experience for our B2B users.
Continue to create better experiences
Follow our product roadmap and continue to follow our design principles.
