A fun, vibrant ecommerce website with a community focus for Yoga Hive.

created for

Yoga Hive

Yoga Hive Mobile Design
Yoga Hive Website

In my role as Designer and Developer at Cucumber Marketing, I designed and developed a fresh, new ecommerce website for Yoga Hive. The site uses WordPress as a CMS and uses the WooCommerce plugin to create a full, online shop. The site also features an online community of members and contributors.

The Design Process

This was a redesign for an existing eCommerce site with over 340 products. The site had previously been built using Magento and had become a hassle to maintain. We decided to move the site over to WordPress with a WooCommerce store so that it would be easy to manage going forward. We also wanted to give it a fresh new look. As the sole designer/developer on the project I worked with my team to determine the goals of the site and create a solid content strategy. I created wireframes based on these goals and after some refinements finalized two design choices. With our chosen design in hand (a fun, vibrant, colourful one) I set off to code our custom WordPress theme.

Custom Theme Development

I started the theme development with underscores to set up the WordPress basics, then added in our own styling and developed custom page templates. Since ecommerce is the main focus of the site I quickly installed WooCommerce, imported some testing data and started getting the shop up and running.

Custom Styling

For additional styling control I disabled the default styles just prior to the launch. I had certainly taken for granted the advantages of using WooCommerce and how ‘out-of-the-box’ ready it is. For many cases it would be ready to go just after activating the plugin, however in this case we wanted to really express the brand and add additional functionality to the product pages so extra customization was needed.

Here are some of the customizations I made to the product page:

  • Added a custom field to highlight special features or uses of the product
  • Added custom fields for size chart and care instructions
  • Displayed the product thumbnails in a horizontal slider
  • Implemented a third-party reviews system
  • Custom styling

Importing Products

Since there were a number of products on the site already I used an automated program to transfer the data. For the most part this was very successful, however some products were missing their sale prices and some products with no inventory were displaying as ‘O left in stock’.

Yoga Hive Responsive Website
Yoga Hive Website Design

This project was a big learning experience. It provided a lot of opportunity to try new things, which also meant facing new challenges.

The present state of the site may have been modified from it’s original design and as such may no longer represent the original concepts. Shown above is the site at project completion.

© 2017 Julie Rankin   |   Web Design and Development, Vancouver BC