Website Design & Development Process: Building A Custom WooCommerce Website

A look at building custom sites with WooCommerce.

From international organizations to small local mom-and-pops, the entrepreneur in me finds business concepts and strategies thrilling.  I can’t help but get excited about every client we take on, and immediately feel invested in their success – even beyond online marketing.  One of my favorite things about working with clients, though, almost as much as getting to collaborate with them on their marketing messages, is getting a “behind the scenes” look at their companies.  It’s fascinating to see the inner workings of other people’s businesses and to get a front row seat to the secret recipes that make them rock at what they do.

Today, I’m going to turn the tables and give you a peek behind the scenes of Road Warrior Creative, and what our website design and development process is as work with clients.

But not just any websites – today we’re talking eCommerce website design and development.

In my capacity as a marketing educator across Northern Colorado, whether through my nonprofit, Allied Women Entrepreneurs, the Fort Collins WordPress Meetup, or teaching marketing classes at the Larimer County Small Business Development Center, I get lots of questions related to strategy for online stores/eCommerce websites.  So today I hope to share some of the “secret sauce” that flavors our approach to online stores.

Know What You’re Getting Into

eCommerce websites are arguably some of the most complex websites to design and develop.  They need to function very well on multiple fronts: SEO (search engine optimization), calls-to-action that convert visitors into customers, a shopping cart interface that makes online sales possible, and back-end product and store management tools that make it easy for shop owners to manage their store.  All of this becomes especially important when a business seeks to make all or most of its revenue online rather than in a brick and mortar business.  When you can’t rely on foot-traffic and personal interaction to make sales, your website strategy is vital to your business’ success.

When you can't rely on foot-traffic & personal interaction to make sales, your website is vital to business success. Click To Tweet

Yes, to make money online, you need an awesome, well thought-out design and a kick ass eCommerce solution, but there’s no reason to get overwhelmed.  Taken step-by-step, you can create a website strategy that will have you celebrating not just your first $10 in sales, but also your first thousand, tens of thousands, or even millions of dollars in sales.

There’s no one right way, but here’s our approach to eCommerce stores, through the lens of a project completed last year for High Plains Spice Company:

7 Steps to Creating An Awesome Online Store

1. Know Your Customers

Before you start designing your online store or creating any marketing strategies, online or off, you need to have a clear understanding of who your target demographic is.  Having a successful online store isn’t just about using the right tools, it’s also about having the right marketing messages, images, and calls to action that resonate with the people who are most likely to buy your products.  In order to create an effective online marketing strategy, you first have to know who you’re talking to.

Take the time to gather as much information about your prospective customers as possible.  You can gather information in a variety of ways including customer surveys, analyzing the demographics of your social media accounts, and talking face to face with customers and clients.  Then, create buyer personas that represent 1-3 of distinct customer types.

How To Build a Better Persona

If you aren’t sure how to do this, check out Chris’ blog post, How To Build A Better Buyer Persona.

Before we even start working with our clients, we ask questions about who are their customers and target demographic.  If you don’t know the answers to these questions, then we will first suggest that we do market research and create customer personas for you.

You can’t create a successful online store without first putting time into research.

2. Establish Goals For Your Online Store

It goes without saying, if you want your business to make lots of money, you need to have clearly defined goals.  And by clearly defined, I mean SMART goals – goals that are:

  • specific,
  • measurable,
  • achievable,
  • relevant, and
  • time-bound.

Having SMART goals for your online store will help you and any agencies or consultants you hire not only create the best strategy – from online marketing to design and features included in development – but also will enable you to determine success after your online store is up and running.  If you invest your time, energy, and resources into building a website, you need some way of determining if it was worth it.

Digital Marketing Insights & Strategy

Delivered Directly to Your Inbox

Signup and we'll tell you all our secrets.
  • This field is for validation purposes and should be left unchanged.

Pssst. We hate spam too.  We promise not to send you any.

What do goals look like for a real business?

Let me introduce you to High Plains Spice Company.

about high plains spice company

High Plains Spice Company is the premier destination of spices, rubs, coffees, teas, extracts and other culinary delights in Sterling, Colorado and the surrounding areas. Owners, BJ and Lacey New are passionate about their products and have created an engaging personality for their brick and mortar business.  Their unique spice blends are all mixed by hand in their Northern Colorado shop, and they’re well-known in the region.

When they contacted us last summer, High Plains Spice Company had started to see success selling online through Amazon.com.  But they wanted to grow their online sales outside of Amazon, which adds costs to their bottom line with the addition of marketplace fees and significantly limits their control over their own brand and ability to communicate with customers.  Their initial goals included:

  • A unique, not template-looking website with a “country-chique” aesthetic, that could be easily maintained by High Plains Spice Company staff, yet would not look DIY.
  • A platform that would support the 380+ products they were starting with, plus the ability to easily scale the website as product numbers increased dramatically.
  • Having a clearly developed navigation structure, design, and search features that allowed customers to find what they are looking for.

High Plains Spice Company also had SMART goals which included specific revenue and traffic volume targets set for specific dates. An example of this type of SMART goal would be:

Increase total sales revenue by 5% monthly from the launch of the website until the end of the year, December 31 2017.

or

Reduce bounce rate (as measured by Google Analytics) to under 40% and increase page per visit to over 4 through the introduction of an improved website design and clear calls to action, within 3 months of website launch.

3. Choose Your Shopping Cart Platform

Once you have figured out who your customers are and what your goals are, the next step is to determine what eCommerce solution is going to work for your business.

We are, through and through, WordPress fans – all over this site we extol the benefits of WordPress.  WordPress is all we use in every website we build.  It’s simple enough that, with the right theme and a few plugins, someone with no development experience can throw together a small brochure-type website in an afternoon.  It’s also highly extensible and customizable, which allows us to develop some very amazing and complex sites.  It’s no surprise, then, that when it comes to building an online store, we do it within WordPress.

Likewise, for Road Warrior Creative, there is only one option when it comes to eCommerce platforms: WooCommerce.

woocommerce logo

WooCommerce is a plugin (I.e. add-on) for WordPress that adds shopping cart functionality and so much more.  It allows store owners to easily add, manage, and sell products seamlessly within their main website – no iframes or separate URLs necessary, which is hugely important for SEO – and is incredibly extensible so we can develop any custom functionality you can dream of.  (Like this fundraising thermometer that auto calculates percentage achieved toward a goal based on product sales less any taxes or shipping charges.)

Once you know your eCommerce platform, then you can move on in the process of building an amazing online store.  For High Plains Spice Company, given their goals, it was clear early on that WordPress + WooCommerce was the best option for them, which meant we could quickly move onto the next phase of the project: creating a site map.

4. Create a Site Map

After you’ve determined what platform you’ll be using, the next thing to do is to create a document that lays out the complete navigation structure of your website.  I.e., something that shows every page on the site and how they all relate to one another.

Creating a site map helps us to see how all of the pages are connected to one another, and also is a catalyst for working through the relative importance of various website sections to one another.  It’s important to remember that not all parts of your website are equally important when it comes to achieving your online sales goals.

In High Plains Spice Company’s sitemap, for example, the primary navigation bar consists completely of WooCommerce product category archives.  The about page and supplemental sections, added either for customer utility (contact/cart) or search engine optimization (recipes/blog), were added to less prominent navigation areas.  This puts the focus on getting customers to places where they can buy products and actually commit to making a sale faster.

5. Create a Wireframe

A wireframe is a sketched out version of where different elements will go on a page:

The wireframing process allows us to work out what elements go where.  Again, this should be dictated by your goals.  More important elements should go higher on the page, and you should have calls to action sprinkled throughout.

High Plains Spice Company, for example, wanted to have a custom home page with more unique elements than are normally included in the main WooCommerce shop page.  The beauty of WordPress is that we can easily create a static home page, separate from the default store page, and from there direct people into category pages for the type of product they are looking for, be it spices, coffee, tea, or oils & balsamics.

Wireframes should include the basics, logo, navigation, etc., and also any special elements unique to the page.  This home page, above, included a slider so High Plains Spice Company could easy communicate quick messages and shopping calls to action to their customers, followed by the next most important goal of the website: increasing email newsletter subscribers.  Other elements on the page included image links to top-level product category pages, text about the business, image links to recipes and blog posts, and a slider displaying recent customer reviews (pulled directly from WooCommerce, as a means of displaying social proof).

In an ideal world, you will complete one of these for each type of page that will have a unique custom design.  For example, you might wireframe out a home page, about page, product archives + single product page, blog post, etc. I do this on my computer, but you could easily sketch out wireframes with pen and paper.

6. Design Your Website

Once you know where everything goes, the fun begins.  Now you let your imagination run wild (keeping in mind the tastes of your customers and target demographic, not just your own), and start working on a design.

We like to start by creating home page designs first, to establish a style, then will create designs for any interior pages that follow the home page design and style.  Below are two of the home page options we presented to High Plains Spice Company.

Option 1:

high plains spice company website design 1

 

Option 2:

high plains spice company website design 2

(I guess I should have posted a spoiler alert back when I first introduced High Plains Spice Company with a photo of their website, because they obviously chose option 1.)

I design all of our custom website designs in Photoshop, which is generally the standard for web designs (though I’ve built from Illustrator files as well).  The point here is to create something true to size that will truly convey what the customer experience might be.  It’s a document that you can hand to a web developer and know that you’re getting that exact thing rendered in the browser, down to the exact colors, width, and even shadow size.

Creating a website design allows you to really figure out if everything is placed appropriately, easy to read, on brand, and, yes, intentional in that it is working to accomplish your goals.  It also helps to ensure that the style of your web site is consistent from page to page, using the same fonts, heading sizes, colors, etc.  Most importantly, having a custom web design will make your website stand out in the crowd of theme-based builds.

Like with wireframes, it’s important to create design files for any major or key pages on your website.

A custom web design will make your website stand out in the crowd of theme-based builds. Click To Tweet

7. Develop the Website Design into a Working eCommerce Store

With a design in hand, it’s time to build your website.  This is where WooCommerce’s magic steps in.  I’m not going to walk through the process of developing a custom designed WooCommerce website from PSD design files (that would take more than one blog post and many days to write), but I will highlight some of the features that were especially useful as we worked on High Plains Spice Company’s website.

The biggest thing I love about WooCommerce?  It saves us time because so much is already built in.  There are tons of features in WordPress and WooCommerce out of the box, that we can build upon or use as-is, that it makes development go faster (which means we can build websites in shorter time and for less money).  One example is that WooCommerce has reviews already built in, so although I custom coded a reviews slider for the home page:

woocommerce reviews slider

all I had to do was call in reviews/star ratings that already existed in the site.  I didn’t have to also create the review submission or management functionality, which would have made this one element much more intense.

To have an amazing online store, you need a platform with plenty of options, easily configured. Click To Tweet

On an eCommerce website with nearly 400 products, it’s key to user experience to funnel visitor to the right products by directing them to category-based pages.  Nothing is more annoying than getting to an online store, seeing all products in alphabetical order, and then having to click through 5, 6, 7 or more pages to find what you’re looking for.  Having category-based navigation like we used on High Plains Spice Company is one solution, but it’s better to also have funneling down by categories on main shop pages as well.

WooCommerce has one click option that changes your shop page from displaying products to having it display categories instead.

woocommerce show categories

So instead of a mess of products, your customers see pages like this:

woocommerce categories shop page

Categories can be grouped together under parent categories, and once you get down to the lowest “child” category, all products are visible:

woocommerce product archive shop page

This is a hugely under-utilized feature of WooCommerce that can make a significant difference in your customer’s ability to find what they’re looking for.  As you know, the easier it is for your customers to find products, the more likely you are to make a sale.  And making a sale (or 500) is what this is all about, right?

Another easy option built into WooCommerce is the ability to add images and descriptions to category archives.  In the two images above, you can see that we included an image and short description box at the top of every category page along with the title of the category.  Adding these details – especially with the addition of beautiful, professional photographs – makes a huge difference in the visual appearance of the website.  The more visually appealing and professional a website looks, the longer people will want to stay on it and engage with it, which equates to more opportunities for sales.

Normally, WordPress doesn’t support the addition of images to categories (though that functionality is easily added), but WooCommerce comes with product category image support out of the box, making it simple for store owners to set images and descriptions.

These can easily be added into a custom website design as it is developed.

Putting it All Together

Category Images and funneled shop pages, are just two examples of critical design elements key to High Plains Spice Company’s goals made easy by WooCommerce.  It’s an amazing platform that, when paired with a carefully executed strategy can bring amazing results.

Our approach to eCommerce website design and development – just like with other online marketing efforts – is to first think carefully and create a plan based on research and data.  We execute with intentionally selected tools, then monitor, adjust, and tweak as we go.  It’s a process that can take time and effort if you’re doing it on your own, but is 100% worth it if you dream of watching the cash roll in from your online store.

Have questions or need WooCommerce help?  Leave a comment below or contact us.