back to Code

Website – Kinetic Fitness

Link: http://kineticfitworld.in

After restructuring and strengthening the corporate identity of Kinetic Fitness, it was time to build a website that breaks even with the new Kinetic branding. This website had to showcase all the products that the brand has to offer, host fitness related information for customers and some company specific pages. Also, it was made very clear from the very beginning that this website has to be dynamic, responsive and be built around a easy to operate CMS.

So my choice was a very obvious one, WordPress. Since it not only sports a dead-simple admin panel, it also allows administration on-the-go. You can go all mobile with a WordPress website and manage it from anywhere, anytime, thanks to it mobile optimized Admin panel and the WordPress mobile apps.

But there was a catch. This wasn’t an e-commerce website, so using WooCommerce for this project, seemed sort of overkill to me. There was need for an inventory management, online order or anything other system. This website just had to have a simple product catalogue, with product images and the usual suspects (price, discount, product description).

So I decided to stick with WordPress, sans the WooCommerce plugin. But there was a catch. WordPress doesn’t know how to add or manage products. What it knows is how to manage posts and pages. However, if you’re an experienced WordPress Developer, you might already know that WordPress supports custom post types. Sweet! I found the solution to this problem.

I started developing a new custom theme for this website along with a custom post type called “Products”. I named this theme, “OrangeAttack”. Orange, because California Orange is the accent color for this brand.

Design

I already had a lot of experience developing WordPress themes from scratch. Devising a theme for this website was relatively straightforward. Since I developed the branding for this company, I atleast knew what color palette to start from. All black backgrounds with California Orange accent. Throwing in my Maskeleton library, and adapting to my streamlined Front-end Development workflow with Grunt, Git and Sass, topped-up with the awesome BEM syntax, made the overall development process easy. I developed all the pages just within two days. Although, I started with proposal designs on Illustrator and got it approved from the client before jumping to code.

Kinetic-website

Front page

The front page consists of two important components. The top image carousel and the testimonial carousel. Since they needed to be managed in the CMS, I created two more custom post types named, “Front Carousel Images” and “Testimonials”, in order to effectively manage these components.

product-cata-kinetic-website

Products Page

Next major part of the website, that is the product catalogue had to list all the products the company currently sells and allow easy management of what’s already listed. Since the site was built with WordPress, which has an admin panel optimized for mobile browsers, managing these products on-the-go became extremely easy. Here’s how the admin adds a new product to the catalogue:

product-management-kinetic-website

Add new product screen

The product price, discount and product catalogue fields were made with the help of Advanced Custom Fields plugin. So this plugin is the only dependency of the OrangeAttack theme. Here’s how the product page looks after the product has been posted:

product-view-kinetic-website

Single product listing view

Conclusion

This project was completed by me in a week. After some minor adjustments the site was made live. You’ll be amazed how outdated the previous website was. Here’s the screenshot from the home page of the old website:

old-kinetic-website

Old Kinetic Website

Results: The new website goes well with the new branding of Kinetic and it established a strong online presence. And the site is doing good for the brand. Now there’s more customer engagement (as per analytical assessments) and the phone calls to the toll-free line of the company increased by 20%. The site is also observing bounce rates less than 10%. Which means the customers are staying longer on the website than ever before.