You need more than a payment gateway to woo your customers to buy. Good design sells. A good story sells. Now, let me show you how telling a good story combined with good design can really take your Woocommerce sales off the roof.
Three steps to scaling your sales
Marketers have come up with a physiologically proven technique to enhance your sales process. Its often used in the advertisement industry and its called sequential advertisement.
Step 1: Promote a Lifestyle and associate your brand with that lifestyle.
Before you start working on your website, work on your brand strategy and identity. Here’s how to get started:
- Research your customers and develop user persona,
- research your competitors and establish a brand voice different from them, ( brand differentiation )
- create an awesome brand style guide, color palette and imagery.
Step 2: Showcase your products in association with the lifestyle.
As part of getting ready to display your products , do this:
- Create product names that resonate with your customers / potential customers. This is where you can put your branding work to good use,
- create product imagery, lifestyle imagery guidelines to create consistent imagery throughout all your creatives,
- create product descriptions and pricing. Use the brand research to do this.
Step 3: Create a call-to-action.
Do not complicated your call-to-action, keep this in mind:
- Use clear words,
- give them a sense of urgency. Amazon uses a sense of urgency to drive a part of their product sales. ( see image below )
- use social nudge in the back to create enthusiasm. Write a tagline like “Find out why 5000 entrepreneurs subscribed to our newsletter.”. Use a simple call-to-action button with a tag-line like that to drive your email subscription or event registrations. This would also work for certain types of products, use good judgement.
Let me show you how to use these ideas and create a Woocommerce storefront with Elementary,
Elements of the store
Storefront:
The storefront is where your user forms the first impression about your brand. Its where you promote a lifestyle and associate that lifestyle with your brand.
Components of an excellent storefront,
Full-width Banner : A banner is the best design element to portray a lifestyle. And a well designed banner can associate your brand with the lifestyle. Here is how you can create a banner in seconds with Elementary.
Creating a full-width banner in Elementary:
- Use Advanced Custom Fields plugin or CPT UI plugin to create a new custom post type called “banners” ( just an example ).
- Now, create a new banner and fill in the title, post content and featured image.
- Then, Install and setup the Elementary plugin.
- Go to dashboard -> Elements -> Add New Element.
- Type in the title and click  ” Customise this Element ” button.
- From the popup that appears, choose ‘ Banner Card ‘.
- You can then use “Filter Content” to filter banners post type.
- Then, you can select the fields like “post url”, “featured image”, “title” and “post content”.
- Go to style editor options and change the width to 100%, and change any other style property.
- Finally, go to Collection settings and choose Full-width : yes from the dropdown. Max number of posts to 1, and toggle pagination to off.
- You can now save, copy the shortcode from Dashboard -> Elements page and paste it where you want it to appear.Read more about Using Elementary >>
Viola, bellow is the Banner element that we created.
The banner below is created using Elementary’s ‘banner card’ and ‘archive’ collection.
Three-columned Banner : Use a three columned banner to tell stories that a user might be interested in. You can create 3 different stories based on different user persona.  The best strategy is to align your product-line with the persona. Here is why branding strategy is very important. When you have a well done brand strategy, you know which product-line is made for which user persona and you can direct all your marketing and sales with a clear vision in mind. Here is the 3 columned banners created with Elementary.
The banner below is created using Elementary’s ‘banner card’ and ‘archive’ collection as well.
[elementary id=’727′]
Like the element design above? No? Well, check out a lot of other grid element designs.Â
Social Proof : Humans are social beings, we trust people more than we trust brands. When a potential customer comes to your store, looks at the lifestyle branding, if he’s the right target customer, he will be impressed. But, the most basic nature of online shoppers is mistrust. How often has an unknown brand taken off with your money and did not deliver on the promised standards! Social proof helps align the trust people have in other people like them towards your brand. Brand with peoples’ voices speaking for them become personable brands.
The carousel below is created using Elementary’s ‘profile card’ element and ‘carousel’ collection.
[elementary id=’735′]
Product-line Archive:
Product-line Banner : Product-line banner re-emphasises the lifestyle associated with the product-line and gives the customer an assurance that they are in the right place. And it is also an excellent location to promote a seasonal product or a best-seller.
Product-line Carousel : Though recent research on over a thousand e-commerce websites show that carousels at the top of the homepage does not resonate well with the users, carousels in the product-line page could be beneficial if you have more than 1 featured products, promotions or the like. Always test your design, use tools like Google Analytics and CrazyEgg to find where you lose your visitors and how you can improve your conversion rate.
Use A/B Tests to find which design works better. Never take anything for granted.
Products List: Make a products list with pagination. The single product card should contain the basic fields like featured image, title, price, view button for single product page and add to cart button. Also good to include a few additional details like description and attributes like brand, colors and sizes if any.
Clickable area: A very important part of good design when it comes to card elements is that, it should be very clear which part of the card is clickable and what action that would do. In case we are using 2 buttons, one for single product page and another for add to cart button. The buttons should have clear and definitive labels and hover action should turn the cursor to a pointer/hand symbol. Use css button:hover { cursor: pointer } on the button.
The following archive page was created using Elementary’s ‘Lisa Star Card’ element and ‘Archive’ collection. To see the page go to Bridal Shop Archive.
Measuring design performance:
Yes, design is about emotions too, not your’s though, your customers’. Sometimes, designers need to think about design objectively, and part of it is to measure how well your design is doing. I know, its hard to judge something when you look at it and it looks so beautiful and perfect. When that happens, time to switch to the left brain. open up your tool-kit and measure your design performance.
Here are some definitive metrics that you simply cannot ignore:
- Bounce Rate: You can google ‘bounce rate’ if you want a definition. Let me tell you in simple terms, if you do not visitor a second page after you land on my website, you contribute to my bounce rate. Say, you visit www.pauple.com and without visiting any other page in my website, you leave. Then my bounce rate would be 100% ( if you are the only visitor ). If out of 2 visitors, 1 leaves immediately and the other visits another page, then the bounce rate is 50%. This is the simplest explanation. You can read more about Bounce rates here.Bounce rate need not essentially be due to a design problem on your website. It could mean, you are targeting the wrong audience with your advertisement, your traffic source / channel is poor or it could be an issue a with the landing page. To address the landing page issue, go back and read the text above on Storefront, especially lifestyle branding and product description.
- Conversion Rate: With regards to E-commerce sales, conversion rate is the percentage of visitors who convert into customers. An issue with conversation rate means you lack brand trust or a weakness in product’s value creation or communication. Use social proof to create brand trust ( don’t fake this, or you will lose customers forever. ) and re-think you product if your product does not solve a real problem. Write better product descriptions to solve the product communication issue. This is where user stories /persona come in.
- New vs Returning Visitors: This metric tells you if your visitors found the first visit useful, enjoyable or if they did not have a good experience. People have a very short memory of anything that they do not have an emotional connection with. Apart from making an emotional connection with the customer, leverage the power of Newsletters. Keep them coming back with engaging content, offers and resources that create value for them.Create value and capture some of it. That’s business.
- New vs Returning Customers: This metric talks more about your product / support and need not be a design concern, but as an E-commerce site owner you need to keep an eye on this for the long term success of your venture.
Go to Google Analytics, its all the tool you need to measure these metrics. Oh and by the way, its FREE. Also check out CrazyEgg which is a heat-map tool. I use CrazyEgg to see which links my visitors clicked on, the frequency of the clicks, which part of the page they spend most time on, etc.
Finally, check out Elementary. I totally RECOMMEND it. We even have a free demo where you can try it out and see how the backend works.
Do share your comments and thoughts below.