# travel & hospitality

a multicomponent system for managing luxury travel agency’s offer

backend

Django

Django REST Framework

Python

PostgreSQL

design

UX Audit

UX Enhancements

UI Enhancements

UX Design

UI Design

frontend

React

Redux

Next.js

Webpack

HTML5

CSS3

Functional Testing

Manual Testing

Cypress

tools

Nginx

GitLab

Docker

Slack

Jira

~750

luxury properties

destinations

months to develop a complex system

design screens

The product we developed for Leo Trippi, an award-winning travel agency specializing in luxury ski chalets and tailor-made escapes, is based on three pillars. To begin with, Python-based BackOffice Server stores data about Leo Trippi’s luxury holidays offer and provides a user-friendly interface for managing the content on the client’s website. Then, the Pricing and Availability Calendar & Sales Dashboard facilitates access to data and management of the offer on the part of the client’s employees. Finally, the redesigned Leo Trippi website makes it easy for the end-users to quickly find and book a property that matches their expectations – regardless of whether they’re browsing on web or mobile.

When we first met Leo Trippi, they wished to have a new interface for one of their applications created and implemented. Sounds like a basic task, doesn’t it? However, as we talked more about the clients’ expectations and the current situation, we discovered that they might need a more comprehensive service than we initially suspected.

During the discovery calls and three scoping sessions, we learned that the technology fuelling Leo Trippi couldn’t keep up with the company’s business growth. On the one hand, being made of codependent WordPress-based applications, the system struggled with scalability and efficiency of the current backend tech stack. On the other hand, the complex architecture harmed UX by limiting flexibility and hindering the work of the system’s users.

With solutions that would suit a startup but not a scaleup in place, the systematic development and maintenance of the system over time would be an enormous challenge. And since the backend always influences the frontend of the system, we knew that revamping the interface wouldn’t do in this case. With the real issues being the bulky code and scattered functionalities, what the client needed was, first and foremost, a more cohesive system architecture. Such an approach was undeniably more expensive than the implementation of the new interface only; however, it was more efficient and economical in the long run.

Nonetheless, we didn’t forget about the client’s desire to change the look and feel of the website. In the end, we included its redesign in the scope of work after the third scoping session.

After the clear presentation of pros and cons, the client appreciated the business benefits of the proposed solution and agreed to replace numerous systems with one source of truth covering the entire offer of properties and available services.

The first pillar of the newly-built system is the Wagtail-based BackOffice Server which deals with storage and migration of data such as properties, operators, destinations, etc. The second part is the Pricing and Availability Calendar & Sales Dashboard – a frontend app that grants different permission levels to users with different roles, thus doing away with the need for two separate systems (initially there were two applications that we integrated into one tool). As the dashboard is integrated with an external API, it also reduces the share of manual work needed for defining prices and availabilities of respective properties. The third pillar is the Leo Trippi website, which we developed and designed from scratch, bearing in mind the findings of the usability audit. In this case, we focused on improving information architecture, navigation, and mobile experience.

When choosing a tech stack for this particular project, we wanted to lay the foundation for its further development and scalability, which is one of the reasons why we went for Python and Django on the backend. Thanks to the use of ReactJS and REST APIs for data distribution, on the other hand, we ensured continuous communication among all applications and data consistency. Last but not least, we set up the system on a custom AWS infrastructure which ensures reliability, security, and improved performance.

To best address Leo Trippi’s needs, we put together a dedicated team of UX and UI designers, frontend and backend developers, a QA specialist, and a Project Manager. We followed Scrum best practices throughout the development process and held regular meetings such as planning, review, or retro to stay as flexible and productive as possible. Our work was divided into 2-week sprints, and the progress was regularly logged into Jira.

The project was a major challenge for us for a couple of reasons. To begin with, suggesting a solution that exceeds the initial scope and budget significantly was risky. However, the client appreciated our honesty and proactivity. Then, translating legacy WordPress apps into a coherent system was quite a demanding task, which we fulfilled thanks to an in-depth analysis of the connections between them. Finally, the product’s business logic was pretty unique for the travel industry, which called for some out-of-the-box solutions.

backoffice server

A source of information about Leo Trippi’s luxury holidays offer (e.g. about properties, suppliers, destinations, seasons, pricing, and service levels) as well as a user-friendly interface for managing the content of leotrippi.com. Our goal was also to automatically migrate the whole data of properties and operators from the old system into the new one.
api integration

The system is integrated through a REST API with exclusive operators of luxury properties across the Alps. It significantly reduces the amount of manual work that adding information about prices and availability usually requires.
search

The advanced filtering options and the fuzzy matching program allow users to find properties that meet their expectations quickly. Bearing in mind the business logic and industry-specific objectives of our client, we also enabled custom data picking in search. It’s worth mentioning that the query parameters are passed from search to a given property page, thus freeing the user from the burden of having to re-enter the parameters and enhancing overall UX.

pricing and availability calendar & sales dashboard

A frontend app for adding information about prices and availability. It also allows to view and filter accurate information about them. By implementing the system of roles, we managed to reduce the complexity of having and maintaining two separate systems while keeping the same key functionalities.
property page template

The hero header has been designed to draw users’ attention to the exclusivity of properties. The implemented sub-navigation, on the other hand, allows quick navigation through the whole page quickly. Having a positive user experience in mind, we enriched the template with the availability and pricing grid that facilitates a quick overview of how to rent a given property.