Last December I announced we were migrating our eCommerce store, Right Channel Radios, from the Magento shopping cart to Shopify. Not only were we migrating platforms, but we were also pouring $50,000 into a complete overhaul of the brand and the website design.
After close to half a year’s worth of work, we launched the new website in late January. The results are officially in and I’ll be sharing them in today’s post. I’ll also be sharing loads of before-and-after pictures, as well as some of my thoughts on Shopify vs. Magento.
Hope you enjoy this sneak-peek into our redesign and migration process.
Full Disclosure: After making the decision to migrate to Shopify, I approached them about sponsoring my podcast which they’ve done since the beginning of November. I’ve worked with them on numerous projects in the past. The links below are affiliate links, meaning I’ll get a commission if you do decide to try them out.
Doubling Down on Brand
Having an effective eCommerce marketing plan is important, but I believe having a strong brand will be absolutely crucial in the coming years. That could mean having a lot of name recognition as a reseller, or creating a proprietary product. Because I think it’s becoming increasingly important, strengthening our branding image was an integral component of our redesign.
On the branding front, we started with design. Listed below is a picture of our old homepage. While it’s not terrible, it certainly isn’t going to win any design awards, is a bit dated and uses a very odd color scheme.
The Old Homepage
In our new site design, we wanted a much more modern and contemporary feel. Instead of the Halloween feeling orange and black colors, we wanted something that better matched our core demographic and niche: 35-60 year-old men who enjoy the outdoors. This meant darker, more masculine colors and a site feel that hinted at dusty roads, old guns, cigars and glasses of good whiskey.
The New Homepage Design
Narrowing Our Niche Focus
As part of strengthening our brand message, we also decided to better focus in on our core customer. Traditionally, we’ve sold radio equipment to anyone with a vehicle. But we realized that our primary expertise lay in helping customers with heavy-duty vehicle radio needs – owners of pickup trucks, construction equipment, 4x4s, etc.
We worked that new focus into all aspects of the redesign, including our product copy, the tech documents and even our logo.
Our old logo was a generic radio tower that worked well for a generalist radio shop. But our new logo is vehicle specific, and particularly representative of our new truck/4×4/heavy-duty focus. You can see a comparison of the old and new logos below.
Making Our Company Human
With the new site, we wanted to humanize our company to let people know they were working with real people, not eCommerce robots hiding behind the internet. So we invested a lot of time into creating a new “About Us” video.
We had an “About Us” video from our old site, but it wasn’t terribly impressive. It was fairly low budget and consisted of myself and Pat (our sales manager) talking to the camera in casual lumberjack flannel attire.
We did some user testing prior to the redesign, and one user specifically commented on how strange it was that our “About Us” video thumbnail had a picture of two random guys (ie, us!). To quote him: “Who are these random dudes? I’m not really interested in them. What I’m interested in is getting a CB and getting out to enjoy the trails. You should show that.”
So we did. We hired our friend Clay, a gifted videographer and the man behind the impressive off-roading series Expedition Overland, to shoot a new-and-improved “About Us” video. Our goals were to create a video that spoke specifically to our new customer focus (heavy-duty, truck and off-road drivers), was short, employed impressive visuals, built rapport and conveyed brand confidence.
We also scrapped the video thumbnail of us in flannels for something a bit more clickable: a rugged 4×4 working its way through the mud.
The New “About Us” Video
Spicing Up Our Copy
Stores that make the shopping experience fun, surprising and entertaining will be huge winners in the coming years. Companies like Man Crates and Dollar Shave Club have had great success with this approach, and it’s a concept I wanted to incorporate into our strategy for strengthening our brand.
Stores that make the shopping experience fun, surprising and entertaining will be huge winners”
We decided to get bold and make our copy edgy, cheeky and fun to read. Consider our order confirmation email. Traditionally it had been very boring and standard, along the lines of “Thank you for your order. We appreciate your business.”
Nothing exciting there, which is a shame as confirmation emails are among the most highly opened emails. So we took a cue from Derek Sivers at CD Baby and changed the copy on our order confirmation emails to the following:
————————————
New Order Confirmation Copy
All was quiet today until the Right Channel warehouse intercom crackled to life:
“Listen up, people! We’ve got a new order for Mike from St. Louis…….”
….but no one could hear the rest of the announcement over the thunderous roar of applause. Champagne bottles were popped. Tears of joy were shed. “Don’t Stop Believing” rang from every speaker. Even Alan our peak packer smiled—and Alan never smiles.
Simply put, your order caused pandemonium and everyone is thrilled you’re now a customer. Thank you!
Once we clean up our celebration mess, we’ll be working to get your order packaged, shipped and on it’s way to you ASAP. If you have any questions or problems, you can reply to this email or contact us by clicking here. We’ll follow up with with tracking information as soon as your package ships so you’ll know exactly when to expect delivery.
————————————
After just a month, we’ve already had numerous people comment on how much they love this copy. We carried this tone throughout all the copy on our site, and invested a lot of time in writing new, fun copy for our top 100 or so products. Here’s an example:
————————————
Some Cheeky Product Copy
If you’ve got a “Big Mama” on your vehicle (that’s trucker slang for a big antenna and, coincidentally, our nickname for Mike’s girlfriend), then you know how important it is to keep it protected under any circumstance. This Heavy-Duty CB Antenna Spring will keep the base of your antenna flexible, with just enough give so the road doesn’t take.
————————————
Definitely not your run-of-the-mill copy. And apologies in advance to any Mikes who happen to be reading. Perhaps we should have used a more obscure name?
We also made the decision to stereotype our customers a bit, and wrote exclusively with a male audience in mind. For example, we have gender specific copy that refers to “your wife” and other male perspective references scattered through the copy. Will we offend some readers who are women? We might. But we’ll also connect more deeply with the 90%+ of our visitors and customers who are male.
Mobile
If I had to pick the #1 reason we embarked on our redesign, it’d be mobile. Our mobile traffic has exploded over the last few years with phone and tablet traffic representing 44% and 12% of our traffic respectively.
Unfortunately, our site and mobile conversion rates hadn’t kept up. While it made up the lions share of our visitors, our conversion rate on mobile was 80% lower than desktop. That’s downright abysmal. Over the last 18 months, the trend of increasing mobile traffic and a miserable mobile conversion rate weighed heavily on the overall business. So it was a huge priority in the redesign. We ended up going with a responsive design to keep a single code base and make long-term maintenance easier.
….our conversion rate on mobile was 80% lower than desktop. That’s downright abysmal.”
Carson’s team at ShopifyCustom.com spent a lot of time tweaking the responsive design to maximize its usability. For example, on the mobile version of the site we show a PayPal button at the very top of the cart page. We don’t do this on desktop, but realize that PayPal makes mobile checkout much easier – so it’s something we prioritize showing to mobile users.
You can get a sense of the difference from old to new mobile experiences in the picture below. The old mobile experience was just a rendering of our desktop site on a small screen, which was terrible from a usability perspective. The new version is much larger and better optimized for less screen real estate:
Improving the Mobile Checkout
The checkout we had been using was the stock Magento checkout flow. While it wasn’t terrible, it was by no means great. The biggest problem was a confusing screen that all customers faced about logging in, continuing as a guest or creating an account.
Sometimes it took me a few seconds to figure out what the obvious next step was, and it was my store! I know it was often confusing for customers. You can see what it looked like below:
The Old Checkout Page
About half way through our redesign, Shopify rolled out their new responsive checkout. Apart from being mobile optimized, it solved a lot of the pain points I had with our Magento flow. A few of the things I specifically appreciated about it:
- It asks for an email address as field #1 to increase the number of people you can send abandon cart emails to
- It doesn’t ask customers to create an account until AFTER they complete their purchase
- It boasts a very clean and straightforward one page checkout that pre-fills in the city and state based on IP address
Very cool stuff. You can see what the desktop version of the checkout looks like below.
The New Checkout Page
The desktop checkout improvements are great, but where I think it had the most impact was on mobile.
Entering personal and payment details is one of the biggest reasons why mobile conversion rates are usually much lower than desktop. It’s a pain to enter all of that information via a small keyboard. Combine that with our legacy clunky, non-mobile optimized checkout and you’ve compounded the problem.
The new responsive checkout solved both of those problems, and has made mobile checkout much simpler. You can see the difference below:
The Impact on Mobile Conversion
I’ll wait to share the final redesign results until the end, but I can’t resist sharing a teaser. The changes above were responsible for mobile conversions increasing by a whopping 110%. That’s more than a doubling of the sales from people shopping on their phones. Tablet conversion saw a boost as well, although not as large, coming in at a 24% increase.
Doubling the conversion rate for our largest traffic source? I was pretty excited about that.
Usability Improvements
As I wrote in my post on preparing for a redesign, we did a lot of user testing prior to the design phase. Specifically, we were trying to discover where customers were having problems and pro-actively address those in the new site. Here are a few of the changes we implemented based on that research.
Vehicle Recommendation Wizard
One of the biggest pieces of feedback we received was that users wanted a place to enter their vehicle information and get customized recommendations. This is a pretty common thing in the automative parts industry, but something we’d surprisingly never thought of. So it become a primary part of the redesign.
Leveraging Carson’s team’s expertise and Shopify’s customizable framework, we created a recommendation wizard and placed it front-and-center on the homepage, as you can see below. Now it’s easy for customers to get customized recommendations for their specific make and model vehicle, something we traditionally had been doing manually via phone and email:
The Vehicle Wizard Page
Wizard Results Page
Category Pages
Our old category and product pages had a lot of information, but were hard to digest without reading paragraphs of tiny text. Definitely not the best approach for helping busy, impatient visitors quickly find what they’re looking for.
Our old category and product pages had a lot of information, but were hard to digest…”
So we redesigned both with an emphasis on simplicity & the ability to easily scan them. Our new category pages replaced paragraphs of descriptive product text with a single sentence highlighting the top strength of each product. We switched to a grid format to show more products on each page. And we added “Best Seller” badges to help point shoppers to the most popular products.
You can see the difference between the old and new pages below:
Old Category Pages
New Category Pages
Product Pages
We followed a similar approach with our product pages in terms of making them simpler and easier to digest. Pictured below is one of our old product pages, filled with information but not what I’d call digestible.
Old Product Page
To make the new product pages cleaner and easier to scan, we did the following:
- Put 1-3 bullets at the top of the page to quickly convey each product’s key selling points
- Increased the text size for easier, no-squint reading
- Placed videos front-and-center in the image placeholder box by default. (Are replaced by images when thumbnails are clicked.)
- Increased the size and prominence of the “Add to Cart” button
- Added buying considerations (free shipping, technical help, etc) as checkmarks next to the “Add to Cart” button
- Wrote story based, emotionally driven & cheeky copy and placed it above the nitty-gritty tech details. The drier product specs are listed further down the page for people who really want to dive into them.
You can see our incorporation of all these concepts below in the new version of the product page:
New Product Page
A “Smart” Geo Detecting Shipping Calculator
One of the things I’m proudest of is the shipping calculator Carson’s team built for the new site. If you’re a store owner, you’re almost certainly aware that uncertainty around shipping costs is one of the largest reasons people abandon carts. So having a shipping cost calculator is important.
But most calculators have two flaws: 1) they make the customer manually enter their location and 2) they don’t sufficiently answer the question of when a package will arrive.
Most shipping calculators have two flaws: 1) they make customers manually enter their location and 2) they don’t specify a delivery date”
We wanted a shipping calculator that solved both those issues. Our new shipping calculator uses your IP address to figure out where you are geographically, and automatically displays the shipping options to your location without any manual user input.
It also gives a concrete date to expect delivery by. So instead of offering 1 to 5 day shipping (as we had previously been doing), customers can order confident in the knowledge that they’ll “Get it by March 15th”, making it easier to pull the trigger on time sensitive purchases. This is something Amazon does really well, and is actually the inspiration for our calculator.
You can see the calculator in action below:
Our Geo-Locating Shipping Calculator
“Help Me Choose” Buttons for Product Options
Another friction point with users was indecision and apprehension when it came time to pick options for a product or package.
A visitor would be ready to add something to their cart, but then realize they had to make one or a series of decisions in terms of selecting product options. We had all of the information detailing how to decide between different product options further down on the page, but customers rarely went looking for it. Instead, they usually froze up and abandoned the purchase process.
No bueno.
To address this problem, we created a “Help Me Choose” icon and placed it right above product drop down options. When clicked, it brings up a lightbox that contains information specifically to help the customer picking the right product options so they don’t need to go digging further down the page.
Pro-Actively Helping Customers Configure Products
Switching to Shopify from Magento
It’s hard to administer, so you either need to know your way around a server or hire someone who does. It’s difficult to customize, and ever more frustrating to upgrade. And it’s a massive resource hog.
Ultimately, I got tired of having to play system admin when all I wanted was a stable shopping cart that worked well, was easy to customize, and would automatically stay up to date.
Enter Shopify. I’ve always been impressed with their platform, but now more than a month using it to run our store I can definitely say it was an excellent move. Here are just a few of the things I’m loving:
No More Tech Worries
To get up-to-speed with Magento, I literally spent the better part of a month teaching myself UNIX and learning about the template structure. Even then, I still never got fully comfortable and issues would pop up every 3-4 months where I’d need to spend hours researching and implementing a fix.
No more. Since it’s a hosted solution, Shopify manages all of the server, upgrade and code maintenance issues. I can’t wait to cancel my old, expensive Rackspace account where we hosted Magento and wash my hands completely of server and security maintenance.
Hosted, But Extremely Customizable
The biggest argument against using a hosted cart solution like Shopify is control. With any type of hosted solution, you don’t have access to the underlying code and aren’t able to fully customize it to your needs. And this is true: with Shopify you don’t have true 100% control.
But I’ve yet to run into any real roadblocks in terms of things we couldn’t customize on Shopify with their impressive template engine and API. Our geo-locating shipping calculator and custom vehicle recommendation wizard – both fairly complex features – were both implemented within their hosted environment. Pretty impressive.
Ease of Extensibility
On Magento, I was terrified to let anyone but myself install extensions. Occasionally there’d be an extension incompatibility that wouldn’t work properly or bring down the site – so I didn’t trust anyone but myself to do it. This made it harder for me to delegate and for my team to pro-actively run with implementing new features and functionality.
With Shopify, adding extensions is incredibly easy. A couple of clicks and you’re done, and I haven’t run into any incompatibility or stability issues.
Simple & Intuitive Interface
While not terrible, the Magento admin interface is not what I’d consider intuitive. Issuing a customer refund, for example, would require clicking through 2-3 screens to find a related billing invoice and using THAT to issue the refund. Comparing Shopify vs. Magento, you simply click “Refund” right on the order page.
It’s been so intuitive that our team was able to hit the ground running on day one with almost no training. With Magento, we literally had half a dozen SOPs related to how to cancel/edit/refund orders because the process could be murky. Not an issue with Shopify.
And a Number of Other Things
There are a number of other things I appreciate as well. Support has been solid, server response time is good, enhanced eCommerce analytics support for Google Analytics in built-in and Shopify Payments integration is really nice from a fraud detection perspective.
While I’m sure we’ll run into some minor quirks at some point (as with any platform), I’ve been really happy so far with Shopify and definitely have no regrets making the move from Magento.
The Results
Enough talk already! What did all these sweeping changes do to our bottom line?
To calculate the results, I compared the conversion rate on our old site in January to the figures for our new site in February. To ensure no seasonal bias, I compared the difference in conversion rates between Jan and Feb conversion rates in 2014 and adjusted accordingly. Here are the results:
-
- Change in Overall Site Conversion: Improved by 41%
-
- Improvements by Device:
-
- Mobile Conversion: Improved by 110%
- Desktop Conversion: Improved by 25%
- Tablet Conversion: Improved by 24%
-
- Improvements by Device:
While we didn’t quite hit my aggressive goal of a 50% conversion increase, it’s hard to be disappointed with a 41% conversion lift across the board. I’m also optimistic that many of the long term brand investments we made will pay off over time to move us closer to – or even above – that 50% improvement.
One caveat to these numbers: Traditionally, orders via phone haven’t been a meaningful part of our sales and we traditionally haven’t publicly posted a phone number. For the first month post-launch, we did make our number more visible to ensure we could quickly find out about any site problems or usability issues.
Based on our analytics, about 4.5% of our orders came in via phone and I’d guess about half of those – roughly 2% – might not have been placed without our phone as prominently displayed. So not an enormous number, but worth mentioning in the sake of full transparency.
Hiccups and Problems
I was thrilled with the overall results, but like any project of this size there were plenty of hiccups along the way. Here are a few of the issues and/or problems we’ve run into:
Decrease in Avg. Order Size
Our average order size decreased approximately 4% with the new site. This was especially surprising given that the “Add to Cart” flow we created emphasized related products, which we thought would increase the overall order size.
Our average order size is often highly skewed with large orders than can come in once or twice per month (or not at all), so hopefully this is just an off-month and not a long term trend. We’ll be keeping an eye on it, as well as potentially split testing our “Add to Cart” flow in the future to see if we can turn this around.
Massive Drop in Pageviews per Visitor
Average pageviews per visitor plummeted by a shocking 45% with the rollout of the new site, and I can’t definitely say why.
Average pageviews per visitor plummeted by a shocking 45% and I can’t definitely say why.”
One potential theory: our old Magento site fired up a new window/page whenever people tried to view an image while our Shopify store doesn’t do that. This could perhaps explain the difference.
A decrease in pageviews isn’t always bad if you’re simply helping customers find products faster and more efficiently. But it still a slightly troubling shift, and one I’ll be diving more into.
Botched Order History Migrations
I’ve always used the service Cart-2-Cart for migrating customers and order histories without incident. But sadly, this migration didn’t go quite as smoothly.
Our customer order records were transferred properly from Magento to Shopify except for the order date. Instead of showing the actual order date, what was recorded was the date the order was imported to Shopify. So all our past orders now appear as occurring on the 9th of January, 2015. Not good.
Along the same lines, Cart-2-Cart didn’t transfer data related to whether a customer from Magento had an account or simply checked out as a guest. Instead, all customers were imported as having no account so we had no idea who to create accounts for and who didn’t historically have one.
Fortunately, Shopify deals with orders, customers and accounts in a very forward thinking manner by linking everything to an email address. So we were able to create workarounds to allow customers to create a new account and auto-import their old order history. But between the botched order dates and run-around for account creation, I wasn’t as impressed with Cart-2-Cart as I have been in the past.
You can read more about how not to botch your website migration with our in-depth migration guide.
Impact on SEO / Organic Traffic
One of the biggest concerns people have when migrating platforms is losing their SEO rankings if/when URLs change. Shopify uses a different URL structure than Magento, so taking a hit on the SEO front was definitely a major risk factor for our migration. Fortunately, we haven’t yet (knock on wood) seen any major impacts to organic traffic from the change to our URLs along with the corresponding 301 redirects.
Traditionally in past migrations, I’ve seen a 10% to 15% decrease in organic traffic for a 2-6 month window post-migration. Other private forum members have experienced similar decreases as we discuss in this thread on the topic. You can see the change in organic traffic from January compared to February below. There was a small 2%ish change, but nothing significant.
Change to Organic Traffic Post-Launch
We used the Traffic Control App to manage our redirects and I was pretty impressed with it. The app definitely makes for a nicer, more organized and efficient process than manually creating 301 redirects via .htaccss files which is what I’ve done in the past.
We also started using Yotpo as our product review service, which includes rich snippets integration on Shopify’s product pages. I’m not sure exactly why, but once we moved over to Shopify/Yotpo nearly all our product pages starting displaying in the SERPs with rich snippets when in the past they almost never did.
So perhaps we did / are seeing a slight decrease in organic rankings, but one that’s been offset by a higher click through rate due to the increased number of rich snippets listings. It’s really hard, if not impossible, to tell. I’m just thankful that we managed the migration so far without any major SEO snafus.
Am I Glad We Did This?
Ultimately, we spent six months and $50,000 on a redesign that didn’t increase sales quite as much as I was hoping for. So am I glad we did it?
Absolutely.
While the 41% conversion boost wasn’t quite the aggressive 50% jump I was hoping for, it’s still an enormous boost to the business. Our payback period on our investment will be under a year, and that’s just considering the increase in net income. If you look at increased value of the business itself – that is, the increased amount I’d be able to sell the business for based on increase earnings – the investment has already paid off numerous times over.
The value on the branding front is hard to measure, but I’m confident our new site, message and approach will build up our name recognition and reputation over time. Ultimately, this will lead to increased trust and sales in the long run.
And finally, with mobile growth showing no signs of slowing down, having a site that’s optimized to capitalize on that trend is enormously beneficial. Instead of fearing the surge in mobile users we’re now in a position where we can benefit from it. When Apple Pay or some other technology makes mobile transactions much easier (and it will, eventually), we’ll be ready to further take advantage of our highly optimized site.
Playing Devil’s Advocate
To play devil’s advocate for a moment, there are a few downsides to my decision and approach. First, you could argue that I could have implemented a mobile friendly approach for significantly less money by simply installing a $250 mobile theme on my existing Magento store. Perhaps this would have resulted in a lions share of the gains we experienced for – literally – less than 1% of the price.
I gave up having micro-level insights in order to more efficiently transform the website and brand into what I wanted it to be.”
It’s definitely a valid argument, and thinking back it would have been a good first step to try. But ultimately, that approach would have been a short-term solution to a longer term problem.
It wouldn’t have addressed the other core problems we faced in terms of our desire to improve our branding, switch platforms and re-think our design. And I can absolutely guarantee that a stock mobile template wouldn’t have been nearly as good as the one that was customized exclusively for our site.
Looking back, perhaps we could have taken a more incremental approach to see what worked and what didn’t. But incremental approaches also take more time. You can be more sure of an outcome, but it’s harder to make large, sweeping changes quickly.
I gave up having micro-level insights in order to more efficiently transform the website and brand into what I wanted it to be. Ultimately, at least this time, it all worked out in the end.
The Team That Made This Possible
There’s absolutely no way our new site would exist today without the help of an entire cast of people.
Carson McComas and his team at Shopify Custom did an absolutely incredible job of turning our vision into a website we’re really proud to call our own. It’s hands-down the best contractor working experience I’ve ever had and I can’t say enough good things about his company. If you need quality Shopify work, I’m not sure if there’s anyone better out there. Thank you Carson, Jacob and Jennifer – you guys are amazing!
My team at Right Channel Radios and eCommerceFuel were also absolutely instrumental in getting this site launched. Thanks to Pat Haggerty for his work producing awesome video content and with product and customer migration. To Laura Serino for all her incredible work spicing up our copy as well as proofreading the site. And thanks to both Kay and Sheral for their help with a myriad of migration related tasks. Thanks, guys! I’m a lucky man to get to work with you each and every week.
Thanks to Ed Hallen from Klaviyo, Talia Shani from Yotpo and both of their teams for providing in-depth technical support with the migration. For email marketing and product review software, I can wholeheartedly recommend both Klaviyo and Yotpo as top-notch solutions.
And finally, thanks to the team at Shopify for their support both in the early stages of this transition as well with the nitty-gritty technical details of launching the site. To Mark Hayes, Emma Craig and numerous Support Ninjas: you guys do an incredible job, and have built an incredible eCommerce platform to be proud of.
And thank you, dear reader, for making it to the end of such a monstrosity of a post! Hopefully you were able to take a way a few nuggets. As always, I’m more than happy to answer any questions about Magento vs Shopify or the migration in general in the comments below.
Love eCommerce Case Studies Like This?
If you enjoyed this write-up, you’ll go crazy in our private forums where 1,00+ vetted independent store owners & experts connect to share tips, tricks and advice from their real-world businesses. You can learn more and apply here.
Photo by Heather Weaver.
Post by Andrew Youderian
Have you noticed how some Google listings show a wee photo of the author along with a link to their Google Plus profile? This nifty feature is part of Google Authorship which is a way of associating your name and… 