How We Planned for a $50,000 eCommerce Website Design

March 25, 2020

Andrew Youderian – December 1, 2014 – 76 comments

I never shy away from a good bet, especially when I have a hand in determining the outcome.

But when I realized the cost for our store redesign would be $50,000, it gave me serious pause.  Was I making a smart long-term investment?  Or just the worst – and biggest – bet of my life?

In this post I’ll be explaining why we’re embarking on such a massive project, how we prepared for the redesign and the analysis I did to make sure I wasn’t certifiably insane for spending so much.

Past Redesign Mistakes

As I’ve written about in the past, I’ve made some terrible decisions when it came to investing money into high-end eCommerce design.  Specifically, I spent $5,000 on a professional design when launching TrollingMotors.net only to have to tear it all down and replace it with a basic, free stock theme.

So why in the world would I want to risk making the mistake a second time at 10x the cost? There are two big differences this time around:  the business’ age and the reason for the new eCommerce website design.

We’ve been selling radio equipment at Right Channel Radios for nearly 7 years and really understand the market, our customers and their needs.  Additionally, it’s a business that’s established enough to justify investing in.  With the TrollingMotors.net design, I invested heavily in a redesign for a new business I knew nothing about and that hadn’t generated a single dollar of revenue.

Secondly, this redesign focuses heavily on functionality and usability enhancements.  We’re not merely doing this to build a “prettier” site.  Instead, there are many critical usability problems we want to address as we’ll get into below.

The last time we redesigned Right Channel Radios was in 2012, and it went well – we saw revenues increase approximately 50% right after the redesign.

But it’s been almost three years and after a strong 2012, we’ve seen the site become gradually less effective each year.  In fact, revenues were down in 2014 by almost 30% from the previous year – the first time ever we’ve seen a year-over-year decline.  And a pretty sizable one, at that.

One of the biggest culprits?  Mobile shoppers.

The Mobile Effect

Since our last redesign in 2012, mobile and tablet traffic has exploded by 180% and 166% (respectively) while desktop traffic has fallen by more than 30%.  Even more importantly, revenue from mobile grew at over 200% while revenue from desktop visitors was almost cut in half.

That’d be great news if we had a killer mobile website, but we don’t.  It’s downright awful.

People were buying despite our website, not because of it.  And our overall revenue and conversion rates showed that to be the case.  So implementing a new top-shelf mobile eCommerce site was a large part of the redesign decision.

As we’ll get into later, we opted to go with a responsive site vs. a standalone mobile site.  With a responsive site, we only have to worry about maintaining one code base vs. trying to manage a separate mobile dedicated site.

While convenient, responsive sites do have their drawbacks – notably that they can be significantly slower than sites optimized exclusively for mobile phones.  However, we’re hoping to mitigate many of these problems by doing some programming magic to keep load times manageable.  More on this in the future.

Strengthening the Brand

I’ve made no secret about this the last year:  eCommerce is getting more competitive and if you’re not working hard to build a unique brand, you’ll likely be out of business in 5 years.  This is especially true if you sell other people’s products, like we do at Right Channel Radios.  Without offering any truly unique products, why should people buy from us over Amazon?

We’re using the redesign to specifically improve three areas of our brand:  our design, our focus and our personality.

Improved Design

I’m a big fan of starting lean and keeping design minimalistic in the early days of a business.  Again, I’ve learned the hard way not to invest heavily in design in the early days of a business.

But once you have an established business, a professional design can deliver an instant shot of credibility and trust to your visitors.  As eCommerce is getting more competitive and mature, this is becoming increasingly important.

Since 2012, our site has looked increasingly outdated every year.  Our current design was implemented by yours truly back in 2012, and even then it wasn’t going to win any awards.

 

Our Current Site Design

Improving User Experience

Apart from the antiquated look and feel, there were a number of elements of our current design that didn’t facilitate a smooth shopping experience.

From how customers browsed category pages to how they moved through the checkout process, we studied each aspect of the shopping process and found numerous friction points.  With the redesign, we’re hoping to fix these so that the site actually works better in addition to looking more professional.

Niching Down

I’ve never regretted “niching down” a store to focus on a specific type of customer.  In our last design iteration, we changed our focus from selling radios to selling radios specifically for vehicles. And with this redesign, we’ll be doing that again.

I’ve never regretted niching down an eCommerce site to focus on a very specific type of customer.”

Over the last few years, we’ve come to realize we specifically love – and can best help – customers who own 4×4 vehicles or pickup trucks.  That’s where we really can add the most value, and we’ll be re-positioning the site accordingly.

Adding Personality

To build a strong brand and stand out, I wanted to infuse personality into our new site.  Specifically, I wanted to overhaul our boring, straightforward product descriptions and email notifications with fun, compelling and humorous product copy people would really enjoy reading.

Copywriting ninja Laura Serino recently came aboard the eCommerceFuel team, which gave me a perfect excuse to do this.

Tired of Playing System Admin

Since 2012, we’ve run Right Channel on Magento.  Originally, I liked the fact that Magento was open source and self-hosted as this gave us complete control over our site.  Anything I could dream up, we could (in theory) implement.

But in practice, Magneto ended up being a royal pain.

Without a regular system admin on the team, I had to learn UNIX and figure out how to run a server.  Troubleshooting issues would often take hours if not days.  The upgrade process was so fraught with land mines we never embarked upon it, so our site couldn’t take advantage of the latest and greatest features.  And when I did hire a programmer, I had to worry about them messing things up as well and taking our store offline.

For a store our size, I ultimately decided that moving to a hosted cart was a much better decision.  We may not be able to tweak every line of code, but we’d be able to do 95% of what we wanted to without having to worry about server issues, backups, upgrades or tech headaches.

Adios, Magento.

Picking a Platform

Disclosure:  After making the decision to migrate to Shopify, I pitched them on sponsoring the podcast which they’ve done since the beginning of November.  I’ve also worked with them on numerous projects in the past.  

There are a lot of choices in the world of hosted shopping cart software, but for me it came down to Shopify vs. Bigcommerce.  Ultimately I chose Shopify.

My decision primarily came down to two main factors:  system architecture & ecosystem.   In talks with numerous developers, I heard repeatedly that Shopify had an incredibly robust and customizable templating framework that would let you do just about anything.  As we had plans to customize the new site heavily, this was really important to us.

Secondly, Shopify has the largest ecosystem in the hosted cart world.  While this is important from an app selection perspective, it also was enormously important from the perspective of finding developer talent.  In my personal network, I can think of a least half a dozen solid Shopify developers.   But I know just 1-2 who specialized and know Bigcommerce well.

I’m really excited to be making the switch to Shopify, and can’t wait to have our business on a platform that’s easy to manage and maintain.

Update: We have migrated from Magento to Shopify and sales have increased sales by 41%. You can find the full case study here. 

The Longball Approach to Selecting a Designer

My method for picking a design firm was probably the least scientific aspect of this entire process, but it’s worked out well.

I ended up hiring Carson McComas from ShopifyCustom.com to spearhead the redesign.  Carson wasn’t the finalist in a fight-to-the-death gladiator match of half a dozen eCommerce website design companies.  Instead, he was someone who had an impressive portfolio and that I slowly built up a good rapport with over time.

Over a multi-month period I became impressed with his experience, knowledge, portfolio and the way he did business.  So when it came time to hire a firm, I didn’t even quote the project out to anyone else – I knew he was my man.  (Although I may have made him “think” I was shopping it around just to keep him honest!)

If you have the luxury of knowing you’ll be embarking on a redesign in the next 6 to 12 months, start connecting with potential design candidates now.  It will be much easier to make a decision if you have a long track record and multiple interactions to look back on vs. a rushed interview process with numerous designers.

Budget and Cost Breakdown

If you’ve never quoted high-end design and programming work before, the $30,000 design/programming price tag may shock you.  Sadly, great programmers and designers aren’t cheap.  If you’re looking for someone who is smart, responsive and really knows their stuff (like Carson),  you’re going to have to pay up.  So we did.

If you’re looking for someone who is smart, responsive and really knows their stuff,  you’re going to have to pay up.”

We’re almost two months into the project, and it’s amazing to see how much goes into thinking through, planning and executing on a high-end design.   It’s a phenomenal amount of work.   I’m not sure I could ever call $30,000 cheap, but I can definitively say we’re getting great value for our money.  Perhaps the greatest test?  I’m not sure I’d take on the project for someone else for $30,000 if the roles were reversed.

The other $20,000 of the $50,000 budget I alluded to is coming from the involvement myself and my team will have over the 4-5 month course of the project.

Despite having Carson’s team doing the heavy lifting with design, I’ll be spending the majority of my work days on the project until it launches.  The rest of our four person team is also primarily focused on the relaunch:  Laura is writing tantalizing new copy, Pat is taking a ton of new images and our VA team members are working on a number of data heavy tasks.

So between my time and the payroll expense allocated to the project we’ll definitely hit the $20,000 mark.

The “Am I Bat Crazy?” ROI Test

While all of these issues are compelling reasons to consider a change, it’s still not enough to justify a massive $50,000 investment.  For that amount, you could buy an Aston Martin, a home in Puerto Vallarta or 100,000 apple pies at McDonalds!

Am I insane?  And how do I know this investment is reasonable and/or will pay off?

To be honest, I don’t.  And it’s a bit terrifying considering it.

But there is a process to make sure you’re taking a reasonable investment risk vs. simply throwing money into the wind.  It’s a process I like to call the “Am I Bat Crazy?” ROI Test.  The goal is to use some reasonable assumptions and see what the potential payoff for our redesign investment will be.

Status Quo Assumptions

Note:  These aren’t real net income figures for Right Channel, but using actual numbers will make this analysis easier to understand.

For the sake of illustration, let’s say that Right Channel nets $100,000 in profits per year.  Normally, a growing and healthy eCommerce business would be able to sell for 2.5x to 3.0x net income.  But because sales have actually declined this year, the multiple we’d likely see would be much closer to 2.0x.

So the value of the business would be $100,000 x 2.0x = $200,000.

Let’s also assume that over the course of the next year, we’ll see a decline in net income/revenues similar to that we’ve actually experienced over the last year at around 30%.  That’d mean one year in the future, the business would have made  $70,000 instead of $100,000.

To create a baseline scenario, let’s look at the total value of the business/any income one year in the future.

  • Business Value:  $200,000
  • 12-Month Income:  $70,000
  • Total Value in 1 Year:  $270,000

Assuming we do nothing, in this hypothetical scenario we’d likely receive $270,000 in value from net income + the value of the business (if we wanted to sell it) over the next year.

Now that we have a baseline, let’s pencil out some rough numbers for a redesign scenario.

Redesign Assumptions

Let’s make the assumption that the redesign will results in a 50% increase in revenues/profits. This may seem high to many, but I think it’s a realistic projection.

In the past, this is the minimum increase I’ve seen in both the redesigns I’ve personally done for established businesses.  Both of those were done without the help of a highly trained design firm.  And neither of them faced some of the UX (mobile) and design issues currently plaguing our site.

There’s a chance conversions will increase by less than that (or, heaven forbid, actually decrease), but I think it’s a reasonable assumption to use for the analysis.  A 50% increase in net profits would mean $150,000 in hypothetical net income for the business in the coming year.

From a valuation standpoint, not only would the net income increase but so would the multiple used to value the business.   Because revenue growth was on the upswing once again, you’d likely be able to get a 2.75x multiple vs. the 2.0x one you received for a shrinking business.

The combination of the increased income plus improved multiple makes a big difference.  The value of the business would be $150,000 x 2.75 = $412,500, more than 2x the value of the business under no redesign.

To create a redesign scenario, let’s look at the total value of the business/any income one year in the future.

  • Business Value:  $412,500
  • 12-Month Income:  $150,000
  • Total Value in 1 Year:  $562,500

Calculating the ROI

In summary, here are the two hypothetical scenarios of business value generated:

  • Value under Status Quo:  $270,000
  • Value with Redesign:  $562,500
  • Potential Value Upside with Redesign:  $292,500

So we’ll see a hypothetical increase of $292,500 in generated business value if our assumptions about the redesign are correct.

Would you risk $50,000 if you thought you had a better-than-not chance of earning an additional $292,500 within a year?  Of course you would!  It’s nearly a 6x return on your investment in 12 months.  Not too shabby.

Even if we saw just a 20% increase in conversion, you’d still likely come out $120,000 ahead over the course of one year.

Again, these net income numbers aren’t the actual ones for my store.  But this is the exact process I went through using real figures when deciding whether or not to move forward.

The Critical Pre-Design Checklist

One of the biggest mistakes you can make is thinking that hiring a talented design firm will ensure a successful outcome.  Nothing could be farther from the truth.

A great design team is there to brilliantly implement the new site, features and brand you tell them to build.  While they can give you some guidance on a few areas, the responsibility is 100% in your hand.

The most crucial work in the entire design process happens before you ever even speak with a designer.”

The most crucial work in the entire process happens before you ever even speak with a designer.  It’s easy to brush this part off.  But if you do, you’ll likely end up with a beautiful, expensive site that doesn’t improve your bottom line.

Here’s some of the legwork I did months in advance to ensure our redesign is (hopefully) a success.  Hopefully it can serve as a tutorial and/or checklist for your own redesign efforts:

Check Your “To Improve” List

Every store owner needs to have a “To Improve” list for their site that is added to on a regular basis as problems occur.

If you don’t have one, start one today.   You may think you’ll remember all the problems and UX (user experience) issues that pop up over the months and years from random customer emails, but trust me – you’ll forget 90% of them.

If you do have a list like this, it’s a great foundation for your pre-design prep work – and one I relied on heavily for creating the ultimate design brief.

UX Testing

It’s hard to over-emphasize the importance of watching actual people use your website.  Despite being in business for 6+ years, we discovered some massive friction points and terrible UX problems that we’d never known about.  These are issues that we’re addressing head-on with the new design.

We used UserTesting.com for our UX testing, which lets you remotely watch someone complete a task on your website for approximately $50.  They even let you set specific demographic details testers have to meet.  In our case, we asked for males between the ages of 30 and 60 years old who owned a pickup truck or 4×4 – the exact demographic we were optimizing for.

Identify Top Pages & Products

Make sure you’re applying the 80/20 rule to your redesign efforts.  Use Google Analytics and your reporting tools to find your top landing pages and your best-selling products.

We went through and tagged our top selling products so we could prioritize writing top-grade copy for those.  We also realized that many of our top landing pages were mediocre articles with no call to action … yet they were driving an enormous amount of our traffic.  Getting those spruced up should have an abnormally sized impact once we relaunch.

Optimize Site Structure

Hopefully you already have a site structure that’s optimized based on keyword research.  If not, there’s no better time than the pre-design phase to do it.

Creating a site structure to maximize your organic traffic is beyond the scope of this post, but I’ve created this in-depth site structure training exclusively for private forum members.

Fortunately, we’ve already invested the time to optimize our site structure and will be using much of it for the new design.

Do a Manual Content Audit

Spend time browsing through your site looking for pages and content that is old, outdated or just needs to be improved.  Personally, I find the redesign process the ideal time for general website housekeeping and updates.  We found lots of things – from product pages to tech articles -that were in desperate need of an overhaul.

I spent an entire week doing nothing but rewriting articles in our CB radio learning center.  Not the most glamorous or exciting week I’ve ever spent, but it should pay off in spades once we go live.

Start Running Those Surveys

Few things are as helpful as hearing directly from customers about why they did – or didn’t – buy from you.  For the months leading up to the redesign, we ran two surveys with the goal of identifying customer friction points:

Homepage Qualaroo Survey:  This survey was triggered when customers began to exit the site, and asked “Is anything holding you back from purchasing today?”  The goal, as you can likely gather, is to try to determine why people left without buying.

Post-Purchase Survey:  On the other side of the spectrum, we want to know what selling points really resonate with customers – and make sure we emphasize those in the new design.  So we ran a simple survey on the confirmation page asking them the following four questions. It also served to help us discover friction points customers encountered during the process.

  • Tell us about yourself.  We’d love to know more about you.
  • Why did you decide to buy from us?
  • What hesitations did you have about purchasing?
  • What could have been improved?

I believe I borrowed these questions from Avinash Kaushik, but I’m not sure.  Regardless, they resulted in a lot of good data.

Creating a Design Brief

Once you’ve collected all this data, it’s time to turn the insights into tangible design implementations.  I’d recommend doing this all in the master design brief, which you can use both as the organizational center of your redesign process as well as something you can show to designers when the time comes to get quotes.

My design brief ended up being very involved at 14 dense pages and included just about everything you’d need to know.  The more detailed you can be, the better.

You should be writing about specific features, page layouts, navigation structure, checkout flow, etc.  Pretty much anything that you determined is important for the new site needs to be detailed in your spec.

You also want to make sure to share your thought process behind “softer” issues like color and feel, customer demographic, redesign reasons, etc., so that your designer has some context for both your business and the goals you’re trying to accomplish.

The outline for the design brief I created is below, with the full design brief available to private forum members:

  • Reasons for the Redesign
  • Thoughts on Overall Look and Feel
  • Customer Demographics & Store Focus
  • Budget
  • Header & Navigation
  • Homepage
  • Category Page Template & Specs
  • Product Page Template & Specs
  • Product Selection Wizard Template & Specs
  • Shopping Cart and Checkout
  • About & Contact Us Pages
  • Resource Library
  • Footer
  • Requirements for Mobile Site
  • Misc Details
  • Appendix A:  List of Product Tags for Filtering
  • Appendix B:  Product Meta Fields by Type

Forget About A/B Testing (What?!?!)

In my experience, from-the-ground-up site redesigns are simply too involved to try to justify every decision with data. In a perfect world, you’d find potential friction points via your data gathering process and A/B split test a potential solution to make sure it did, in fact, lead to more sales/a better customer experience.

But sadly, we don’t live in a perfect world.

Especially if  you’re an independent merchant with limited resources, trying to back up every design decision with A/B test data will not only take you years, it will drive you MAD.

So I’m going to offer some advice that goes against what you’ll usually hear:  test the really big things if possible, and then make changes based on common sense and the anecdotal evidence you see in your UX testing.

Will you get some things wrong?  Sure.  But if you’re genuinely incorporating the feedback from your customers’ UX testing and surveys into your design, you’ll have to screw up big time to have all of those changes decrease conversion across the board.

Wireframing

Initially, I hadn’t considered going through a detailed wire framing process.  I was planning on simply handing off my beast of a project spec to my designer and hashing out revisions once version 1.0 of the site was finished. Thankfully, Carson convinced me to invest heavily in the wireframing process upfront.

By creating a detailed set of wireframes, you accomplish two important things:

First, you make sure you and the designer are on the same page visually before you invest heavily in the design process.  Making big changes in the wireframe stage is trivial.  Trying to re-work things after you’ve spent lots of time on design and coding work is much more painful.

Second, you create a detailed blueprint for your site that can be handed off to any competent designer.  Since Carson had a lot of experience with the process, I hired him on an hourly basis to help me build a detailed wireframe and sitemap.  But you can also use a site like Basalmiq to create your own wireframes.

Compared to projects where I did no wireframing, it’s amazing how helpful it was for fleshing out ideas, identifying problems and being able to think through things visually.

Below are the home and category page wireframes we created to give you a sense of the level of detail we went into.  The complete 17-page wireframe is available to all private forum members.

 

Homepage & Category Wireframes

 

 

 

Up through the wireframing stage, we’d hired Carson as a consultant to help with the wireframing and paid him on an hourly basis.  Because creating a site blueprint is an ambiguous task and hard to forecast in terms of time required, it made sense to have an hourly arrangement.

Once we had a wireframe and detailed project spec that we both felt comfortable with, Carson gave me a firm project quote using those two resources.  The quote came in right around $30,000, which was a little higher than I expected – but close enough that I felt comfortable moving ahead.

Signing a Design Contract (Finally!)

You might think signing a contract with a designer is the first step to a successful redesign.  But if that’s how you approach your project, you’re bound to have problems.

Here’s a list of the prep work we’d completed before signing a contract with Carson:

  • Spent 3-4 months collecting customer data with surveys
  • Ran a back-of-the-napkin ROI test to make sure we our redesign budget/investment wasn’t insane
  • Invested 15-20 hours in doing a site audit and compiling a list of problems/needed improvements
  • Wrote a 16 page design brief outlining (in painful detail) the scope of the project
  • Invested $5,000 in pre-design wireframing services to build a rock solid blueprint
  • Spent months stalking evaluating Carson to see if I he’d be a good fit for the project

… and all of this was done before a single line of code was written.  It’s a surprisingly large amount of prep work.  But it’s absolutely essential if you want your project to be a success.

What’s Next?

This is the first post in what I plan to be a three part series.  In the next post, I’ll be diving into the nuts and bolts of redesigning and migrating a store, and how not to botch your migration.

How do you coordinate a half a dozen people with interdependent projects?  What do you need to consider when moving from Magento to Shopify?  And how do you ensure your organic traffic doesn’t tank after the move?

My third and final post will reveal the new redesign, compare and contrast it with the old site and – most excitingly – share the early results in terms of changes to conversion and revenue.  In short, we’ll find out if my $50,000 bet paid off or if I’ll be moving back in with the parents after crippling my primary source of income.

Should be fun.

Photo credits:  Photos by CayUSA and Scragz.

Post tagged in: , ,