Chapter 1:
Introduction
Introducing eCommerce Website Design
eCommerce Website Design
There are a ton of factors to take into account when designing and developing an eCommerce website. To help you optimize your online store and create an experience that your customers will love, we’re sharing tactical design strategies and tips for various web pages.
Chapter 2:
Homepage Design Tips
Improve Your eCommerce Homepage with Design
Create & Display A Unique Value Proposition
When people land on a website they’ve never seen before, they immediately want to know what the brand can do for them and how much it’s going to cost them. This is where a unique value proposition comes into play.
Unique value propositions specifically state the benefits that the customer will enjoy from using the product or service as well as how the product or service will fix the problem that the customer is facing. Don’t get this confused with your brand slogan, though. Unique value propositions play a great role in positioning your brand, but they should emphasize the value that your customers will receive from purchasing your product or service.
From an eCommerce design perspective, we highly recommend displaying your company’s unique value proposition above the fold or at the top of your homepage. This will help to decrease bounce rate and encourage first-time visitors to navigate throughout your site to learn more.
Prioritize Important Information Above The Fold
“Above the fold” refers to the information in the upper area of a website before scrolling down. Though it may seem obvious to put the most important information above the fold, you’d be surprised how many times our team has seen eCommerce sites place key content below the fold.
Whether you’re running a Black Friday promotion, offering a limited-time only deal or showing off new arrivals, be sure to prioritize this information by putting it above the fold. To be clear, this doesn’t mean that websites shouldn’t have anything below the fold; we just want to emphasize the importance of putting high-priority information at the top of the page. However, leave enough room so that the top portion of your page isn’t cluttered or overcrowded.
Design Enticing Calls-To-Action
An effective call-to-action (CTA) guides website visitors on the path to conversion. Benefitting both customers and your brand, CTAs help to create a seamless website experience. CTAs should be short and to-the-point, so we like to keep the copy to minimal words.
Though your entire website should utilize your company’s branding and color scheme, we recommend using a contrasting color for your CTA buttons - just make sure that the contrasting color matches your site and isn’t totally outlandish. Last, it’s so important that CTAs link to the proper landing pages. If visitors want to shop the Black Friday sale but the button guides them to full-priced items, they’re bound to have a negative experience with your brand.
Leverage Site Search
eCommerce site search is a great way to convert the most motivated website visitors into customers. More often than not, those who use site search already know what they want to purchase. That’s why including a site search bar at the top of your site is key to winning these high-intent shoppers.
Don’t be afraid to use predictive text to help users find what they’re searching for. Display images of relevant, available products in the preview bar so that searchers can see what you offer before they click enter. We even recommend using banner ads within a site search box to further promote any offers and increase visibility.
Chapter 3:
Landing Pages Design Strategies
Create Stunning Landing Pages with eCommerce Website Design
Use Clear Headlines & Consider Visual Hierarchy
Just like how we read from left to right, we normally skim and read web pages from top to bottom. Think about what makes a website visually appealing. If you’re like us, then organization and layout come to mind. Here at Groove Commerce, we like to use headings in our blog posts and guides to break content into sections so that it’s easier for people to read. Take a look above, for example. We break up each section using Heading 2 (H2) and share our thoughts with H3s to make long-form pieces of content like this one easier to read.
In addition to blogs, all landing pages should have a clear headline so that visitors quickly understand what the web page is about. Great headlines capture attention and quickly sum up the value of the overall content. If you’re leveraging eCommerce advertising and running paid media campaigns, the headlines on your landing pages should be congruent with your ad copy to create a frictionless advertising experience and drive conversions.
Use Forms & Pop-Ups
eCommerce businesses should work on growing their contact lists year round - not right before the holiday rush. You’ll need to ask for specific information depending on the goal of your form or pop-up. Typically, if there are fewer form fields for prospects to fill out, there’s a higher chance that they will.
If you’re simply trying to grow your contact list, try using a pop-up tool like Justuno, to create a welcome series. Start simple and ask for one thing - an email address - so that they’re captured in your system. Remember, it’s not necessary to know everything about a prospect immediately. Plus, if they bounce from your website, you now have a way to contact them - otherwise, they’re lost for good.
Stick to the basics (name and email address) when getting started. As you promote new content, don’t be afraid to use a semi-gated page, such as the page you’re on right now. Semi-gated pages allow people to access your content while also offering the option to fill out a form to download the content. Gated pages, on the other hand, commonly ask for more information, such as phone number, company name and much more. Still, we recommend keeping these to a minimum as people are hesitant to give away personal information.
Designing Lead Capture Forms
There are a few key elements that go into designing a high-converting lead capture form. First off, be sure to target new visitors appropriately so that you don’t annoy or bother them. Those who have already filled out a specific pop-up form will be irritated if they continue to see it.
Also, give your visitors time to explore your site properly before taking their attention away from it with a pop-up. We often recommend using a minimum delay of 30 seconds or a scroll-delay (where the pop-up appears only after scrolling a certain amount down a page.) This helps to provide website visitors with more time to view your site without instant interruption.
Further, keep your forms simple. The more fields you add to a pop-up - name, company, role, gender, product preferences, etc. - the less likely users will convert. No matter what your goal is, always keep that goal in mind when creating pop-ups. Want to capture more leads, improve the on-site experience or learn more about your customers? Then, minimize the number of form fields and include only the absolutely necessary ones to encourage conversion.
Mobile Pro Tip: Make sure to test mobile designs thoroughly to ensure they don’t interfere with the user experience. Show them after 1 page has been viewed in order to maintain a good SEO score, per Google’s updated standards.
Lastly, offer something in return for their contact information, especially if visitors don’t know who you are (think Coca-Cola vs. a new clothing brand). This can be a discount, a newsletter subscription with latest products, a promotional offer or even a free gift with their first order. Whatever it may be, give genuine value back to them - because their contact information is often going to be far more valuable! Don’t be afraid to get creative with your design, either. Get their attention and use pop-ups as an opportunity to display your authentic brand voice.
Include Powerful Visuals
We’re living in a digital space that bombards consumers with ads now more than ever before, and it’s obvious that consumers are more likely to engage with a brand that uses compelling visuals over one that uses too many words. No matter the product or service your brand sells, use visuals to explain your brand’s story, product’s purpose, etc. Don’t forget to optimize alt text and image file names to improve your eCommerce SEO strategy and organic rankings.
Whether you prefer photography, graphics, videos or gifs, we encourage you to utilize these visuals throughout your eCommerce landing pages. Include people that represent your target audience and try to display the emotions of happy customers to help evoke those emotions in your website visitors.
Use Consistent Branding Throughout The Site
Ensuring that website visitors recognize your brand the second they land on your site is key to increasing average session duration. People don’t spend much time on websites they’re unfamiliar with. If your brand is not easily recognizable, bounce rate will be higher. Using consistent branding (i.e. logos, color schemes, slogans, etc.) is a principal eCommerce design strategy. We recommend using the same fonts throughout your entire site to make landing pages, CTAs and all around content more readable.
Chapter 4:
eCommerce Product Page Design Elements
eCommerce Website Design Elements for PDPs
Use High-Quality Product Photography
One of the most important components of eCommerce product pages are the images and product photography used to portray a product. Consumers are hesitant to buy products online, especially if it’s from a brand that they’ve never purchased from before, so it’s critical to use high-quality images to show customers exactly what they’re getting for their money.
We recommend investing in a professional camera if you don’t already have one because it will make your photos (and your products) look that much better. Shoot products from a variety of angles to increase consumer trust with your brand. It’s noticeable when online retailers purposely avoid taking pictures of the overall product, and that alone makes shoppers hesitant to buy.
Complement Your Photography With Product Videos
According to HubSpot, video has become the most commonly used format in content marketing, overtaking blogs and infographics. This isn’t shocking, considering we live in such a digitally-driven world. Plus, it actually benefits online shoppers. Because we’re unable to physically touch products before purchasing them online, we like to see demonstrations of the product in use. That’s where eCommerce video marketing comes into play.
In addition to high-quality product photography, use product videos on product detail pages. When creating product videos, remember to show off all of the product’s features, especially the intricate details that are difficult to see in a photograph.
Show A Product’s Availability
Showing product availability is especially important during the holiday season, but we encourage brands to leverage this eCommerce design strategy all year round. There’s nothing worse than adding an item to your cart, continuing to shop, then arriving at the checkout page with a notification that says the product in your cart is out of stock. To convert visitors into customers more quickly, let them know when you’re running low on a specific item. It creates a sense of urgency to check out and warns the shopper ahead of time that they may miss it.
Estimate Shipping Times & Delivery Dates
This one is also critical when preparing for Black Friday and the holiday season, but that doesn’t mean it’s not important the rest of the year. Include shipping times and delivery dates on product detail pages, so customers know when they can expect to receive their order.
Today’s consumers are spoiled with Amazon Prime’s 2-day shipping that we don’t like to wait long for our orders to arrive on our doorsteps. Whether shipping takes a few days or a few weeks, don’t be afraid to let your customers know ahead of time. This information provides a realistic timeline and helps set customer expectations on deliveries.
Also, consider including a countdown to tell your customers how much time is left to order a product in time for a holiday. If there are only three hours left to buy that Valentine’s Day gift in order to receive it before the holiday, keep that information prominently displayed near the product listing.
Show Off Testimonials & Reviews
People love reading reviews from their peers before purchasing something new. That’s why showing off testimonials and product reviews on product detail pages is a great eCommerce design tactic. Since we wouldn’t consider this the most important information, it’s best to include customer reviews below the fold or in a collapsible view. In addition to displaying a customer’s comment, include their rating and photos they’ve uploaded of the product. Sometimes, all it takes is confirmation from a peer to confirm a purchasing decision.
Cross-Sell Related Products & Offer Recommendations
Another eCommerce design strategy great for increasing average order value is to cross-sell related products below the fold on product detail pages. Cross-selling is kind of like how grocery stores conveniently place small candy bars and packs of gums by the registers, so customers spend an additional dollar or two. When it comes to eCommerce, cross-selling involves showing off products that complement the main product and are less expensive. For example, the product detail page for a pair of winter boots might include small CTAs to add a pair of winter socks, gloves or a hat to the shopping cart. To successfully cross-sell, be sure that the main item (the pair of winter boots) is displayed prominently on the page, and place the items that you’re trying to cross-sell (the less expensive socks, gloves or hat) in a different location. The cross-sells should not take away from the original product; rather, they should be placed there simply so that shoppers feel it is convenient to purchase that item in addition to the main item.
Chapter 5:
Optimize Your eCommerce Website Design For Mobile
Creating a Mobile-First eCommerce Website
Optimize The Search Bar For Voice Search
High-intent visitors who utilize site search already have a clear idea of what they want to buy. People often shop on mobile devices and use voice search to search for an item within a website’s search box. Help shoppers find the product they want by using predictive text to auto-fill their phrase. This makes it easier for people to find a specific item on your site, and it presents a great up-sell opportunity if your brand has a related yet more expensive item in stock.
Keep Product Pages Minimalistic
Lately, eCommerce design has shifted away from skeuomorphism and moved to a more minimalist design. Many minimalist user interfaces take advantage of white space and reduce clutter by utilizing fewer images or content. Since the goal of eCommerce product pages is to help visitors learn more about a product and encourage them to add it to their cart, minimalist product pages make it easier for visitors to comprehend a page’s content without any distractions. Plus, there’s less screen real estate on mobile, so a minimalist design is perfect for getting straight to the point.
Put Buttons In The Thumb Zone
Though mobile devices vary in size, the way in which people innately hold their devices are relatively the same. That’s why it’s important to consider what we like to call the thumb zone, or the part of the screen where people interact with sites using their thumbs. Placing CTAs in the thumb zone helps to create a frictionless mobile experience. When deciding where to place CTAs and buttons, keep the minimalist approach in mind. Although the bottom portion of the screen is the best area in terms of the thumb zone, be sure to disperse CTAs around the page because the button will move into the thumb zone as users scroll.
Use A Sticky Navigation
Optimizing a mobile eCommerce design is all about creating a website experience that makes the most sense for your customers. A great strategy to improve the customer experience and increase conversions is to use a sticky navigation. A sticky navigation is when the main navigation remains at the top of the screen as users scroll down a page. It helps shoppers browse around a website and prevents them from having to constantly scroll to the top to find a new category.
Chapter 6:
Conclusion
Our Closing Thoughts
Creative eCommerce design is key for reducing bounce rate, increasing average session duration and converting visitors into customers. We hope these design strategies and tips help you optimize your site to create a positive user experience. If you have any questions or are looking to enhance your eCommerce website design, Groove Commerce is here to help! Our eCommerce design services include custom development and responsive functionality, content migration, quality assurance testing and so much more. Contact us to learn more; our team will be happy to help!
About Groove Commerce
Groove Commerce is a full-service eCommerce agency with 13 years of experience helping mid-marketing retailers design, build and grow their eCommerce websites. As an Elite BigCommerce Partner Agency and Diamond HubSpot Partner Agency, Groove Commerce follows an inbound methodology and delivers bespoke, white-glove service to convert visitors into repeat customers.
About Justuno
Justuno is a conversion platform that helps eCommerce brands build high-converting website experiences with the most advanced on-site promotion suite on the market. On average, Justuno clients see over 135% lift in online revenue in the first year, making Justuno one of the best tools to increase sales and conversions, personalize messaging and capture leads.
