A Large Website as the Main Sales Channel – Transparent for the User, Manageable for the Administrator

Challenge

A monolithic multilingual website on two separate domains (maistracamping.com and maistra.com) had to be merged, while the main services had to be split into several smaller ones to ensure maximum speed, scalability, manageability and reliability. The user interface had to be upgraded, with a focus on a booking process tailored especially to mobile devices, and the loyalty programme had to be integrated, while user journeys had to be changed. The client wanted the websites to be equally fast, regardless of the user’s location, while scoring maximum points on SEO, accessibility and loading speed tests. We tested these three metrics using Google Lighthouse. Additional challenges of the project were to develop a complex website with more than 100 UI layouts and complex functionalities in the shortest possible time, while allowing the client to seamlessly input content during development.

Solution

In the case of large websites, it is important to set priorities. At Maistra, we focused on the outcome of the project and selected the key functionalities that are important for achieving its business goals. Given the ratio between the time required and the expected result, we undertook the development sequentially and monitored progress and impact throughout.

Discovery phase

During the discovery phase, we worked with the client to define the objectives of the project and how they would be achieved. Analysing the current website and company processes helped to understand the problems and facilitated the choice of technology and solutions. We examined the documentation of the services already in use and defined the user paths. The main focus was how to increase conversions and ensure the website is fast and secure.

User experience and UAT

Based on the documentation we prepared in the research phase, we drew wireframes or flowcharts and wrote scenarios for testing (UAT). When designing the user experience, we followed the “mobile first” principle, which means that we adapted all diagrams and scenarios to mobile devices first. For functionalities that could not be done on mobile devices or would be too complex, we looked for alternative solutions. We have organised the information structure in a way that makes it easy for the client to edit the content, while guiding the user to the desired destination. Another challenge was to merge the maistracamping.com and maistra.com domains, which unified the purchasing process for different types of accommodation.

User interface

The most difficult part was designing the user interface for more than 100 templates. The client wanted a new, fresh design with a “wow” effect, but at the same time they needed to ensure maximum speed in the development and operation of the website. We developed a design system that allowed us to have an overview of the components, their use and behaviour and variations throughout the site. The aim was to use a manageably large number of different elements and to control the development of new ones. This saved us a lot of time later in the development process. For the user interface, we also chose the “mobile first” principle and designed all the elements for mobile devices first, and only in the next step for desktop devices. We paid special attention to accessibility (adaptation for the visually impaired), which is a key factor in achieving a great page ranking result. We wanted to make the site attractive and engaging through micro-interactions. Large typography, headlines and carefully selected photographs set the tone of the page, supporting the carefully selected and tailored content.

Programming and implementation

To avoid a single point of failure, we divided the system into two parts: the frontend, which is exposed to users, and the backend, which has no contact with users. For the frontend, we used Jamstack and static pages to minimise security vulnerability while ensuring the fastest possible way of working. We solved the dynamic parts with Vue.js and the implementation of external services via APIs. Using Netlify technology allowed us to develop quickly without complex DevOps operations. Setting up all the necessary environments and automated deployment significantly reduced the time needed for the entire development. The use of Netlify CMS (Git-based) is the key to fast and dynamic development of CMS functionality, which saved us a lot of time. The process of implementing a reservation system with a limited number of calls was very challenging, so we developed a customised parallel reservation system on the Azure platform that can handle a larger number of calls and allows for faster performance. A particular challenge was to get the redirects and all the SEO requirements right for this merger.

Results

• improved user experience,
• integration of the booking platform and optimised booking process,
• user interface adapted for different devices, with a focus on mobile,
• integrated loyalty programme,
• HR portal,
• DAM integration,
• advanced search – Algolia.
• DesignRush, known for its web design awards has chosen our design to be featured among The Best Travel & Leisure Website Designs

More about the project on Netlify Blog