Proven Site Design Strategies That Maximize Conversion

Proven Site Design Strategies That Maximize Conversions Hosted by Bigcommerce, powering commerce for the world’s most successful online stores

●  67% of people are more persuaded by visuals than words

●  50% of potential sales are lost because users can’t find information and/or products

●  63% of users are more likely to convert after reading a positive product review

●  25% boost in conversion with auto ajax cart dropdown*

●  27% increase in conversion when sites have 360 degree product photos

●  25% boost in conversion with video and text product descriptions, rather than only text

●  60% higher click-thru rate when social media icons prompt users to share and/or show the share count

How Design Influences Conversion

Source: Digital Operative

Ecommerce Design Principles Presented by Eamon Rodeck

Eamon Rodeck Eamon is founder and owner of

Sprout Commerce, a small business

ecommerce development agency, and

Weizen Young, an ecommerce agency. His

ecommerce site designs are the highest selling

templates in the Bigcommerce theme

marketplace and his companies have helped

and successfully scaled ecommerce operations

for brands including Grady’s Cold Brew, Fugoo

and Ion Loop.

Meet the Expert

Twitter LinkedIn

Ecommerce Design Principles

Source: http://athletic-demo.mybigcommerce.com


2015 Principles for a Functional, Customer-Centric Site:

●  Mobile-Friendly (ideally Responsive)

●  Refined Header

●  Navigation designed for your Content

●  Clean Product Grid for Visibility and Scanning

●  Optimized Product Page focused on Purchasing

●  Consistent Colors, Fonts + Spacing


Mobile-Friendly (ideally Responsive)

Google Mobile Friendly Test: https://www.google.com/webmasters/tools/mobile-friendly/

Details on the Mobile Friendly Update:

http://googlewebmastercentral.blogspot.ca/2015/04/rolling-out-mobile-friendly-update.html



How to test responsive websites

●  Responsinator: http://www.responsinator.com

●  Responsive.is http://www.Responsive.is

BrowserStack: http://www.browserstack.com


Refined header on all screen sizes



Refined Header Cheat Sheet

●  Include all critical information in the header: ○  Logo ○  Primary Navigation ○  Account Navigation ○  Shopping Cart ○  Search

●  Keep header as thin as possible.

○  Verify at different screen sizes.


Source: http://www.room29.ca

Left Navigation


Source: http://www.ionloop.com

Categories & Information (Mega Menu)



Horizontal Categories


Navigation Cheat Sheet

●  Category Only Top Navigation

○  A great solution for the majority of e-commerce sites. Provides emphasis on product catalog and leaves more space for product information.

●  Department Based Navigation (top & context sensitive left) ○  Very large product catalogs.

●  Mega Menu ○  Better than multiple layers of

rollover menus. Optimized vertical and horizontal space.

●  Navigation should be designed for Content ○  Define your category & content

structure and then select the navigation that best supports it.

●  Left Navigation ○  A catalog that contains a large

quantity of top-level categories. ●  Hybrid Top Navigation

○  An e-commerce site that needs to provide equal importance on the product catalog, and the business behind the catalog.


Source: http://athletic-demo.mybigcommerce.com; http://www.ionloop.com

Clean Product Grid


Clean Product Grid Cheat Sheet

●  Test your product grid with different sized images, product

name lengths, and components. ○  If working with a designer then provide the designer variation

and have them include it in the mockup.

●  Less is More ○  Limit your product grid to what you need to show. Just because

you can, doesn’t mean you should.

●  How does your product grid adapt at different screen sizes? ○  Ensure that it’s taking advantage of all the space available, and

is still legible at small screen sizes.


Source: http://athletic-demo.mybigcommerce.com; http://www.ctpub.com

Optimized Product Page


Clean Product Grid Cheat Sheet

●  Product Pages can represent more than 90% of your Pages

○  Give them the budget and time they deserve. ●  At least 50% of the horizontal space for product images.

●  Anything required or that directly supports the purchase should go to the

right of the Product Image ○  Name, SKU, Price ○  Product Options ○  Shipping Offer / Information ○  In Stock / Out of Stock ○  Quantity and Add to Cart

●  Description & Additional Information can be placed further down the page.



Consistency


Consistency Cheat Sheet

●  Besides Black & White, 2 or maybe 3 colors. ○  Colors should be associated with a pattern. Red = Action, Blue =

Important Interface item.

●  Limited amount of Font Faces ●  The space between needs to be consistent.

○  Use % for the horizontal space, and px for vertical space. ○  Adjust for at different breakpoints if required.

●  Use tools that encourage consistency

○  SASS or LESS (variable based CSS) ○  Use themes that already have a clear methodology in place and embrace

it.


Summary

●  Mobile-Friendly (ideally Responsive)

●  Refined Header

●  Navigation designed for your Content

●  Clean Product Grid for Visibility and Scanning

●  Optimized Product Page focused on Purchasing

●  Consistent Colors, Fonts + Spacing

http://athletic-demo.mybigcommerce.com http://clarity-demo.mybigcommerce.com http://www.ctpub.com http://www.ionloop.com http://www.room29.ca http://www.bioray.com http://www.bioraykids.com http://www.swingsetmall.com http://www.wlanmall.com http://www.playbetter.com http://www.endurosport.com http://www.gradyscoldbrew.com http://www.tuckerblair.com

Examples & Inspiration:

The Power of Visuals Presented by Liam Garcia

Liam Garcia Liam is an ecommerce account manager at

Bigcommerce. In his role, he serves as an

ecommerce consultant and advocate for

enterprise ecommerce brands (i.e. brands

producing more than $3 million in revenue per

year), helping them to sell more online via

marketing, design and integrations that

improve the end-customer experience.

Meet the Expert

Twitter LinkedIn

The Power of Visuals

of people say that visuals are the top influential

factor affecting a purchasing decision 93%

seconds, the amount of time a person uses to

assess if they will or will not buy a product 90

Increased sales when a site offers multiple

product views 58%

Percentage of people positively influenced to buy

a product after watching a product video 50%

Source: HubSpot

Adjust your product photos and description text as needed based on the use of your product, itself:

●  A Nielsen Study found that once consumers are in purchasing mode, visuals matter less depending on the product itself. I.e. If you are selling TVs, the product specs have more importance than if you are selling bookcases with different wood washes –– at which point the photo matters just as much as the specs.

●  In all, for products that are spec-heavy, the study found that only 18% of the viewing time was spent on the photos, while 82% was spent on the text.


●  With mobile ecommerce expected to hit $626 billion in 2018, a convenient checkout should be a given.

●  Since our single-page checkout is optimized for desktop or mobile, easily improve your customer experience and get a conversion bump of up to 21%.

●  Set up digital wallets like Paypal, Stripe or Simplify by Mastercard to checkout in a single click.

Convenient checkouts boost conversions The Power of Visuals

●  Pottery Barn: See how the user eye first utilizes the photos to determine next click-thru point, rather than the specs.

●  TVs on Amazon: Notice here how the user eye first utilizes the product descriptions to dive in further.


Visuals and text help to increase sales and revenue by leading customers down a conversion funnel. This applies to your whole site, beyond your product photos and product descriptions. Visuals (including both photography and overlay text) help to: ●  Provide a clear value proposition ●  Create a value hierarchy ●  Give the impression of a

professional and/or trustworthy site


Key Takeaways:

●  Text Readability: how easily you read the words? Consider uniformity

●  Value Proposition: Is the product or feature clearly shown to your visitors?

●  Value hierarchy: Pay attention to location & size of CTAs. These should be clear & easy to find.


Key Takeaways:

●  Color & Contrast: Using stand out color immediately draws the eye towards the main offering.

●  Value hierarchy & urgency: Choice of color can also denote hierarchy & a sense of urgency.

●  Value proposition: CTAs on this page are clear. Not overwhelming, it is convenient, easy to read, & drives users to click.


Key Takeaways:

●  Provide a clear value proposition, or in other words, a clear CTA & make it easy to find.

●  Ensure a clear value hierarchy, in which put the most relevant, high-converting content at the top of the page, or “above the fold,” with descending brand importance for each subsequent CTA. Know your audience & know your product.

●  Earn customers’ trust with professional product photos, non-stock photos. Use uniformity & consistency in colors, fonts, and make sure that text isn’t only readable, but legible as well.

A Real Design Overhaul — 21 Drops Presented by Danni Johnson

Danni Johnson Danni is the Director of Marketing for online

store 21 Drops. She joined the company more

than a year and half ago and lead the site

redesign project from start to finish. She has

also worked as a Marketing Manager for Saks

Fifth Avenue and Director of Brand Programs

for B Hotels and Resorts.

Meet the Expert

Twitter LinkedIn

A Real Design Overhaul — 21 Drops


Our Redesign Playbook:

●  Educate first!

●  Prove transparency

●  Colors + Branding

●  Provide context

●  Do your research

●  Include customer reviews

●  How customers responded

●  Redesign best practices for non-design professionals


Educate First!

●  Health/Wellness Product

●  Learn Tab

-  What is EOT?

-  EO Guide

-  How It Works

-  FAQs

-  ASk Cary

●  Product Pages


Prove transparency

●  We use different tabs in the navigation for different reasons: shop to shop, learn to learn and about to get to know who we are and talk about our transparency

●  Humanize the brand and show who is behind it

●  We also explain our difference vs. our competitors


Color + Branding

●  Play with juxtaposition

●  Use colors that go well with your branding

●  Make your website an extension of your product/packaging

●  Have a personality customers can relate to


Provide context

Everything we do through the website, blog and social media is about promoting the aromatherapy lifestyle. We don’t just sell a product, we promote the actual use of it for the betterment of our customers.

●  Hero Images/Promotions

●  Blog

●  Social Media


Do your research

●  We looked at other ecommerce sites we liked and cherry-picked our favorite features or ideas from each

●  Bounce ideas off friends, family and even the internet (Reddit can be seriously helpful here!).


Include customer reviews

●  Big name retailers like Amazon use reviews, so why wouldn’t we? We don’t want to send customers off of our site to read a review.

●  We also have big brand advocates, and gives them an easy way to spread the word.

●  The old design had reviews on our blog, but not on product pages. In the redesign, we moved them over.


How customers responded

●  Saw a huge spike in conversion rate with launch of new site -- 0.37% beforehand, and ever since, we’ve been well over 1%.

●  Upped our marketing efforts at the same time. We didn’t want to push people to a site that didn’t work. Once on Bigcommerce and with the redesign, we began amping up our brand awareness.

●  I get compliments on the site every time I talk to a customer, and that feels amazing!


Redesign Best Practices for Non-design Professionals

●  You get what you pay for: Not every site design needs to be $100K+, but be wary of any “too good to be true” deals. They usually are.

●  Do your research: Take the time to walk through the redesign project with your team. Designate a project manager and help them to understand all needs from all departments (including your customers!).

●  Set communication standards and goals: Be sure to include benchmarks on how often you and the design team (if you are hiring one out) communicate. Consider different time zones, how well you work with the agency, etc. Communication is key for a good redesign.

●  Set a clear expectations and scope of work: Be sure both the project manager and the agency understand the needs and scope of work before beginning the project. This helps to get everyone on the same page. Be sure to get it all in documentation! Go over it line by line.


Key Takeaways:

●  Be customer-centric: Include reviews and as much product information as possible. Prove your transparency. Help them make the right choice (which is purchasing from you!).

●  Play on your brand personality: There are reasons why you chose your brand colors and tone. So, play that up! Give your customers a personality to relate to, whether you do it through colors, product photography, blogging, etc.

●  Do so, so, so much research: The more research you can do, the better. Research the agency you use. Research what your favorite ecommerce sites are doing. Be your own redesign advocate to get the best results.

About Bigcommerce Powering commerce for the world’s most successful online stores

●  Launch a beautiful, mobile-friendly online store

●  Promote their store to drive traffic and sales fast

●  Optimize customer experience and conversion rates

●  Integrate with robust applications

●  Simplify order management, fulfillment and returns

●  Improve their store's performance with actionable analytics

Bigcommerce empowers merchants to win online

Experience Bigcommerce First-Hand: Sign up to take a personalized tour of the platform

https://www.bigcommerce.com/enterprise

Want to learn more?

Questions?

Business

Proven Site Design Strategies That Maximize Conversion