A Page by Page Guide to eCommerce Web Design - Product Page

The product page is arguably the most important page on any eCommerce website. This is where visitors decide whether or not your product is worth their money. 

When done well, your product page can convert those same visitors into customers, generating steady sales for your business.  

This article will cover the importance of a product page, what to include on your product page, and how to design your product page. Using these tips will help facilitate in inspiring customers to click the checkout button, purchase your product and hopefully leave a 5 star review! 

What is a product page?

The product page is the page on your website which displays your product and all of the information about your product to help facilitate the customer in their decision making process. This includes images of the product, along with specs and answers to questions they may have.

Goals of a product page

Simply put, the goal of a product page is to convert a customer from considering, to purchasing your product. Here’s how to accomplish this goal: 

  • Make it visually appealing - The first thing a potential visitor will notice is how your page looks, this includes the quality of your product images! Images are essential to 93% of customers in the decision making process.
  • Write an informative & persuasive product description - Product photos can’t describe everything about the product. A great product description details features and benefits of buying or owning the product. 
  • Keep it simple - You don't want a complicated process to be the reason you lose a sale. 76% of customers say that the most important part of a website is that it’s easy to navigate. Make sure your product page has a fast load time and is easy to use on mobile, desktop, and tablet.
  • Show social proof - You can say your product is fantastic but why should a customer believe you? It is your product! Providing social proof through reviews shows the customer that real people also love your product, and customers trust reviews 12 times more than product descriptions! 
  • Make it accessible - Your product is likely not just of value to able bodied people but is valuable to disabled people too. It is important to create a product page that is accessible to everyone, including the visually impaired.
  • Create a sense of urgency - Sales can be increased by 332% when your product has a sense of urgency. Running low on stock? Let the customer know! Have a sale ending in 24 hours? Put a countdown next to the product price.

What is the purpose of the product page?

For the seller

The purpose of a product page is to persuade the customer that they need your product. To do so, you have to present the right information above the fold, forcing them to scroll down and view the rest of the page.

1. Clearly define the product

Describe the product in a short snappy way that gives the customer confidence in the product they are buying - What does the product look like? How big is it? What is it made of? What colour is it?

Does the product include anything that could make your product more valuable to the customer? - If it’s battery operated, does it include batteries? Extra accessories such as a charger? Does it come with a warranty?

One of the most important pieces of information to the visitor… How much does it cost? You can have an incredible product but you will not convert if the customer does not know how much it is - Is it on sale? Is there a discount the more you purchase? How much is one? Is shipping free?

How does it work?  - How do you use the product? Are there different use cases? Who is it made for? 

Check out this one from Party Pastries, which clearly explains what the customer can expect with their purchase. 

2. Establish trust 

Social proof is vital! Having a great product description is fantastic, but if the  reviews don’t align with how the product is described, they’ll never buy it. 

Have an influencer that mentions loving your product in their latest YouTube video or TikTok. 61% of consumers say they trust influencer recommendations –  leverage this and link any influencer marketing on your product page!

3. Align with the buyer’s goals

Why would you buy a product you don’t need? You wouldn’t. Create an environment on your product page that persuades the visitor that they need your product. 
Show how owning your product can help your customer solve their pain point, satisfy their craving, or achieve a certain goal. 

4. Get them to the checkout page

You can have an outstanding product page, but if there is no obvious way to checkout, how do you expect to have any conversions? It’s your job to make your customers' lives easier, not to give them a treasure hunt!

Include a call to action (CTA)  above the fold such as “add to basket” or “get this deal” that directs the customer to the checkout page. Be original with your CTAs; they don't have to be formal.

For the buyer

When someone visits your product page it is likely that it is because they need to solve a problem or satisfy a desire

Just talking about the features of your product is not enough. You need to discuss how and when the features of your product will fulfil the problem your customer is having.

If a photographer is looking to upskill, simply telling the photographer to take your online course is not enough. You need to tell them what they will learn in your course, how it will help them improve their photography, and ultimately, make them more money.  This speaks to the need of feeling superior to their competitors.

If a customer has been sunburnt and they are looking for relief, they don't just want to hear the ingredients in your product. The customer wants to know how the ingredients in your product provide relief and how soon they can expect results.

What should be on a product page?

Craft a creative & descriptive product title

Yes, you want such a juicy product title that your customers struggle to resist clicking on the product…But, you can’t mislead them.

If you tempt the customer with a clickbait-worthy title, they might click on the product. But they’ll be left frustrated and you run the risk of losing many potential customers because of your deceit. 

If you don’t have value to offer, don’t offer value. It’s that simple!

Use high-quality images

UGC can be fantastic, especially when it is high quality content. If possible, leverage content from powerful influencers in your target market. 

Don’t use the stock or manufacturer photos. Take your own photos and make sure they are high quality! 

Some consumers find it easier to visualise using your product when they can see others using it. Include pictures of people using your product or better yet a video of someone using your product.

Write informative & persuasive product descriptions

Most of the time there is no need to write like you are selling to the queen. Write as if you are selling to a friend. It may feel unprofessional at first but to the customer it comes off as genuine.

You want the customer to feel as though they will be missing out if they don’t purchase your product. For example if you are trying to sell a new easy up tent say something along the lines of “Don’t be the one to miss out on toasting marshmallows because your tent took twice as long as everyone else's to put up.”

If they can’t imagine buying or having the product, they’ll never buy it. The description should complement the images in a way that the customer can imagine themselves owning the product.

Check out this one from Dematech.

Add a compelling CTA

The goal of a eCommerce product page is to sell a product. To make that happen, your product page needs a clear CTA . 

And this isn’t limited just to the “Add to Cart” or “Buy Now” buttons… You can create a CTA in your product description, with the button click serving as the ultimate action.

Be creative and use your brand voice when creating CTA’s so that you can stand out from your competitors.

Just like we want our product descriptions irresistible to click on (without clickbait) make your CTA’s irresistible too! 

Create trust with social proof

Use trust badges, these let customers know that you are a legitimate brand. Not only are they taking a risk in buying your product online as a first time buyer but they are putting their credit card details into your website.

Just like you are more likely to buy a certain product or brand if it has been recommended to you by a friend, reviews and testimonials act as your customers' online friends.

Reply to those reviews whether they are good or bad. This lets customers know that as a brand you are listening and care what customers think – putting in the work to prevent future issues.

Although it may be tempting to just delete the bad reviews, it is unrealistic for every customer to have a 5 star experience. The key is to be transparent.

Add creative, yet intuitive symbols to draw attention to certain benefits

Website visitors are naturally drawn to symbols, so use these to highlight important features or benefits of your product. 

KeAloha uses symbols to highlight how their products help protect the oceans.  

Include other important information to eliminate any doubt

Customers like to put in the least amount of work possible, so you want to make sure that all of the information a customer may want before making a purchase is available on your product page. If they have to search elsewhere for more information, it’s unlikely that they’ll come back to your site.

The product description is meant to influence them. But ultimately, people want to know exactly what they’re buying. Let them know what’s included with the product, how it works, and how it satisfies their needs & cravings. 

Include a list of commonly asked questions about the product so that customers can quickly find the answer they’re looking for. 

From a few photographs and a short description, it can be hard to gauge the size of the product. Include dimensions for relevant products such as clothing, shoes, and furniture. 

What information does the customer need to know about the shipping of the product? Is it free? How long will it take? Let them know.

Encourage social sharing

Social sharing icons such as  Facebook, Twitter, Instagram, and Pinterest should be added to the product page so that customers can easily share the link to anyone they have recommended the product to.

Offer similar products

If the visitor is interested in this product, they’re going to buy it. But if they are not interested, recommending similar products is a great way to keep them on your site, potentially resulting in the purchase of another product.

How to design a product page

Now, it's finally time to design that product page. But how do you get started? 

Get inspired

Have a look at what others are doing! What product pages are your favourites as a consumer? What do they do well and what do you think they could be doing better?

It is great to check out others in your niche, sometimes there are already great ideas out there that you can adapt and make even better.

Design a simple, intuitive layout

You may think that having a lot of words so that you can give the customer every single detail imaginable is a good thing. But, you should keep your information as concise and nicely presented as possible so as to not overwhelm the customer.

Website visitors don’t read every single word on a webpage. Instead, they efficiently scan the page, doing the least amount of work in order to achieve their goal. But, not all users scan the same.

Design the page with the rest of the site in mind. Keep logos, colours, fonts, and image styles consistent across all pages. 

Place the most important information above the fold – this is what the customer first sees when they arrive at your product page. The information above the fold should be enticing enough to convince the customer to scroll down to find out more.

The layout of your product page should provide a seamless uncomplicated experience no matter whether it is being viewed on mobile, tablet, or laptop.

The website should load fast enough that the customer does not notice having to sit and wait for it to load. Ideally, this should be under 2 seconds.

Now, repeat it

The great thing about product pages is that although there are a lot of them to create, you can make a template from the first one and then just duplicate it for your other products. Just swap out the title, descriptions, and images as needed.

Now, whenever you have a new product, the page layout is already complete. This will save you so much time as your business grows and you add more products to your site. 

Test, analyse, and make changes as needed

In a perfect world, you’ll design a high-converting product page that generates thousands of dollars in sales. But in a more realistic world, you’ll likely have to design and test multiple different layouts.

See what’s working and what isn’t – just because it worked for another brand does not mean it will work for your brand. And after enough iterations, you’ll have the perfect product page for your audience.

Conclusion

The product page determines whether or not your website visitors will become customers.  So, it’s important to design a product page that influences them to make a purchase.  Follow the tips in this guide and turn your product from something your customers want to something they need.

Or, if you're looking for a professional web design team, we're always happy to help. Get in touch with us today.

Posted in Website Design

A Page by Page Guide to eCommerce Web Design - Homepage

Your homepage is the most important page on your eCommerce website. It’s your first chance to make lasting impressions, convert visitors into customers, and grow your brand.

Generally, it’s the most visited page on your entire site. And among other things, the design is a primary factor in determining whether or not visitors will engage with your website and make a purchase. 

A poorly designed homepage will result in users exiting your site before even shopping your products. On the other hand, a well-designed homepage will result in users engaging with your website, shopping your products, and ultimately making purchases.

So how do you design your homepage to increase conversions and grow your brand?

How to design your eCommerce homepage

Design it for mobile

Nearly 60% of all website traffic in 2021 occurred on mobile devices, compared to just over 40% on desktop devices. And with smartphone technology improving by the day, that number is expected to increase over the next couple of years. 

As we already mentioned, most visitors will land on your homepage when they first visit your website. And because the majority of those visitors will be using a mobile to do so, your homepage needs to be designed with mobile users in mind

But just because most of your visitors will be mobile, you can’t forget about desktop users entirely. Make your website responsive to both mobile and desktop users so that no matter what kind of device they’re using, they can still view the most important content and easily navigate the website.

Make sure it loads quickly

High-converting, beautiful homepages are important. But if it takes forever to load, users won’t even be able to see it.

Ideally, your website should load in under two seconds – this is especially the case with mobile visits. In fact, over 50% of mobile site visits are abandoned if your website takes more than 3 seconds to load.

Keep it simple

You may be tempted to cram a ton of content like text, images, and calls-to-action (CTAs) on your homepage. But rather than overwhelm your visitors with too much information, it’s best to keep your homepage design as simple as possible.

Choose an easy-to-read font & high-quality images, write attention-grabbing headlines, and use ample white space to showcase your brand to potential customers. 

Along with those basic design principles, your homepage should include the following elements:

  • Main Menu
  • Above the fold content
    • Banner image
    • Main headline/UVP
    • Unique CTA
  • Social proof
    • Trust badges
    • Testimonials
  • Sales, deals, and special announcements
  • Brand identity section
  • Featured products
  • Product categories
  • Footer

Elements to include on your eCommerce homepage

Main menu

Your main menu is one of the first things customers see when they land on your website. It should contain your brand name, logo, and several navigation options so that customers can easily find what they’re looking for. 

Choose only the most important elements to avoid crowding the menu and make it responsive to both mobile and desktop.

See how the Garden Shed Company's main menu differs between desktop and mobile.

On desktop

main menu - desktop

 

On mobile 

mobile main menu

For more tips on designing your website header, check out this guide.

Above the fold content

What is above the fold? “Above the fold” refers to the content that a visitor sees as soon as they land on a website before scrolling down.

It’s the most important part of your homepage – because if visitors don’t like what they see, they won’t scroll or interact with your site any further.

And to make a good first impression, your above-the-fold content needs three things: a high-quality banner image, main headline, and a unique CTA.

High-quality image

To capture your visitor’s attention, your main image needs to display your product and showcase your brand identity. Your visitors can’t try out the products online, so the images need to be captivating enough to encourage them to buy. 

If you run a swimwear business, choose an image of your model(s) wearing your swimwear at the beach or near a pool.

Main headline

Along with a great image, headlines encourage users to engage with your website. To write a great headline, consider your visitor’s point of view – “Why should I care about this?”

Craft an eye-catching headline using your brand slogan, announcing a special deal or sale, or naming your brand’s unique value proposition (UVP). 

What is a UVP?

Your company’s UVP, or unique value proposition, clearly defines your offer. It lets customers know how your product(s) will benefit them and how they differ from competitors.

Unique CTA

Rather than just telling visitors to “Click Here” or “Shop Now,” craft a specific, unique CTA that makes them want to click on the button and engage further. For a great CTA, relate it to your main headline. 

Appliances 4 Rent does a great job with their above-the-fold content. Their homepage has all three elements - a high quality image, two headlines, and a clear CTA.

above the fold example

Social proof

If you don’t already have customer reviews and other trust badges on your homepage, you need to add them ASAP – they’re an effective marketing tactic that uses psychology to increase sales. 

The concept is simple – people are more likely to engage in something if other people are already doing or have already done it. Social proof applies this concept to eCommerce. 

Potential customers will have less objections after reading positive customer reviews and recognizing common trust badges. Include both brand and individual product reviews to increase their faith in both your brand and your products and trust badges that show their personal data, payment information, and more is safe with your business. And if you’ve received any industry-specific awards, include those as well – they’ll show that your brand is reputable. 

Here's an example from one of our recent eCommerce builds. 

social proof ecommerce example

Brand identity section

Customers buy brands, not products. Even if customers already know your UVP, they still want to know the brand they’re doing business with. Tell them a bit about the brand, the products (and their quality), company values, and anything else that might increase the likelihood of a website visitor becoming a customer. 

Don’t crowd this section with too much information – the goal is to cast your brand & products in a positive light, not bore the customer. 

Featured products

If you just released a new product or collection – show it off! If you’re running a promotional sale, that sale should be highlighted in your above-the-fold content. Not everyone might be there to shop the sale, and that’s okay…

And for those visitors, it’s important to showcase your other featured products such as your best sellers, sale items, or past collections.  You should highlight these further down the page, along with a product-specific CTA.

Further down the page, Mt. Lyford Honey present their most popular types of honey with a brief description, pricing comparison options, and clear CTAs.

featured products section example

Product categories

If your brand has a large product catalogue with multiple product categories, highlight each of these categories on the homepage. If they’re new visitors, they probably don’t know exactly what you sell yet. But with links to product categories, they’ll narrow their search and bring themselves that much closer to a purchase decision. When designing this section, choose an image that best embodies the entire category.

Footer

Website visitors expect to find certain things on specific areas of your website – this is no different for the footer. Include important links such as:

  • Basic contact information (hours, address, phone number, email, etc.)
  • Shipping & Returns Policy, Privacy Policy, and Terms & Conditions
  • Customer service links
  • Links to social media
  • Major category pages
  • Other relevant links

Check out this one from Party Pastries Macarons. It contains basic contact information, social links, and legal policy links.

ecommerce footer example


The goal of your homepage is to make a great first impression. By following this guide and adhering to basic web design principles, you’ll not only make a great first impression, you’ll turn engaged visitors into loyal customers. 

And if you’re struggling to design a homepage for your site, we’d be happy to chat about design solutions to grow your eCommerce brand.

The Ultimate Guide to eCommerce Web Design

Designing a new eCommerce website for your company is exciting. It’s also a lot of work. There’s countless elements to consider from fonts and colours to product images and the checkout process. 

And whether you’re new to web design or a total expert, eCommerce is an evolving industry that requires the most up-to-date design features and best practices.

What is an eCommerce website?

An eCommerce website allows businesses to sell physical or digital products and services on the internet rather than from a physical storefront. It can process orders, accept payment, manage shipping & fulfilment, and more. 

In addition to many other benefits, an eCommerce website enables business owners to run their business entirely online without having to pay for a brick-and-mortar storefront.

What are basic requirements for an eCommerce website?

Though eCommerce stores can be built with beautiful designs, robust product catalogues, and hundreds of other features, the basic requirements for an eCommerce website are:

As your eCommerce business grows, you’ll add more products, categories, pages, and features. But if you’re just starting out, don’t overthink it – keep it simple.

How do you design a website for eCommerce?

There are plenty of platforms available to design eCommerce websites. Shopify & Squarespace are popular options if you’re a total beginner, and WordPress is a solid option if you’re more experienced with web development. 

But if you’re looking for a totally custom eCommerce website with an easy to use CMS (content management system), our team at Activate Design is the only choice for your web design needs.  

Design your next eCommerce website

Overview

Designing a website for your eCommerce store is exciting. It’s your chance to display the brand that you’ve worked so hard to build – and that’s why your store’s design is so important.

There’s a lot to consider: functionality, colours, fonts, images, pages, desktop v. mobile, checkout, payment options, and more. 

The good news is, we’re here to guide you. With our web design guide for eCommerce, you can confidently design a beautiful website to sell your products or services. 

Structure & Functionality

As important as it is to design a beautiful website, appearance is secondary to functionality. As soon as users land on your site, they’ll begin to browse for different products, deals, and more. 

So to create the best user experience and increase the likelihood of a purchase, you must first design a well organised and functional website. Important things to remember are:

  • Clear calls-to-action (CTAs) with proper size & contrast
  • Properly linked buttons for “Add to Cart” buttons, contact buttons, menu items, etc.
  • Fast-loading website to keep users on the page
  • Responsive design that adapts to the device size 

Main Menu

Typically, most people’s eyes will go directly to the main menu to make their next decision. When designing your header & main menu, consider the most important things users might look for – products/categories, about page, cart/account access, and a search bar. Keep in mind, your main menu may look different than another website.

We’ll explain more about each of these elements later, but it’s important to understand their context in the main menu first.

Shop/Products 

If you’re selling products online, there has to be a button in your main menu that allows users to shop for those products. 

For smaller product catalogues, this may include just a simple “Shop” or “Products” button. For larger catalogues, your main menu should include a drop-down menu with the different product categories/types to allow users to navigate straight to their desired category. More on categories later…

Contact Information

Your contact information is another must-have item in your main menu. Whether it’s a phone number, social media icons, or link to a contact form, your customers need to be able to reach you.

Make it easy for them and give them some options. For an added bonus, consider adding a live chat option. 

About Page

Consumers buy brands not products. To set yourself apart from competitors, it’s important to have a unique and compelling brand story. Whether it’s a family business or a mission-driven company, let your customers know who they’re shopping with.

Cart Icon/My Account

For users shopping for multiple items, it’s important to include a “Shopping Cart” icon so they can quickly view what is in their cart. Most commonly, this is located in the top right of the screen. 

If you offer users the chance to create an account to earn rewards or save their information for faster checkouts, make it easy for them to access their account with an icon in the main menu. 

Search Bar 

To make things even easier for users, add a search bar to the main menu. This will help users quickly locate certain pages, products, and more without having to explore the navigation items.

Enable auto-complete suggestions to help guide users and make the search tool available on all pages for quick & easy access. 

Other Navigation Items

Aside from the main menu, add a filter option to easily allow users to sort products by price, size, ratings, and other applicable variables.

As your website grows, there will be more pages and links. To avoid a poor user experience and negative SEO elements, periodically audit your website for broken links (404s) to make sure navigational items are working properly.

Mobile vs. Desktop Design

As mentioned earlier, over 50% of website traffic comes from mobile devices. So when designing your eCommerce website, it’s important to consider the look & functionality of your website on all types of devices. 

With less display room on mobile devices, you can’t display the same amount of information as you can on a desktop. In that case, you’ll have to make a decision on which elements are most important to your mobile website.

Take a look at these two examples below, one of a desktop design and one of a mobile design. Notice the responsive design changes between mobile and desktop.

standard desktop website

responsive mobile website

Branding

This may seem obvious, but your website’s branding needs to be synonymous across all pages and align with your mission and products. This goes for fonts, colours, images, and more. 

For fonts, keep it simple. Avoid artsy or calligraphy fonts that are difficult to read and stick to fonts such as Helvetica, Calibri, Open Sans, Montserrat, etc. 

The same goes for colourways. Choose a simple colour scheme that matches your products & environment, contrast well, and leave enough room for white space, like HydroGarden.

simple homepage for hydrogarden

If you’re offering a special deal or announcing an upcoming event or product launch, add an announcement bar to the top of your website to let customers know! 

And though you may be tempted to use a pop-up to make sure they see it, most consumers find these distracting and may exit your site. If you want to use pop-ups, test them within your audience. 

Images & Video

When shooting photos for your home, about, and product pages, be sure to keep your photos consistent with regards to the environment, lighting, and backgrounds.

If you’re selling clothing or other personal accessories, include photos of people wearing the products so they can see what it looks like when in use. Typically, these photos tend to perform better (more conversions) anyways.

Trust & Security

If your brand has been featured in magazines, news outlets, or other publications, let your customers know. Featuring these endorsements on your website serve as social proof and eliminate any doubts the customer may have about your product or brand, leading to more purchases. 

social proof example

Similarly, include product reviews directly on product pages for added social proof from real customers. Reviews, especially positive ones, encourage users to purchase because others have already done so and had a positive experience. 

product page reviews example from party pastries

Page Design

There are certain elements of web design that apply to every page of your eCommerce store, but there are nuances for certain pages. 

Home

Your Home page is typically the most visited page on your website. And depending on your business niche, design principles may vary. 

Generally speaking, your home page can be divided into two parts: “above the fold” and “below the fold.'' Above the fold refers to the content that is visible on screen before users begin to scroll. Similarly, below the fold refers to any content that is visible after users begin to scroll further down the page.

Because the first few seconds of a visit are so crucial, your above the fold content has to keep users on your website. It should include a product or brand image with a clear CTA.

As users scroll further down the page, highlight your most popular products, value proposition, and brand identity.

Product(s)

Product pages are where users make buying decisions – you want to make sure they purchase a product.

Product Photos & Videos

It’s no secret that product photos are important. But just how important?

They’re the first thing that consumers notice when scrolling. Without high-quality product photos, customers won’t buy your product. 

To make your photos stand out, take photos against a consistent, aesthetically pleasing background. A plain white background is the most common, but it isn’t the only option.

Let’s say you operate a swimwear brand. Rather than a white background, taking your product photos at the beach, near a pool, or another tropical location might better match your brand image. As a bonus, it also allows potential customers to picture themselves wearing the swimwear in the same location.

Let’s take a look at another example. Consider Party Pastries, a pastry catering company for personal & professional events & celebrations. Rather than use a plain white background, they chose to shoot photos of their products on decorative tables, similar to where the pastries would be present at one of these celebratory events.

creative product photos example

If you’re really looking to upgrade your product photos, consider using user-generated content (UGC). Photos & videos of existing customers will help convince potential customers to make a purchase. 

Product Descriptions

To complement beautiful photos, you’ll need high-converting product descriptions. 

The most important thing to remember when writing product descriptions is to sell the benefits of your product, not the features. Consumers don’t care what the product is – they care what it can do and how it can improve their life.

And to make sure your descriptions resonate, write as if you’re chatting with a friend, not a stranger. 

Other

Even with great product photos and product descriptions, your product page layout is still important. Add a clear CTA, whitespace to balance the text & images, and reviews that boost trust and increase conversion rate. 

About/About Us

Consumers buy from brands, not products. That’s why your About page is so important – it allows you to share your brand mission, values, and impact with potential customers. 

Let your customers know how your brand came to be, what you stand for, why you do what you do, and anything else that might resonate with them. Then add photos that showcase your team, community, and products in action.

Contact

No matter how much information you provide about your brand, products, and policies, customers will still want to get in touch with you. When designing a Contact page, give visitors multiple options to do so:

  • Contact Form
  • Email Address
  • Phone Number
  • Social Media Icons/Links
  • Address & Map Location (if applicable)

Make sure you are clear about how customers should contact you. For example, if you only address questions about shipping & returns via email, let them know to avoid miscommunication.

FAQs

A Frequently Asked Questions (FAQ) page helps answer common questions for visitors about products, shipping & delivery, warranties, and more. Not only does it answer common questions for your visitors, it can also reduce the load on your customer service team.

There aren’t many design aspects to an FAQ page, but there are certain things to consider and be sure you include. Generally speaking, it’s best to sort the questions into categories (like the following) so that visitors can quickly find the answer they’re searching for. 

Shipping & delivery

How soon can customers expect to receive their order after purchasing? Do you offer free shipping? Let them know to avoid losing any customers at the checkout stage or dealing with misunderstandings post-purchase. 

Returns & exchanges

Do you offer returns? Exchanges? Only on certain products?

Warranties

Depending on the product, you may offer warranties for weeks, months, or even years. With warranties, customers may feel more comfortable purchasing from your online store. 

If you have one, make sure to clearly explain it to avoid any issues. 

Sustainability, packaging, etc.

Do you use sustainable packaging? Offset your shipping emissions? Let them know – it could just be the reason customers make a purchase.

Other

If there are any other FAQs that often arise when speaking with customers, be sure to add them. If one person has asked, it’s likely that another will ask the same question. 

The best way to find out what to include on your FAQ page is to speak with your customers (and customer service team if you have one). 

Policies

Policy pages aren’t meant to be beautifully designed pages. They’re meant to present legal information in a clear, straightforward manner. 

In any case, there are still certain policies to include. Always be sure to have your lawyer or legal counsel review these before adding them to your website. 

Shipping & Returns

To avoid any misunderstandings, chargebacks, or negative reviews, make sure your shipping, exchanges, and returns policies are explicitly clear. Let customers know exactly what to expect and when to expect it.

Privacy

Privacy policies are a must-have for any online business, and especially for eCommerce. In order to capture customer data for email/SMS marketing, retargeting, and more to grow your business, you have to let customers know that you’re collecting their information.

There’s no need to make room for this page in the main header, just simply link it in the footer at the bottom of the page. This is common practice, so customers will know exactly where to look.

Terms & Conditions

Though not always necessary (depending on your location), a Terms & Conditions page can protect your business in the event of legal issues.

And just like the Privacy page, place a link to it in the footer for easy access.

Landing Pages

Landing page design will vary depending on traffic source, audience segment, product type, and several other factors.

However, they should all follow one main principle – prompt the user to take a specific action. Whether it’s a purchase, subscription to your newsletter, or something else, the landing page should be designed with only that goal in mind.

Breaking down landing page design for every possible variation is outside the scope of this article, but there are some general design principles to follow. We’ll break down two important factors to consider when designing a landing page for your eCommerce website.

Traffic Source & Audience Segment

Let’s say you’re driving traffic to your eCommerce store via email marketing and Google Ads. Now imagine that all of these users are landing on the exact same landing page.

Let’s take a step back. If we consider the standard customer journey, users from these channels are in different stages of this journey. Thus, they shouldn’t land on the same landing page.

  • Email Marketing - These users have already subscribed to your list, meaning they’re familiar with your brand and your products. Depending on the email campaign, landing pages for email traffic should be designed to sell products.

 

  • Google Ads - These users have likely never heard of your brand but discovered it in search results. If they choose to click on your ad, it’s unlikely that they’ll make a purchase the first time they visit your website. Instead, the goal of this landing page should be to add them to your email or SMS list, where you can then nurture them along the customer journey, eventually resulting in a purchase.

In short, consider which stage the traffic is in, then design a landing page catered to that audience segment.

Product Type

Landing page designs will vary between eCommerce products. For example, a landing page for a clothing brand will look much different than a toy or nutrition brand.

To figure out what’s working in your niche, check out your competitors to see what’s working for them. But don’t be afraid to test out design principles that are working effectively outside of your niche.

Payment & Checkout

If you’ve implemented these web design principles, your customers should already be on the checkout page. And to make sure they complete the purchase, keep the checkout process simple, easy, and hassle-free with these basic tips.

Offer multiple payment options

Don’t give customers any reason to abandon the checkout process. Give them multiple payment options like credit card, PayPal, buy now & pay later, etc. so that they can pay how they want. 

Make it frictionless

Minimise the number of fields that are required. Customers will abandon checkouts if they are forced to enter too much personal information. 

Subscription/account signup should be optional

Though it may be tempting to automatically add users to your email list or a recurring subscription, it is ill advised to do so. If they didn’t opt-in, chances are they’ll unsubscribe later once they realise. 

Offer free shipping

Customers expect free & fast shipping – give it to them. Almost half of all customers abandon their shopping carts because of high or unexpected checkout costs including shipping, taxes, and extra fees. 

If you are unable to offer free shipping with your current margins, consider building the shipping costs into your product price or offer free shipping if customers spend enough money (ex. “Free Shipping on All Orders over $100”). 

Designing your eCommerce website is a special experience, but it’s not so simple. There are countless elements to include – design aspects, policy pages, payment information, and so much more.

If you’re looking to design your dream eCommerce store, get in touch with us today.

Build your eCommerce website

You might also like:

10 Reasons Why You Should Invest In a Mobile App This Year

man checks his phone at work

Mobile apps are taking over; and not just TikTok, but also in business, shopping, and commerce. 

Investing in mobile app development for your NZ business is essential for its growth. Here are ten reasons why.

1. Most users' time is spent on mobile apps

Users spend 90% of their daily screen time on apps and just the remaining 10% searching the internet. If you're struggling to get users to visit your website, building an app might be your next move.

2. Reach a global audience

Nearly everyone has internet access, and most internet traffic comes from mobile devices.

Mobile application development enables you to reach a global audience and connect with customers all over the world, promoting market expansion and increasing opportunities for business growth.

3. Increase users' accessibility 

Having a website for your business is great, giving customers a place to learn about your business, make purchases, and more.

However, investing in mobile app development will let you virtually put your business in their pocket. Mobile apps allow customers to access all they need about your business in one tap, anywhere and anytime.

4. Millions of people download apps every single day

In 2021, there were over 600 million daily app downloads. Make yours one of them.

4. Increase customer retention

New customers are difficult to acquire, existing customers not so much. Build an app for customers and offer exclusive content in the app to keep customers coming back time and time again. 

5. Build trust 

Having a mobile app makes businesses’ products or services more trustworthy for customers. 

96% of the top 50 online retailers in the UK and 94% of top 50 retailers in the US had at least one mobile app.

It also makes businesses more professional, as most companies nowadays have mobile applications.

6. Build a community

Building a community is one of the greatest ways to strengthen your brand image, improve customer retention, and increase average lifetime value.

Add features like posts, forums, and in-app messaging that allowing customers to interact with each other, discuss & review products, and help build an active community centered around your product or service.

These community members will then become ambassadors for your business in their own social circles, increasing your presence even further.

7. Increase customer engagement

Mobile apps give consumers a seamless, all-in-one experience with your business, putting your business right in the palm of their hand.

Rather than them continuing to visit your same website, create new, engaging content in the app to make them active daily users. 

8. Offer a better customer experience

A good mobile app should provide customers with everything they need to know about your products, and an easy way to learn more if necessary (customer service, FAQs, etc.).

Consumers will be able to make mobile transactions, get notified about offers and announcements, view product reviews, and so much more, all without entering a single store.

9. Increase sales & mobile conversions

Thanks to services like Amazon, eCommerce is growing faster than ever.

According to an Internet Retailer case study, adopting a mobile-focused marketing approach for 500 companies resulted in an 80% increase in sales, with 42% of mobile sales coming from applications. 

If you’re looking to grow your business, developing a mobile app is essential.

why do people use e-commerce apps

image source

10. See what users like

Market research is essential to good business.

Mobile apps can quickly and effectively collect consumer data and consumer preferences. Learning what content users most interact with will help determine the future types of content to develop, using data to drive content strategy for your app and other channels.

 

Activate Design has a firm understanding of the application design and development process and can help you maximise the opportunities this new exciting media has to offer your business.

If you're looking to build an app for your business, get in touch with us today.

 

You might also like:

Posted in Mobile Apps

11 Web Design Principles (and 3 Bonus Tips) to Increase eCommerce Conversion Rate in 2022

Along with pricing, market fit, and the product itself, web design is one of the primary factors that determines whether or not a potential customer makes a purchase on your website. 

Great web design is not just a beautiful website. Great web design also persuades users to take action through various principles, colours, shapes, and words. 

And ultimately, web design is largely responsible for how many products you sell on your eCommerce store. 

First, we’ll dive into eCommerce conversion rates, then we’ll get to how you can design your website to improve. 

What is conversion rate in eCommerce?

Conversion rate is the percentage of users that convert on your website, calculated by dividing the number of conversions by the number of visitors

In the case of eCom, your store’s conversion rate for purchase events is often the most important conversion rate metric. That’s because this purchase metric ultimately determines how much money your store makes. And because it’s the most important, it’s the one we’re going to focus on here.

Just as a note however, there are other conversion rates to consider such as how many people signed up for your email list after viewing a pop-up or registered for an event after being shown a splash page. 

What is a good eCom conversion rate?

Generally speaking, a “good” eCom conversion rate is generally between 2% and 4%.

However, certain industries have higher or lower average conversion rates. Similarly, different traffic channels have varying rates. For example, email marketing often converts at a higher rate than other channels such as SEO.

What impacts conversion rate?

There are so many things that affect conversion rate. In addition to web design, factor such as pricing, product to market fit, shipping times (and costs), lack of social proof, and so many more influence conversion rate.  

Why is web design important to conversion rate?

As mentioned earlier, eCommerce web design is not just about building beautiful websites. It’s about building functional sites that make people want to buy your products.

With poor web design, all of that time & money you spent to acquire users with SEO, Google Ads, email marketing, etc. will be wasted.

But with good web design, those users will convert again and again.

So without further ado, consider these 11 design principles when designing your eCommerce website.  

11 web design principles to increase your eCommerce conversion rate this year (in 2022)

1. Keep it simple

Oftentimes, web designers get carried away with web designs by trying to show off their skills. This is rarely a good thing.

Instead, great websites are easy to read, have plenty of space, and organized in a way that guides users to a specific action.

2.Clean up the main navigation and other menus

If users are looking for something, they’re going to start by looking at the main menu. So make sure that the most important links are present: products, contact information, about page, etc. 

If you have a lot of products, make sure they’re sorted in easily identifiable collections/categories which users can easily locate in a drop-down menu or by using filters on product pages. 

If users have trouble finding something, they’re going to leave your website. 

3. Add social proof

People rarely want to be the first to purchase something. Put them at ease by displaying reviews & testimonials from previous customers. 

Eliminate their doubts and they’ll purchase almost instantly.  

4. Reduce friction in the checkout process

This is one that a lot of eCom brands get wrong.

If someone has already added a product to their cart or is ready to checkout, don’t try to slow them down.

Eliminate any unnecessary steps between the add to cart action and the complete purchase. 

Capture only the important information (billing, shipping, etc.) and use up-sells and cross-sells sparingly to increase average order value (AOV). 

5. Use clear CTAs

Be explicit about what action you want users to take on your website.

For product pages, try using creative & actionable CTAs like “Get it Now” rather than just “Add to Cart. ”

For limited-time sales or events, try something like “Don’t miss out” or “Act now before it’s too late!”

Make your CTAs stand out with larger fonts, bigger buttons, and brighter fonts.

If you take away anything from these web design ideas, let it be this. Too many websites miss out on conversions because their CTAs don’t stand out. Don’t be one of them. 

Design your high converting eCommerce website!

See what we did there?

6. Use high-quality images & video (and optimise them)

Avoid using stock photos & videos at all costs.

Not only are other brands using them too, but they’re generic and won’t help improve your conversion rate. 

Use high-quality photos & videos that make your brand stand out.

Photos are great and have a rightful place on any website, but videos are the future. It’s no longer a question of “if” your brand should use video, it’s a question of “how.”

And the answer to how? Short and sweet.

The average human attention span is just 8 seconds, meaning you have less than 8 seconds to capture a viewer’s attention before they keep scrolling or leave your site.

If you’re creating video content for your eCom website, keep it under 8 seconds. If you’re creating long-form video content, make sure to change ideas every 5-10 seconds to keep viewers engaged. 


BONUS: Compress your images before uploading them to your website to reduce file size and improve page speed, another important aspect of UX & web design. There are plenty of free tools available online to compress images without sacrificing quality. 

7. Use channel-specific landing pages

I can’t tell you the amount of times I’ve clicked on a paid ad only to be taken to a brand’s generic product page, or even worse, their home page. 

Take them exactly where they want to go. Don’t make them do any of the work. 

If users are entering through a paid channel, make sure the landing page matches the ad headline & copy that they clicked on. Otherwise, they’ll leave your site and you’ll have wasted money on the click. 

If they’re entering from an email campaign about a new product or collection, make sure they land on a well-crafted product collection page. 

8. Upgrade your product pages

I’ve seen way more bad product pages than I have good. Fortunately for you, it’s incredibly easy to level up your product pages.

Sell the benefits, not the features

This is a timeless copywriting trick. 

Consumers don’t care about the features, they care about what it can do for them and how it will make them feel. 

Let’s say you’re selling weight loss supplement…

Consumers don't care that the supplement contains all the necessary daily vitamins or that it only has 10 calories.

They care that it's going to help them gain self-confidence, take their shirt off at the beach, and improve their quality of life.  

Again, sell benefits, not the features. 

And if you’re really looking to upgrade your product descriptions, pitch your customers like friends, not strangers

Use simple language and sell them as if you’re chatting with a friend. 

Use better product photos & videos

We already talked about optimising photos & videos on other pages of your website, but the ones on the product page are arguably the most important.

Again, avoid using any stock photos or videos from manufacturers or online marketplaces. They look generic and won’t help you sell your product.

Swap these stock images & videos for user-generated content (UGC). UGC is great because not only is it unique to your brand, but it’s another form of social proof that shows potential customers exactly how previous customers felt about the product. 

Consider asking your top customers to submit UGC. Or, if you’re still in the early stages of building your customer base, ask some friends if they’ll model for you. 

Potential customers want to see people like themselves using the product. So make it happen and watch your conversion rate skyrocket. 

9. Use pop-ups

Digital marketers & web designers alike are often split on whether or not to use pop-ups.

On one hand, they argue that users find them distracting and will exit the site once they see a pop-up.

On the other hand, they’re incredibly valuable if used properly. 

Let’s say you’re looking to build your email list so that you can notify subscribers about brand news, upcoming product launches, sales, and more. 

Displaying a pop-up that only asks for their emails is a poor user experience, which is what we’re looking to avoid. 

Now let’s say your pop-up offers them 20% off their first purchase if they subscribe. Now you’re more likely to add that user to your list and they’ll continue to shop so that they can use their discount. 

And be sure to test which pop-up offers have the highest signup rate. For example, try A/B testing 10% off vs. $10 off (adjust those as needed for your company) to see which has a higher subscribe rate. 

10. Apply urgency

Online shoppers purchase products out of urgency all the time because they don’t want to miss out.

Create FOMO by showing a countdown timer for when a sale is ending or a notification for a low stock warning .

11. Test, test, test!

All of these principles are meant to increase your eCom conversion rate. But unless you’re constantly testing what works for your audience and your products, you’re missing out on revenue. 

Test different video lengths & formats, different CTAs, and landing page designs to determine what works best for your brand. 

And 3 bonus tips that will maximise your conversion rate


Bonus #1 - Offer free (and fast) shipping

Consumers are accustomed to free (and fast shipping). In fact, 25% of potential customers abandoned their cart due to high or unexpected shipping costs.

If you can’t offer free shipping without destroying your margins, just raise the product price.

Once they’ve made a purchase, make sure to ship their order as soon as possible. 

Bonus #2 - Reclaim potential customers with email marketing

Speaking of abandoned carts…

Don't miss out on a potential customer just because they abandoned their car or browsing session. 

Use automated email sequences to send emails to those potential customers telling them that they "left their cart behind" or "Hey, we saved your cart for you."

These sequences are the gifts that keep on giving.

Bonus #3 - Increase AOV with cross-sells and upsells

Upsells and cross-sells are a great way to increase not only your eCom conversion rate, but also your AOV. 

By offering a similar product to the one they’ve already added to their cart or bundling similar products together at a discount, you’ll increase AOV and conversion rate. 

Put these tips into action (and test them!) and watch your conversion rates climb.

Or, if you're not feeling up to it, get in touch with our web design team and we'll build you the eCom site of your dreams. 

How to Make Your Website Mobile-Friendly (2022 Guide)

Of the 100,000 Google searches that occur every single second, 60% of those occur on a mobile device. That means that every second, 60,000 people around the globe are using their phones to search for a product, a service, an answer to a question, or something else. 

This means that the majority of people are no longer using their desktops to search, but phones instead. And if you’re designing websites with only desktop users in mind, you’re already at a loss. 

Not to mention, Google’s mobile-first indexing means that the mobile version of your site is used to evaluate the relevance of a page to a search query, not your desktop.

So if you’re looking for a sign to make your website mobile-friendly, this is it. The majority of your website visitors are searching on their phones and Google is crawling the mobile version, and you need to accommodate both parties. 

It might sound daunting, but we’re here to make it easy. Here are 10 actionable tips to improve your website’s mobile experience in 2022. 

10 Ways to Make Your Site Mobile-Friendly

1. Make it Responsive

A responsive design is just that, responsive. So whether a user loads your website on a desktop or a tablet or a mobile, all of the content will be shown properly to fit their screen.


Most website builders and content management systems (CMS) have responsive design built into their platforms already, but they can be buggy at times still. 


At Activate Design, we design beautiful mobile-friendly sites that your customers will love (and ours aren’t buggy). 

2. Keep it Simple

With a smaller display size, you can’t cram the same amount of text, images, and CTAs on a mobile as you can on desktops & tablet devices. It will look crowded and offer a poor user experience, and visitors will leave your website.

Basically, you’re going to eliminate some clutter. 

The best way to do this is to consider the main action you want users to take on each page, and design the mobile page to force users to take said action.

A great example is a booking page. If you offer a service that requires users to book on a certain time or date, the only thing that page should focus on is the booking, especially on mobile. 

Use a simple form, only capturing the necessary information (users don’t like long forms). 

3. Think Like a User

As a business owner or web designer, there’s a lot you want to tell users about your company. Oftentimes however, users don’t care that much.

They’re seeking certain information, and you need to provide it to them.

If you own a plumbing business, your website visitors want to know how to contact you and discuss their needs. For this reason, your address, phone number, and a link to your contact form need to be clearly visible on mobile.

Conversely, if you own an eCommerce business, visitors are searching for your products. Make it easy for users to browse & shop your products by adding a call to action (CTA) on your homepage. 

4. Use a Larger Font and Shorter Content Sections

Off the same thought as the “Keep it Simple tip, mobile screens are simply smaller than other devices. And for that reason, you need to use larger fonts and avoid text-heavy content sections.

The obvious advantage of larger fonts is that they’re easier to read without users having to pinch & zoom. And depending on page layout, users are quickly drawn in by larger fonts, especially headlines.

After drawing users into certain sections, you have to keep their attention. They don’t want to read long paragraphs. They want to quickly browse & scan for the information they seek. If it’s too long, they’re going to leave your website.

5. Make Your Buttons Bigger (and move them around)

It is so annoying to scroll through a website on mobile only to be forced to zoom in just to click a button. 

Don’t make this mistake on your website. Make your buttons bigger and easy to click, your visitors will thank you. 

Make them brighter too. After all, you want them to click on them right?

Remember earlier when we said to think like a user? You’re going to have to do that again.

If you want users to click on a button or CTA on a certain page, make it accessible. In other words, “think with your thumb.” Place the button in a location where users won’t have to switch hands or zoom in just to click the button.

6. Eliminate Pop-Ups & Text-Blocking Ads

As a general rule of thumb, you should avoid using pop-ups and text-blocking ads on your mobile website. They’re annoying and prevent the user from reading your content, which is what you want them to do!

For many businesses however, pop-ups are a great way to collect customer information for email & SMS marketing. So there are some exceptions if you must use pop-ups.

Delay the load so that it only appears when a user has scrolled more than 60-70% of the page and make it small & simple, so it doesn’t cover the whole screen.

7. Seriously, Get Rid of Flash

It’s 2022, get rid of flash.

It’s not supported by iOS (Apple) or Android devices, so mobile visitors won’t even see it.

Not to mention, it slows down pagespeed and is an SEO nightmare. 

Get rid of it. 

8. Add the Viewport Meta Tag

The viewport meta tag tells the browser that the width of the screen should be considered the full width of the page.

If the tag isn’t included in your HTML, the site will load on mobile the same as it loads on desktop, meaning users will have to scroll to the side to see the content. 

Fortunately, this is a super easy fix. Just add the following HTML snippet to each of your pages. 

 


9. Focus on Pagespeed

Pagespeed is critical for both users and Google, so you have to take care of this. 

There are so many tasks that you could do to improve pagespeed such as minifying code, eliminating render-blocking resources, leverage browser caching, and more. Unfortunately, if you’re not very tech-savvy, it’s best to avoid these tasks.

Fortunately, there’s one quick & easy way to speed up any website. And with minimal technical experience necessary, anyone can do it.

It’s called image compression.

Image compression can literally compress images such as JPGs and PNGs by as much as 80%, reducing their file size without sacrificing image quality. 

Smaller image files equal faster load times.

Use a tool like TinyPNG to compress your images. 

10. Allow Users to Switch to Desktop View

We’ve talked a lot about how mobile users want things to be simple and clear, but that doesn’t mean all users feel the same way.

There might be users who prefer to browse a desktop version of your website, even on a mobile device. Maybe they’re familiar with the desktop version and don’t want to spend time browsing around the mobile version, or maybe they just prefer the functionality of the desktop experience. 

Either way, you have to cater to these users as well. Add a button or link that easily allows users to flip between the mobile and desktop versions. 


If you’ve taken these 10 steps to make your site more mobile-friendly, you’re in good shape. And to be sure, check out Google’s Mobile-Friendly Test. Just enter your URL and the tool will do the rest. 

If you’d rather leave it to the professionals, we’ll build you a beautiful mobile-friendly website in our easy-to-use, custom CMS. Contact us to learn more! 

What is Technical SEO? The Complete Guide

Search engine optimisation (SEO) is the process of optimising your website to rank higher in search engine results for target keywords, thus improving the quality & quantity of traffic to your website.


And typically, it is loosely categorised into three types: on-page, off-page, and technical SEO.


If you’re familiar with SEO, you’ve likely heard of different on-page factors such as keyword research & metadata optimisation or off-page factors such as link building. Oftentimes however, technical SEO is overlooked because “it’s too complicated.” 


We’re here to make it easy. So let’s get to it.

What is Technical SEO?

As the name suggests, technical SEO involves optimising the technical components of your website such as site infrastructure, pagespeed, Core Web Vitals, and more.


More specifically, it involves making your website functional, user-friendly, lightning fast, mobile-friendly, and discoverable by search engines.

Why is Technical SEO Important?

The truth is, SEO is a three-pronged approach. Even with great on-page and off-page SEO, a website with poor technical optimisation will struggle to rank in SERPs. 


Think about it. Would you want to use a website that loads slowly, is hard to navigate, or isn’t mobile-friendly?


Absolutely not, right? So let’s dive a bit deeper and learn how to set your site up for technical SEO success.

10 Most Important Technical SEO Factors

1. Implement SSL (Secure Sockets Layer)

SSL is a security protocol that provides a secure channel between two devices operating over the internet. Often used interchangeably with Transport Layer Security (TLS), the newer version of SSL, it protects user data from hackers and serves as a vote of trust between users & search engines.


In fact, over 50% of first page results are protected with an SSL certificate.

How Do I Know If My Site Has a Valid SSL Certificate?

It’s pretty simple actually. 


If your website’s domain begins with “https://” rather than “http:, ” there’s nothing to worry about. Your site is secure!


Another quick way to check is to look at the URL bar or address field and see if there’s a padlock icon to the left of your domain name. If there is a lock icon present, it indicates that there is a secure channel between users and the website. Otherwise, you'll see "not secure" to the left of the domain, like the example below.

ssl icon

vs.

ssl bad example

This is one of the quickest technical SEO improvements you can make to your website, and should be at the top of your to-do list.


If your website was built by us, then no need to worry, we already took care of it! Your site is secure.

2. Make Your Site Mobile-Friendly

Over 80% of internet users are mobile users. If your site isn’t mobile-friendly, you’re missing out on A LOT of customers. 


In fact, Google’s “mobile first” approach to indexing means that Google is crawling your mobile site first, so it needs to be properly optimised. 


A responsive website design automatically detects which device is being used, and adjusts accordingly. 


At Activate Design, our websites are built for a beautiful desktop and mobile experience, and with technical SEO at the front of mind.

3. Use a Fast, Reliable Hosting Provider

Site speed is one of the most important technical SEO factors, and it all starts with fast, reliable web hosting. 


But what makes a hosting provider so good? Well, a few things…

Lightning Fast Speed

Website users value high-speed websites, preferably under 2 seconds. And trust us, users definitely take notice of slow websites.


As page load time increases from one second to 10 second, mobile bounce rate increases over 120%


With fast web hosting, you won't need to worry about missing out on traffic or losing conversions.

Location

Though everything through the internet appears to happen instantly, that’s not quite the case.


To provide your customers experience fast load times, your web hosting servers need to be as close to them as possible.


So if your customers are in New Zealand, make sure to use a New Zealand-based hosting provider.

99.9% Uptime

A fast website is useless if it’s never working.


Choose a reliable hosting provider with a high uptime rating, greater than 99%. Otherwise, you’ll have to explain to your customers why your site isn’t available.

4. Build a Simple Site Structure

As your business grows, your website will grow too. This means more pages and more to keep track of.


But with a well-defined structure and understanding of best technical SEO practices, it doesn’t have to be so overwhelming.

Flat Site Architecture

Whether it’s a service page, blog article, or contact page, every page on your website serves a purpose. Thus, you don’t want to hide any of these pages unless absolutely necessary (more on this later). 


As your homepage is generally the top landing page for users, all of the other pages on your site shouldn’t be more than 2-3 clicks away from the homepage. You want to make sure users can quickly navigate through the site.


This is what we call a flat site architecture.

Internal Linking

You can’t include every page on your website on the main menu. It wouldn’t look very good.


Instead, use internal links to connect sub-folders & sub-pages to develop a consistent hierarchy. 


As well, you should avoid creating any orphan pages, or those that don’t have any incoming internal links. 


Take a look at this site architecture.

flat site architecture

The pages highlighted in green are only 2-3 clicks from the home page and are easily navigable by search engines.


Now notice how the pages highlighted in red which are orphaned or 4+ clicks away from the home page are not crawled. This is poor technical SEO practice.

Consistent URL Structure

An often overlooked piece of technical SEO, consistent URL structure can make all the difference. 


Both users & search engines like simple URLs. They don’t want long, complex URLs with tons of folders and complex symbols. It needs to be easy to read.


Keep URLs short, sweet, and consistent. Let’s take a look at two examples for this page's URL below:

  • Bad Example - yourdomain.co.nz/blog/SEO/Technical/what-is-technical-seo-the-complete-guide/

Long and difficult to read right? Instead, opt for a simpler URL like the one we’ve chosen. 

  • Good Example - yourdomain.co.nz/blog/technical-seo-guide/

Typically the shorter the better, and be sure to include keywords in the URL as well!

5. Create an XML Sitemap

XML sitemaps are files that help search engines to better understand and crawl your website. In a way, it’s like a roadmap to your website, and an important component of technical SEO.


And within the roadmap, you can tell search engines information like which URLs are present on your site (and which are most important to crawl), when a page was last modified, and more.


And remember when we said that you might need to hide certain pages from users and search engines? Here’s what we meant.


Mark Pages As Noindex

If you have any pages that require an opt-in or a form to be submitted before viewing, you don’t want search engines suggesting those pages in search results. If they’re present, users may navigate to them without completing the opt-in or the form, rendering their page visit useless. 

The same applies to a “Cart” page if you own an eCommerce site. Obviously you don’t want users navigating to the cart page from search results without adding any products. 


Use a tag on pages that you don’t want search engines to crawl. 


As well, don’t include any pages in your sitemap, as that will confuse search engines, possibly leading to unintended URLs getting indexed. . 


Again, if you build your website with us at Activate Design, we’ll take care of your XML sitemap so that search engines may properly crawl your site.

6. Avoid Duplicate Content with Canonical Tags

One of the worst things you can do for your website is have duplicate content. If crawlers identify two identical pages on your website, they may mark the incorrect URL as , hiding it from users.


Adding canonical tags is a quick & easy technical SEO fix to avoid any situations like these.


Canonical tags (rel=”canonical”) are used in the head section of a page’s HTML to prevent duplicate content issues, indicating that only one of the duplicate pages should be indexed.


To do so, add a tag in the header to the duplicate page(s) and point it towards the canonical page, or the page that you want search engines to index.

7. Identify 404 Errors and Implement 301 Redirects

404 errors are bad for user experience.


In simple terms, a 404 error occurs when a link, whether internal or external, points to a URL on your website that is broken or no longer exists. These pages have no content on them and display “404,” along with a warning message on screen. 


If a user clicks on a broken link and it leads to a 404 page, odds are they’ll just leave your website. It looks unprofessional and you’re missing out on potential customers. 


Fortunately, these errors are super easy to fix. Once you’ve identified the error, simply set up a 301 redirect to the proper URL. You can use a free tool like ScreamingFrog to identify these errors.


Now, when users click on the broken link, they’ll be redirected to the proper destination. Problem solved. 


These are a super easy technical SEO fix and take little technical know-how to implement.

8. Reduce Load Time

Faster sites provide a better user experience, and a better user experience equals better rankings


It’s that simple.


Here’s a few things you can do to reduce load time and improve page speed:

  • Enable compression to reduce the size of CSS, HTML, and JavaScript files
  • Minify CSS, JavaScript, and HTML by removing spaces, commas, comments, formatting, and any unnecessary characters in your code
  • Use a Content Distribution Network (CDN) to distribute the load of content delivery across multiple servers
  • Reduce the length of redirect chains (every time a URL is redirected a HTTP request must be completed again)
  • Optimise images to reduce file size

If you’re interested in a beautiful, lightning fast website, contact us!

9. Fix Core Web Vitals

Google’s long awaited Core Web Vitals updated focuses on user experience, benefitting sites that load quickly and are easy to use. Core Web Vitals are broken down three primary metrics:

Largest Contentful Paint (LCP)

LCP is a load performance metric that measures when the largest content element on the screen becomes fully visible.


To provide a “good” user experience, your website’s LCP should be below 2.s. Between 2.5s and 4.0s “needs improvement,” and greater than 4.0s is considered “poor.”

First Input Delay (FID)

FID measures a website’s interactivity. Or essentially, how quickly users can interact with the website as it loads. 


To provide a “good” user experience, a web pages FID should be less than 100ms. Any time between 100ms and 300ms “needs improvement” while anything greater than 300ms is considered “poor.”

Cumulative Layout Shift (CLS)

CLS is a visual stability metric that measures how much a page shifts when loading. If a page is loading and you click on an element, but the site shifts as you do, that’s a poor CLS indicator. 


Unlike LCP & FID, it is not measured in time, but a good CLS is less than 0.1, while any shift between 0.1 and 0.25 “needs improvement,” and anything greater than 0.25 is considered “poor.”


If this seems overwhelming, don’t worry. Our experienced web developers will build your site to meet the “good” Core Web Vitals standards.

10. Connect Your Site to Google Search Console & Bing Webmaster

If you’ve made all these changes, congratulations!


But you’re not done yet.


As your website changes and search engines evolve, you’ll need to monitor your site for any ongoing technical SEO issues.


Fortunately, search engines provide tools such as Google Search Console & Bing Webmaster Tools to monitor any technical or performance changes to your site.


If you’re working with our SEO team, we’ll monitor these tools so you don’t have to worry. 


And if you’re worried about your website’s technical SEO,  contact our SEO team to speak about sorting you out. 

You might also like:

On-Page SEO: The Beginner's Guide

What is On-Page SEO? And Is It Important?


On-page SEO is the process of optimising website content for both search engines and users. It includes elements such as metadata & heading optimisation, image compression, URL structure, and more.

All everyone seems to talk about these days are backlinks. So if you’re wondering if on-page is even important, think again.

On-page SEO is fundamental to the success of your search engine strategy. Even with successful technical and off-page elements, your website will struggle to rank without the proper optimisations.

What’s the Difference Between On-Page and Off-Page SEO?

Unlike on-page, off-page SEO refers to optimising for signals that happen off of your website, such as backlinks. 

Similarly, technical SEO differs from on-page in the fact that it refers to elements such as pagespeed, robots.txt files, indexing, and more.

So let’s get into it. Find out how you can level up your SEO with these 10 on-page SEO tips..

10 On-Page Optimisations You Can Do Today

Whether you’re an expert or totally new to SEO, here are 10 on-page items you can take care of today to improve your position in search rankings and drive more organic traffic to your website.

Keyword Research

You’ve done your keyword research. Great!

Now what to do with it?

Use Your Target Keyword in the First 100 Words

This principle has withstood the test of time in the world of SEO. 

Use your primary keyword at least once in the first 100 words of your blog article, product/service page, and all of the other pages on your website.

Just as users read top to bottom, so does Google.

Just imagine you were writing a blog about the best flavour of ice cream. Imagine not mentioning the term “best ice cream” until halfway down the page. Wouldn’t make much sense would it?  

Keyword Density

Now that you’ve mentioned your keyword at the beginning of the page, how often should you use it in the rest of the article?

Keyword density is the amount of times a specific keyword appears on a given web page.

In the early days of Google, most SEO “experts” were cramming their primary keyword onto a webpage as often as possible, a practice known as “keyword stuffing.”

Nowadays, this is considered bad practice. Most experts agree that the proper keyword density is around 1-2%, meaning that your primary keyword should only appear 1-2x per 100 words.

Title Tag

Your title tag is one of the most important on-page SEO factors. It gives users and search engines a high-level overview of what your page is all about. 

Let’s stick with the ice cream example.

If you’re writing an article comparing different types of ice cream, you wouldn’t title it “Chocolate v. Vanilla: Which is Better?” right?

Without reading the article, someone looking at the title may think it’s about cake or protein powders or anything else. They’d have no idea if it was about ice cream, and they’d never click on the search result.

A better title would be “The Best Ice Cream Flavour: Chocolate v. Vanilla.” 

In short, include your primary keyword (or a close variation of it) in your blog title. And similar to your copy, try to place your keyword as close to the beginning of the title tag as possible.

And though you may want to write a long, descriptive title, it’s best to keep it short and sweet. Keep your title under 580 pixels in length, as Google will cut off any characters after the pixel limit. You want users to read the full page title in search engine result pages (SERPs) right?

There are several tools online that help you check optimal title tag length, such as ToTheWeb.

SERP showing title tag & meta description for best ice cream christchurch

Meta Descriptions

Meta descriptions are snippets that appear in SERPs directly below the title tag that allow users to understand what your page is about.

Though meta descriptions aren’t a direct ranking factor with Google, they’re still important to your on-page strategy.

To write a well-optimised meta description, include your primary keyword (towards the beginning if possible) and write a description that makes users want to click on your page. Using persuasive language that inspires the user to click on your page gives your page an indirect SEO boost.

And similar to title tags, meta descriptions also have an optimal length. Keep your meta descriptions under 920 pixels in length. 

Headings

Headings provide structure to pages, enabling users to quickly scan for the information they seek.

Take this page for example. It’s full of H2s, H3s, and H4s which help structure the page and make scanning easier.

As such, the headings differ in size, ranging in size from largest (H1s) to smallest (H6).

H1s

H1s serve as primary headings, and offer insight into the rest of the article. It’s important to include your primary keyword in the H1, and use persuasive language that makes them want to keep reading.

In this blog, for example, the H1 is “On-Page SEO: The Beginner’s Guide.”

H2s

H2s typically are reserved for main topics covered in your blog. In this blog, some of the H2s are “What is On-Page SEO? And Is It Important?” and “10 On-Page Optimisations You Can Do Today.” 

Though not as important as H1s, it’s important to use keywords in these subheadings. 

H3s, H4s, and More

Use these subheadings to further structure your article, and draw attention to supporting topics. 

Notice how in this section, “Headings” serves as the H3 and “H1s,” “H2s,” and “H3s, H4s, and More” serve as the H4s.

Image Optimisation

Images are great. They add a pop of color to your pages, and add plenty of design value when used properly.

Unfortunately, images are resource-heavy elements. They take a long time to load on websites, and pages that load slowly do not provide a great user experience.

But with proper sizing and compression, you can strike a balance between beautiful and fast.

First, you’ll need to convert your images into the proper format. Google recommends WebP (a next-gen format), but WebP files are not supported on Safari browsers. Instead, convert your images to a JPG or PNG type. These file types work just fine as well.

With the right file type, you’ll now need to compress your images. There are plenty of online tools for this process. One of our favourites is Tiny PNG. Tools such as these can compress images up to 80% of their original size, without sacrificing quality.

Sometimes, an image doesn’t need to stretch across the entire screen. Take your image : optimisation a step further by resizing the image to only the necessary size. A smaller image requires fewer resources to load.

Image Alt Text

Alternative text, commonly referred to as “alt text,” is used within your HTML code to describe the appearance and functionality of an image.

Alt text helps visually-impaired users better understand the context of an image, and search engines use it the same way. 

Just as with other on-page elements; it’s great to include keywords in your alt text, but remember to avoid keyword stuffing.

The purpose of alt text is to describe the image, and including keywords is a bonus.

So if you’re using an image of a child eating chocolate ice cream, don’t just define the alt text as “ice cream.” Try to be more descriptive: “child eating chocolate ice cream on a hot summer day.”


BONUS TIP: Save your image files with descriptive names (with keywords if possible). This can help Google better understand your images. 

Internal Linking

Internal linking is an underrated element of on-page SEO.

Internal linking is the practice of linking from one page on your site to another, typically a related page.

Linking between pages helps users and search engines better understand your content in a contextual sense by knowing which pages are related to each other.

To best structure your internal linking, link from high-authority pages to low-authority pages to increase the low-authority pages and make your entire website more authoritative as a result. 

And when linking between pages, be sure to use keyword-rich anchor text. This provides context to search engines about the link. You’ll notice a few keyword-rich internal links scattered throughout this blog. 

External Linking

Internal linking is the process linking between two pages on your website. External linking on the other hand, is the process of linking between your website and another website.

You may be thinking “why would I want to link to another website? They’re just going to click the link and leave my website.” Well, you’re not alone in that thought.

However, external links to related pages, especially authoritative pages, improve Google’s understanding of your page.  

URL Structure

Though URLs aren’t quite present “on-page,” they’re still considered an on-page SEO factor.

There are two things to remember when creating SEO-friendly URLs:

Keep them short and sweet
Include a keyword in every URL slug/extension

It’s that simple.

Let’s take a look at the URL for this blog:

url structure for on page seo blog

It's short, sweet, and includes a keyword.

Here's a few more examples for good measure:

  • Blog - www.icecreamcompany.com/blog/best-ice-cream-flavour/
  • Service Page - www.icecreamcompany.com/ice-cream/vanilla

Write High-Quality Content

Now that you have the page laid out, it’s time to write great SEO content.And though you may be a great copywriter, you may not be an expert SEO writer (yet).

To write content that ranks, it must be unique, valuable, and optimised for search intent.

Unique

If you publish an identical article to one that is already ranking #1 in SERPs, not only is it plagiarism, but it also won’t rank.

Why, you might ask?

Because it’s not unique. If it were this easy to write great SEO content, everyone could do it.

To make your content unique, you have to add more value than the pages that are already ranking.

So whether it’s a new tip, more authoritative resources, a new case study, or something else, your content has to be better and more unique than the ranking content that already exists.

Valuable

There are billions of websites on the internet, and millions of people writing similar content to yours. To stand out from the crowd (and search engines), your content has to be more valuable than the rest.

To add more value than your competitors, add more details, use newer (and better) resources, cite case studies, and include images/infographics that support your writing.

Search Intent

Your content may be unique and valuable. But if it doesn’t satisfy search intent, it’s effectively useless.

Your content has to satisfy the searcher’s intent, otherwise it won’t rank.

Generally, search intent can be broken down into 3 main types:

  • Informational - the user is looking for information, whether it be about the weather, recipes, or something else
  • Navigational - the user is looking for a specific website (for example, Facebook)
  • Transactional - the user is looking to buy/purchase something online, whether it’s a product or service 

You’re all set! Take these 10 actionable on-page SEO tips to your website and start growing your organic traffic.


And, if you’re looking for a full SEO strategy to boost your keyword rankings, contact us to speak with one of the SEO Specialists at Activate Design. 

You might also like:

Posted in Marketing

7 Steps to Your Dream Website | Activate Design

a web design team discussing how to create the perfect website

In addition to yourself and social media profiles, your website is often the face of your business. That's why, at Activate Design, we want to build you something beautiful. 

Through the entire process, we'll work with you on everything from copywriting to web design to hosting and everything in between. 

So let's dive in, and you can see for yourself how easy it is to build the website of your dreams.

1. WEBSITE CONSULTATION

We'll first discuss your goals for the website: necessary features & integrations, target audience and more. We then propose a site that would suit you. We have developed our own CMS (Content Management System) which is the background system that runs a website, and we have created this to meet the needs of clients who need a user-friendly website that will allow them to make changes to their website themselves with ease and efficiency.

Types of Websites Available

A Simple, View-Only Website

If you just need to provide information about an upcoming event, product launch, or store opening, a simple view-only website is the perfect solution. Additionally, it can serve as a landing page for Google Ads or social media ads. 

Advanced, High-Performance CMS Website

Our most popular option, a new, high-performance website can be the facelift your business needs. Once completed, our CMS interface makes it easy for you to add new pages, blogs, and more. And don't worry, we'll provide in-depth training on how to use the CMS so you can edit your website confidently. 

eCommerce Website

If you're looking to sell physical or digital products online, you'll need an eCommerce website to do so. With the same high-performance features as our popular websites, our eCommerce solutions allow you to add, edit, and remove products, descriptions, stock levels, and more, directly in our CMS.


2. WEBSITE PLANNING

We want to build you the website of your dreams, and doing so may require a few meetings with our team to get things right. We need to determine how you want your site laid out, which colors you want to use, and more. Once we've mocked up your site, we can get started on the build.

 

3. DOMAIN NAME

Your domain name is your website's unique address on the internet. If you don't already own your domain name, we can help you pick one that fits your business. If you launch another business, or need a second domain for any reason, additional domain names can be added at any time.

4. WEBSITE DESIGN

With a domain name and a better understanding of your brand, our designers can get started on your website. Our talented design team will make your site come to life with a beautifully designed header, buttons & images that jump off the page, and more. 

And if you're looking to further upgrade your website with a new or improved logo, our designers can help with that too. 

 

5. WRITTEN CONTENT

A beautifully designed website is just the beginning. In order to grow your business, customers need to understand your business.

We'll introduce you to our copywriters, who will get to know you and your business inside out. They will then put pen to paper (figuratively), bringing your website to life with words. 

Our copywriters are seasoned SEO writers, meaning your content will be optimised for search engines, so that customers can find your business online. 

*Our copywriting services come at an additional cost, and are not included in the cost of building a website, unless discussed previously.*


6. PUTTING THE WEBSITE TOGETHER

Now that the designers & copywriters have created all of the written & visual content for your site, our programmers put it all together, ensuring consistency & functionality.

Down to the last detail, our programmers will properly size images, align navigation elements, and optimise your site to make sure it looks great on both desktop and mobile. 


7. WEBSITE LAUNCH

Congratulations! With the final touches on your new website in place, you can celebrate.

With the help of social media, email marketing, search engines, and other marketing methods, you can start driving traffic to your new website and attract new customers. 

 

You Might Also Like:

5 Reasons Why You Need to Hire a Professional Designer

8 Things to Consider When Choosing a Web Host

6 Things to Add to Your Digital Marketing Strategy

Posted in Website Design

5 Reason Why You Need a Professional Web Designer

professional web designer NZ

Professionally developed websites are a powerful tool that any business can use to connect with customers and provide a positive experience for them. Sure, there are many build-your-own website building services out there, but they are only a ‘platform’, and the quality of the end result still depends mainly on your input and design skills.


Retail businesses employ professional shop fitters to design and build their store to ensure their goods are well displayed and enticing for customers. Why wouldn’t you want the same for your website? Whether you’re a consumer-facing or B2B business - your website is your ‘front door’ and usually the first interaction a customer has with your company.


When done well, a professional website can convert a casual browser into a valuable customer. However, some businesses still balk at the idea of paying for professional web designer services. But here’s the flip side—how many customers are you unknowingly losing because your website is turning them off? 


Read on as we offer five reasons why you should leave your website development in the hands of an expert.


#1: Good design attracts more customers

In many ways, maintaining a retail website isn’t that different from running a physical store. To make sales and become a profitable business, you need to attract customers. Brick-and-mortar establishments do this by investing significantly in merchandising.


An eye-catching window display will entice people into your store. They get a good idea of what you’re selling, and the attractive display draws them in for a browse.


People browsing your website are looking for a similar experience, namely:

  • An attractive layout
  • Products or services that are easy to find
  • A professional-looking business


#2: Web Developers make the browsing experience more user-friendly

In the same way as store layouts are designed to maximise sales - a professional web developer employs design techniques to keep the user browsing your website. A well-functioning user interface (UI) and a good user experience (UX) are two essential elements in a successful website. A good UI will provide users with good UX and ultimately encourage them to act, whether submitting an enquiry or making a purchase.


In addition to being easily navigable, your website should also load quickly. Research conducted by American content delivery network Akamai shows that 53% of users abandon visits to a website if a page takes longer than three seconds to load on mobile.


Your website should also be responsive across both desktop and mobile devices. Sites that are not mobile-friendly lose a significant percentage of users who primarily use their smartphones and tablets to browse and make online purchases.


#3: Good design improves recall

We’ve already talked about how you can use good web design to make a lasting first impression. Well designed sites also create a consistent experience for the user, which helps build trust and improves brand recall.


Take Facebook as an example. Both the website and the mobile app use the same dominant shade of blue—it’s become a recognisable trademark in its own right. When we see that exact shade of blue against a white background, many of us would instantly recognise it, even subconsciously, as the Facebook colours.


Here at Activate Design, our team of professional web developers includes a graphic designer. We can create a complete aesthetic for your business and apply it across your website, logo, letterhead, in-store experience and anywhere else your customers interact with your brand.


#4: Good design projects your credibility

Online, the adage about not judging a book by its cover is flawed by default. In most cases, users only have ‘the cover’ to go on, and 75% of them make judgments about the credibility of your business just from the way your website looks. This judgment may seem unfair, but it’s one of the realities of the digital marketplace that you must address.


An outdated website gives the impression that whoever is running it isn’t up with the play. Likewise, inaccurate or poorly-researched content can make users question your products or doubt the legitimacy of your business. Regularly updating your website will help you rank better on Google - this means keeping up with blog posts and refreshing your look from time to time. Generating good shareable content attracts more visitors to your site and lends your site more authority, which is good for SEO.


#5: Professional web developers optimise your site for SEO

Just like a TV commercial or a print ad, your website is an important marketing tool. Developing the site is only part of what a good website developer offers. To get your website seen by your target audience, you need a combination of strategies, including:

  • SEO Optimisation
  • Pay-per-click advertising
  • Social media promotion

Many DIY websites perform poorly in search results because they’re built on a standard template and are not optimised for SEO. Embedding keywords in your content is only one of many tools web developers employ to make sure your website is well recognised by search engines.


Many of these SEO techniques require coding expertise and up-to-date knowledge of SEO trends. Professional website designers engage copywriters to craft content that is rich in keywords and highly readable for the user.



The ongoing global pandemic has highlighted the importance of an effective online presence for companies, so they can continue to operate and adapt to changing circumstances. E-commerce has become an essential service, and you need the support of a professional web developer to ensure you deliver the best possible service to your customers.


Paying for a professional website designer might feel like a significant investment at first, but it will pay for itself again and again. With a well-designed website, you can showcase your brand’s best qualities, while differentiating yourself from your competitors.

 

If you are considering hiring a web designer for your website need —talk to the team at Activate Design. We do web design, graphic design, app development, branding, content marketing and SEO optimisation. We’d love to hear from you.

 

You Might Also Like:

Posted in Website Design