Project Details

Website Features

The website had the following features.

• Built with WordPress
• Tours and Trekking Listing page
• Tours listing pages based on the categories
• Tours listing pages based on the “Place”
• Tour detail page with complete details which includes Highlights, Gallery, Itinerary details, FAQs, Visa & passport info, Tariff info, How to reach and Currency info for each tour page.
  Tour detail page with “Book Tour” option which sends the customer information to the admin through a form.
• Custom designed dedicated page for “About Bhutan” which has all the information about Bhutan and tourism like Heritage, Food, Culture, Climate, Community, Nature, Festivals and Best time to visit, etc
• Team page which provides information about Raven Bhutan’s team and a dedicated page for each team member.
• Hotels listing page with Ratings
• Hotels listing page based on Places(Category) with Ratings
• Hotel detail page with complete information about the hotel like Hotel type, Ratings, Location, gallery, and the detailed description.
• Customer Reviews page which displays the reviews from Raven Bhutan’s customers.
  Dedicated FAQs page with questions and answers under different categories.
  Custom-developed “Design your own Itinerary” page which allows customers to design their own tour using a Multi-Step form with various options to choose from.
• Blog
• Attractive and unique design for all the pages.
• Loads quickly
• Custom-designed homepage which provides a quick overview of Raven Bhutan and its services.

Website Design & Development Process

Designing Process

As the industry is Travel & Tourism, the look and feel of the website play an important role in the website’s success and reach. Unlike other websites, we decided to have more time for the Design phase of this website. Right from Font selection, designing page loaders to designing layouts, our designing team worked on every small detail to meet the expectation. Our designing team had regular meetings and discussions with the client to get/share ideas and incorporate them into the design. For every page, we spent ample time designing. As we decided to design mockups for all of the website pages, we followed a different approach. As soon as the design for a page is approved, then the approved design is sent to the development team rather than waiting for the entire design phase to be completed.

Theme Selection

The existing website was just an informational website with tour information. But the new website is not just more than an information website. The website has many modules and custom designs, so we decided to go for Custom theme development.

Development Phase

As we decided to do this as a custom theme development from scratch, we had to plan the modules which we are going to custom build and the ones which can be done by using third-party plugins. As this is custom theme development, we used the Advanced custom fields pro plugin.

Apart from the functionality, we decided to have subtle animations throughout the website to make it cool and attractive. So, we followed a pattern of hover effects for Buttons, Images, Links, etc throughout the website.

Tours Module

As Tours modules being the core of this website, we had to make a decision whether to use any third-party plugins or to develop the module from scratch using custom development. We did extensive research on available plugins which suits our requirement. Also considering the project timeline in mind, we decided to go with the plugin approach. We chose the “WP Travel” plugin for this project and we decided to customize the plugin to suit our requirements and custom design.

We used the core setup of the plugins for post type and custom taxonomies for Categories, Places, etc, and to match the custom design, we customized the plugin completely using the plugin templates and plugin hooks in a proper way as per the plugin documentation.

For Tour Listing pages, we used a 4 column grid layout with Image, Tour title, short description, Number of Days Nights information for each tour.

Every Tour detail page has lots of information related to that tour. So, to present it in a better way without many scrolls for the user, we used a tabbed design.

The Tour detail page has information about Highlights of the tour, Gallery, Itinerary, FAQ, Visa & Passport, Tariff, How to reach, and Currency information. This page also has a dedicated width video section for each tour.

WP Travel plugin provides its own “Book Tour” option with an inbuilt form that allows user to type their queries and send them to the admin. But it had its own limitations in terms of form fields and design. So, we had to customize this module and use a Contact Form created using Contact Form 7 in this section to meet our needs.

And to Highlight specific tours in the front end, we added the capability for the admin to mark tours as “Featured” tours and the option to mark them as “Most Popular”, so that the Most popular tag appears wherever the tour is listed be it Homepage or Tours listing page.

We used the ACF Pro plugin for creating custom fields for displaying information in tabbed view and also for other info like Availability, Duration, the Best time to visit, etc.

Hotels Module

We custom-developed this Hotels module by setting up a new custom post type called “Hotels” and a custom taxonomy called “Hotel Categories” to categorize them based on the locations. We used the ACF Pro plugin to create custom fields for Star ratings, gallery, and Hotel type.

To match the look and feel, we used a similar 4 column grid layout in the Hotel listing page with different image dimensions compared to the tour listing page.

Every hotel has its own dedicated page which provides various information about the Hotel like Hotel name, Hotel Description, Star ratings, gallery, and Hotel type.

Customer Reviews

The customer reviews module is a custom module developed by setting up a new custom post type called “Customer Reviews” with few differences compared to the hotel module. In this module, we decided not to have a category and even the detail page for review. Even though Customer Reviews is a standalone module, it has only a single listing page with pagination. Each Review will have a Review Image, Review Title, Review description, Customer Name, location, and star ratings.

Blog Module and CMS Pages

For the Blog module, we followed a different design approach compared to the other listing pages. We followed the list view design instead of the grid view. On the blog listing page, each blog will have a Full-width blog featured image, title, description, and categories in which the blog is listed. Each blog article has Social share buttons as well.

For the other CMS pages in the website, we used the same design of blog detailed page for those CMS pages as well.

As a part of the redesign, we made a layout throughout the website to make sure all the pages and posts have a unique design pattern as per the new design.

About Bhutan Page

Even though it’s just a CMS page, this page has lots of information. Also, the About Bhutan page is all about Bhutan and Tourism.

As the About Bhutan page had so much information, we made sure that users don’t have to scroll too much to read the content. So we used a Tabbed view for the main titles and a vertical tabbed-like view for inner titles.

Design your Itinerary Module

Even though we have various tours listed on the website, the client decided to provide an option for the customers to design their own Tour by allowing them to select from various places and activities.

As this module is a big one and needs to be custom-developed, we decided to develop this one after completing all the other modules.

This module has various options for the customers to choose from like Number of Travellers(Adults, Students, Children, Kids), Date of Travel(From & To Dates), Purpose of Travel, Option to multi-select Places which they would like to visit(Bumthang, Haa, Paro), the option to multi-select Activities they like to indulge in(Trekking, Camping, Rafting) and basic contact information like Name, Email, and Phone number, etc and also option to subscribe to Raven Bhutan’s Newsletter.

As this form has so many fields and options to select, displaying them all on one page as a normal form would not do justice to the unique designs we have throughout the website. So, we decided to develop this form as a Multi-Step form by splitting the form into 3 steps based on the form field’s nature.

• Step 1 will have a Place selection option presented in a cool UI with hover and on-click fill animations.
• Step 2 will have Activities selection presented in a cool UI with hover and on-click fill animations.
• Step 3 will have Name, Email, Phone, and Newsletter subscription checkboxes. The number of Travellers, Date of Travel, and Travel purpose fields will be present in all 3 steps as these can be changed anytime.

Once the form is submitted, the user will be redirected to a Thank you page which will have a Whatsapp and Skype link where users can click on the links and initiate a chat with Raven Bhutan’s team.

Once the form is submitted successfully, Admin will receive an email with the details submitted by the user and the customer will also receive an email with submitted details and a customized PDF which will have information about Bhutan, Raven Bhutan Tours, and the form information which they submitted.

We had various hurdles while developing this PDF generating module as it involves many steps. We used mPDF for dynamically creating a PDF along with the information submitted by the user and sending the PDF in the email as an attachment.

Apart from the email, Admin can also check the form submissions in the admin backend as well.

Website Migration Process

We did the development on our server. Also, as this is a website revamp, the old website already had few blog posts and few pages as well. As the old website was just an informational website, we recreated all the tours, pages, and posts on the new website before migrating. Our SEO team also made sure that we are not losing any SEO benefits of the existing website by analyzing the existing website’s URL structure and setting up the necessary redirects.

After all these SEO checks, we migrated the new website to the live environment using the “All in One WP Migration” plugin successfully.

We followed the below steps after migrating the website.

• Working on CSS & JS fixes
• Mobile responsiveness testing
• Making the site look consistent across pages
• Start with functional testing and fixes
• Going through designer level testing and fixes
• After testing, we removed the testing form submissions which we posted during the development and testing phase.
• Going through final live testing and fixes

Result

• Easy navigation in the header increased 200% more clicks
• Better user experience for Tour listing and tour detail page
• Better user experience for Hotel listing and hotel detail page
• Clean and structured backend for easy updates by the client for the future
• Design your own Itinerary form which allows the user to design their tour. This helped out to filter and identify more quality leads, thus ensuring better lead quality
• Able to attract more users with improved user journey.
• Website is ready for new marketing campaigns to attract more users

As one of the top providers of  website solutions provider, ColorWhistle can create, strategize, design  and develop your website requirements . From integrating a third party tools to website development, we can create effective solutions that will cater to your business challenges and goals.

If you need any help with website designing, website development  to digital marketing for any business get in touch or call us at +1 (210) 787-3600. We are happy to partner with you.