Our 5 tips on how to create an effective homepage in BigCommerce.
BigCommerce is a popular eCommerce platform choice for merchants that require professional-grade inventory and order management tools; advanced analytics and metrics tracking; and the freedom to custom-tailor the look, feel, and function of their websites. BigCommerce is purposely designed to work with businesses of all sizes, from eCommerce upstarts and small-medium businesses (SMBs) to full-scale corporate enterprises. In addition to BigCommerce’s functionality advantages, it’s also an excellent platform for cutting-edge designers to unleash their true creative potential and take advantage of the latest trends and technologies in modern web design.
If you’re new to BigCommerce or are looking to refresh the appearance of your current BigCommerce website, continue reading to find out the 5 essential tips for homepage design in BigCommerce.
But, before we continue…
5 Basic Elements of Good Web Design
Regardless of the platform on which your website is based, there are 5 basic elements of web design that contribute to the overall user experience. To maximize the total design effort, these individual elements must be able to stand on their own for a single weak element can sour the entirety of the design.
The 5 basic principles of good web design are as follows:
- Content
- Usability
- Aesthetics
- Visibility
- Interaction
Content
Content is any media that can be ‘consumed’ by the viewer. This includes text, images, and video. Content generates interest within the public and is an important factor in how your website ranks with SEO; interesting and engaging content will draw more attention to your website whereas irrelevant content (making content for the sake of making content) will have a repelling effect on both the public and with search engines.
Usability
Usability, the layout and navigation of a website, needs to be intuitive and easy-to-digest. While it seems that everyone is on the Internet these days, not everyone has the same understanding of how to use the Internet. Successful websites need to be inviting and accessible to all potential visitors; the more they have to think about how to use your website, the more time they have to think about leaving it to go shop elsewhere.
Aesthetics
Simply put, this is the visual aspect of your website’s design. Think about your company’s corporate image and the image you want to project to the public. At the same time, don’t be afraid to look into the current design trends being utilized by the leaders in your chosen field or industry. It especially helps to stay modern as retaining an older layout or relying on traditional design cues could potentially send the wrong message to your website’s viewers, that your website might not be ‘in the now’.
Visibility
This is SEO, marketing, and advertising of your website. As stated over and over again, your company could have the best prices and the biggest selection of merchandise but none of it will matter if the customers don’t even know you exist. Increase your website’s visibility by generating good relevant content that engages viewers, plan out and perfect your SEO strategies, and take advantage of the ‘word-of-mouth’-style viral marketing through social media. The more eyes you have on your website, the more likely it is that it’ll be picked up and prioritized by the search engines.
Interaction
Your website works in the same way that a physical ‘brick-and-mortar’ storefront works; it’s there to welcome shoppers, entice them to make a purchase, convince them to make a purchase, and then assist them with the purchase process itself. No matter the size of the business, if there are no customers, there is no business. A successful eCommerce website that effectively uses all 5 of the principles of good web design will increase its conversions which, in turn, will increase its potential for business growth and expansion.
Now that you know the 5 basic principles of good web design, let’s apply them to effective homepage design using BigCommerce.
First Impressions
There’s an old saying: “You only have one shot to make a good first impression.” That’s most certainly true in web design but unlike a one-on-one, face-to-face interpersonal encounter; your website makes a first impression on every new visitor that ends up there. There literally could be thousands of people who’ll be getting their first impressions from your website. That’s why, like a hook of a catchy Top 40 song or a flashy trailer for a blockbuster big-budget movie, your website needs to immediately hook and retain the viewer’s interest just long enough so that they’ll want to explore your site even deeper–hopefully, with the end goal of making a purchase. According to this study by Taylor & Francis, your website has less than a single second to make a good lasting first impression–50 milliseconds, or 0.05 seconds to be exact. People who experience a good first impression often keep their positive encounters to themselves but bad first impressions almost always get publicly announced, typically by way of public-viewable reviews on Google or other avenues that are open to mass web traffic. Best make those 50 milliseconds you have count!
Designing an Effective Homepage
Your homepage might not be the first thing that new visitors to your website will see, but they’ll wind up there sooner or later. Keeping the analogy of the physical store location in mind, your website’s homepage acts as the front doors to your storefront. Your visitors will be hit with a lot of information coming in all at once–such as your branding, your available products, and your pricing–but the key to successful website engagement is an effective homepage that subconsciously informs visitors without blatantly overloading them. After all, think about visiting a retail showroom; there’s nothing more off-putting than being swarmed by legions of aggressive commission-based salespeople at the exact moment you walk in through the front entrance. Preferably, your website’s visitors should be able to take in and digest all of this information within the 50 millisecond time frame. If they manage to stay on your website beyond those critical 50 milliseconds, half the battle has already been won as they’re now spending more time exploring the other areas of the website and beginning the purchasing process on their own.
#1: Introduce Yourself
The homepage is both the central hub of your website and your formal greeting to the public. Think about your corporate identity, your branding, your image, and then think about who it is that you want shopping on your website. This will be your dream customer, your ideal customer. With what you have to offer that perfect, dream customer, what is it that they want to see? This should be where, if you haven’t done so already, you figure out your website’s color scheme and typography. Monochromatic color schemes are a hot trend in today’s web design practices but, depending on your field/industry, they may not be entirely appropriate. In this case, a duotone or even a quadtone color scheme would fit, so long as the colors used either reflect your logo and branding or, if you wish to dig deeper into color psychology, the mood you wish to establish with your userbase. Avoid clashing colors or overtly-garish colors as these can be an eyesore and the wrong combination could throw off the balance of an otherwise clean design. The same train of thought applies to the typography and typefaces your website will be using. Avoid complicated fonts and reserve strong/bold typefaces for headline pieces or main areas of interest.
#2: Simplify Navigation
Navigation and user interface will play the biggest part in determining user engagement on the homepage. Since a homepage is typically filled with important and unavoidable information (IE: company policy and shipping info pages, user logins, contact info, search bar/search menu, etc.), there will be a lot of different avenues that will need to be mapped out even before you get into how to shape the navigation of your product and merchandise categories. While BigCommerce’s inventory management and product cataloging allows for multi-tiered categorization, it’s best to keep categories as basic as possible. On the homepage itself, main categories and 2nd-level subcategories should absolutely be listed but 3rd or 4th-level subcategories can be reserved for the individual main category pages themselves. The old standard for navigation used to require that navigation breadcrumbs to help users visualize where they’re at on a website, but modern design trends are moving away from them. We feel that they’re still important and still very helpful for the user experience; especially, if it’s a type of web shop where users will be in and out of categories/subcategories frequently. In this case, breadcrumbs are best situated near the top left corner of a page, underneath the header. Even if navigation on products ends up going several layers deep, as long as the main navigation layout is clean and easy-to-use, your visitors and website users will figure out on their own how to maneuver through deeper layers of product categories through repetitive patterns.
#3: Accessibility is a Must
In our earlier design article, 10 Hot Web Design Trends for 2022, we discussed the importance of accessibility. In web design, accessibility means removing barriers that prevent people from interacting with your site. Among these boundaries are physical or mental disabilities, situational disabilities, socioeconomic limits, and even environmental constraints on Internet connection speed/availability. Web accessibility is legally required in many countries, including the USA under the Americans with Disabilities Act (ADA). Accessibility features include:
- Text-to-Speech
- Semantic HTML
- Alt Text for Images
- Sequential Heading Structure
- Consistent, Simple Navigation
- Dark Mode
Don’t forget: Over half of all Internet traffic comes from mobile devices such as smartphones and tablets. BigCommerce uses responsive design as standard, which means that websites will automatically adjust to the type of device that is being used to view a website using the platform. When designing your homepage, remember to allow for responsive design’s change-on-the-fly automatic layout adjustments for mobile screens.
#4: Big Minimalism
These two words together are oxymoronic, but hear us out: minimalistic design has been a staple of American advertising for several decades and while the typefaces have changed depending on the era, the basic visual concept remains the same. What we mean by ‘Big Minimalism’ is the use of a large image as a focal point, large typeface for the image’s hook or tagline, but both elements are juxtaposed against an even larger amount of negative space. Modern advertising makes use of basic 2 or 3-word hooks, such as a catchphrase, but any following descriptive text is reduced to either a few short words or a simple sentence. No more paragraphs following the headline, especially since any kind of wording to be picked up in SEO would have to be in the image alt tag or an image description; words printed on the image itself will not be detected by SEO web crawlers (except for whatever text can be displayed over a background image through code). The main image usually fills a third or half of the image workspace; negative space often outweighs the main image. In regards to negative space, low gradients or solid colors work best. Avoid using complicated backgrounds for negative space, unless you can semi-obscure them through blurring, fading, or monochromatic color washing.
#5: Always Evolve, Never Settle
Internet technology evolves at an exponential rate. Your website will require constant maintenance and updating to ensure compatibility with each advancement in technology, also to conform to the changing trends in modern design. Going back to what we said earlier about good first impressions, if your website’s homepage has an old and outdated appearance–even if it is technically sound–it won’t exactly instill confidence with the public to make them want to shop with you. It helps to pay attention to what your most direct competitors are doing in regards to their own websites; you’ll be able to tell if they are on the forefront of modern design or if they’ve settled and become complacent with a design that was once considered cutting-edge and ultra-modern but has now faded from popularity. Pay attention to what the top retail brands are doing, but avoid Amazon because, despite Amazon’s eCommerce dominance, their basic web layout and homepage design hasn’t seen much evolution throughout the years; Amazon is a rare case as they’ve been on the Internet so long and have virtually single-handedly built the foundations for Internet retail, the lack of visual updating has, itself, become their online identity.
Custom BigCommerce Web Design with Diztinct
At Diztinct, we are eCommerce professionals with nearly 2 decades of experience in custom website design and development. We’ve designed and built websites and marketplaces for companies of all sizes; ranging from small independents to large corporations. Our work has been recognized and awarded by some of the top names in the eCommerce industry and we’ve had the privilege to work with globally-renowned companies and brands such as QVC, Clorox, Dickies, Crocs, and Dooney & Bourke among others. Diztinct also has the honor of being certified design partners with BigCommerce. This means that when you hire Diztinct to build your BigCommerce website, you will be working closely with officially-recognized BigCommerce design experts who know the ins and outs of the platform and will get you the most of what BigCommerce has to offer for your online business.
Are you ready to give your website and your business the Diztinct advantage over the competition? If so, let’s talk. Get in touch with us today and get ready to make your website work for you.