Whether you’re launching a new online store or improving an existing site, it’s important to focus on the ecommerce website design elements that matter most to today’s shoppers. Of course, key building blocks like great imagery, detailed product descriptions, consistent branding, and a simple checkout are must-haves for any site. But to make your ecommerce website stand out from the crowd in 2020, you need to nail more than the basics.
Modern ecommerce website design must be incredibly user-centric to be successful. If shoppers find it hard to find products or check out, they’ll quickly move on to a site that makes the process easy. Crafting a customer-first ecommerce website design starts with knowing how today’s shoppers find, enter, and engage with websites, which devices they use, and the experience they expect.
According to leading online data tracker eMarketer, the scales tipped in 2016. That was the year when more than half of online sales happened on mobile devices instead of desktop or laptop computers. That percentage has steadily grown since then, as the chart below shows.
As the total dollars spent on online sales continue to rise, so does the number of sales taking place via a tablet or cell phone. Image source: Statista using eMarketer data.
Even more striking, according to a recent OuterBox report, 79% of consumers made a purchase using a mobile device within the last six months of their study, and that trend is on the rise as well. Clearly, ecommerce website design in 2020 must focus on mobile-friendly features. But that’s not the only consideration.
Most shoppers enter ecommerce websites via online search, social media posts, or paid ads, and land on internal pages, not your homepage. So, it’s important that every page delivers key branding and sales elements—not just your homepage.
Shoppers’ digital experience expectations have matured in recent years, too. Cluttered pages, too much copy, mysterious navigation, and even a lack of engaging media like video are top reasons that potential buyers click away without purchasing.
Luckily, incorporating modern sales-driven thinking and functionality into your ecommerce website design isn’t difficult—if you know what to target. We’ve compiled a list of the five best ecommerce website design tips for 2020 to help you improve performance and drive more sales.
1. Have a Mobile-First Ecommerce Website Design Strategy
Shoppers use mobile devices for the majority of their online purchases, and that trend is only going to grow. So, mobile-first thinking is, and will continue to be, a major factor in long-term ecommerce success. Here are two ways to address this in your ecommerce website design.
Use a Responsive Ecommerce Website Design or Theme
Mobile-first ecommerce websites start with responsive design, which automatically adjusts site elements to display correctly across all device screens. This means your website navigation, images, forms, tables, and checkout elements all look “right” on desktop computers, laptops, tablets, and cell phones.
You can see how different device screens affect ecommerce website design decisions in the examples below. In the top image, the website displays its full navigation and a splashy homepage image on full-size screens.
What looks good on laptop and desktop screens doesn’t always translate to mobile device screens. Image source: SimplySmartLiving.
However, as screen sizes shrink on mobile tablets and cell phones, this website’s responsive design resizes and rearranges various elements to display in a logical, user-friendly way.
Responsive website design alters, and sometimes removes, various page elements to better display key content on smaller device screens. Image source: SimplySmartLiving.
In our example above, the tablet view on the left has the website’s navigation compressed into the now-familiar expandable “hamburger” icon. However, the splashy slider remains, as it still works on a tablet screen size.
In the narrower cell phone screen view on the right, the header imagery disappears in this responsive website. That’s because a hero or slider image isn’t always practical or user-friendly on a narrow screen.
The good news is that virtually all modern ecommerce solutions offer responsive designs. Whether you use an ecommerce platform like BigCommerce or Shopify, WordPress with an ecommerce theme, or a website builder with ecommerce features, like Wix, your website should smoothly adjust to different screen sizes like our illustration above.
Adding responsive functionality to older, non-responsive websites can be as simple as upgrading the theme or adding responsive CSS code. Sites on older legacy platforms might require a complete overhaul or a move to a newer platform to enable responsive features. However, few small businesses or startups face that challenge.
Create a Mobile-First Content Structure
Responsive websites also require careful mobile-first thinking when it comes to the structure of page content. This is because responsive design causes various content elements to reconfigure, or “stack,” based on the screen size.
Returning to our responsive website example above, see how elements appear in a row of three on the desktop and laptop screens? These same elements “re-stack” into a row of two on tablets, then into a single column on cell phones, as you can see below.
Responsive design causes website elements to rearrange and stack to accommodate smaller screen sizes. Image source: SimplySmartLiving.
This responsive rearranging continues to internal pages as well. If not designed with mobile-first thinking, sales-driving elements like add-to-cart buttons and item prices might require a lot of scrolling to view on cell phone screens, resulting in higher shopping cart abandonment rates.
Burying important elements like pricing and add-to-cart buttons deep on phone screens can negatively impact mobile shoppers’ experience—and your sales. Luckily, most online store designs for BigCommerce, Shopify, and other top ecommerce platforms have smart placement of important elements on all screens, as illustrated in the Shopify site below.
Furniture seller Hauser runs its website on the Shopify platform with a mobile-first design that places pricing and add-to-cart buttons front-and-center on all screen sizes. Image source: Hauser.
However, be diligent when choosing ecommerce site design themes for WordPress and website builders like Wix, Weebly, and Squarespace. There are hundreds of themes to choose from on these platforms, and each performs differently in terms of responsive elements.
Closely examine theme demos to see how key elements like pricing and add-to-cart buttons appear on mobile screens. Most demos let you toggle between screen views, or you can drag the edge of your browser window to see the narrower, mobile screen effect.
If sales-driving elements drop low and require scrolling on narrow screens, you might want to move on. Statistics and design pros agree that themes with key conversion elements high on the page outperform those that require a lot of scrolling.
2. Think Beyond Your Homepage
Gone are the days where a shopper types in your website address and arrives on your homepage to begin the browsing process. The vast majority of shoppers now land on internal product or collection pages, or even blog posts, when they enter your website. In fact, many never even see your homepage throughout their purchase journey.
A quick review of the Top Post/Pages Report below shows that this particular website’s homepage isn’t its most-visited page. In fact, its homepage takes a surprising sixth place in overall views and the five pages above it receive substantially more traffic.
Surprise! Your homepage is probably not the busiest page on your website. Image source: SimplySmartLiving.
Since your homepage is not a guaranteed entry point, key branding and sales elements like logos, promotions, and calls-to-action should be integrated sitewide. The easiest way to address this in your ecommerce website design is by making the most of your header and footer elements, and by incorporating some strategic pop-up content.
Of course, these elements also fall under your mobile-first strategy and should display well on any screen size to be effective. When designing header logos and crafting promotional copy, be sure to review everything on small screens before finalizing.
Here are some mobile-first sitewide branding and sales elements to consider in your ecommerce website design in 2020.
Use a Mobile-Friendly Logo
Few fancy logos read well on a cell phone screen. If you have a large or decorative logo, by all means, use it on desktop and laptop versions. However, also incorporate a simpler typeface logo into your branding and let that be your header logo on smaller screens. Most responsive ecommerce website designs give you this flexibility.
Incorporate Sitewide Banners
Key promotions like free shipping, flash sales, or sitewide discounts need a place of honor on every screen. This lets you deliver promotion details or other messages to every website visitor, regardless of where they enter your ecommerce website or what device they use.
Most ecommerce website designs have a sitewide banner option that displays underneath the header, as shown in the image below.
Hauser delivers a brief, but sales-driving, promotional offer in a noticeable sitewide banner that works on every page and every device screen. Image source: Hauser.
Place Key Information in the Footer
It’s common to find contact information, phone numbers, and customer service notes in website footers. By and large, shoppers know to scroll down for this information. Of course, you can—and should—include links to this in your website navigation too, which we’ll cover next.
However, offering it only in your navigation forces shoppers to click away from the page they landed on, and that might just cost you a sale. If this can be found in a quick scroll, you keep your visitor on the sales page.
Use Pop-ups Wisely
Pop-ups are very effective online marketing tools and you can easily incorporate them into most ecommerce website designs. They’re especially effective on smaller mobile phone screens, too, where you don’t have a lot of room for added information.
You never want to overdo pop-ups because repeated interruptions distract, or worse, drive away, shoppers. However, used sparingly and for content that shoppers want to see, like a limited-time coupon or discount, pop-ups can help you convert browsers to buyers.
You can even use pop-up deals to lure customers back to your site when they leave. This is called remarketing and can also be incorporated into any ecommerce website design.
3. Focus on Mobile-First Navigation
Clear, logical website navigation is a time-tested element proven to drive user satisfaction and sales. Of course, it’s important to have a sitewide search box, too, and advanced search functionality can be a plus. However, search functionality can’t replace sound ecommerce website navigation.
It’s important to create a navigation structure that quickly points users where they want to go. The simplest ecommerce website navigation is generally a two- or three-tier structure with top-level sections and nested subcategories.
For example, an online kitchenware seller might outline their navigation like this:
- Kitchen Appliances
- Slow Cookers
- Hand-held Mixers
- Stand Mixers
- Drinkware Sets
- Plastic Drinkware
- Glass Drinkware
- Wine Glasses
- Other Stemware
- Dish Sets
- Plastic Dishes
- Ceramic Dishes
- Stoneware Dishes
- Porcelain Dishes
- Drinkware Sets
- Kitchen Tools
- Prep Bowls
- Cutting Boards
- Baking Tools
- Measuring Cups
- Decorating Tools
- Pan Liners
- Sink Tools
Nesting subcategories under top-level sections helps shoppers quickly find the exact type of goods they’re looking for. This simple, straightforward approach neatly accommodates large product collections, yet displays well on all screen sizes.
It’s especially effective for smaller mobile screens since shoppers can expand and collapse menu sections to view select categories on small screens. Mobile-minded shoppers recognize the popular three-line mobile “hamburger” menu shown in the example below.
On mobile devices, Hauser’s menu is hidden using the recognized three-line “hamburger” symbol, which expands and collapses when clicked for small-screen convenience. Image source: Hauser.
Shoppers know that a quick click on this universal symbol reveals site navigation that will quickly lead them to what they seek. Best of all, another click tucks the menu neatly back into the header when not needed.
4. Use Long-Scroll Category and Collection Pages
Mobile buyers are driving an ecommerce website design trend away from paginated collection pages and toward long-scroll pages, and that continues in 2020.
With long-scroll collection pages, a mobile user can simply scroll up and down a collection page to see everything offered. In contrast, a multi-screen setup forces mobile users to click to another screen, then scroll more. Usage data indicates that mobile users tend to prefer a single, long-scroll page to quickly browse collections. So, that’s what a mobile-first ecommerce website design should offer.
Before the rise of mobile shopping, multi-screen collection and category pages were popular since it presented a smaller cluster of items “above the fold” on desktop and laptop screens. Instead of traveling down the screen to view items, users viewed just six to eight items at a time on these larger screens.
Clearly, that approach is cumbersome on narrow cell phone screens, so long-scroll collection pages are now the fashion. This feeds back to desktop and laptop views since shoppers who scroll down collection pages on mobile phones tend to do so on all screens.
5. Use Video in Your Ecommerce Website Design
Saying that video is an effective ecommerce sales and marketing tool is nothing new. However, if you don’t incorporate video into product pages, your homepage, and key landing pages in 2020, you’re in danger of being considered behind the times.
Luckily, YouTube and social media have created a very “authentic” expectation when it comes to online video. This means you don’t have to spend much (or anything, really) to create effective, sales-driving videos that enhance your ecommerce website design efforts.
In fact, many highly successful ecommerce sellers, online influencers, and even big-budget advertisers use nothing more than simple cell phone videos to get their message across.
To effectively incorporate video into your ecommerce website design in 2020 and beyond, you need a plan. Even simple cell phone projects take time to record, edit and upload. If you approach it randomly, you’re sure to lose focus and this powerful tool will drop to the bottom of your to-do list.
So, take some time to review popular video formats to see what fits your products, video capabilities, and budget. Then create a list of videos to complete within the next three to six months. Once video becomes a part of your regular routine, it’s easy to keep it on your radar.
Below are some effective, low-budget ecommerce video ideas to help get you started.
Product Demonstration Videos
Showcasing products in real-life settings, or explaining how products work, are simple and effective video sales tools. Kickstart your plan with a series of videos for your top-selling evergreen products.
Not sure how to craft a good product demo video? Never fear, you can find plenty of advice and real-life examples on YouTube. Image source: YouTube.
Product Closeup and Feature Videos
If you’re not comfortable with demonstration videos, simply put your product front-and-center with a series of product closeups, 360-degree views, and feature highlights.
Enjoy camera time? Then become an advocate for your products and your brand. Influencer videos take all forms—instructional, informational, funny, provocative, or just a series of product reviews. They also cover all styles, from professional and polished to down-and-dirty, and everything in between.
If you’re not sure how to craft your own influencer voice, tour YouTube, Facebook, and Instagram to see how the pros—of all ages—use authentic videos to build a following.
Remember, your video efforts can do double-duty beyond your website. Video is a favorite medium on social platforms, so you can use product and branding videos for all types of social media promotions. Plus, you can upload some or all of your videos to YouTube to attract a new audience and drive more traffic to your ecommerce website.
Image source: Fundera
5 Ecommerce Website Design Tips for 2020: The Bottom Line
The list of ecommerce website design best practices is virtually endless. No website is ever perfect, and oftentimes beauty is in the eye of the beholder. However, hard data proves that certain design elements drive more user engagement and sales—and these trends are on the rise.
Mobile-first thinking is the biggest game-changer in ecommerce website design in recent years. Over 75% of shoppers have used a mobile device for online purchases and mobile sales now account for over half of all online sales. Those numbers are only going to increase.
Great imagery and descriptive details will always be important in ecommerce website design. However, the splashiest images and most attention-getting copy is simply ineffective if not delivered in a mobile-friendly, responsive ecommerce website design.
Following that thinking, website content, key promotions, header logos, and navigation must be well-planned and work consistently across all devices. If these elements don’t deliver on mobile users’ expectations, you’re losing sales, plain and simple.
Once your ecommerce website design meets mobile user expectations, it’s time to expand into video. You can start with a few simple product demos or how-to videos, or launch an influencer-style series that meshes with your brand.
Whatever your comfort level, try to incorporate some type of video into your ecommerce website design strategy into 2020 and beyond. The ROI on a handful of low-cost, authentic video efforts may just surprise you!