Overview of Website Before Redesign

The website was 10+ pages with a blog, FAQ, and other pages built-in WordPress using a custom theme with Advanced Custom Fields Pro plugin. The website had the following features.

• Custom designed homepage with latest winter and summer tours from Rezdy
• Custom designed location page for Tromso.
• Tour categories listing
• Tour listing
• Tour listing of specific category
• Tour detailed page with gallery
• Tour booking with calendar
• Stripe online payment gateway integrated
• Booking history for customers
• Registration and login feature
• Social login options like Facebook, Google, and Instagram

Goals

• Built with WordPress and have 10+ pages with a custom theme design
• Loads quickly with shopping cart experience
• Calendar availability to list dates and number of guests
• Tours data pulled from a famous travel booking company called Rezdy
• Tours display, tour category display, and booking should be done on the newly developed website without taking the user to the Rezdy site using Rezdy API

Website Redesign Process

Theme Selection

The client selected a 3rd party theme (Travellicious) from CodeCanyon. The theme has various demos built using the WordPress data, but since the tour data is from Rezdy (a third party), the purchased ‘Travelicious’ theme did not help in terms of tour related pages.

The theme had many flaws and had a very poor inbuilt page builder with several bugs. So, we decided to not use that theme midway through the development and start from the beginning using a custom theme with the ‘Travelicious’ demos as a design reference.

Analyzing the impact of the third-party theme(Travelicious) which the client purchased and its features, it was necessary for us to compare it with custom theme development and decide the best one.

Website Design Plan

Even though the client selected a theme design, they had various changes in designs, colors, fonts, etc.
So after switching to a custom theme, we designed wireframes for all the possible pages on the website with the client’s branding colors and fonts. Below are the major points which we considered while designing the wireframe.

• Analyzing about Wandering Owl’s needs
• Brainstorming the immediate marketing goals
• Retaining only the required modules in the Home page from the theme demo.

CMS Page Development Process

Initially, the travel booking partner was Zuai, and later just before starting the development, the client decided to switch to Rezdy.

Even though this is a travel booking portal with data from Rezdy, the website had a good amount of CMS pages like about us, blog, FAQ, contact us, and location pages. So we completed the CMS pages upfront as there was a notable delay in Rezdy support because of the COVID-19 situation. With the approved wireframes, we finished the CMS pages development along with mobile responsiveness.

Tour Pages Development Process

Since the client wanted a shopping cart experience, apart from the tour pages like tour listing page, tour category listing page, tour listing page of a particular category and tour detailed page, we needed cart page, checkout page, payment success page and payment failure page. We had to follow the below points while developing these pages.

• Compatibility analysis – Custom theme with tour related custom coding vs latest WP version & other plugins
• Make use of existing tour layouts used in CMS pages which will help save time
• Deciding on the right development strategy as this phase involves more custom work.

Tour Booking and Payment Process

Tour booking and payment process is an important phase of this development. Instead of using the Rezdy iframe, we had to use Rezdy Booking API and Stripe API to create a booking directly from the client’s website without having the user to go to Rezdy. In this process, we had various obstacles.

The booking & payment module development as we were using the client’s live Rezdy account. But to create a booking using Stripe’s test credit card details, we had to create a Rezdy staging account and re-create all the tour products, categories, and sessions in the staging environment again and then link the Rezdy staging account in the website.

Website Migration Process

Usually, we use ‘All in One WP’ migration for migrating the website from staging to live or from live to staging. As the hosting is in WP Engine, we had issues with ‘All in WP’ while migrating and we had to use WP Engine’s own migration plugin.

The client bought us a new WP Engine account. We followed the below points after completing the development process in our demo server.

• Migrating the website using WP Engine migration plugin
• Working on CSS fixes
• Making the site look consistent across pages
• Start with functional testing and fixes
• Going through designer level testing and fixes
• After testing, we had to change the API key and account to Rezdy live account as we completed the testing in the Rezdy staging account
• Reiterate the entire testing process as we changed the Rezdy environment from staging to live
• Going through final live testing and fixes

Result

• Easy navigation in the header increased 200% more clicks
• Pages loads in 4 seconds
• Easy login/registration with social login enabled
• Shopping cart experience
• Easy booking option with calendar availability  for each tour.
• Able to attract more conversions with improved user journey style payment check out
• Website is ready for new marketing campaigns to attract more users

At ColorWhistle, we follow the best standards for travel website development to expand the functionality of your website. For any queries regarding custom travel website development, please contact us anytime.