How ~1,500 items were organised
It all started with an Excel spreadsheet, about 10 pages long. Granted, the client had the main headers, a tag like 'best seller', and the different sizes worked out, but that was about all.
The challenge was to make 1,500 items easy to sift through, without too many layers of hierarchy that would actually make it more complex.
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:
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.
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.
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:
Nevertheless, the system is overall incredibly easy to use for users, administrators, and developers/designers.
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:
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.
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.
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.
Catering to different users' expectations and needs
The owner/client had been in the business for many years. He was greatly knowledgeable about everything from sales to the products, and how everything worked.
Here are the methods I used to understand the situation better:
I drew up a mindmap of my findings, detailing the different types of customers that bought from him. Showing 2 of the 6 types.
Click the image to show in full
Displayed differently, it could easily have been transformed into a full customer journey map.
Now, the client wanted the focus to be on wholesale customers.
This pushed the retail customers like kids, amateur collectors, craftspeople, and hobbyists to the background. We could do more work on them in a couple of years.
In hindsight, I should have been more proactive in then investigating life from a wholesaler's perspective. However, the wholesalers are buying the items for retailers, so understanding this was still quite helpful. For example, I saw how necessary it was to show to wholesalers 'this sells the best'. I subsequently configured the site to show any group of item, by default, by 'best selling'.
I had to think about new wholesale customers - how were we to 'onboard' them?
One of the client's main strengths was in sales, partly because he had so many great stories of where all the rocks came from. (Anyone who can make what is essentially just a bit of dirt sound cool needs airtime!)
One option was to allow wholesale customers to add items to their cart, and even order, after which Naturally Wild would get onto them. One problem was that the prices were retail—twice the wholesale!—so they might have baulked before they started.
The solution we went with involved highlighting 'wholesale' through the main navigation. This didn't instruct them on the process immediately, though. We led with the carrot first: "Wholesale customers can receive a 50% discount off RRP". Then because there were very few new wholesale customers, and a form would have lost the opportunity to connect and build rapport, we instructed them to phone.
User flow diagramming
I mapped this process out using Timblee. This user would typically find themselves on the site from a Google search, so that is where it began.
Click on the image to open it in full
One thing I learned from the flow diagram was that there are always varying ways people come into and move through your site.
If a new wholesale customer didn't see the 'wholesale' button, we could have added in more messages, but decided against it. They would probably call if they were interested, or if they ordered, the discount could be applied after that point.
I had thought current customers would also be drawn to the 'wholesale' page.
This was fine because the instructions for newcomers was a single line, and it reminded current customers of the value they were getting.
The reason current wholesale customers would want this page was for a quick item lookup. They already know the items they want: there's no need to research them.
The form uses AngularJS (although, I did not write it) and cuts out the research time when certain customers don't need to research anymore.
I said 'had thought' they'd do this. That was before I did a full user flow diagram.
Click the image to open in full
What I saw was that it was highly likely for customers to go back to an email, particularly if it was that order they wanted again. Alternatively, they'd use the search or catalogue.
Customers would hardly think to click on 'Wholesale' to search for a product. The search bar and navigation are not that difficult to find!
But the wholesale form would be much quicker for them, so I added in a little message under the search bar.
This would only appear when you're logged in, to avoid clutter and wasting retailers' time. All wholesalers have an account, but very few retailers would.
I think if I had more time, I'd do a little onboarding journey with Intro.js or similar tour feature.
What else did the flow diagram teach me?
The sheer length of the process, particularly if you forgot your password (wholesale customers aren't doing this every day—it's maybe every 3-6 months)!
If it were technically possible, I'd do what Medium does and email people each time they want to login, particularly as some people might store their credit card on the system. That seems easier for a rare process, and much more secure (the password would not be easy to hack and/or re-used).
Recreating the in-store wonder
The first thing that hits you when you walk into Simon's shop is the sheer wonder of hundreds of beautiful shells, fossils, gems, and rocks. They surround you.
Children's eyes widen in amazement. I think adults almost turn into children again, too, with the fascination of it all!
So: lots of photos, a video, what do you do?
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:
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