{"version":3,"sources":["webpack:///./src/components/usability-testing/banner/styled.js","webpack:///./src/components/usability-testing/banner/index.js","webpack:///./src/pages/blog/4-ways-to-improve-ecommerce-ux-for-website-visitors.js","webpack:///./src/img/blog/improve-ecommerce/CTA.png","webpack:///./src/img/ui/quote.svg","webpack:///./src/img/ui/arrow_black.svg","webpack:///./src/img/blog/improve-ecommerce/mobile-first.png","webpack:///./src/components/blog/content/styled.js","webpack:///./src/img/blog/covers/ecommerce-ux.png"],"names":["Banner","styled","div","media","mobile","title","desc","style","className","signUp","secondary","center","sourceID","defaultProps","undefined","Wrapped","BlogArticle","href","target","rel","src","img1","alt","margin","img2","frontmatter","url","description","author","img","imgSocial","date","category","group","timeToRead","process","module","exports","Post","quote","tablet","arrowIcon"],"mappings":"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","file":"component---src-pages-blog-4-ways-to-improve-ecommerce-ux-for-website-visitors-js-e8d5b98523b611dd154a.js","sourcesContent":["import styled from 'styled-components';\nimport { media } from 'theme/breakpoints';\n\nexport const Banner = styled.div`\n width: 100%;\n padding: 64px 73px;\n text-align: center;\n background: #f8f8f8;\n border-radius: 4px;\n margin: 80px 0;\n ${media.mobile} {\n padding: 24px 16px;\n margin: 40px 0;\n }\n & .banner-title {\n font-size: 36px;\n line-height: 45px;\n margin-bottom: 24px;\n margin-top: 0;\n font-weight: 800;\n }\n & p {\n margin-bottom: 40px;\n }\n`;\n","import React from 'react';\nimport PropTypes from 'prop-types';\nimport Button from 'components/ui/button';\nimport * as Styled from './styled';\n\nconst Banner = ({ title, desc, style }) => {\n return (\n \n

{title || `Improve usability testing with LiveSession`}

\n

{desc || 'Test all LiveSession features for 14 days, no credit card required.'}

\n \n
\n );\n};\n\nexport default Banner;\n\nBanner.propTypes = {\n title: PropTypes.string.isRequired,\n desc: PropTypes.string,\n style: PropTypes.oneOfType([PropTypes.object]),\n};\n\nBanner.defaultProps = {\n desc: undefined,\n style: undefined,\n};\n","import React from 'react';\nimport BlogArticle from 'components/blog/blogArticle';\nimport { Post } from 'components/blog/content/styled';\nimport { authorKendra as author } from 'data/authors';\nimport img from 'img/blog/covers/ecommerce-ux.png';\nimport img1 from 'img/blog/improve-ecommerce/mobile-first.png';\nimport img2 from 'img/blog/improve-ecommerce/CTA.png';\nimport Banner from 'components/usability-testing/banner';\n\nconst Content = () => {\n return (\n \n

\n When it comes to customers shopping online, they want a similar feel to a physical brick and\n mortar store. Now, whether they’re looking for a particular item, or want to buy anything at\n all, only they have the buying power. Therefore, their buying experience should be as\n seamlessly as possible.{' '}\n

\n

\n First, keep in mind what your website needs, if you’re looking to sell products or services\n on there:\n

\n \n

\n But with that said, competition can be very fierce in the online marketing realm. And, with\n fierce competition comes the ever-growing lists of expectations from who you’re selling to.\n In other words, if a customer isn’t able to easily find what they need on your website, then\n they’ll be more than happy to go to your competitors.\n

\n

The Problem

\n

\n When it comes to eCommerce stores, UX design is often ignored or not worked on enough. While\n companies are too busy working on creating paid ads, doing product research, etc. they might\n forget about optimizing their website to fit UX design standards.\n

\n

\n And, that’s the problem, without a good user experience, it affects not only your visitors\n and customers, but also your business in terms of gaining traffic and revenue. In fact,\n SmallBizGenius suggests that{' '}\n \n 88% of online shoppers\n {' '}\n won’t return to a website after experiencing poor UX. So, it’s no wonder shoppers might be\n leaving, if it's just for the poor UX design alone.\n

\n

\n So, what are the UX design standards? According to UX Planet, the following are considered{' '}\n \n standards for good UX\n \n :{' '}\n

\n \n

Why UX Matters

\n

\n It’s important to provide a compelling user experience (UX) – or, in this case, excellent\n eCommerce UX – for your website visitors. In other words, customers want to feel great\n whenever they:\n

\n \n

\n When customers engage with your website, then you’ve succeeded in creating the user\n experience. More satisfied customers mean more conversions and boosted KPIs.{' '}\n

\n

\n Here are 4 tips to improve your website with the customer in mind, and create a\n user-friendly shopping experience that fuels your brand:\n

\n \n

1. Have A “Mobile First” Mentality

\n

\n “Nowadays, most shoppers make their purchases online to whatever they set their minds to,”\n says Peter Miller, a tech writer at{' '}\n \n Brit student\n {' '}\n and{' '}\n \n Write my X\n \n . “And with mobile devices continuing to be on the rise, online shopping will just get\n bigger and bigger, if it hasn’t gotten big already. With experts saying that revenue from\n mobile purchases is projected to increase in the coming years, now is the time to ensure\n that your website is mobile-friendly to appeal to said audience.”\n

\n

So, why have a “mobile first” mentality?

\n

\n Well, since most people –{' '}\n \n over 40%\n {' '}\n – are on their mobile devices, and they come across your webpage, that’s where first\n impression can do well or turn sour. If you don’t optimize your website for smaller devices,\n it can be tricky for visitors to navigate with too-small buttons and / or unstable layout.\n So, do some usability testing – a research method that lets you observe and understand how\n people interact with interfaces – to ensure that designs are user-friendly on different\n platforms, thus making your eCommerce UX “mobile-first”.\n

\n

\n Take, for example,{' '}\n \n Paypal\n \n , which strives to make its services more mobile-friendly. How? By making their app easier\n to navigate and visually engaging as much as their desktop site. The most notable difference\n is that Paypal’s mobile landing page lets users use 2 buttons (Personal or Business), rather\n than have them scroll. Eliminating scrolling to only a few buttons also allows easy log-ins\n and better menu navigating.\n

\n

2. Build An Exceptional Homepage

\n

\n On average, a customer will only take about 0.05 seconds to look at your website, and decide\n if they want to proceed further with your site, or if they’ll abandon your site, or\n “bounce.”\n

\n

Consider the following when designing a great homepage:

\n \n

\n \n The Sill\n \n , for example, has a simple but straightforward homepage. The website’s homepage is\n well-organized, and isn’t cluttered in the slightest, with categories filtered by features,\n variety, and size. In addition, the page features clear photos of their products (which, in\n this case, are house plants).\n

\n \n

3. Have Successful CTAs

\n

\n {' '}\n “When helping your customers find things and complete their purchase, you must have a clear\n call-to-action,” says George Crosby, a UX blogger at{' '}\n \n 1 Day 2 write\n {' '}\n and{' '}\n \n PhD Kingdom\n \n . “CTAs like ‘Add to Cart,’ ‘Check Out,’ and ‘Cancel’ should be visible and clear to your\n shoppers.”\n

\n

Successful CTAs on your website is dependent on the following factors:

\n
    \n
  • Brand colors
  • \n
  • Font size and colors
  • \n
  • Labeling
  • \n
  • Other visuals
  • \n
\n

\n \n OptinMonster\n {' '}\n uses a unique button on their homepage called “Get OptinMonster Now” as their primary CTA.\n In addition, the website creates a sense of urgency along with their CTA. How? By posting a\n line graph that shows the so-called “OptinMonster Effect,” of which websites will see a\n boost in leads and revenue when they use Optinmonster. With this type of CTA, users have the\n quick option of signing up for the service.\n

\n

4. Have An Effortless Checkout Process

\n

\n Finally, people want to be safe when shopping online. Therefore, an excellent eCommerce UX\n should be simple and transparent. By keeping checkouts short and sweet, customers are more\n comfortable completing their payment process.\n

\n

Consider these shopping options:

\n
    \n
  • \n Checking out as a guest to prevent providing more personal information than necessary. AND\n OR\n
  • \n
  • Creating an account to ensure easier future checkouts.
  • \n
\n

\n Remember: Transparency.\n

\n

\n Similar to having a CTA, eCommerce sites must provide a fast and effective checkout process,\n so that customers are taken through the sales funnel from beginning to end. Having a\n complicated checkout can cause customers to abandon their carts and leave the site. For\n example, if a customer has to re-entering their information to buy something, then they’ll\n most likely abandon their cart. Such information may include re-entering:\n

\n
    \n
  • \n Credit card information (\n \n 30% of shoppers leave\n \n , when having to re-enter this), OR\n
  • \n
  • Shipping information (25% of shoppers leave because of this)
  • \n
\n

\n \n Amazon\n {' '}\n is an excellent example of making the checkout process easier for consumers. Now, when you\n go to buy something on Amazon, you’re presented with two different buying options: “Add to\n Cart” or “Buy Now” (formerly known as “One-Click Ordering”). The “Buy Now” enables you to\n buy the product right away without having to enter your credentials (i.e. payment method),\n and send it to the address that’s provided (Now, that’s if you already have an account with\n Amazon, and you’ve already saved your credentials on the site). This option saves consumers\n time, and ensures a faster checkout.\n

\n \n

Conclusion

\n

\n As you can see, how customers navigate your site is extremely important, since they\n ultimately decide whether they buy your products and services or not. That means that good\n UX relies on more than just eye-catching visuals.\n

\n

\n The 4 methods discussed today are there to ensure that you create a well-functioning UX that\n not looks good, but also does its job in helping users navigate through your website with\n ease. Let’s recap what we’ve learned from these methods:\n

\n
    \n
  • \n Make your UX design mobile-friendly, which allows users to visit and navigate through your\n website on their smartphones or other mobile devices.\n
  • \n
  • \n Create a homepage that’s simple, but also to the point. Refrain from making your homepage\n cluttered, or else you’ll scare away users.\n
  • \n
  • \n Have a Call-to-Action. In other words, what do you want users to do when they visit your\n website? And finally …\n
  • \n
  • \n Create a faster and more effective checkout for users. (Obviously, no one wants to feel\n like they’re “waiting in line” when they’re buying something online, nor want the checkout\n process itself to be complicated.)\n
  • \n
\n

\n Although there’s no one-size-fits-all method in optimizing an online store, and that no\n website is perfect, site runners must determine what’s best for their webpages.\n

\n
\n );\n};\n\nconst Wrapped = BlogArticle(Content);\n\nexport const frontmatter = {\n title: '4 Ways To Improve eCommerce UX For Website Visitors',\n url: '/blog/4-ways-to-improve-ecommerce-ux-for-website-visitors/',\n description: `When it comes to eCommerce stores, UX design is often not worked on enough. Companies are not optimizing their websites, which affects their business in terms of gaining traffic and revenue.`,\n author,\n img,\n imgSocial: img,\n date: '2021-02-09',\n category: '',\n group: 'Analytics',\n timeToRead: 8,\n};\n\nexport default () => (\n \n);\n","module.exports = __webpack_public_path__ + \"static/CTA-3df8faa6026aefb58670abc3c46ce4d4.png\";","module.exports = \"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI5Mi4yNDUiIGhlaWdodD0iNzEuNjA4IiB2aWV3Qm94PSIwIDAgOTIuMjQ1IDcxLjYwOCI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6I2ZmZTQ3ODt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik04OS43Miw2Ni4yNzFjMC0xNi4xNjItMTAuNDQzLTI1LjM2MS0yMi4xMjktMjUuMzYxQTE5LjksMTkuOSwwLDAsMCw0Ny45NDksNjAuOGMwLDEwLjQ0Myw3LjQ1OSwxNy45LDE2LjkwNywxNy45YTEyLjQ3OCwxMi40NzgsMCwwLDAsNC45NzMtLjk5NUM2Ny41OTEsODYuNjYsNTguMzkyLDk3LjEsNTAuNDM1LDEwMS4zMjlMNjQuMTEsMTEyLjUxOEM3OS41MjYsMTAxLjU3OCw4OS43Miw4NC45MTksODkuNzIsNjYuMjcxWm0tNTAuNDc0LDBjMC0xNi4xNjItMTAuNjkxLTI1LjM2MS0yMi4zNzgtMjUuMzYxQzYuNDI2LDQwLjkxLTIuNTI1LDQ5Ljg2MS0yLjUyNSw2MC44YzAsMTAuNDQzLDcuNDU5LDE3LjksMTYuOTA3LDE3LjlhMTEuMTY0LDExLjE2NCwwLDAsMCw0LjcyNC0uOTk1QzE3LjExOCw4Ni42Niw3LjkxOCw5Ny4xLS4wMzksMTAxLjMyOWwxMy42NzUsMTEuMTg5QzI4LjgsMTAxLjU3OCwzOS4yNDYsODQuOTE5LDM5LjI0Niw2Ni4yNzFaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyLjUyNSAtNDAuOTEpIi8+PC9zdmc+\"","module.exports = \"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMiIgaGVpZ2h0PSIxMiIgdmlld0JveD0iMCAwIDEyIDEyIj48ZGVmcz48c3R5bGU+LmF7ZmlsbDojMDAwMDAwO308L3N0eWxlPjwvZGVmcz48ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtODUgLTg1KSI+PGcgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoODUgODUpIj48cGF0aCBjbGFzcz0iYSIgZD0iTTg1LDkxLjc1aDkuMTEybC00LjIsNC4yTDkxLDk3bDYtNi02LTYtMS4wNSwxLjA1LDQuMTYyLDQuMkg4NVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC04NSAtODUpIi8+PC9nPjwvZz48L3N2Zz4=\"","module.exports = __webpack_public_path__ + \"static/mobile-first-2fa58bf3f6538e60ecdc185b018a3631.png\";","import styled from 'styled-components';\nimport { media } from 'theme/breakpoints';\nimport quote from 'img/ui/quote.svg';\nimport arrowIcon from 'img/ui/arrow_black.svg';\n\nexport const Post = styled.div`\n h3,\n h2 {\n font-weight: 700;\n letter-spacing: 0.01em;\n margin: 2em 0 0.8em;\n }\n h3 {\n font-size: 1.1rem;\n line-height: 1.8rem;\n }\n h2 {\n font-size: 1.5rem;\n line-height: 2rem;\n }\n h4 {\n color: rgb(119, 119, 119);\n font-weight: 700;\n font-size: 1rem;\n }\n a {\n display: inline;\n font-size: 20px;\n }\n p {\n margin-bottom: 1.25rem;\n line-height: 1.8;\n font-size: 20px;\n }\n img {\n max-width: 100%;\n height: auto;\n margin: 1.2rem auto 1.4rem;\n display: block;\n }\n pre,\n p > em > code,\n p code {\n color: #c5c8c6;\n text-shadow: 0 1px rgba(0, 0, 0, 0.3);\n font-family: 'Inconsolata', 'Monaco', 'Consolas', 'Courier New', Courier, monospace;\n direction: ltr;\n text-align: left;\n white-space: pre;\n word-spacing: normal;\n word-break: normal;\n line-height: 1.5;\n\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n\n -webkit-hyphens: none;\n -moz-hyphens: none;\n -ms-hyphens: none;\n hyphens: none;\n background: #1d1f21;\n padding: 1em;\n margin: 0.5em 0;\n overflow: auto;\n border-radius: 0.3em;\n }\n p > em > code,\n p > code {\n padding: 0.1em;\n border-radius: 0.3em;\n font-size: 78.5%;\n margin: 0;\n }\n figure {\n margin: 0 auto 1.5rem;\n img {\n margin: 0 auto 1rem;\n display: block;\n max-width: 100%;\n height: auto;\n padding-bottom: 0;\n }\n figcaption {\n color: #888;\n width: 85%;\n margin: 0 auto;\n text-align: center;\n }\n }\n p img,\n img {\n margin: 1rem auto 2rem;\n display: block;\n max-width: 100%;\n height: auto;\n filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.16));\n }\n blockquote {\n margin: 3.5rem 0 2rem;\n position: relative;\n background-color: #f1f5f9;\n padding: 48px;\n & p strong a {\n font-weight: 700;\n }\n p:last-child {\n margin-bottom: 0;\n }\n ${media.mobile} {\n padding: 36px;\n }\n &::before {\n content: '';\n position: absolute;\n left: 0;\n top: 0;\n transform: translate(-30%, -50%);\n background-image: url(${quote});\n background-size: contain;\n background-position: center;\n background-repeat: no-repeat;\n width: 82px;\n height: 61px;\n ${media.mobile} {\n width: 74px;\n height: 74px;\n transform: translate(0, -50%);\n }\n }\n }\n ul li,\n ol li {\n margin-bottom: 0.5em;\n line-height: 1.8;\n font-size: 20px;\n }\n b {\n font-weight: 700;\n }\n aside {\n padding: 15px 25px;\n border: 2px solid #000;\n margin: 1.5rem 0;\n &.red {\n border-color: #e05c5e;\n color: #e05c5e;\n background-color: #ffebeb;\n }\n h2,\n h3,\n h4 {\n margin-top: 1.25rem;\n }\n ul {\n padding: 0 20px;\n li {\n margin-bottom: 1rem;\n }\n }\n @media (min-width: 768px) {\n padding: 15px 25px;\n }\n }\n aside.blue {\n background: #7cffef;\n border-radius: 4px;\n padding: 24px 48px;\n margin: 4rem 0px;\n border: none;\n h2 {\n font-size: 36px;\n font-weight: 800;\n }\n }\n a.link-button {\n border-radius: 4px;\n color: #fff;\n cursor: pointer;\n padding: 12px 36px;\n transition: 0.2s;\n text-transform: uppercase;\n font-weight: 700;\n min-width: 150px;\n font-size: 14px;\n text-align: center;\n background-color: #0446ca;\n margin: 0 auto 4rem;\n display: block;\n width: 250px;\n text-decoration: none;\n &:hover {\n transform: scale(1.06);\n }\n }\n .gatsby-resp-image-wrapper {\n margin-top: 25px;\n margin-bottom: 25px;\n }\n picture {\n img {\n margin: 5rem auto;\n display: block;\n filter: drop-shadow(0px 0px 20px rgba(0, 0, 0, 0.16));\n @media (max-width: 800px) {\n margin: 3rem auto;\n }\n }\n }\n .smaller-video {\n max-width: 60%;\n display: block;\n margin: 0 auto;\n ${media.tablet} {\n max-width: 100%;\n }\n }\n ol {\n ul {\n li {\n margin-bottom: 5px;\n }\n }\n }\n .in-border {\n border: 2px solid black;\n }\n .action-btn {\n color: #fff !important;\n margin: 3rem auto;\n background-color: #0a4ed6;\n padding: 8px 28px;\n border: 2px solid #0a4ed6;\n border-radius: 4px;\n transition: 0.2s ease;\n max-height: 48px;\n font-size: 16px;\n font-weight: 800;\n text-align: center;\n cursor: pointer;\n min-width: 140px;\n max-width: fit-content;\n outline: 0;\n display: block;\n text-decoration: none;\n white-space: nowrap;\n &:hover {\n color: #0a4ed6 !important;\n background-color: #fff;\n outline: 0;\n border: 2px solid #0a4ed6;\n text-decoration: none;\n }\n }\n .action-banner {\n background-color: #7cffef;\n padding: 16px 24px;\n font-size: 18px;\n color: #000;\n width: 100%;\n display: block;\n margin: 1.5rem 0;\n font-weight: 700;\n border-radius: 4px;\n &::after {\n content: url(${arrowIcon});\n display: inline-block;\n clear: both;\n margin-left: 16px;\n transition: 0.2s ease;\n }\n &:hover {\n text-decoration: underline;\n &::after {\n transform: translateX(8px);\n }\n }\n }\n`;\n","module.exports = __webpack_public_path__ + \"static/ecommerce-ux-081fa06312a7ee84026aa19172d1ebea.png\";"],"sourceRoot":""}