Due to the NDA with the client, the case study explains the problems solved by DevriX and our process breaking the business requirements into technical components and software architecture without sharing brand names and URLs.
We were hired to rebuild an old website in the tourism industry, featured by CNN Travel. Our team was in charge of the WordPress development (both frontend and backend) and we collaborated with a Webby Awards designer and an external project manager.
The old website was generating revenue, but it’s design was circa 2006, and it was not appealing at all. Our aim was to strengthen the brand, unify the messaging, and provide an appealing and usable way for tourists to find new trips via different channels.
Our Business Process
Our project manager was involved in the planning process during the wireframe design. We had an initial discovery session discussing the business goals, target audience, current results and goals over the next 3 years. We analyzed the platform requirements based on the marketing campaigns, SEO requirements and advertisement goals of the marketing department.
We went through several iterations of wireframes and three iterations of design work until we all agreed on a solution that establishes a better brand identity and provides a highly usable platform for our niche target audience.
Technical Implementation
Our team consisted of 6 people – a frontend developer, two backend developers, JavaScript developer, a technical lead and a QA. Our frontend collaborated with our JavaScript expert in order to build a highly interactive user interface with various transitions, AJAX-driven travel search filters, a dynamic booking form with flexible pricing and an interactive Google Map with custom design.
Our backend engineers were in charge of transferring the existing data from the original website, building the travels module, a custom post type for Trips, and several additional post types and taxonomies handling different trip combinations.
Trips and Departures
One of the challenging bits were defining the trips and destinations engine. We combined several connected post types and taxonomies in order to design flexible trips with varying schedules and pricing options.
Our audience was international, and we had to support different currencies. Trips included some variable costs such as transportation (bus or plane) and accommodation (hotel bookings) and prices were dependent on the season and availability.
Additionally, trips belonged to several different categories, suitable for different types of people: adventurous vs. leisure, and trips for groups, singles, or mixed.
Our final implementation consisted of a flexible model for defining trips, assigning different possible dates for them (based on requests and availability of the guides), and departures for each of them. Pricing was assigned to a departure, which was connected to a trip, and trips had flexible agenda and duration (number of days) that was controlled with a trip planner backend dashboard on a per trip basis.
Trip Filtering Engine
Our trip locator displayed all of the available trips and included various filters for the type of trip, duration, preferred time interval, area. Our date filter validated all of the departures in this area within the month, pulled the connected trip and displayed all of the information in a brochure-alike container.
This allows us a refined control over different departures, connecting trips to each one of them and assigning trips to multiple departures at the same time, being able to control the pricing when higher fees are being requested from a hotel or a transportation company.
Booking System
The booking system is a flexible form on the Book a Trip page with several dropdowns for departures, travels, and dates. Each of the dropdowns or date pickers automatically filters the other controls.
For example, picking a start and end date filters all of the departures available then, and pulls only their connected travels. Selecting a trip pulls all of the available departure dates. This flexible model allowed for different strategies – people interested in a specific travel destination, or looking for the best place and price during a fixed interval of time.
Pricing is automatically populated in a sidebar box and updated when the choice is updated as well. Since the tickets are sent physically with a gift from the tour company, additional fee is being charged for specific countries with higher shipping costs.
Google Maps
There were several different sections that allowed for booking a trip:
- Homepage featured trips
- The Trip filtering engine
- The archive pages in the top-level menu listing trips by location, or type
- The Map
We have designed a mobile-friendly Google map with custom polygons representing the different locations. Hovering over a location highlights the area and lists the available trips. The map allows for zooming in and out for a more refined search based on the user requirements.
Our custom map also inherits the website design with a customized snazzy maps skin. The page template is using a full-width layout that expands to the end of the screen, which is why we’ve designed the borders of the map with the same color as the page background. This presents a unique experience for navigation that is incorporated within the original website design.
Trips are being added with custom pins in order to define their category. Clicking on a pin triggers a popup with a featured image of a trip and short description of the travel, as well as a link to the full trip page. Furthermore, the trip page outlines the itinerary, providing a gallery view, general description, testimonials by travelers, and a dropdown with all existing departure dates and the cost of each trip based on the selected interval of time.
Business Results
The website has been launched early in 2015. All of the features are functioning properly, and the management team has been operating with the backend without prior WordPress experience.
Custom departures are added on a regular basis and trip itineraries are being updated as well, by adding additional details for each day, switching gallery photos and providing more helpful information for travelers. All of the trip sections are being used actively, alongside with their corresponding filters