Project Details

Goals

The client owns a website called Ontario Camping. Initially, the website was just a Camping blog. But the client wanted to add new features to provide complete information about the camping sites in Canada for the users. The major feature was – users can get all information about the park or campground and write their experience as a detailed review with images.
To develop a camping directory website with a custom reviews module using a custom theme with the Advanced Custom Fields Pro plugin. The website had the following features.

• Built with WordPress and have Blog and Listing directory with a custom theme design
• Parks & Campgrounds Listing directory
• Custom Search with Autocomplete results from Blog, Parks, and Campgrounds.
• Custom review module with moderation where registered users can post reviews and star ratings for camping sites.
• Loads quickly
• Custom-designed homepage with Recent Reviews and Popular parks listed.
• Custom-designed Listings page for Campgrounds and Parks.
• Dedicated Search functionality for Campgrounds and Listings.
• Custom Designed Listing detailed page with Gallery, Reviews with pagination, and Map of the camping site.
• Custom review form where users can rate and write reviews and upload images of the camping site.
• Logged in users can Vote a review as Helpful/Report a review.
• The reviews section will have Search for reviews in that particular Camping site, an individual gallery with a lightbox slider, and a Sort by option.
• Approved reviews will be posted in the frontend and review images will be added to the main gallery of the Camping site.
• Member Directory with Search option to search members.
• Members can follow each other and see the reviews posted by them.
• Admin Dashboard
• User Dashboard
• Login Registration feature for Users.
• Social login feature.
• Admin can add listings.
• Admin can approve the reviews.
• Users can see the reviews posted by them from their dashboard page.

Website Development Process

Theme Selection

The client was using a third-party theme. Since the requirement is very unique and the scope for scalability is high, we decided to go for custom theme development instead of a readymade theme.

Website Design Plan

As this is a complete revamp with additional functionalities, Our team (Designer and Developer) had multiple discussions with the client for collecting design inputs and ideas. Major reference was Tripadvisor and our team came up with design mockups for the homepage, listing page, and listing detailed page. After getting the client’s approval on the design, we moved to the development phase.
Below are the major points which we considered while developing the website with design mockups and the Tripadvisor site as a reference for user flow.

• Providing a better user flow for users on the listing detailed page and while submitting the reviews.
• Brainstorming the immediate marketing goals.

Website Development Plan

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.
Below are the major modules which we planned for the website development.

• Listings directory module with the dedicated search for both Campgrounds and Parks.
• Reviews module with Star Rating, Search, Pagination, Gallery Slider for each review separately, Voting review as Helpful and Reporting a review.
• Custom Search with Autocomplete results from Blog, Parks, and Campgrounds.
• User Registration & Login – Native Login & Social Login
• Member Directory with Search option.
• Member Follow option, User Dashboard, and individual profile pages for users.
• Bulk upload option for admin to upload the listings from the backend.

We decided to develop everything related to Listings from scratch without using any plugins as the requirement was quite unique. And use the Ultimate CSV Importer Pro plugin for bulk uploading of listings and the UserPro plugin for Member directory and log in, register features.

Development Phase

Listings Module

As the Listing Directory and Reviews were the core of the website, we started the development of the Listings module. The review module has too many functionalities clubbed in it and this process took a lot of time and effort. We first built the core of the listing directory module by setting up a custom post type for listings and Reviews separately and we linked those 2 post types in the frontend using custom queries and logic to display reviews on the listing detail page and to submit the reviews from the listing detail page.

In the reviews module, we parallelly worked on listing the reviews and also the frontend review form using the ACF form feature from the ‘Advanced custom fields pro’ plugin. Once the review is submitted from the backend, the admin receives an email about the new review and the link to moderate the review from the admin dashboard. Once the admin approves the review, the review is published in the frontend and the images from the approved reviews are added to the main gallery of the listing and the user receives an email about the approved review.

In the reviews section, then we built the display option for Star Rating, Description, and an individual gallery with a lightbox slider and Vote Helpful/Report review features. Automated emails were also configured when a review is voted helpful and when a review is reported. After completing this core, then we focussed on the search option for reviews under that particular listing and Sort reviews by Newest, Oldest, Star Ratings, and Most helpful votes along with the Pagination. The Pagination, Sort by, and Search modules were decided to be developed using Ajax so that the page doesn’t refresh while we perform these operations.

We decided earlier that we will provide regular updates to clients about the development progress to keep the client in the loop about the website development progress. We gave development updates every weekend and it was easy for the client and us to be on the same page on how the website is shaping up. We were also able to fix the glitches and work on feedback/suggestions shared by the client.

After completing this major module, we started the Directory listing page with the Search option. This page also used the Ajax method for Search and pagination to provide a better experience for the users by showing relevant content without loading the page.

Autocomplete Search

Even Though there are many Autocomplete search plugins available, we decided to develop this Autocomplete search from scratch as the search results have to be combined from Blogs, Parks Listings and Campgrounds Listings. We custom-developed this search to provide auto-complete search results while the user starts typing and we had to make sure that the results are marked with post type information which makes it clear for the user whether the results are from Blog or Park or Campground. And also performance had to be considered as this is an autocomplete search. We had configured this Autocomplete search operation in a way that there are not too many requests sent to the server and also make sure that we are showing results as quickly as the user starts typing the letters.

Member Directory, Dashboard and User Login, Registration module

We used UserPro, a premium user management plugin for the User management functionalities. The UserPro plugin itself provides member Directory, User Login Register, Social Login, and Dashboard pages. We just had to set up the pages and work on the UI to match the theme’s design. For design-level customizations, we had to customize the plugin templates and match them with the theme design.

To provide an option for users to view the reviews posted by them and view the reviews posted by the users from the user profile pages, we had to custom develop a module to display the user reviews on the UserPro plugin’s dashboard template and show it to other users.

Blog Module and CMS Pages

As per the new design, we designed the Blog Listing page and also the Blog detailed page. Apart from the blog listing and blog detailed pages, the website had other CMS pages like the About Us, Contact, and Question & Answers module.
As a part of the redesign, we made UI level changes throughout the website to make sure all the pages and posts have a unique design pattern as per the new design.

Website Migration Process

We did the development on our server. Also, as this is a website revamp, the old website already had many blog posts and few pages as well. So, the migration process was a bit challenging. To make sure there is no data loss or any issues during the migration, we followed a different approach. Instead of migrating the newly developed website completely, we just migrated the newly custom-developed theme and installed the necessary plugins on the live site, and imported the settings and new post type.
By doing this, the migration work took more time than usual migration but we ensured there was no data loss or issues during the migration process.
Also, we had to reconfigure the social login after migration as the Redirect URL for the Social login apps which we created were pointing to the demo server where we developed the website. So, we had to ensure proper configuration after migrating the website LIVE.
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 reviews 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
• Easy log in/registration with Social Login
• Better user experience for Listing directory and listing detailed page
• Reviews module with Star Rating, Gallery Slider, Search, Sort, and Pagination features
• Aggregated gallery for each listing with images dynamically collected from user-submitted reviews.
• 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.