How Design Changes Drive Sales and Engagement

There are many aspects to running a successful eCommerce store. From development to backend end systems integration to search engine optimization and marketing to product inventory, fulfillment, customer service, analytics… the list goes on. Sometimes it’s easy to let design take a back seat to these integral pieces to successful online transactions. However, ignoring design could be a costly mistake to your business. This post will review the importance of improving your site design and the steps you can take to increase sales and drive engagement. To learn more about making the most of the design elements on your transactional website, download our free guide to Product Detail and Page Design including 70+ examples:





Download Guide Here





Brand Representation

brand representation
Design is solely responsible for digitally portraying your brand. There’s no physical store front, no interior decor, and no friendly associate to mould shoppers perception. Design elements directly affect people’s brand attitudes. As an eCommerce retailer, your brand needs to have a positive association in user’s minds. This includes both visual aesthetics and usability. When the design is intuitive and helps users accomplish goals, this strengthens their relationship with your brand.

Studies show that beauty alters how people behave and we subliminally make the association that attractive things work better. A beautifully designed website will improve the user experience and also the overall pleasure and happiness your users feel while shopping. These positive interactions build rapport with users who will be willing to pay more simply because ”it’s a brand I can trust”.

Apple does an incredible job of representing themselves online. Their site is beautiful, informative, intuitive and accurately portrays their brand personality.

AppleBrandExample

Related: Don’t Go! Why Your Bounce Rate is so High

How to Improve Sales by Leveraging Design

Step 1: Launch Your Site

Launch your site driven by educated hypothesis on your target market. Research your potential shoppers – who are they and what do they want to see? What are their goals and motivations? What is their shopping persona – are they spontaneous, logical or emotional? If you do not have these answers it will be very difficult to make informed decisions about your website aesthetics.

Use the basic principles of design and colour theory to guide your decisions. These are the building blocks of any piece of art and will greatly improve the usability of your site. Using techniques like balance, repetition, contrast, and unity will allow you to build hierarchy and lead users through your site intuitively.

Follow eCommerce best practices as closely as possible. Don’t try to “break the mould”. Over time we’ve defined design conventions which have been embedded in our visual culture and make it easy to navigate websites. For example, users will look for their shopping cart in the top right corner. They will also expect a red price to indicate a sale and clicking your logo will take them to the home page. It’s in your best interest to leverage these rules in order to maximize usability and give users a clear path to their destination. Learn more about web conventions.

Keep in mind that every target audience is unique and behave in their own way. We can make assumptions in the early stages, but you won’t have facts about your shoppers behaviours until you launch and test. SAP BusinessObjects made their “Add to Cart” button larger and it increased conversions by 32%. However, when WriteWork increased the size of their CTA button conversions decreased by 10.56%. It’s important to be open to testing things that may seem obvious.

Step 2: Analyze

There are many tools available for gaining data from your site.

Google Analytics: perhaps the most popular and cost-efficient way to analyze your site. It’s the best free tool for monitoring how people interact with your site in terms of traffic flow. You are able to see where they are coming from and when they are dropping off.

GoogleAnalytics

Crazy Egg: allows you to see exactly where users are looking and clicking (and where they aren’t) using their scroll mapping tool.

CrazyEgg

Optimizely: this is a paid service, which allows you to A/B test sections of your site with great flexibility and accuracy.

Optimizely

VWO: another WYSIWYG paid service with a beautiful and intuitive interface.

VWO

Give your site some time to run it’s course. Allow a decent number of visits and orders to process. Your analytics should be based on a large sample of shoppers to ensure the data is concrete. Most of the tools listed above are able to determine when a test has a consistent pattern and is considered reliable data.


What to look for?

  • Calls to action that users aren’t clicking.
  • Users relying on the search bar to find products (instead of your category navigation).
  • Patterns. Which static blocks are getting the most clicks? Is there a consistent style of design or type of promotion that are getting the most action?
  • High numbers of abandoned carts.
  • Where users are leaving your site. How can you adjust those areas to make them more appealing?
  • Heavy traffic to the product page without users adding to cart.
  • You can also analyze your customer service feedback. What are the number one questions people are asking?


  • A great place to start is on the home page. The home page is where most people begin and carries the burden of funnelling users to different sections of your site. It’s extremely important that your content is engaging enough to keep your visitors shopping while making it easy to find what they’re looking for. Once you’re successfully driving traffic to the content pages you can continue to optimize these pages and move users closer to the checkout process.

    Step 3: Test

    Once you’ve identified areas that require improvement determine what goal you want to accomplish through this test. Make design revisions based on these analytics and objectives.

    Split test your proposed solutions. There could be several reasons why users aren’t clicking a button. It could be the copy, colour, size or positioning. Use your original layout as the control and develop 2 or more variations to push out to your audience. This is referred to as A/B testing where “Version A” is your control and “Version B” is a modified version developed for comparison.

    Minor tweaks make it easier to track the effectiveness. If you’re making several changes to a button you cannot be certain it was the colour or the messaging that triggered the improvement. Split testing should be an iterative process of enhancement based on continuous learning.

    Step 4: Optimize & Repeat

    Once you feel confident with your findings, determine a winner and implement these changes. This process has enabled you to design with purpose backed by hard data as opposed to assumptions. It’s also allowing your shoppers to dictate the design as opposed to your business or an agency providing the work.

    This should be an on-going process of analysis, reiterations, and testing. As time passes you’ll be able to learn more and more about what your customer base prefers to see. Not only in terms of colours and buttons, but also the content. You’ll be able to determine which promotions perform the best allowing you to update your marketing strategy accordingly.

    Related: Home Page Conversion Optimization Tips

    Examples

    Bench Canada

    Problem: High number of abandoned carts.

    Hypothesis: The checkout button is not prominent enough.

    The Test: Revising the checkout button to yellow making it the only hit of colour on the page.

    BenchTest

    Results: After 10,245 unique visitors and 41 days running, Bench saw a 9.8% increase in customers proceeding to checkout. Since then, they have implemented the new button with great results.

    Demac Media

    Problem: Users visiting the contact page without filling out our contact form.

    Hypothesis: Stripping down the page design to it’s most basic information will leave little distraction and lead to more conversions.It will also move the form higher up on the page.

    The Test: We removed the contact us map.

    DemacTest

    Results: After 1,224 unique visitors and 116 days, the contact form submissions increased by 40.9%

    Keep in Mind…

    Pretty design doesn’t equal high performance. When looking to improve design and engagement, allow your audience to guide you as opposed to your intuition or experience.

    Related: eCommerce Conversion Design Synergy