Remember custom filters and sort options

Product Filter Options

One way to personalize your customers’ experience is to remember how they sort and filter on your category and search pages. Consider whether or not your products have attributes that would be valuable to your customers to resurface.

What you decide to remember depends on what options you have and how it relates to your products. If a customer sorts by price, for instance, they’re probably price conscientious. Remembering this setting for them will save them time and surface the products they’re more likely to buy.

Examples you might consider remembering include:

  • Sorting by price or a selected price range
  • Sorting by customer rating or best sellers
  • Filtering by a specific brand
  • Filtering by an attribute (e.g. color, shoe size, model of phone they have, etc.)
 
Example: Amazon, car parts

Amazon has a number of product categories that will remember specific important filtering decisions you’ve made so that it can more easily surface relevant products to you. One of these examples is car-related products.

After you initially filter by a specific car model, Amazon will remember this for you. Since most people don’t upgrade their cars every other month, you’re more likely to want to purchase additional products for this specific car in the future.

Product Sorting
 
Example: Stacy Adams, category page for shoes

When buying shoes, something that doesn’t often change but is vitally important is your shoe size and width.

Here, these filtering options are prominently displayed on the category pages and your selection is remembered so that you don’t have to reselect these options as you continue to browse today and in the future.

Customers can always change the size if they’d like to buy a gift for a friend or if their shoe size changes.

Product Filter Options

Optimize your CTAs to drive more clicks

Call-to-Action Buttons

Regardless of which page you’re optimizing, your primary CTAs (e.g. Add to cart, Checkout, Sign up) should stand out to a buyer that’s scanning the page. Create a natural flow for their eyes, like waypoints in a GPS app, to your key CTAs.

 

Reflect on what the main objective for the page is

Each page has a primary action or actions that you want your visitors to do. For instance, product details pages aim to drive visitors to click Add to cart, while the cart page drives visitors to click Checkout. Your homepage and other pages may have more than one objective.

Focus on the objectives that are most important to you for that page and brainstorm how you can make the related CTA stand out on the page. Don’t let other page elements distract from or bury those CTAs. Try out different styles, verbiage, and placement to see what works best for your customers. Keep it simple.

 

Experiment with different designs

You want to avoid letting the key CTAs blend in with other CTAs and the page itself due to poor contrast or due to design choices. Make sure that when the customer is ready to engage, they know exactly where and how to do so.

Try different colors that contrast the background:

You’re looking to have the button stand out. One of the best ways of achieving that is to run colors that have high contrast against the background. Generate variations with a few different options to see what resonates with your audience. Keep in mind that you may want to also change font colors to compliment your new button colors.

Examples:

Low contrast / does not stand out:

These example CTAs use a gray, subdued color that blends in with the other page elements, which are also gray.

Different CTA Designs

High contrast / stands out:

These example CTAs use a bright color that makes them pop against the rest of the black and gray page elements.

High Contrast CTAs
Try different shapes, sizes, and effects:
  • Shapes – The shape of your CTAs might make a difference. Try different designs.
  • Sizes – Try out different button sizes. You want it large enough to stand out but not so large it overwhelms the page.
  • Effects – Test different effects (e.g. drop shadows, outer glow, border, banner, include icons within the button, etc).
Call-to-Action Buttons

 

Experiment with different phrasing

What your CTAs say can be as important as how they appear. Your visitors might respond really well to a certain phrase or tone and be less engaging with others. Try different types of text/language to uncover what works and what doesn’t.

  • Alternate keywords and phrases
  • Shorter phrasing vs. longer phrasing
  • Neutral verbiage vs. aggressive verbiage

Example of alternate keywords for an Account creation CTA:

  • Sign up
  • Register
  • Join now
  • Sign me up
  • Create an account
  • Become a member

 

Experiment with different placements

Brainstorm what areas of the page may help showcase important CTAs. You don’t want to make your customers hunt for the Add to cart or Checkout button, for instance. Make sure the CTA is visible (above the fold) when visitors land on the page.

  • Put important CTAs front and center.
  • Using non-invasive pop-ups for things like promos.
  • Test different locations on the page, for instance:
    • Above or below the product details
    • Near the product images
    • Below a set of options (e.g. shoe size)

Consider how you want the CTA to react as a customer scrolls on the page:

  • Static – Add the button to the page statically. If you scroll past the button, the button is no longer visible. If the page is long, consider repeating the button at the bottom.
  • Floating – Begin with the button floating on the page. As you scroll, the button stays in place, while the page beneath it scrolls. Could be a floating button or banner.
  • Static to floating – Have the button begin statically on the page. As you scroll past the button, the button becomes floating and stays visible as you scroll.

 

Consider what content should surround the CTA

The area surrounding certain CTAs, like Add to Cart, is a prime place to showcase options, offers, and security features. Reflect on concerns customers might have or what you may want to promote as they’re considering clicking the CTA.

Options and offers:

As the customer is thinking about purchasing this item and looking at the Add to Cart CTA, their eyes will naturally be drawn to the area around the button. Consider highlighting:

  • Options (e.g. quantity or auto-renew)
  • Offers (e.g. free shipping, free returns, or “Add XX items / more than $XX to the cart to get [benefit]”)
Example: e.l.f. Cosmetics
Free Shipping Offer
Security:

Some customers like to be reassured that their transactions are done securely. Consider adding a “secure lock” type icon with some language ensuring that transactions with you are safe and/or that you don’t share their info with any third parties.

Example: Amazon
Secure Transaction

Highlight ratings, reviews, and other social proof

Amazon Reviews

Shoppers tend to look for social proof to help guide their decision when they’re uncertain about making a purchase. You can alleviate some of the buyer’s concerns and often drive engagement by prominently displaying ratings, reviews, and other forms of social proof.

If you haven’t implemented a rating system yet, we recommend doing so. Once implemented, consider the following ideas and brainstorm ways of showcasing social proof for your products.

 

Leverage all social proof sources available to you

Think about showing ratings and reviews from both your customers as well as third-party sources that feature or rate your products. Typically, the more validation and context a buyer has, the more comfortable they’ll be to make a purchase.

Consider allowing your customers to provide:

  • A rating value – Either a numerical value (e.g. 10/10) or a star-like value.
  • Textual feedback – The added context can help some customers see if a product fits their specific needs or learn if there were any negative experiences.
  • Product photos – Depending on what products you offer, user-generated product images can give buyers a different perspective or additional context that may not have been captured in your photos and description. Consider gating this behind confirmed purchasers of the product.

Consider pulling in third-party sources:

If your products are featured on reputable websites, you might think about showcasing these ratings/reviews. You can build trust and help reassure prospective buyers that they’re making the right decision by highlighting these reviews.

 

Experiment with different rating designs

Think about how you might make the ratings stand out so that your visitors’ eyes can find it at a glance.

  • Size – Test larger font/shape sizes to avoid it getting lost against other elements.
  • Color – Same color as your font vs. something with more contrast to make it pop.
  • Shape – Instead of a star, try something unique to your site.
  • Treatment – Consider testing drop shadows, outline color, background color, etc.
Examples:

If your site has a star rating system, test different colors, sizes, and shapes to generate contrast against the rest of your page. Below are just a few examples of how some sites vary their rating appearance:

Different Rating Designs

Alternatively, you could try a different shape entirely. In a playful yet effective move, Newegg leveraged their name and logo (3 eggs) when they designed their rating icon. Instead of stars, they use little orange eggs:

Rating Icons

 

Experiment with different rating positions

Test different areas of the page that might lend well to emphasizing and showcasing the rating. Keep in mind that the best position for the ratings may also change per page type (homepage vs. category page vs. product details page). Imagine where your customers’ eyes might gravitate to and decide if that’s a good area to include the product’s rating.

Some common areas include (left, right, above, or below):

  • By the price
  • By product name
  • By product images
  • By the Add To Cart button
Examples:

Dermalogica (PDP) – Between the product name and price

Rating Positions

Best Buy (PDP) – Above the product images

Rating Above the Product Images

 

Experiment with how you present customer reviews

You want the full reviews to be out of the way, yet not buried. The rating should be linked to the review so that even if it’s lower on the page, customers should be able to jump to the reviews.

Position — Consider where your reviews might most optimally fit on the page (may vary on mobile vs. desktop), such as:

  • Integrated with product info group (e.g. within tabs or collapse sections)
  • Below product info or below recommendations in either a carousel, grid, or list

Verified purchase — You might also show when a reviewer is a confirmed buyer of the product to add a layer of authenticity.

Examples of verified buyers:

Stacy Adams:

Stacy Adams Reviews

Amazon:

Amazon Reviews

 

Consider leveraging third-party social proof content

Think about outside sources that you might be able to leverage that can help give your customers different insights and vantage points into some of your products. For instance, you might be able to highlight:

  • Curated social media (e.g. content sourced from Instagram or Twitter)
  • Reviews from trusted sources (e.g. news articles or review websites)
  • Customer ratings, reviews, or testimonials from trusted third-party sites
Examples:

LaserAway’s homepage includes a banner showcasing logos from reliable sources that featured positive reviews of their services. This can build trust and help reassure a prospective buyer.

Third-party Social Profiles

Similarly, Secretlab’s homepage has a banner with review excerpts from trusted sources and one with customer ratings:

Secretlab Banner with Review
Customer Ratings

Try emphasizing different types of content on the homepage

Consider testing out different ways of composing the homepage so that specific types of content are emphasized. When customers land on the page, what’s the first thing that stands out to them? Think about what your customers might be interested in or what you want to promote, and brainstorm ways to highlight that content to capture their attention.

You might emphasize/focus on:

  • The price of products
  • Promo content (e.g. sales, free shipping, discounts)
  • Average customer rating
  • Customer written reviews
  • Social media content
  • Product categories
  • Hero image
  • Brands
  • Services

Ways of generating emphasis:

  • Remove other elements to showcase one element (e.g. just display images)
  • Make the element larger than the other elements
  • Move the element up to the top of the page
  • Change the color of the element to make it brighter or provide better contrast
  • Give the element a drop shadow or outer glow
  • Have the element pop up
  • Use a background image of a person looking at or pointing to the element
 
Example: TigerChef (best-sellers + focus on price and ratings)

Part of TigerChef’s homepage highlights their best-selling products with a focus on:

  • Price for cost-conscious shoppers
  • Ratings for consumers that value social proof

When you glance at the listings, two things stand out:

  • The price
  • The average customer rating

To make these elements stand out, they’ve used:

  • A bright red font that pops against the other white and gray elements.
  • A larger font/shape than other content.
Highlight Best-selling Products
 
Example: Kate Somerville (promo offer)

A key objective is to get visitors to sign up with an email address, so when a new visitor arrives, they are encouraged to sign up with a 15% off offer. In this example, this offer was emphasized by having the promotion appear in a pop-up window.

Promotional Offers

 

If visitors decide to close the offer without signing up, the offer is minimized to a tab on the right side of the page.

The visitor can click the tab to reopen the offer and sign up.

Different Content Types

Test different product image presentations

Apple Mobile Homepage

Most of the time, online shoppers browse product images to help visualize owning the product before they make a purchase. You can often drive engagement by ensuring that your products are adequately represented in visual form. Consider experimenting with the following approaches on the homepage, category pages, and product details pages.

 

Design and content iteration

Consider all the different ways you might present product images. Iterate on your existing situation or brainstorm new ideas. Test out different types of images, different compositions, different treatments, and different placements to see which ones drive more engagement.

Hero image examples you might try:

  • Unboxed vs. in the box
  • Product by itself vs. in use
  • Background: Transparent vs. color vs. texture vs. real-life setting

Thumbnail image treatments you might test:

  • Different styles (e.g. drop shadow, colored borders, etc.)
  • Different shapes (e.g. squares vs. circles vs. rounded edge rectangles)
  • Different placements in relation to the hero image (e.g. left, under, right, or above)

 

Display larger product images (all pages)

Sometimes the products can sell themselves based on the imagery you present. Identify a good image that can be used for your hero or generate a collage to use.

On the homepage and category pages:

  • Showcase larger variants of the image to emphasize the product.
  • Reduce the text and other content that surrounds the images.
  • Test out different image sizes to see what resonates.

On the product details pages:

  • Present an even larger, more grand version of the image.
  • Surround the image with whitespace to draw visitors’ eyes in.
Example: Apple (homepage, desktop)

The Apple homepage showcases a number of their products, where the focus is on the product images. Very little verbiage is listed alongside ‘learn more’ and ‘buy’ links.

Apple Mobile Homepage
 
Example: Kate Somerville (PDP, mobile)

A large hero product image is prominently displayed above the fold, with minimal details to distract from it.

Scrolling down reveals additional details, like the product description, ingredients, and instructions.

The desktop version of this page showcases the product image on the left, utilizing about half of the display area above the fold, surrounded by whitespace to draw the visitors’ eyes in.

Kate Somerville Product Page

 

Include multiple images and angles (PDP)

While one hero image of the product is good, several images are often even better. Anything you can leverage to help the customer imagine how owning the product might be before they purchase it can only be helpful.

Consider including images of the following:

  • Different angles of the product
  • Different versions of the product (e.g. colors or sizes)
  • Images of what’s included in the box (e.g. charging cable or each item in a kit)
  • The product by itself vs. the product in use by a person (e.g. phone case in hand)

How you might present the extra images:

  • Small thumbnails to click through
  • A carousel that scrolls automatically or that can be clicked through
Example: Amazon (PDP, desktop)

Amazon often has several product images that you can cycle through. In this example, the product is a phone case, where different angles are important to cover. Shoppers are interested in specific things, like how much space is around the charging port, how thick the case is, and how much the case extrudes beyond the screen and camera.

If the images don’t answer the buyer’s questions, they’re more likely to look elsewhere.

Product Image Presentation

 

Leverage rollovers (homepage and category pages)

Rollovers are a good way to simplify the page while still allowing you to present added info or imagery. Customers will see several larger images at first glance, but when they mouse over an image, additional content can appear.

Common use cases:

1) You might want to make the page more visual, but you’re worried that customers need some info that’s already on the page. You could move this info into rollovers to keep the customers’ first impression clean and visual.

2) You might consider pulling some info from the product details page (PDP) into a rollover so that customers have access to it without having to click into each PDP. This would save steps in the buyer’s journey as they browse your products.

Examples of content you might present in a rollover:

  • Display the price
  • Display similar products
  • Display a product description
  • Display the Add To Cart button
  • Display additional images or context
Example: Dermalogica

Dermalogica currently employs rollovers to present different images of their products.

Image Rollovers

Original version:

Presents an alternate image of the product in use with a “quick shop” CTA, which opens a product details pop-up and an Add to Cart CTA. The alternate image shows customers the consistency of the product and helps them envision using the product.

Dermalogica Quick Shop CTA

Mockup:

Presents a different approach one could take, where the overlay contains some product details, pricing info, and the Quick Shop CTA (alternatively, the Add to Cart CTA). This approach keeps the page clean while still presenting contextual info when it’s relevant.

Personalize the homepage for each buyer

Your customers are individuals. Leverage Intellimize to tailor their experience so that it feels more personalized to them. Meet your customers where they are and showcase only relevant content that they’d be interested in.

 

Reflect on what you know about your visitors

It’s important to take stock of what you know about your visitors. The more you know about your visitors, the more impactful your ideas are likely to be. Take some time to think about what sources you might have access to that would hold info and insights into your visitors. Examples might include:

  • Whether they’re a new visitor, returning customer, or a VIP customer
  • What they do on your site (the path they take and their behavior)
  • How they came to your site (i.e. track with UTM parameters)

 

Tailor by customer type

Consider generating personalized messaging and/or promos geared towards returning customers, customer loyalty, or high valued customers (e.g. membership program).

Messaging might include:

  • A greeting or welcome message (e.g. “Welcome back!” or “Good to see you!”)
  • Membership-specific verbiage (e.g. “As a loyal member…”)
  • Non-member of membership (e.g. “If you sign up for a membership…”)

Promos may include:

  • Free gift
  • Discounts
  • Free shipping
  • Referral bonus / discount

 

Tailor by actions taken and behavior

Consider leveraging what they purchase:

  • Buy again – Highlight products they’ve purchased before that make sense to buy again (e.g. acne cream, coffee, gift cards, etc.). Consider featuring these items when they’re on sale.
  • Might also like – Recommend products that are similar to or complement previous purchases (e.g. when buying a battery-operated device/toy, recommend the related batteries).
  • Showcase frequented categories – Feature categories that contain products they’ve purchased from before. Perhaps after they’ve made 3 separate purchases from it.
  • Customers also purchase – Suggest products that customers have purchased alongside or after a product this customer purchases.

Consider leveraging what they view:

  • Top sellers – If some of the best-selling items had been previously viewed by the customer, maybe move those items to the front of the list for social reinforcement.
  • Treat yourself – Highlight products they’ve viewed more than once but haven’t purchased yet. If you have a wishlist feature, leverage that too.
  • Pick up where you left off – Show categories that the customer frequently visits, viewed a number of products from, or last visited.

 

Tailor by UTM parameters

Consider tracking which marketing efforts your visitors saw before arriving on your website with UTM parameters and leveraging the same imagery, keywords, phrases, and special offers from the ad to compel visitors to drive engagement.

Unique UTM parameters attached to a given campaign can let you know:

  • What specific campaign the visitor encountered
  • What offer or product was presented
  • What the creative/messaging was
  • What the target audience was

Components of that campaign you might reuse on the homepage:

  • Hero image
  • Phrasing and keywords
  • Tone, intent, special offer
Example: MasterClass.com

In this example, a Facebook video ad features former World Chess Champion Garry Kasparov promoting a class on how to play chess. Clicking the ad opens the website to an image of Garry showcasing the chess class and the 50% off promo.

Personalize Your Homepage

This is a much cleaner, tailored experience that focuses on my interest in chess, rather than the generic homepage that doesn’t even include the chess class.

Showcase Relevant Content to Users

Try shorter messaging and different tones

Shorter Messaging

Try testing out different approaches to how you say what you want to say. Your customers might respond better to simpler phrasing or a shift in the tone of your message.

 

Word count: Less is more

That old saying “less is more” is definitely worth considering when optimizing your homepage. If you take a minimalist approach, there will be fewer elements on the page to distract your audience and your customers’ eyes will more easily focus on what’s left.

Whitespace is our friend

Use empty space and images to direct the customer’s attention to your key objectives (e.g. navigation, promos, CTAs, or products). In general, our eyes are naturally drawn to follow patterns and the emptiness can act like roads for our eyes to follow.

Focus on a few objectives

Pick a small number of key objectives and let those items and the supporting images, text, and CTAs be the focus of the page. You might even want to generate several variations that highlight different groups of objectives, depending on what your key goals for the page are.

Example: Microsoft’s homepage on a mobile device

The image on the left is the original version and the image on the right is a mock-up:

Shorter Messaging

While the initial view of the homepage is fairly simple (a single image, a short header, 4 lines of text, and 2 CTAs), a few small tweaks to further simplify the text can have a positive impact.

Overall, the simplified version is cleaner and easier to consume on mobile devices.

  • The overall intent remained the same between the versions
  • Reducing the number of words and rearranging the keywords allows for less text to scan
  • With more vertical space to play with, the image can come down (so that it’s not cropped), allowing customers to see the full range of devices as intended.

 

Try different approaches to your verbiage

Consider how you say it, not necessarily what you say. How you deliver the message can make all the difference in getting a customer on board. Think about how you’d talk to the visitor if you were talking to them in real life. Often your tone will change based on how many times you’ve met the person and what their perceived level of interest is.

Test different ways of saying the same message. For instance:

  • Direct vs. casual
    • Direct: “Buy now”
    • Casual: “Consider these holiday favorites”
  • Just the facts vs. conversational
    • Just the facts: “See results in 48 hours.”
    • Conversational: “If you’re looking to place a safe bet, check out this product. Our customers can’t get over how quickly they see results. In just 48 hours, you’ll feel like a new person!”
  • Features vs. Benefit (i.e. “what we do well” vs. “your problems we can solve”)
    • Features: “Our skincare products are proven twice as effective as our leading competitor.”
    • Benefit: “You deserve beautiful skin. I promise to help you get there.”
  • Scarcity vs. abundance (e.g. “Only 3 spots left”)
    • Scarcity: “Order now! Only 3 items left”, “Only 10 hours left in the sale.”
    • Abundance: “New designs daily, keep checking back and we’re sure you’ll find something you like.”
  • Humor vs. no humor
Different Ways of Messaging

Showcase what’s important above the fold

The concept of “above the fold” originates with newspapers, where the newspaper was folded and only a portion of the page was visible at first glance. The industry learned that they must present the important, attention-grabbing content on the visible part of the page to gain interest.

This idea is just as important today where all of our content is online and on screens. The new “above the fold” is the visible part of the page you see when you first land on the page.

 

Present what’s important above the fold

Present the most important content above the fold, so the customer is exposed to it without needing to scroll down. This content is often the most impressionable.

What’s important, you ask? That will vary based on what your objectives are for the customer and what resonates with them. Try variations that showcase different types of key content. Possible examples include:

  • Account creation
  • Mailing list signups
  • Best selling products
  • Seasonal content or products
  • Promotional offers (e.g. sales, discounts, free shipping)
  • Recommendations (i.e. “based on your previous purchases, you might like…”)
  • Reminders (i.e. “Treat yourself to one of the items on your wishlist”)

 

Push additional info down below the fold

Leverage your navbar and the area below the fold to highlight additional content, products, and pages that didn’t make the “above the fold” cut.

Consider restructuring the page below the fold

You might try variations with different design structures like collapsible sections, cards with short intros and learn more hyperlinks, or images with mouseover popups to maintain a minimal approach while still guiding your customers towards additional content and products.

Alternatively, remove some of this content altogether

You might even consider removing some of that additional content entirely from the page to achieve a more minimal design. Again, the fewer items the customer has to scan and scroll through, the more focused they’ll be on what’s left.

 

See it in action

In this case, Target focuses on pushing visitors to their seasonal products (Easter). Visitors that land on the homepage are presented with the following above the fold:

  • A hero image/collage that focuses on easter and bunny themed products
  • Messaging to support their objective of driving customers to these products
  • A hero CTA in the center of the page that goes to a curated category page
  • A navbar at the top to sign in, search, or browse specific categories.

As the customer scrolls down, they’re presented with additional seasonal promotional content (which may be above the fold for some viewers), info for contactless shipping options, and then it dives into curated sales and other product categories to browse.

Test ways of guiding visitors from the homepage

Curated Content

Think about where you want your visitors to go from the homepage and test out different ways of organizing the page to effectively guide them to that destination.

 

Try focusing on a guided experience

Consider generating variations that present a simplified version of the homepage with a guided experience. Imagine, for instance, that your homepage was just the title and six image-rich tiles. Each tile thoughtfully groups your products by a common element, which leads customers down a structured path towards products they’re interested in.

For instance, the Dermalogica homepage has a promo section followed by four category tiles above the fold, which represents a different reason customers might have for visiting. Additional options are available in the navbar and below the fold, allowing customers to browse further.

Shop by Category

Brainstorm different ways you might try to group your products to meet your customers’ needs and interests. Try different variations with different groupings to see what works best.

Categories

Sometimes products have a commonly known theme that lends well to form natural groups of products. These more obvious categories sort of make themselves. For instance:

  • Games, Movies, Music
  • Dairy, Meats, Vegetables
  • Hammers, Screwdrivers, Saws, Drills
  • Board Games, PC Games, Playstation Games, XBOX Games, Nintendo Games

For instance, a grocery store like Safeway offers products that naturally fit into different food categories that are commonly thought of by most shoppers:

Popular Categories
Attributes

You could also explore attributes that your products have in common, but this type of categorization may only be relevant to some products. The color of a car can be a big part of the buyer’s choice, for instance, but the color of chewing gum likely has no relevance to a buyer.

Reflect on your products and decide if there’s a subset of products that share common characteristics that would be important or relevant to your buyers. Examples may include:

  • Colors
  • Genres
  • Customer behavior (e.g. best sellers, most wanted, highest rated, etc.)

For instance, Black Rifle Coffee Company can group their coffee by the type of roast (i.e. light, medium, dark) because this is something most coffee buyers are interested in.

Product Characteristics
Solutions or intentions

Finally, something you should consider is identifying what your products might solve or what the customer might intend to do with your products. This concept is perhaps the most difficult to brainstorm, but can often lead to real success.

Customers are often looking to buy a product with some use in mind. Perhaps they only know what they want to achieve and aren’t sure how to achieve it. When you present categories based on what the customers’ intent might be, you might open a new avenue to explore.

Some examples might include:

  • Hardware store: In addition to grouping by tool type, you could group by what the tools are used for Woodworking, Decking, Plumbing, Roofing, etc.
  • Toys: Could group by applicable age range or how the toy is used (e.g. field games, tabletop games, pool toys, rainy day activities, etc.)
  • Skincare products: Could group by how the product is applied, the product’s consistency, what part of the body the product is designed for, or what skin condition the product is intended for.

For instance, one way Kate Somerville groups their products is by the condition that the product addresses.

Product Grouping

 

Try focusing on search

Putting search front and center can be a good play to run if you have a lot of products, a complicated category tree, or great search functionality. In some cases, changing the homepage to focus solely on search can drive better results than carefully curated category pages.

If you’re considering this approach, here are some suggestions to think about:

  • Make the page as clean as possible to draw visitors’ eyes to the search option.
  • Perhaps you add more context below the fold for customers that are more into browsing.
  • Offer a wide variety of search filters and sorting options to let customers refine results.
Example: Design By Humans

The content above the fold on the homepage offers a large search bar at the top for customers to look for different designs, while still offering browsing options in the navbar cleanly and unobtrusively. Below the fold are additional browsing options by curated categories.

Above the Fold Content

 

Try focusing on browsing

You could showcase products on the homepage to encourage browsing for the casual shopper that isn’t sure what they’re looking for yet. A few options you might highlight products by include:

  • What’s on sale
  • Popular categories
  • Best selling products
  • Categories and products based on the customer’s behavior:
    • Categories the customer previously viewed
    • Products the customer abandoned in the cart
    • Products the customer purchased before
    • Products that are complementary to products they’ve purchased before
Example: Amazon

Amazon provides a mix of browsing options and categories to choose from on their homepage. In this example, you see two different ways to present “best sellers” by category to browse from. Each section presents large images of the products on carousels to flip through.

Best Sellers by Category

Try focusing on curated content

Another approach might be to curate some specific content or products and emphasize those items above all other content. You could add additional navigational options in the navbar or below the fold, but the focus would be on the content you’ve hand-picked.

Example: Stacy Adams

In this example, the focus is a large hero image that directs customers to new arrivals.

Curated Content

Form validation to qualify prospects

Form validation can be a good option to leverage if you want to filter out less qualified leads so that more of the prospects converting are highly qualified leads. You can let the less qualified leads filter themselves out by defining certain criteria that you find less desirable, and then let form validation be the gatekeeper.

The criteria you choose to filter out will vary based on your key business goals and decisions. Examples might include: 

  • Email address (excluding personal email addresses)
  • Employee count/company size
  • Position in the company
  • Country or region
 
Example: Segment’s demo form

Segment, for example, requires that you enter a business email address. This might filter out smaller businesses that run their company out of a personal email address.

When you enter an email address on the left CTA, it takes you to a slightly longer form, where the email address is pre-populated.

If a personal email is entered, it prompts to use only a valid business email address: