An Infographic Guide to Building Infographics [Infographic]

While throwing around the idea of doing a post on building an awesome infographic, it occurred to us, why not build an infographic to show how to build an awesome infographic? So here it is, complete with mermaid examples, our guide to making an amazing infographic. Enjoy.

Click below to make the image bigger, and feel free to share or repost using the handy dandy embed code below the graphic. Happy building!

building an awesome infographic

Contact us today to see what other amazing things our design team can do.

To add this infographic to your site, copy the code below and paste it where you want it to appear on your site. Click here to tweet this now or share using the social icons below.

facebooktwittergoogle_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Modernizing a Workflow in Magento – Part 2

This is the second piece of our look into modernizing a workflow in Magento. The first article can be found here. I want to also mention that this is really just a stream of consciousness on my process and not a definitive guide of any kind. Moving on.

Based on the previous post, I’m breaking out the task this way:

  1. Put all design files in one folder ( so we don’t jump around so much )
  2. Use Gulp to distribute them to where they belong
  3. Watch the folder and recompile when anything changes
  4. Pitch up a local server to view changes

Ok, so unsurprisingly, I decided to work backwards here and start with the server.

We’ve begun including our database files in the root of our project folders. Our project folders look something like this. I’m adding one more folder for the gulp build area. This way, the website root stays clean of development files.

magento build blog

So the first task is to set up a local server. Magento is a beast and it requires a database. I’m using MAMP PRO for this.

I was able to use this blog post to help me get things running:

Since I’m using the paid version of MAMP ( MAMP PRO ) I didn’t need to alter the hosts file. MAMP did that for me. After creating a local database via phpmyadmin, importing the Magento database, making a few alterations to it, editing the Local Magento config, choosing a url ( mysite.local )… all outlined in the above article, I was ready to go.

I should mention that we (BEM) are going to be automating this process using Vagrant and Ansible soon. Until that day happens, I can pretty quickly get a Magento build running locally.

Now that the site is up and going, I can configure my Gulp install. Gulp can be a little time-consuming to get up and going so I normally start with this gulp configuration:
(Chris Davies is super smart and was my instructor at The Iron Yard)

It does a lot of great stuff right out of the box, obfuscate html, minify and consolidate javascript, push to github, gives hints, does a quick html server… it’s a lot. One of the things I didn’t want it to do was to minify or concatenate my javascript. The gulp build I’m using makes one javascript file to rule them all called app.js and a second file for all vendor scripts (jQuery, angular, etc) and compiles that into vendor.js. So instead of 50 js files, I use 2. It’s a best practice to load fewer files but would require refactoring the theme which is beyond the scope of what I’m working on right now. The next theme I write from scratch will work this way.

I also had to configure gulp to handle php and xml files since this build doesn’t do that.

So first, I need to tell Gulp where to look for my files. This gulp build has a really helpful config.js file. It’s great because I can pretty quickly tell gulp where to find all the important stuff. Normally, I have one destination folder but for this as you may recall, I want two: A skin/frontend directory and a app/design/frontend directory. So I started by setting up my config file like this:

// Build configuration, defining source and destination // directories and patterns // // srcDir is the source directory var srcDir = './src', skinDir = './../html/skin/frontend/dist', designDir = './../html/app/design/frontend/dist', bowerDir = './bower_components'; // src holds the values of source folders var src = { root: srcDir, vendorRoot: bowerDir, css: srcDir + '/scss/**/*.scss', js: srcDir + '/js/**/*.js', img: srcDir + '/images/**/*', fonts: srcDir + '/fonts/**/*', html: srcDir + '/**/*.html', php: srcDir + '/**/*.{php,phtml}', xml: srcDir + '/**/*.xml', ejs: [srcDir + '/**/*.ejs', '!' + srcDir + '/**/_*.ejs'], tests: './test/**/*' }; // dest holds the values of desination folders var dest = { root: designDir, css: skinDir + '/', js: skinDir + '/js', img: skinDir + '/img', fonts: skinDir + '/fonts', html: designDir, php: designDir, xml: designDir }; // Export our src and dest configurations so they can // be used in our gulp tasks module.exports = { src: src, dest: dest };

This variable: skinDir = ‘./../html/skin/frontend/dist’ tells gulp to go up a directory and then snakes down into the skins directory.
This variable: designDir = ‘./../html/app/design/frontend/dist’ does the same for the actual template and layout files.

I added a globbing pattern to find all the php files as well as one to look for xml files.

Next I created a task file called php.js to process all .php or .phtml files. It’s a pretty simple idea. In the tasks folder, there are a number of files that we can call to process our code. I’m adding one for php since that isn’t something that was in the previous build. In normal node fashion we include all of the dependencies we need to use and point gulp at where it should put all the files when done.

Since I’m not processing the phtml files, I didn’t bother doing anything extra. The task just looks in the appropriate folder, finds the php files, and copies them where they belong. Below you’ll notice a few places where you see something like this: config.src.php . That variable is the object we created in the above config.js file. It just makes life easier to put all definitions in one place.

The file I created looked something like this: // php and php:release build the php and ejs files var gulp = require('gulp'), addsrc = require('gulp-add-src'), connect = require('gulp-connect'), config = require('../config'); gulp.task('php', function() { return buildphp(); }); gulp.task('php:release', ['html:release', 'css:release', 'js:release'], function () { return buildphp(); }); function buildphp() { return gulp.src(config.src.php) .pipe(gulp.dest(config.dest.php)) .pipe(connect.reload()); }

I replicated the process for my xml files. I also had to work on the js.js task as previously mentioned. That was actually pretty easy. I just removed the calls to concatenate the files and unfortunately, I had to remove the jshint (error reporting). There is a lot of legacy javascript in these builds that makes the error reporting go wild and sorting through hundreds of errors to see if you made a new mistake isn’t terribly helpful.

So that’s pretty much where I am. The file is currently running and dumping all the theme files into a folder called a dist’ but I’ll change the current name dist’ to the package name of the particular project I’m on. I hope this series has been insightful. If you’re looking at using the Magento platform, give us a call today at 336-421-2168  or contact us here.

facebooktwittergoogle_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmailby feather

How To Maximize Ecommerce Sales

Whether you’re new to ecommerce, or have a well-established brand, there are always tweaks you can make to your site and marketing to maximize sales. In order to get new ecommerce customers, you’ll have to first get qualified buyers to your site. From there, you can nurture those customers and continue to target them until they’ve purchased. Keep in mind that although not every visit results in a purchase, you can still find ways to nurture visitors into paying customers. The sales cycle doesn’t end after someone completes an order, however. Be sure to continue communicating with customers over a variety of media to turn first time buyers into repeat purchasers and long-term brand advocates. Below we outline the 4 key stages and ways to maximize ecommerce sales at each.

Online Shopping Concept

Stage 1: Getting Qualified Buyers To The Site

Assessing Your Marketing Universe: Do you know where qualified buyers are hanging out? Use tools like Google Trends to find out what users are searching to find your products and then Google those terms to see what websites show up most. You might be surprised at what other marketplaces, social networks and other online hangouts exist where you can promote your products.

Be The Expert: Inbound marketing advocates like Hubspot are big on generating thought provoking content designed to generate awareness about products, help them consider/compare options and ultimately decide to buy. Thorough research and knowledge of your products and industry should be custom-crafted into digestible content on your website. Leverage your expertise to target ideal buyers (personas) and help to drive them down the conversion funnel through other content, calls to action and cross promotion.


Stage 2: Bringing Non-Converting Users Back After They Leave

Incentives: Price is one of the primary drivers of the purchase decision. Sometimes buyers who visit your site will shop around for better prices if they don’t feel they’ve been incentivized enough. Consider offering promotions for first time buyers and incorporating additional promotions for users who leave your site before purchasing. Below are some methods for retargeting non-converting users that are a great medium for promoting incentives.

Remarketing: Through tools like Google Adwords and Adroll, you have the ability to track and serve ads to users who came to your site in the past. Remarketing follows your audience around on a variety of different sites including popular news publications like CNN as well as social networks like Facebook, so you have ample opportunities to get back in front of users and help them come back.

Abandoned Cart Tools: According to Baymard Institute, average cart abandonment rate as of May 2015 was over 68.5% (up roughly .5% from earlier this year). With rates rising and customers gravitating to sites like for more purchases, it is more important than ever to have an abandoned cart strategy. In many instances, your shopping cart platform will already have built-in tools for sending out custom-tailored emails to users who have submitted information, but not completed a purchase. If your platform does not have something out of the box, however, consider some of these tools:

  • (Email marketing tool that supports Volusion, Bigcommerce, shopify, Magento, Mozu and other platforms with custom integrations).
  • (Email marketing tool that requires custom integration)
  • (Exit intent software to capture users who try to leave your site)


Stage 3: Selling And Upselling

How to Increase Average Order Values: There are a variety of techniques for increasing average order values on your site including bundling products, up-selling, cross-selling, providing rewards programs, and much more! Lucky for you we’ve already written extensively on the subject! Visit our post on increasing average order value now.

Optimizing the Shopping Cart and Checkout: Driving qualified buyers to your site won’t help you much if they get confused or struggle through your shopping cart and checkout process. View this post on creating a single one page checkout to help shorten the number of steps users have to go through before completing their order.


Stage 4: Post-Purchase Marketing Initiatives

Customer Nurturing Campaigns: As a marketer and ecommerce store manager, your job isn’t done after new customers check out. In fact, repeat customers have an over 50% chance of converting, which compared to an industry standard 1-3% makes a compelling case for where to spend your marketing dollars. There are a variety of customer outreach programs that are widely used across different industries. Worried about how much time you might have to invest in these project? Consider marketing automation as a delivery method for automated emails to customers on their birthday, long-term re-engagement (we miss you!) or cross promotion (other customers bought x, y, and z items).


In need of a new ecommerce site or maybe just a redesign? How about implementing some of the optimations from above? We can help with that. View more about our ecommerce solutions or contact us today.

facebooktwittergoogle_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Modernizing a Workflow in Magento – Part 1

Before I start let me introduce myself. My name is Tim Hooker and I’ve been building websites for about a year now. I’d like to talk about my process in setting up a Magento development environment that allows you to simplify theming a Magento site using Gulp and Compass.

Compass is a tool for creating css using a program called Sass. It makes supporting multiple browser stacks easy. It also allows you to make multiple files for all your css. This allows you to reuse that code on other projects more easily.

Gulp is a build tool. It can do many things but I use it to look through a folder of files, find what is needed for my website, and put them in a new folder all prettied up and ready for the web. I also use it to let me see my work live in my web browser and refresh it when I make changes.


In this post, I’m just going to talk about the challenges and my thought process.

Here are the challenges and why this is worth some effort:

  • First, Magento, unlike WordPress and other popular frameworks, separates your html and xml (structural files) from your other files (css, javascript). They’re not even close together so you spend most of your time jumping between directories. (It should be noted that Magento 2 relieves most of these issues but Im not holding my breath for the release date)

When you’re jumping around between directories it can get really confusing. You can easily find yourself editing the wrong files. That’s the first challenge. I’d like to put them all in one big mama folder.

  • Secondly, we need focus. We have to figure out which files we need to alter and pay attention to those specific ones. Magento is a system built almost entirely on overrides of files. Out of the box, Magento already works and your theme will only override or extend the core look, feel, and functionality. So it’s like this big onion of code with layers and layers to look through.

If we’re going to be successful, we have to figure out which files to include in our big mama folder.

That said I’ve decided to pay attention to one child of the RWD theme folder which is a fully functional responsive them. That will save time. RWD has a default folder which is also not the folder I want to pay attention to. My folder will be named for my theme and essentially will override the RWD default folder. If I have a header.phtml, it will override the default header.phtml. If I don’t have one, it will fall back to that file. It also works that way for css and js. This way, when you want my files, you’ll go to RWD/mytheme both in the app/design/frontend folder and in the skin/frontend folder. This should simplify where we focus.

  • The final challenge is to make this simple. Another developer needs to be able to pick this up and in about 2 minutes have it up and running without too many questions. It’s no good if this doesn’t work in a team context.

Now that we’ve gone through the challenges, I’ll talk through the process in the next post.

facebooktwittergoogle_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Top Web Design Trends of 2015 (So Far)

Now that we’ve passed the halfway mark of the year, it’s time to see what’s trending in the world of web design. In 2015, web design makes use of video, animation and mobile-first thinking to bring the web more responsiveness, interaction and connection. Here’s a look at 4 of the top trends of the year so far.


  1. Card Based Design

Pioneered by sites like Pinterest, Google Now, Facebook and Twitter, card-based design is the new—and growing—form of UX architecture. “Cards” offer content in small, digestible packets of information, allowing users to quickly scan chunks of information and quickly “choose their own adventure” in navigating a site. It’s also highly conducive for mobile, allowing for information to re-order and re-size easily for different screen widths.

grandover pinterest


  1. Responsive Story Telling

While the idea of “responsive story telling” has been around for a while, with wider browser support of fast-loading vector graphics, native video, CSS3 effects, HTML5 animation and parallax, websites are interacting even more with the user to tell a brand story.  Encouraging users to explore and engage with the content allows users to connect with the information emotionally and effectively.


Built by Matt Dempsey, Co-Founder


  1. Big Video

2014 championed big, full-screen background photos. In 2015, these images are moving. Full-width and full-screen video take the stage.  Whether it is a subtle, full-screen background loop or a fully-interactive video website, big bold video adds a story and a life to a website, often working hand-in-hand with the movement toward responsive story telling.



  1. Flat Design Gets a Little Less Flat.

Flat design is still trending, but we’re seeing it with just a little more depth in 2015. Google introduces the language of Material Design, adding a hint of shadow, meaningful movement and a more three-dimensional space that follows the rules of physical objects. These design elements provide context and clarity to flat elements, providing cues to the user on how to interact with content.

gpc screenshot


New trends are emerging everyday so it’s important to stay current with what’s new. If any of these trends caught your eye, feel free to reach out to us today to discuss our extensive design and development capabilities. Call us at (336) 421-2168 or contact us here.

facebooktwittergoogle_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Responding to Negative Reviews Online

If you’re online, odds are, people are talking about you. And as much as I’d like to tell you they all say, “You’re the best,” well, they probably don’t. Negative reviews are going to happen. The way you handle those reviews can have a huge impact on your business, both with current customers and potential ones.

dealing with a bad review


  • Monitor your presence

The first part of responding to a negative review is knowing one exists. You need to be consistently monitoring your online presence and social/review platforms. Ignorance is not bliss when it comes to dealing with online reviews. It’s simply bad for business. A prompt response can go a long way toward dealing with a complaint. Try a reputation monitoring tool such as Review Trackers to keep a close eye on what’s being said about your business.


  • Apologize…In the right manner

Time to put pen to paper—actually fingers to keyboard. First step: apologize. ‘I’m sorry,’ is one of the most powerful phrases at our disposal, and it can go a long way to appease someone who’s had a bad experience. Be careful how you phrase the apology though. When you read the review, you should know whether the company was at fault. If you don’t know, take the time to find out. It changes the approach you take to the apology and the solution. If the issue wasn’t your fault, “I’m sorry you feel that way,” is a better approach than “I’m sorry we messed this up.”


  • Address head on and provide a solution

When responding, address the issue head on. It’s important to your reviewer that they know you’re sorry they had this problem. You should communicate what may have gone wrong and what has been or is being done so it doesn’t happen again. Providing a solution or next step lets your audience know you’re working to improve the business and overall customer experience. A simple, “We’ve put a new process in place,” can mean a lot to a potential customer as well as the person who issued the review.


  • Take it offline if necessary

Not all issues can be dealt with simply by replying with one comment. If need be, take the issue offline and contact the reviewer directly. A personal approach can often be the best approach. However, make sure to leave some response on the platform for others who may be reading.


  • Know your audience

Lastly, it’s important to know who you’re responding to. Hint hint, it’s not just the person who wrote the review. Whether it be Yelp, Facebook or any other site, prospects are reading to see how you handle the situation. Take Yelp, for instance, which has a 1/9/90 Rule. One percent of people create content, nine percent edit content, and 90 percent simply consume content. That’s a lot of people eager and ready to read your response. How you handle a negative review online can be the difference between a potential customer choosing your business or not.


You’re bound to get negative reviews online but take the chance to look at them as opportunities. As long as none of you result to physical threats and you follow the guide above, you’ll be a pro at handling negative reviews on the web (see how not to deal with a bad review).

As always, if you need any consultation, feel free to reach out to us here.

facebooktwittergoogle_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Improve PPC Performance with a Customer-Centric Paid Search Strategy

We’ve written a fair number of blog posts about pay-per-click channels in the past, focusing on both tactical tips and strategic recommendations. Both elements are equally important, as the best PPC specialists have an incredibly strong grasp on the mechanics of the channel, but also understand the marketing fundamentals of their product or service. This means they can deliver the right content to the right people at the right time – ensuring that the ad text and landing page copy is not only on-brand but tailored to where the user is in the buying process.


This “customer-centric” approach to paid search means providing answers to informational queries for people that are just beginning to do research – for example, promoting a buyer’s guide for the person searching for “best small cars 2015”. Based on this search term, it’s likely that the person knows that they’re interested in buying a compact car, but really don’t know which brands or models they should consider. Knowing this, the advertiser can adjust their ad copy and landing page accordingly; if I am wondering what the best small car on the market is, it would be inappropriate to take me to a page where I can customize my car or schedule a test drive with a dealer. I haven’t even decided what brand I’m looking for! At this point in the buying process, content that is educational, rather than “sales-y” or overly self-promotional, is what users are looking for.

reliant robin rolls over

In hindsight, you probably should’ve purchased something that lets you go around corners.

Consider a different search query – “buy a sweet fake beard online” (don’t judge my search history, please). Based on the wording of this search term, the user is likely ready to make a purchase, so it’s okay for the advertiser to take them to a page that is more overtly promotional than in our SUV example above. It would be a waste to take them to an informational page (say, a video about how to apply a fake beard, or a history of great moustaches in film) – since the user has already done their research and is ready to buy, the ad copy and landing page should reflect user intent.

fake beards

Pretty sure the bottom three product images are just pictures of my dad in college.

Let’s look at a few ways to ensure that your paid search campaigns are built around your customers’ buying process.

  • Campaign Structure. Since keywords, ad copy, and landing pages all have to be tightly controlled in this approach, you may have to dramatically expand the scope of your campaigns. Consider allocating two campaigns for each product or line of service you offer – one “informational” campaign, one “conversion” campaign. Within each one, build out multiple ad groups around similar terms. It’s okay to get pretty granular here – for example, “small car buyers guide” and “small car reviews” can be segmented into two different ad groups, which will let you tweak the ad copy to be as specific as possible.
  • Extending Your Landing Page. Visitors to your site from informational queries may not be ready to buy just yet, but this doesn’t mean they should just consume your content and leave! Extend the impact of your landing page and marketing by providing next steps – for example, a white paper download in exchange for their email address can be an excellent way to begin a drip campaign to guide them down the sales funnel. Similarly, you can reconnect with visitors and encourage further engagement with a remarketing campaign.
  • Tools and organization are your friend. With highly targeted campaigns and ad groups, you may soon become a victim of “PPC sprawl” – a mass of keywords, ad copy, rules, and extensions that can become unwieldy over time. Consider developing a naming convention for your campaigns and ad groups that is easily extended and scaled as you grow. Multiple campaign and account management is also greatly aided by Google’s AdWords Editor; larger advertisers may want to consider a third-party management tool such as Kenshoo or Marin.
  • Are You Testing? You Should be Testing. You really should. Even with a great understanding of your audience and the buying cycle for your product or service, there are always insights to be found by testing out different ad creative, landing page creative, keywords, and more. There are tons of tools available for A/B and multivariate testing (including landing page platforms like Unbounce and Optimizely, which can help you deploy highly specific landing pages quickly and at scale – ideal for bigger campaigns), as well as qualitative research platforms like ForeSee. But remember: test results are only as good as your insights! Make sure that you design tests in a way that makes the results actionable; for example, testing ad copy variations to answer the question, “do users respond better to ‘Free Shipping’ or ‘10% off’?” will provide you with data you can use across other channels, promotions, and media.


With the customer-centric approach to paid search, you, as the advertiser, are awarded with much greater flexibility and control. For example, you may want to increase top-of-funnel awareness by focusing on informational queries. Alternately, you can target more educated, ready-to-convert users with ad copy and landing pages that are designed to drive immediate action. Finally, since users are seeing highly specific content that matches their intent, you can expect to see better click-through-rates, Quality Scores, behavioral metrics, and conversion metrics.

facebooktwittergoogle_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Single Page Checkout Done Right

Everyone is doing it

Seems like everyone is switching to single page checkouts. They are the new trend for improving ecommerce checkout user experience (UX) and conversion rates. There are several reasons for this trend:

  1. It just sounds simple: one step is always better than three right?
  2. It makes decisions easy: Just put it all on one page.
  3. Increased Conversions: There is some research that suggests that one-page checkouts out-perform multi-step in A/B tests.

It’s not that simple

As simple as it sounds, it really isn’t that simple. Improving your ecommerce website UX and conversion rate take more effort than just dumping your un-optimized checkout form onto one page. In fact, single-page checkout has the potential to make the process seem more complicated and time intensive to users. For example, which form would you rather fill out?

mulit-page checkout

Form A: Optimized Multi-Step Checkout

single page checkout unoptimized

Form B: Un-Optimized Single Page Checkout

I’m guessing most of you choose option A. Why? Because it looks easy and simple, where option B looks long and confusing.

Single page checkout doesn’t have to look (or be) long and confusing. Amazon recently changed to a single page checkout:

single page checkout


Doing it right

Why does the Amazon checkout seem so much easier to use than the other single page checkout (Option B)? It follows general usability guidelines that apply to both multi and single page checkouts:

  • Clearly Defined Steps: It’s easy to spot Amazons 3-steps required to checkout.
  • Limited Form Fields: Amazon keeps the form fields presented to a minimum to speed up checkout.
  • Remove Distractions: Amazon’s checkout page has its own clean, distraction free template so users can focus on the task at hand.

In Brief

Changing to a single-page checkout may speed up the checkout process and thus help improve conversion rates, but only if you:

  • Address the pitfalls of single page checkout (e.g. too much on a single page can seem overwhelming to the user)
  • Use general usability guidelines to optimize the checkout process

Need help optimizing your checkout process and improving your conversion rate? We would love to help. Contact us to get expert help with your ecommerce website today.

facebooktwittergoogle_plusredditpinterestlinkedinmailfacebooktwittergoogle_plusredditpinterestlinkedinmailby feather

Don't see what you're looking for?
Give us a call at .