How I built the Naturally Wild website

Inventory

My first step was to take stock of what we had. The owner wanted to do the categorisation himself, to cut down on costs and as well because he was the industry expert.

I guided him on the number of first-level categories he should have, and he went away and tidied up the spreadsheet. Old items had to be deleted, and new ones added, too.

We eventually agreed on 5 top-level categories:

• Minerals, Crystals & Gemstones
• Seashells
• Sealife
• Fossils
• Bugs

This also involved naming conventions. For example, sealife was 'marine life', but it seemed more user friendly to go with 'sealife'. 'Rocks' could have featured instead of a long 'Minerals, Crystals & Gemstones', but it wasn't descriptive enough.

A subcategory we worked out later couldn't have been 'Modified', it had to be 'Painted, Carved & Polished', because those were the terms used in the industry.

These naming conventions were important because there were several different areas that had to be consistent in order to not introduce confusion. These were the products pages, breadcrumbs, main navigation menu, filters, categories, tags, and probably other references.

Sitemap

I worked out a sitemap from this, with discussion with the industry expert, the client.

And the catalogue:

We could have separated minerals, crystals and gemstones into separate subcategories. But that would have created a large number of subcategories that may have been too close in concept. When items are too close, confusion arise as to where the item might be.

There were very few items in this category and I wanted to put them into another. Some of the 'sealife' were bones, but not fossils - like shark jaws. They look similar, but are definitely another category. And starfish aren't really 'shells', or 'bugs'.

So what I did was made the second level hierarchy almost as prominent as the first level.

At the navigation level this was achieved through a 'mega 'menu'. This allowed the full breadthe of the major categories to be shown straight away.

On the 5 home page sections, I made the subcategories more prominent by giving them more contrast.

When you click on a subcategory, it filters the items straight away (no refresh of the page). This way, customers can quickly flick through dozens of products and get a feel for what's available, just like in the store.

Limitations of Shopify

One frustration I had to work through was with a serious limitation of Shopify. It only allows a product to be in one category, and subcategorisation only occurs on the navigation. So the breadcrumbs were rather flat, for example, and on a category page, further filtering can easily be confusing.

This meant I had to combine 1st and 2nd level categories in some places. I.e. 'Natural' couldn't work, it had to be 'Minerals, Crystals & Gemstones - Natural'. 'Australia' couldn't work as a tag, it had to be 'Origin - Australia'. My 'origin' tags would have worked better as a separate category.

They'd be on a much better course if they had:

1. Products that could be in multiple categories (folders), each with as many subcategories as necessary
2. Products could continue to have unlimited tags
3. Breadcrumbs that were 'Scotch Egg' in style, where each 'crumb' is also a drop-down showing the other categories on that level
4. Navigation that didn't rely on a time-consuming workaround to build the levels, instead being able to go off the categories to a certain level

Nevertheless, the system is overall incredibly easy to use for users, administrators, and developers/designers.

Categorisation (aka Taxonomy)

The products were only sorted into single categories, and some had literally hundreds of items. Only part of it would be fixed by grouping the different colours and sizes into the 'one' product.

So, the process of sub-categorisation began.

But what I discovered was that having lots of items in a group wasn't necessarily difficult to sift through. The classic 'toothpaste aisle dilemma', where customers are paralysed at the 50+ options of toothpaste facing them, was NOT what I experienced here. (Also known as 'analysis paralysis'.)

This was because there were not multiple different types of one product. Sure, there were different sizes, and colours for some, but if you know the reason for getting it, there's actually only a very limited number of options (and often, just one option).

Instead, once a person is interested in 'gemstones', they'll then choose based on:

• looks, particularly if they're a child
• origin, particularly if they're a collector
• size, particularly if they're a craftsperson
• what sells best, particularly if they're a store owner
• (or a particular scientific name, in which case they'll just use the search feature)

Therefore, once a category had been chosen, I made the category page sorted by best selling, and suitable for quick visual scanning.

On the left, you could filter by other categories. This is where the origin subcategory (actually 'tag') went, as well as anything else that was a distinct category such as mixed bags, or those on hangers (necklaces).

Size and specific colours would be chosen on the individual product pages.

We were left with quirks like 215 products in the 'Minerals, Crystals & Gemstones - Natural' category. While we could have further categorise into names like 'Pyrite' and 'Quartz', the people who know those names are going to use the search function. Or the wholesale order section which allows for quick searching by name or SKU.

As a precaution and to continually learn, I've setup up monitoring so we can go back and see if improvements can be made, if people report back that they are having trouble.

Data integrity and spreadsheet shenanigans

Throughout this process, I was building the spreadsheet in readiness to upload to Shopify.

This involved lots of data manipulations and complex formulas for over 1,500 lines.

Sizes were mixed with the names so I had to split them at the appropriate place.

Sizes were not consistent, so I had to use find and replace to change 'SM' into 'S'; '' into inches, and so on, for many variations. This is about easing the naming conventions.

Some products had variations based on size, but others on colour, and some had no variations, so the final formula had to have multiple nested conditional statements:

I constructed SKUs (unique identification numbers) for each item, based on the first 4 letters of the item, and a sequential number (all formularised).

I constructed the 'handle' (slug) from the cleaned item name, using substitutions and the LOWER() function to make it lower case. This cleaned all the illegal characters, while still giving me freedom to fix the names later on.

I constructed the product information from several other fields, adding in HTML (Excel's 'Concatenate' function, plus conditionals). (Not shown.)

For the important (SEO meta tag) title field, I combined the name of the product with the category and subcategories. But this had a limit on the number of characters, so I had to substitute certain phrases for abbreviations, and make a limit on the number of characters (42) of the product name.

Tags had to be comma separated in ONE column. This involved checking to see whether an item had a tag first (if tag column > 0, then x, otherwise do nothing: "")

All this careful preparation took place in order to provide the best possible data from a limited time and regularly updated set of initial data (being cleaned, and having information added).

This was also done to provide as much data as possible for search engines.

The results, I should highlight again were that people are searching for his products and finding them in prime positions on Google/Bing.

Future testing: validation of navigation

I'm interested in doing a reverse card sort (aka tree testing) to test how well the categorisation is performing.

This is where you start with the categories and ask users to sort items into the categories. I would envision using cards with product names or simply pictures, as if you remember seeing something but can't quite place it.

The value of this would be to validate the structure of the categories. However, given the site is actually done, it would be more valuable to test this on the site itself, and see if, from pictures or a vague idea of an item, the user can find it. The response would be videoed or watched.

How to fall in love?

In order to re-create the wonder of the store experience on the web, I needed to provide an equally vast and yet intricate visual display on the home page.

The starting home page (Electro Shopify Theme) was a bit of a mess, I thought. It's sections weren't clearly defined, and there was no obvious categorisation. There were headphones next to computers, and cameras next to screens.

I ended up modifying the template - a config file written in JSON and the template files in liquid - to have the 5 top level categories showing with the same gallery view (repeated), gutting everything else.

I started with an idea to put the sections in order from grass to beach, then ocean and rocks, as if you are looking at a real beach. This may have supported customers' mental model to help them discover where the logical place for the categories were.

However, the owner wanted to promote the bigger selling items first, so I just went with a standalone background picture for each section.

In the end, this is what I came up with:

Video

Of course, an easy way re-create the experience is to actually show it via a video.

We didn't have the resources to do it ourselves, but "Big Review" did a smart video for Naturally Wild a couple of years back, and so we used that.

I've used a div as a wrapper to make the video responsive. <div class="video-slide"><iframe ...>.

Please view the implementation live at www.natwild.com.au