Your potential web customers will take the first step to use Google to search what they want. In the search bar they will type in keywords that correspond to what they are looking for, and these keywords are what you need to discover to maximise traffic coming into your website. This is why keyword research is important.

Using Google’s keyword planner

The keyword planner made by Google is a powerful tool that you can use to discover keywords that matter to your online store. A basic requirement for using it is to have a Google account to sign into AdWords. You probably already have a Google account but if you don’t you’ll have to create one before you can proceed to https://adwords.google.com/ko/KeywordPlanner.

Once you’re on the keyword planner, you’ll be seeing a screen very similar to the one above. There are 3 methods to finding new keywords but we’ll be using the first option which is to “Search for new keywords using a phrase, website or category”.

Upon clicking on it will present a form that you can enter your product or service that you are selling (or want to sell). For this example, let’s use ‘yoga pants’. Hit ‘Get ideas’ to move on to the next step.

Because you’re searching for yoga pants as a product, you can start to see which keywords are relevant towards it. For example, here are some keyword strings that people use on Google to look for yoga pants.

• yoga shorts
• yoga clothes
• yoga pants for women
• yoga tops

You can start clicking on keywords that you can capitalise on and it’ll be moved to the side-menu on the right. Don’t worry about bidding for the keyword, all we’re doing is creating a list of keyword strings that you can use for new product ideas, meta-tagging, content writing, etc.

Next thing to do is to copy that list into a spreadsheet like Excel or Google Spreadsheets and list it down like the above. What you can do now is, determine what you want to do with these newfound keywords. Are you going to retag some of your pages? Are you going to create a new product line? How about a consolidated category list?

To recap, the motive to keyword research is to find out what users are searching for, in order to get to the products they want. For more e-commerce related content, do check out our other posts.

The post Using Keyword Research to Improve Your Online Store appeared first on Stampede: the strategic design & technology company.

Even if the user has enjoyed the online store experience by browsing around and adding items to their cart, a faulty checkout process can abruptly cause a drop off from that point. While there are multiple reasons as to why users drop off during the checkout step, it boils down to this; the user was likely annoyed at something.

In this post, we’ll be delving into two areas; how to identify issues with the checkout process and fix it, and some recommendations & best practices that can further improve your online store’s checkout process.

What are the issues?

Because every online store’s checkout process is different, we’ll be following a common example seen below. From there on, we’ll be identifying issues that appear generically at certain points.

The sign up requirement

Your user has been browsing your website, seen a few interesting products and has clicked ‘add to cart’ a number of times. It is now time to checkout, and the screen of judgement now appears before the user. The only options are, to create a new account to proceed and login if you are a returning customer, that’s it. This is your first pain point on your checkout process. Some users may not feel like going through the sign up process because they might perceive it as lengthy or feel overwhelmed with the amount of fields to fill up.

The Fix? Offer a manual form. When I say manual I’m not saying a print form but rather a digital form that the user can fill up with delivery details etc. You’re probably thinking, what’s the point of doing that if it’s almost the exact same process as signing up? The fact of the matter is that some people just don’t like creating accounts on websites, and these people are also potential customers. Give users an additional option to continue without signing up using a bare bones form. This form should only contain details such as the recipient’s name and delivery address, enough for your business to send the package to the customer.

Costs that were not upfront earlier

Understand that your users are shopping online also to get better prices than a brick-and-mortar establishment. So when they are suddenly presented with an additional cost at the end such as ‘service fees’ or unmentioned shipping costs, they will likely drop off. While the majority of online shoppers are very aware of shipping costs, the fact that it wasn’t shown from the beginning leaves the potential buyer with feelings of being cheated.

The Fix? Make sure the information is upfront. If your business charges for shipping costs, let the user know right away at the product page itself. The best placement for this is before they click the ‘add to cart’ button. Link the user to a page showing estimated shipping costs so that they can evaluate whether it is worth spending time at your online store. Even if they do leave because of the costs, at least they left at their own choice and well-informed.

Confusing process and user interface

Unlike a brick and mortar establishment that requires visitors to physically travel there, online stores can be easily accessed and exited with just a mouse click or a tap. That being said, you want your user to have an easy time going about your website and this of course includes your checkout process. Having too many steps, badly placed buttons, and broken links are some of the many things that can go wrong with the checkout process. If this is the main issue causing your users to drop off, then your website has a very big problem.

The Fix? Keep things simple, and design a user friendly interface. Sometimes it could be the e-commerce platform that you are using that adds too many additional steps in the checkout process. Consider modifying the flow to cut down on unnecessary steps and page loads. Also, consider applying the ‘three-click-rule‘ to your process. A good checkout process has a single page for customers to check their orders and enter their billing and shipping info, and a confirmation page before they submit their order.

Unsatisfactory payment options

Each of your customers have a preferred paying method. While the majority of online shoppers would be fine paying directly using a credit card, there are also those who prefer going through secured payment gateways such as PayPal. Just before the payment step in the checkout process, if the user does not see the preferred option, that user will likely drop off.

The Fix? Have multiple payment options. While payment via credit cards are a must, consider signing your business up with payment gateways. If your customers are mainly local, getting in contact with the local banks to enable direct bank in as a payment option would be beneficial. This allows users without credit cards to become potential customers to your business.

Desktop vs mobile interfaces

With so many users owning multiple mobile devices like smartphones and tablets, surfing on the go has become a norm in modern society. If your online store has been built for responsive, don’t be surprised that your visitors are making actual purchases using their devices. It’s convenient and doesn’t require the user to be in front of a computer to do so.

Now the issue lies with how your checkout system is designed on both views (desktop vs mobile). If the desktop interface was designed first and adapted to the mobile, there might be a problem with how it is being shown on the user’s mobile device. One common action, is that users need to scroll down to see more content, and this also affects your checkout interface. Know that having the user scroll down too much during the checkout phase can affect them negatively. It becomes difficult for the customer to see the overview of items in the cart.

The Fix? Design mobile first, then expand to desktop. If you have an existing online store, then this method might be difficult for you to apply on the website. What can still be done however is to design a new mobile interface first and adapt it to a desktop view. After that, the changes can be applied to the existing website. Smashing Magazine has a fantastic article on how you can design the checkout process for mobile.

Non-secured transaction

Hackers these days are known for stealing credit card information and identity theft, and online users are very aware of these cases. Website security is no longer a feature for your customers but rather a necessity for the industry. Many registered online retail businesses are imposed by their respective governments to implement basic encryption on how their website handles sensitive information. On your browser web address bar, you may have noticed a green padlock on some websites that you have visited, and it is commonly seen on bank websites. This flags the website as SSL compliant, and that the information you share on the website is secured with proper encryption. Websites that are SSL compliant also have HTTPS in it’s web address. To learn more about HTTPS, check out this post on Wired.

The Fix? Get an SSL certificate. There are many vendors on the Internet that you can order an SSL certificate from. There are both free and paid options, but for reliability and respect for your customers, we highly advise you to get a paid SSL certificate. Once obtained, implement it on your online store and you’ll start to see a green padlock on the web address bar that proves it has been installed. We won’t go into the detailed aspect of how this is done, a simple Google search can reveal multiple ways and guides to secure an SSL certificate.

How to further improve the checkout process?

Now that the issues and fixes have been identified, we’ll move on to some suggestions and best practices to further improve your online store’s checkout process. Here are some general tips on creating a good checkout process.

1. Consider placing the ‘next’ button in the same location on every page load.
2. Have a progress indicator to show the user how many steps are left in the process.
3. Make sure your call-to-action (CTA) buttons that progress the flow can be seen clearly.
4. Show all costs up front, this also includes shipping costs. Tally the total cost that the user needs to pay at the end.
5. Do not promote or cross-sell during the checkout process. This will only cause the user to be more frustrated and have second thoughts. Feel free to promote after they have paid.
6. Learn from examples. Websites like Apple, BeautyPro and Crate and Barrel are just but some great examples to name a few.

Conclusion

The checkout process is but one of many steps in your users’ journey. While it is very important, other aspects of your online store can make or break its success as well, so do not neglect those.

We hope that you have learnt something from this post, and if you have any comments or just want to say ‘hi’, drop us a reply in the comments. If you liked this article, do check out some of our other e-commerce related articles which may be of interest to you.

The post Improving Your E-Commerce Checkout Process appeared first on Stampede: the strategic design & technology company.

Design

This goes without saying, having a great design attracts users to come visit the website. Its design is essentially your store front and if your users do not like how it looks, chances are they’ll be hitting the back button and going elsewhere. Web users also tend to be also very trendy, with all the exposure they have with other pretty looking websites. Because of this, your customers will likely prefer to see a modern-looking website than let’s say, a website that looks like it was from the 90s.

Speed & Reliability

Depending on the size of your online store, load speed and down times will mean a lot to your users. E-commerce sites such as Amazon has a lot of products, even more is the amount of traffic the website gets. If you’re online store has a fair number of things to sell and have many users accessing it, then you’ll want to make sure that the website loads quickly. To your customer, waiting for a page to load can be a daunting endeavor. Your website needs to be in a state where the user can get the content they want, at the time they request it.

What’s worse than a slow website? Downtime. Nobody likes getting their journey cut short due to unforeseen circumstances. To your users, down time is a big no-no and can leave a very strong negative impression on your brand. Avoid this from happening at all costs.

Product Catalog

You could be selling a handful of products or a warehouse’s worth, the most important thing is if your customer can actually find what they are looking for. Like how real brick-and-mortar stores have shelves to store wares and aisles to categorize types of products, online stores need to be able to sort products based on understandable categories. This will enable the user to be able to browse and search what they are looking for. To your customer, this part of their user journey is important because if they become frustrated by not being able to find what they want, chances are they’ll end up leaving your website discontented.

Product Details

They have nothing else to rely on other than the details that you are providing them.

One of the biggest differences in going to a store to buy something versus shopping online is that when you’re on the web you can’t actually see what you’re buying, at least not physically. This is why product details are very important to the online shopper. They have nothing else to rely on other than the details that you are providing them. If abundant and reliable information is provided to the customer, chances are they will feel more confident in what they’re looking at and will likely lead to a sale.

Clear product details consists of:

• Product images from various angles
• Description of the product
• Size & dimensions

Shipping Charges

For anyone who is familiar with buying things online, shipping charges become a norm. Your customers know that there will be shipping charges but the most important thing is to clearly show how much the shipping costs are. No one likes to see surprise costs at the tail end of their buying journey. For whatever your customer is paying, the total price should be broken down and itemized clearly on what they are actually paying for, this also includes the shipping costs.

Ease of Payment

Payment is the final step for your customer before they can begin waiting for what they’ve bought to arrive on their doorstep. The payment step is also one of the phases where a large number of drop-offs can happen and it all falls back to your e-business payment model. Two common types of payment methods for online purchases are credit card payment or using payment gateways. Your payment process should be fairly straight-forward using secured methods of payment. This is actual money that users are prepared to pay, the minute they notice that it seems not secure, the likely outcome will be the user dropping-off from the transaction.

Security

Users expect their data to be protected and encrypted to prevent identity theft…

To your customer, security is another important factor on your website. Users expect their data to be protected and encrypted to prevent identity theft, and this is where SSL certificates come in. SSL allows sensitive information such as credit card numbers, social security numbers, and login credentials to be transmitted securely. If your e-commerce website has an SSL certificate that is active, users will be able to tell by seeing a green padlock at the address bar of their browsers. This tells users that they are protected and can go ahead with shopping securely.

After Sales

When a customer has completed a prior transaction in the past, sending them an online newsletter can sometimes be a treat. Based on what they’ve purchased, you can promote items that the customer may like. This will act as a reminder to the user that your website is still around and attract them back for the next shopping spree.

By understanding what the customers wants, you can tailor a personal experience to said customers which will in turn make them want to revisit your online store.

The post What Do Customers Look For In Your Online Store? appeared first on Stampede: the strategic design & technology company.

The standard way of embedding Google Forms is to use an iframe, which is sufficient. The more preferable way of course is by manually extracting the form’s HTML fields and re-coding it according to your theme’s HTML structure. Not only will it match your theme nicely, but you can also insert some custom JS validation on the fields as needed. Another plus is that Google Forms captures form submissions in a convenient spreadsheet format.

The Steps

The first step is to create two web pages in BigCommerce that will become our form page and success page when users submit the form. The form page is a custom template file that will contain our form HTML codes while the success page is simply a generic page. Take note of the success page URL.

Next, build our form in Google Forms with the most minimalist styling. Once tested and published, view its source to get the form codes and re-code the form into our custom template file — in the HTML structure we like while preserving the field names and the <form> action (and method). Next is some code alterations.

<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe"style="display:none;" onload="if(submitted) {window.location='SUCCESS_PAGE_URL';}"></iframe>


<form action="https://docs.google.com/forms/d/1CsZt9s0vVegFb3-Qa3162Ri7A91ggx6S9B6qvBZcyJY/formResponse" method="POST" target="hidden_iframe" onsubmit="submitted=true;">
...your form fields...
</form>

Add line 1 and 2 right before our form tag and replace the correct success page URL in line 2.

Next, add target="hidden_iframe" onsubmit="submitted=true;" attributes to the <form> tag so that the form submits into the hidden <iframe> we created in line 2.

Finally, give it a test run. It is advisable to validate the form fields with JS to ensure the form is indeed being submitted successfully.

Although this guide is written for BigCommerce, the implementation steps are generic enough to be used on any platforms where you have HTML and JS editing access. Hope it helps.

Need help making your BigCommerce store stands out from the competition? Get in touch.

The post Embedding Forms in Bigcommerce Using Google Forms appeared first on Stampede: the strategic design & technology company.

A staple feature of e-commerce websites.

In Shopify, this feature may already comes standard with most of the themes or in an updated version of the current theme you are using, which is great. However in some cases you could be using a heavily customized theme and updating is not going to be a breeze, well, all you need is just a couple of lines of codes and you got yourself an upgraded product slideshow.

The Code

Paste the code below into the bottom of either template file product.liquid or snippet file product-form.liquid.

{% if product.variants.size > 1 %}
<script>
(function($) {
  var variantImages = {},
    thumbnails,
    variant,
    variantImage,
    variantImage_count = 0;
  	//produce mapping between variant image and options
    {% for variant in product.variants %}
       variant = {{ variant | json }};
       if ( typeof variant.featured_image !== 'undefined' && variant.featured_image !== null ) {
         variantImage =  variant.featured_image.src.split('?')[0].replace(/http(s)?:/,'');
         variantImages[variantImage] = variantImages[variantImage] || {};
         {% for option in product.options %}
           {% assign option_value = variant.options[forloop.index0] %}
           {% assign option_key = 'option-' | append: forloop.index0 %}
           if (typeof variantImages[variantImage][{{ option_key | json }}] === 'undefined') {
             variantImages[variantImage][{{ option_key | json }}] = {{ option_value | json }};
           }
           else {
             var oldValue = variantImages[variantImage][{{ option_key | json }}];
             if ( oldValue !== null && oldValue !== {{ option_value | json }} )  {
               variantImages[variantImage][{{ option_key | json }}] = null;
             }
           }
         {% endfor %}
         variantImage_count++;
   	   }
    {% endfor %}

    $(function() {

      if (variantImage_count > 0) {
        $('select.single-option-selector').change(function() {
          var selected_color = $(this).val();
          thumbnails = $('.flex-control-thumbs img').each(function(index, el) {
            var image = $(el).attr('src').split('?')[0].replace(/(_thumb\.)|(_small\.)|(_compact\.)|(_medium\.)|(_large\.)|(_grande\.)/,'.');
            if (typeof variantImages[image] !== 'undefined') {
              if(selected_color == variantImages[image]['option-0']) {
                //only check against the first option ['option-0'], which is Color (in my case)
              	$('.flexslider').flexslider(index);
              }
            }
		      });
        });
      }

    });
})(jQuery);
</script>
{% endif %}

The code is a combination of Liquid template tags and JS. It is based on the customization provided by Shopify for enabling customers to select a product variant by clicking its image and modified to work the other way around.

Line 10-30 produces the mapping between variants image and options in a JSON object that is used for comparison against the product thumbnails in the select box event handler function as seen in line 35-46. Line 42 is the actual code that tells the slideshow to jump to a specific slide. As you might have guessed, the code is unique to Flexslider slideshow plugin. You need to determine what slideshow plugin you are using and then figure out how to jump to a specific slide using its API.

I hope you find this guide useful. If you have questions/feedback, let me know in the comments.

Have a nice day!

The post Showing Selected Product Variant Image in Shopify Product Slideshow appeared first on Stampede: the strategic design & technology company.

However shopping on a mobile device can be a nightmare because of the screen size and other limitations, for example mobile shoppers need to be on high speed of 3G connectivity to be able to experience mobile shopping to its fullest from browsing till purchase. From the web development perspective, how to create better mobile shopping experience?

Below are some 5 tips to create a great mobile shopping experience based on my observation.

Speed

Have you ever encountered a limited time sales on your favourite products online? Browsing their websites on mobile and the process takes forever to load, and that’s really frustrating. Scenario: While waiting, a Whatsapp message comes in and you abandon the shopping cart and you forget altogether what you had been trying to buy.

Here are some tips web developers could do to improve speed and performance for e-commerce websites:

• Optimise pages so that they load fast hence users on data roaming to browse won’t bounce immediately and leave your site. According to online survey (Dyn) 3 seconds is the longest user will wait for a shopping website to load. Nearly half of users expect a web page to load less than that.
• Try to optimise content, code and the server. Remove unused Javascript and keeping the HTML/CSS as tight as possible to strike the balance of quality against images file size.
• There are several tools you can use to assess and analyse the speed of your website, for example Gmetrix and shown here is Google Pagespeed.

Cut the Fat

Mobile shopping experiences are the best when the focus is put primarily on the products. After all, it is about selling products anyway!

• Don’t clutter your page with excess navigation, excess information or excess promotions. Hide and remove all unnecessary parts. Let the user shop without delay and difficulties. For example, use hamburger menu for navigation to save space and not distracting user with unnecessary graphic or texts.
• Organise information nicely and clearly. Mobile users don’t want to have to hunt down what they’re looking for. Make things obvious to your visitors. Provide all necessary information where users should see your products, view very brief product information, and be able to proceed to checkout. Label tab or categories clearly, it will be very helpful.

To put it another way, imagine what would happen if you put all your clothes in your closet and not in folding form, just scatter them all over the place. What would happen when you’re in a hurry and trying to find your socks? Stressful and frustrating, isn’t it? That is roughly what it’s like when you clutter your page with so many things in a small screen size.

Quality Images

Because of small screens on mobile devices, products images should be big and of high quality. Good quality images are a key tool for online sales. The products need to be seen in detail. Blurry and small images make it difficult for users to browse your online store and this will annoy them, hence the bounce in the website.

• Larger images and good quality will make the user keep browsing your products and attract them more to buy the product.
• Make the shopping experience easy by preparing a multiple close up product image.

Big and beautiful images will embrace the limitations on mobile shopping. However be careful here, because big images means large data and slower browsing. What you need to have are images which are big, visible and nice enough to see on small screen size but keep the file sizes low and properly compressed.

Tips on image size:

• Typically, large high quality images should be kept between 100K and 60K.
• Smaller images should be closer to 30K and lower.

Legible Buttons

Mobile buttons should be thumb friendly. When your users are ready to be converted into customers, make it easy for them to finish the process.

• Make the call-to-action buttons noticeable. The checkout button should be big and available anytime an item is in the cart.
• Also take note that by using big buttons, jumbo sliders and giant input fields will increase user engagement and reduce bounce rates rather than using standard input fields.

Simple Processes

This is the most important factor in mobile shopping. Users want to go quickly from start to end. When designing a checkout experience, the step should be as simple as possible. The fewer steps required to make a purchase on a phone, the better.

• Speed out the checkout process by eliminate unnecessary steps such as user registration. Too many steps can break the flow and user will likely abandon the shopping process.
• Users should be able to find, evaluate and purchase an item as quickly as possible. If the checkout takes more than a couple of steps, display a progress bar that allows the user to see how many steps remain till payment process so that they are excited to receive their purchase.
• Providers should offer different ways to pay instead of just debit or credit cards.

Conclusions

There are many ways to create great mobile shopping experience. The 5 tips above may seem simple, but they can generate such a big impact on your online sales. In short, provide a simple, easy, and seamless experience for users and give shoppers an experience they won’t forget!

Do you have any tips of your own on how to improve mobile shopping experience?

References:

1. Practical E-Commerce: E-commerce Design Trends
2. Web Designer Depot: 4 Simple Ways to Perfect the UX of Mobile E-Commerce
3. E-Consultancy: 6 Thoughts on Google’s Mobile-Friendly Search Announcement
4. Kissmetrics: Surprising Mobile E-Commerce
5. Shopify: Mobile Now Accounts for 50.3% of All E-Commerce Traffic
6. MyCustomer: Mobile Commerce’s Nine Ways to Improve Your Customer Experience
7. Shopify: Creative Ways to Improve E-Commerce Customer Experience
8. Lemonstand: 9 Expert Tips on Designing Better Mobile E-Commerce Experience
9. 3Q Digital: 3 Simple Steps to Improve E-Commerce Experience 2015

The post Improving Mobile Users’ Shopping Experience appeared first on Stampede: the strategic design & technology company.

Here’s what happened.

Valentine’s Day social media campaign

Background, goals and duration

Recently we ran a Valentine’s Day marketing campaign for a good client at Stampede, which includes promoting their beauty products via websites as well as various social media channels.  The goal is to increase conversion rate and ultimately bring in as many sales as possible during the 11-day duration of the campaign. The campaign was designed around Valentine’s Day and the romance of giving – from the product selection, to the design treatment of the websites, as well as social media channels. It was a huge campaign to take on but more so, it was exciting!

Channels

For this campaign, the channels involved were:

• 3 websites
• 3 Facebook pages
• 6 Facebook ads
• 2 Google+ pages
• 2 Twitter accounts
• E-mail campaigns across 10 mailing lists

Results

Over the course of 11 days running the campaign ending on 20th February, we garnered close to increase of 42% of sales across these channels. We watched in real time how people engage with the brand on Facebook, browsing products on the website, adding items into their carts and subsequently completing their purchase. It was an absolute delight to receive every new order notification came rolling into our inboxes!

Things we learned

Be well-prepared ahead of time

Running a campaign this size is no easy task. Have a cut-off date of when to finalise the product offers, to do the pricing change in the backend of the e-commerce CMS (and when they should end as well), be clear of things that might be a showstopper, and so on so forth.

Which brings us to…

Have an extensive checklist for everything

And I mean, everything. Because, Murphy (the law).

But in all seriousness, proper preparation increases the chance of a successful social media campaign, or any work in general. So have a checklist in place for every task in the campaign and do spend some time going through them before getting them out of the door.

Get the word out as much as possible

While ads – whether they are from Facebook, Google Adwords or Twitter Ads – might be able to serve audience that we might have organically missed, 75% of campaign success is said to originate from constant promotion. Start by designing the campaign items – from website updates to email campaigns to social media headers – to make it easy for those interested to share through their various platforms these days. We normally use AddThis and we love it a lot, so if you have some other suggestions, feel free to let us know!

Content is still king

While it is good to rely on ads once in a while, it is actually a better practice to build content overtime before, during and after the campaign runs to drive more loyal traffic to our website and build their interest towards products. These content can range from blog posts, blogger reviews, tips and tricks and many more. Furthermore, content in websites are indexable by Google which is good for your search engine optimisation (SEO) ranking.

Invest in responsive

Websites that look great on mobile aren’t a luxury anymore—they’re a requirement. One of the most important findings in this campaign is that close to 40% of customers browse through the website online, and of course, a majority of them purchase and/or attempt to purchase online via their mobile devices. So if you are asking if this is about time you invest in having your website responsive, we say, YES!

Inject human element

It is easy to be carried away into thinking you always want to increase numbers, but data is nothing without emotions. Carve a really good copy, one that sounds like a handwritten letter you want to read from a good friend – while at the same time not losing out the essence of the campaign. Design a header that draws people to act towards our goals. Put yourself in the audience’s shoes – what do they want? How will this benefit them?

Rome wasn’t built in a day

With that being said, a lot of guidelines posted officially as well as on the Web serve just as that – guidelines. They may help us to automate most tasks and increase the chance of running a successful campaign. In my experience, successful campaigns are born through a collection of preparation, tight team collaboration as well as experiments.

Yes, experiments. An example from this campaign: Over the 11 days, we continue to monitor the Facebook ads obsessively on a daily basis. When we discovered an ad wasn’t exactly working, we tried changing the headlines, fixing the images, running two ads with the same image but two different headlines, or two ads with the same headlines but with the same image (basically A/B testing) just to see which one works better. We recorded the findings and presented to the client.

There are no surefire ways to confirm that a campaign is going to be success all the way without this combination.

As always, with the campaign data in hand, be ready to justify and let client know what the actions can be taken to improve the numbers in the next campaign. Also, go the extra mile that even if the numbers are already good, still look for ways to improve 🙂

Comments? Tips? Candies?

Have you ever ran a social media campaign before? Do you have any tips for a successful campaign? Do let us know in the comments!

(Image credits: Windfarm Marketing)

The post Running a Social Media Campaign appeared first on Stampede: the strategic design & technology company.

In an e-commerce store, at times the design gets in the way of the product. It overwhelms user. A good design blends in the background, almost unnoticeable even. The question is, how do we keep a product display page clean and minimal with so many things vying for user’s attention?

Here are 8 excellent examples of how you could do it.

More Rare

More Rare is an online store operated by graphic designer Rieko Vining selling rare and antique vintage products from Japan. Rieko created a crispy clean site with tan-coloured background, a theme synonymous with antiquity, that displays products in a beautiful grid.

It is so minimal that you won’t see any any description until you mouse-over an item. It captures a visit to a small vintage shop, where you let the charm of a product pulls you in before learning more about their story.

AIAIAI

Headquartered in Copenhagen, AIAIAI is an audio design company producing modern, minimalist headphones and earphones deliver clear, amplified sound. True to being Denmark’s leader in acoustic design and engineering. their online store retains the neat, grid-based layout, relying only on whitespace to distinguish one product cell from another.

Much of the space is taken by product shots compared to the minimal footprints of product name and price. User can immediately switch between available colours simply by hovering their mouse too. This is a great option considering that most e-commerce only serves this interaction at the product card level.

Lush

Lush is a company making fresh handmade cosmetics, headquartered in the United Kingdom. The brand uses wholely natural ingredients in their products and is an active advocate against animal testing. Lush’s products have an exclusive feel to them, almost as if every product is prepared delicately to order and sent directly to your bathroom from Lush’s famed Kitchen.

The category display is immersive. Product placements follow a form of masonry grid — named after mason fitting stones in a wall — and are scattered among different themes like News and Features. The result is not severely minimal but still maintains a clean yet whimsically cluttered look. The contrast between the busy theme and sparse product details works too. Users can easily differentiate the two and by being quieter than the busy theme, a product actually shines better.

Artiitii

Artiitii is an online store selling unique limited edition prints dedicated to the greatest artists in the world. Run by two childhood friends passionate about the beauty of combining music, art and design, Artiitii wants to bring something unique into a world of mass production. Each of Artiitii’s product is limited to 50 prints each, all carefully hand drawn.

The prints are all in rectangular shape for easy framing but displayed in rounded avatar style — a very effective style useful to humanizing Internet content. Because each print is a labour of love and limited to 50, Artiitii includes the number of prints sold under every product. It gives a sense of urgency to fans and provides a motivation strong enough to complete the purchase before it goes out of print.

Anyi Lu

Anyi Lu is another website that relies heavily on good product photography to hint users that more information is available by interacting with each product. They do take it up a notch through depth perception in every product shot. The grid is varied between 3 and 2 columns, with generous room to breathe, reminding us of those luxuriously sparse shelf space in high-end stores.

As user hovers their mouse on a shoe, something interesting happens. The product will blur and recedes to the background a little to bring forth its name and price. It’s all done very stylishly though the effect is somewhat laggy for the first few tries.

HeyShop

An online store from Barcelona, HeyShop is the storefront forHey Studio, where they display and sell personal projects like posters and books. Hey is a small studio so the posters will be made on demand using digital printing and high quality paper. Similar to Artiitii, this print-on-demand service differentiates their products from other mass-produced items.

Products are displayed with minimal description but in different format, based on types. Books are placed in shelves, bags hanged and prints framed on the wall. Despite the different display modes, they all in the end feel like a unified gallery and it serves the Hey brand beautifully.

Interacting with specific product will bring about a simple black panel, completely obscuring the image with product name, dimension (for prints), price as well as a link to view more info. What could be more amazing is if these items could do a little flip and show all information at the back of their frame, wall or book cover. It’s definitely a not a major feat with CSS3 nowadays.

Hard Graft

Founded in 2007 by designers monie.ka and James Teal, Hard Graft produces upscale lifestyle accessories using premium leather and good old-fashioned workmanship. The brand carries beautifully crafted leather bags, iPhone/iPad cases and many more, using rich, premium and highly resourceful materials. Product shots absolutely takes center stage here, with oversized images showing the tiniest leather detailings. In deliberate contrast, product name and price are shown in tiny font sizes with the occasional sticker-style label informing user that an item is specific to a certain smartphone model.

What’s interesting is how photography of the products at times breaks the grid by showing two products hanging from a horizontal bar spanning the entire page, effectively disrupting the dual-column scrolling. The result? The break serves as a resting point for your eyes and you tend to linger more to appreciate the exquisite craftmanship. Nicely done.

Patrik Ervell

The last in our list is quite a unique website. Patrik Ervell is an American-born menswear designer based in New York City. His designs are characterized as utilitarian, minimal and elegant and it translates beautifully into his online shopping experience. The category page is minimally done with hardly any stray elements present. No other information is provided besides product name so user will need to click to view full details on the product page.

When you first land on the website, the models will start moving in several directions to show users see how each outfit looks like from front and side. It’s almost like a watching a runway show and far more convincing than a 360-degree static product display. Being able to see real-life fitting of garments is something online customers will truly appreciate.

Conclusion

As shown in the examples above, e-commerce product display can take many forms. Some industries like the vitamins & supplement rarely ventures outside their utilitarian design as it serves their purpose to provide as much information as possible for consumer comparison.

In others like fashion and lifestyle industry, you will notice more variations in getting the message across. Attractive product placements and beautiful photography truly are deciding factors whether your casual visitor will remain as one or becomes an active follower of your brand.

The post 8 Clean and Minimal Ways to Display E-Commerce Products appeared first on Stampede: the strategic design & technology company.

But why stop at that, right? In fact, we went ahead and designed a wide range of product sashes and ribbons for you. They’re all in editable vector format so you can scale them up, flip them to different corners and change their colors to suit your website style.

This work is licensed under the Creative Commons 4.0 so feel free to use it in your personal and commercial work.

Enjoy!

Download E-Commerce Product Sashes and Ribbons (PSD)

E-Commerce Sashes by Stampede Design is licensed under a Creative Commons Attribution 4.0 International License.

The post Freebie: E-Commerce Product Sashes & Ribbons appeared first on Stampede: the strategic design & technology company.

Sample of product sashes.

In BigCommerce, exclusive product sash features are not built-in but they can be added using some clever jQuery tricks. Specifically, we need to tell jQuery to read the page for certain “triggers” or “conditions” and show the appropriate sash based on them. The key to product sashes is they have to appear in product listing pages (like category, homepage, search result) and the product details page. This means the “triggers” have to be present in all these pages for jQuery to detect.

On Sale Sash

In the following example, I am going to show how to add the most common of all product sashes, On Sale. Firstly, we need to set the discounted price for the appropriate products. If this was done right, the products will show up in the shop with a strike-through line on their original retail price. This element will become the “trigger” for the On Sale sash. So we just have to tell jQuery, if this element exists, show the On Sale sash. Below are Javascript codes for the category and product details pages.

Product Category Page

$("#CategoryContent .ProductList li .RetailPriceValue").each(function( index ) {
   $(this).parents('li').find('.ProductImage').append('<img src="http://myshopurl.com/path_to_image/on-sale.png" class="product-sash" alt="On Sale" />');
});

Product Details Page

if($('.DetailRow.RetailPrice').is(':visible')) {
   $('.ProductThumbImage .zoomPad').append('<img src="http://myshopurl.com/path_to_image/on-sale.png" class="product-sash" alt="On Sale" />');
}

Any Miscellaneous Sashes

A slightly trickier scenario is to show product sashes like Bestseller and New, which we don’t really have a way to configure via the BC admin. Even though BC has product tags and custom fields, these data don’t show up in the product category pages. Fortunately, we have something else to use, the main image alternate text. In BC admin, it’s the Description box of the main product image. You need to enter a unique identifying keyword in the Description box and thanks to jQuery, reading the presence of this keyword is a breeze. This method will allow you to show any kinds of product sashes.

Enter the keyword into the Description field of the main image.

For showing a Bestseller sash, enter the keyword Bestseller. I personally prefer to enter the actual product name followed by the keyword to keep the semantics right, like 5ft Christmas Tree – Bestseller. Here’s the code for showing the Bestseller product sash.

Product Category Page

$("#CategoryContent .ProductList li .ProductImage a img[alt*='Bestseller']").each(function( index ) {
   $(this).parents('li').find('.ProductImage').append('<img src="http://myshopurl.com/path_to_image/best-seller.png" class="product-sash" alt="Bestseller" />');
});

Product Details Page

if(ProductImageDescriptions[0] && ProductImageDescriptions[0].indexOf("Bestseller") >= 0) {
   $('.ProductThumbImage .zoomPad').append('<img src="http://myshopurl.com/path_to_image/best-seller.png" class="product-sash" alt="Bestseller" />');
}

The examples I provide here only contain the necessary jQuery code snippets to make the product sash works. It’s not really a step-by-step beginners tutorial. You would need CSS to style the product sash nicely. Don’t forget about the sash graphics too, they are transparent PNGs. I can also foresee that my codes are totally template-dependent. However, if you are familiar with jQuery selectors I am sure you will be able to understand the gist and tweak the codes accordingly to fit your templates.

Give it a try and post your feedback below!

The post Add Product Sash/Ribbon in BigCommerce Using jQuery appeared first on Stampede: the strategic design & technology company.