Would you believe that the last time I redesigned my online store website was over 3 years ago? In this day and age, 3 years is an eternity and quite frankly I’m a little embarrassed.
But when your shop is making money and growing in the double digits every year, making major changes sometimes takes a back seat to other priorities.
However, this year has been a little bit different. Thanks to all of the numerous Google algorithm changes, I now find myself going up against a lot more big box sites as opposed to mom and pop shops.
Now, I’m also seeing much better looking stores pop up in the search results due to new entrants in my niche.
As a result, I finally got the kick in the butt that has been long overdue.
What Was Wrong With The Old Site?
Back during the time frame of my first design, the screen resolutions were much smaller than they were today. Since I cater to a much older clientele in addition to would be brides, a lot of my customers back then were actually on very slow Internet connections. Some were even on dialup!
As a result, my online store was designed at an 800×600 resolution and optimized for extremely quick downloads. In fact, my site used to load up in under 10 seconds on a 56K modem
But over time, screen resolutions have grown larger and larger. In addition, broadband Internet access became more widespread which made loading times much less of a factor (though they still play a major role in shopping cart abandonment).
Anyways, I started noticing that more and more sites were using larger pictures and that my own photos weren’t showing as much detail. So first and foremost, I wanted to create a bigger site with larger images.
Second of all, I wanted to create a better way to attract more visitors and acquire their email addresses for marketing purposes(more on this later).
In addition, I wanted to improve the conversion rate of my website and make my products more visible in search.
Overall, I gave myself a relatively short time frame for this project so I didn’t want to make too many drastic changes from an aesthetic standpoint.
After all, my current site was still converting at a really high percentage so I didn’t want to break anything that was already working.
The upshot of all this is that I budgeted about 4 solid weekends worth of work to complete the overhaul. (Since I have a full time job, the only time I can really focus is on Saturday and Sunday)
Making Things Bigger
If you’ve ever done a website design by yourself, you probably know that manipulating images can be a major pain in the butt. And when you run an online store, you have to deal with hundreds, if not thousands of images which all need to be re-sized.
Fortunately as part of my last redesign, I’d already written a bunch of perl scripts to do the work for me. So resizing and increasing the size of every image was just a matter of typing in a few linux commands.
I ended up increasing all of the product photos by 70%. (Note: These photos aren’t actual size because they were too large for this post.)
Increasing the image size also meant making the overall website wider so I had to shuffle around and resize all of the other elements on the site as well.
It was a pain in the butt but well worth it. Larger and higher resolution images have reduced the abandonment rate and increased sales.
In addition to the larger image sizes, I also made our unique value proposition more prominent on all of our landing pages. I also increased the fonts to improve readability and to match the increased size of the other elements on the site.
A Complete Button Overhaul
Ever since I launched my course on how to start an online store, I’ve been ashamed of certain design elements with my shop, specifically my buttons.
Let me tell you. Sometimes, I feel tremendous pressure when running my class because there are certain best practices that I teach but don’t necessarily have time to follow myself. It’s all about priorities.
After all, I still have a full time job, two kids, my blog and my course to run so I don’t always have the time to work on my store.
Anyways, enough with the excuses:) I finally decided to redesign all of the buttons on my shop to make them stand out more.
While it may not be obvious that these buttons make a difference, preliminary data indicates that the CTR has increased quite a bit.
By making all of the buttons larger and more clickable on the site, customers are now more likely to take action.
Improving Website Speed
With the images increasing over 70% across the board, I absolutely did not want the website speed to decrease by a similar amount. As you can see in the graph below from the Gomez group, the shopping cart abandonment rate is quite significant once your site goes beyond 4 seconds of load time.
Prior to the redesign, my online store front page used to download in about 2.5 seconds on a broadband connection and I absolutely did not want this to increase by 70% to over 4 seconds. So I decided to tackle this problem by altering the source code for my site.
After making some significant optimizations to the site (which I’ll describe briefly below), I managed to get the front page to download in under a second despite 70% larger images.
No, you are not reading that incorrectly. My online store now downloads in .885 seconds which is simply amazing, especially since I did not make a single change to my server configuration whatsoever.
In fact if I was so inclined, I could quite possibly go back to Bluehost, my original shared host at this point:)
Anyways, I don’t want to go into the exact technical details of how I achieved this because I’ll probably put you to sleep. But in a nutshell, I achieved these speed ups by statically caching the majority of my shop.
In general, most pageviews for a typical online store are for the product and category pages. So by completely saving a copy of these pages and presenting them to the end user without having to bother the server, you can achieve a tremendous level of speedup.
Of course, there are many gotchas and corner cases that I had to deal with but the speed savings were definitely worth my time and effort. According to the graph above, I’ve effectively reduced my abandonment rate from 18% down to about 9%.
What About Mobile?
If you’ve been following my mobile design efforts up to this point, you are probably already aware of some of the changes that I’ve made to create an efficient mobile shopping experience. As it stands, I did not make any structural changes to the code on my mobile site.
However, since I already implemented a caching system on my main site, I decided to port it over to my mobile shop as well. And the results were equally as impressive.
According to the graph above, the sweet spot for mobile load times is anything under 2 seconds after which the abandonment rate increases exponentially.
After implementing my caching changes, my site loading time went down to 1.44 seconds!
Note:I’m still looking into why my mobile site loads slower than my desktop site but I suspect it has something to do with the jquery mobile library that I’m using and the fact that I’m grabbing the images from a different account.
An Improved Shopping Cart Abandonment Tracker
For the longest time, I’ve been tracking abandoned shopping carts via a free plugin that I installed on my shopping cart back in 2009.
But the problem was that the plugin never worked 100% correct. Sometimes it would mark an order as abandoned when in fact the order was complete which resulted in an email that confused customers.
Sometimes, it would completely neglect to report an abandoned customer or I would receive the “abandoned cart” notification way too late in order to take action.
Finally, the plugin was written terribly inefficiently which was very evident once I looked at the source. The upshot was that the plugin sucked and needed to be replaced.
So I decided to spin my own solution. Today, my shopping cart tracks each and every abandoned shopping cart and all of the heavy computation is done on the backend where it will not affect live customers.
And since I wrote the code myself, it should be relatively simple to add more advanced features as they are needed.
In just the one month that my change has been in place, we’ve managed to recover a double digit percentage of our abandoned orders.
Implementing Rich Snippets
Google has been doing many things lately to enhance their search results and one of the most important developments for ecommerce stores has been the “rich snippet review markup”.
Basically, if your products have customer reviews, you can make your products stand out in the search results.
So instead of your search result looking like this…
It can look like the picture below which should improve the click through rate.
It will take some amount of time for my rich snippet markup to propagate but it should improve traffic overall for my shop.
The New Bumblebee Linens Blog
Anyone who runs a website knows that content marketing is a great way to gain traffic to your online store. Ever since the beginning, all of the content on my website was served using a poorly cobbled together CMS that I wrote myself. This was before WordPress became popular.
As time went on, my homegrown CMS was getting harder and harder to use to the point where creating content started becoming a chore. So
finally, I decided to bite the bullet and created a brand new blog for my online store on the WordPress platform.
Of all of the redesign tasks, creating this blog took the longest amount of time but I’m extremely happy with the end result. With great content created on a regular basis, the plan is to become an authority in the arts and crafts niche and then sell the raw materials(aka our products).
Once the online store becomes fully on autopilot later this year, my wife can focus her efforts on creating awesome content like she’s done already.
In any case since this blog is just getting off the ground, I would greatly appreciate a quick “Like” of the blog.
I would be ever so grateful and it would really help us out a lot in improving the social proof of our website. Thanks!
All of these changes took roughly 4 full weekends of my time which is pretty much the only time I have to work on my sites.
I did everything myself (I don’t necessarily recommend this route but hey! I’m anal), but I foresee great things ahead as a result of these changes.
One of the best parts about running an online business is that nothing is ever stagnant. And I have no doubt in my mind that this is not going to be the last redesign:)
photo credit: eryn.rickard
- Do You Need A Mobile Version Of Your ECommerce Website?
- How To Design A Killer Mobile Ecommerce Website That Will Boost Sales
- 3 Ways To Design A Mobile Optimized Ecommerce Website And The Tradeoffs That You Must Make
- How To Organize Your Mobile Website To Maximize Usability And Sales
- How Fast Mobile Sales Are Increasing With Our Online Store