Garden of Life

Garden of Life, a subsidiary of Nestle Health Sciences, creates a wide range of supplements, probiotics, and sports nutrition products for all ages and all stages of life.

Grove Collaborative

Grove Collaborative has been delivering a curated collection of all natural home and personal care products since their inception in 2016. This certified B Corporation was founded by three friends in San Francisco with the mission to help families create a home that reflects the best in themselves. Rightpoint partnered with Grove Collaborative to create a mobile application as a natural extension of their existing shopping experience.

Woman comparing website on mobile phone and laptop

Stand Out from the Pack: Optimize Your Top Performing Product Pages for Contrast

As a consumer, superlatives influence a lot of my choices. I’m a runner, so I often search running, fitness, and outdoor magazines for their editor’s picks of the best training gear. Recently, while shopping for a running mask, I compared lists of the top tried-and-tested neck gaiters. Then, I scoured product reviews from multiple retailers, zeroing in on the highest ratings, the lowest ratings, and the reviews voted most helpful by other customers. Finally, when I was ready to take the plunge, I ordered from a website that seemed the most trustworthy among them by offering a quality guarantee and no-fuss returns.

The superlatives that convince us to buy, like best, top-rated, safest, or most-exclusive, emerge by comparing and contrasting.

By definition, making a decision means choosing one option out of a field of options. In the context of shopping online, consumers may compare a product to other similar products, or they may compare buying that product to buying nothing at all. If you’re a direct-to-consumer (DTC) retailer, when optimizing for conversion it’s important to ask: what information matters to your customers and why do they ultimately choose you over your competition?

As we head into the fourth quarter of 2020, ecommerce retailers and partners will be confronted with plenty of reasons to push for standing out among the crowd.

COVID-19 is still spreading with the potential to surge in the colder months, so transparency, consumer safety, and delivery speed may outrank other motivating factors. And because consumers may also have fewer opportunities to try products first-hand before buying online, it will be critical for product pages to show upfront as much relevant information as possible. Compound that with the Holiday season approaching, in which consumers tend to purchase from larger retailers offering the lowest prices, best shipping rates, and simplest return policies.

The challenge is to be flexible and adapt to your customers’ shifting priorities in order to win them over and win out among a multitude of competitors vying for the same outcome. But this should ALWAYS be true, in any quarter, of any year, with or without a looming pandemic.

How do you attract your customers’ attention and keep it? You have to earn it. Take your best-performing products and highlight:

  • How they compare with other products like them on your site.
  • How they compare with other products like them on your competitors’ sites.
  • How your site offerings compare with your competitors’ sites.

 

Some consumer behaviors are out of your control, like multi-tab shopping — opening multiple tabs to simultaneously browse similar product offerings across many stores. But you can change the way customers interact with product pages while they are on your site by engaging them with relevant content, conveying expertise and trustworthiness, and helping them discover for themselves why your site or your product is their best option. Give customers enough information to rationalize their decisions by:

  • Diversifying product images.
  • Reinforcing value propositions and differentiators.
  • Incentivizing purchases.
  • Empowering customers with direct comparison tools.

 

Let’s look at how some brands within the Fashion and Apparel, Electronics, and Health and Beauty verticals are effectively making a case for their products and services, keeping in mind that just because it works for them doesn’t mean it will work for you. While no solution is one size fits all, Something Digital’s Conversion Rate Optimization (CRO) program can help you determine where to focus, develop a testing strategy, and measure its impact. Instead of following your gut and potentially losing money on changes that may not actually work for your customers or may not be the most impactful to the experience, A/B test data-supported ideas. The insight gained through A/B testing will help you make better business decisions, resulting in a positive ROI.

Diversifying Product Images

Nike product pages lead with emotion, without saying a word. In this example, the gallery displays large, crisp images of the shoe at every angle. The motion of a video draws our attention to all facets of the shoe and how it looks on a real body. Full-width photography captures actual runners focused, sweating, and persevering while wearing the shoe. Nike also demonstrates the technical components of the product, which as evidenced, is engineered to be worn by the world’s top sports stars. Nike isn’t simply selling a shoe; they’re selling the promise of achievement through hard work.

Nike Air Zoom Pegasus 37 product page on desktop

A view from below of a runner jumping a hurdle wearing Nikes

Compare the same product on your average sporting goods site and you’ll likely find that while the static product photography is just as sharp when zoomed in and might even showcase the shoe’s high-quality, it doesn’t tell the story Nike does. Often, retailers fail to contrast isolated product shots with lifestyle photography of the product in action.

Nike knows their customers’ ambitions and goals. They anticipate the questions their customers will have about the construction, material, sizing, and capabilities of a product and answer those questions through a diverse collection of images and videos. Customers need not to look further for visual proof.

Consider A/B testing the impact of:
  • Increasing image sizes.
  • Showing more images per product.
  • Showing more image types (various angles, details, technical features).
  • Incorporating video into the gallery and/or product details.
  • Incorporating lifestyle images into the gallery and/or product details.
  • Adding user generated images.

 

Reinforcing Value Propositions and Differentiators

Nike not only imbues brand messaging into purposeful and compelling media, but they also assert a clearly defined position and tone of voice in their product descriptions. Each headline is either directed at “You” the individual (e.g., “Tuned to Your Preferences”), or it builds up the new technology (e.g., “How the Peg Keeps Getting Better”). Or, it does both (e.g., “Your New-and-Improved Pegasus”). The persuasive supporting text reinforces qualities that differentiate Nike from other activewear brands — longevity, durability, worn and loved by elite athletes — and backs up their claims by thanking “You” the customer for giving Nike the feedback that made this new innovation possible. They intend for customers to emotionally invest in the product and rationally justify buying it.

Content areas within Nike's product details

Wireless headphone brand Jaybird doesn’t wait for customers to scroll to the product details. They know that if a customer has multiple tabs open to compare their earbuds to others like Bose and Beats, they need to compete by displaying key differentiators upfront, above the fold. Assuming that not all customers scan for the same information, they include a both bulleted list of incentives below “Add to Cart” button, and above it, a short paragraph summarizing who the product is for (endurance athletes), how it might be used (long distance runs) and how the features that ensure success (long battery life, waterproof). Jaybird appeals to the type of consumer who makes a snap decision about a brand solely based on their first impression.

Jaybird Tarah Pro product page

For customers who are willing to scroll, the supplement startup Orgain breaks down content into digestible chunks of information on their product pages. Their bold, eye-catching nutritional facts highlight what sets them apart from the competition. In addition to a succinct and straightforward product description, they showcase their awards and certifications in a grid, with each block touting a visual badge (e.g., a Prevention Award), a headline confidently heralding a claim (e.g., “Proud Winner”), and a sentence to reemphasize their enthusiastic brand voice (e.g., “We’re obsessed about clean protein and it shows”).

Then, like Jaybird, they punctuate a list of other outstanding qualities with checkmarks, which serve to visually substantiate these claims. Instead of technical specs, Orgain opts for an FAQ. Their customers are likely to feel assured about the purchase and are less likely to waver or shop elsewhere because all or most of their questions have been anticipated and answered.

Orgain Protein Powder product details

Consider A/B testing the impact of:
  • Aspirational/emotional headlines and product descriptions.
  • Displaying key differentiators and benefits above the fold.
  • Chunking product details into easily digestible sections.

 

Incentivizing Purchases

Price is often the deal maker or breaker when customers are comparing products. If you can’t offer the lowest price, you can offer other amenities to compete.

Bose, like Jaybird, offers waterproof wireless headphones for a comparable price. But Bose doesn’t hold the punches. Above the fold, Bose employs no less than eight methods to incentivize purchases:

  1. Displaying the original price, or MSRP, with a strikethrough and the competitive sale price in a larger font than the product title.
  2. Including a link to ‘Find a Store’, giving customers the flexibility shop in either a brick-and-mortar location or online.
  3. Integrating with Klarna enabling customers to pay in installments.
  4. Conveying urgency by estimating a fast 2-day delivery if the customer orders within the provided time window.
  5. Reminding customers how much they are saving by buying the product on sale.
  6. Advertising free gift wrapping.
  7. Offering bundling, in this case, a 50% discount on charging cases when customers purchase the headphones.
  8. Rounding out the total package plugging their 90-day Risk Free Trial.

 

Bost SoundSport headphones product page

Jaybird similarly shows a strikethrough price, but not in a comparatively large font size. They also call out free shipping and a money-back guarantee, but by comparison with Bose, these incentives are minimized.

And what happens when you throw Amazon or Walmart into the mix? Alongside marketplaces, brands like Bose and Jaybird have the added competition of potentially more user reviews, 2-day delivery, discounts for credit card sign up, conveniently stored addresses and credit cards, and, of course, familiarity. To go up against these behemoths, what you bring to the table needs to stand out.

Consider A/B testing the impact of displaying the following near the “Add to Cart” button:
  • Payment plan details.
  • Free shipping messaging.
  • Loyalty benefits.
  • Return policy link and satisfaction guarantee.
  • Risk-free trial policy details.

 

Empowering Customers with Direct Comparison Tools

On Running, an athletic shoe brand based out of Switzerland, ensures customers are outfitted with the best possible shoe for their terrain and goals by enlisting three direct comparison features on their product pages.

First, within the size guide, customers can select their usual shoe size either from a dropdown of On models or from a dropdown of competitor brands and based on that combination, they will recommend a size. Second, within their technical specs, they have a direct comparison tool in which customers can see the shoe they’re looking at side-by-side with another On model. The data visualization is minimal, well-structured and stripped of technical jargon; customers can quickly scan back and forth between to two to make an assessment.

On Running size chart

On Running model comparison chart

Lastly, On serves up alternative products, enabling customers to preview other models and color assortments without leaving the product page they are currently browsing. The images are large enough that customers can compare the alternatives to the shoe featured in the main image gallery. Products are tagged with badges that indicate whether they are “New Generation”, “New Color”, or “Last Chance”, which could persuade customers who might like the original shoe, but associate “New” with “improved” or who might associate “Last Chance” with “lower price.”

On Running alternative products

And because the “Add to Cart” button sticks to the screen top on desktop and screen bottom on mobile devices, it follows users on scroll. While examining the cross-sells, customers can add items to the cart, including the original product, without scrolling back to the top of the page or navigating to a new product page. A customer might come to a decision at any moment. On not only equips buyers with direct compare and contrast tools, but they are also ready to capture the sale.

Consider A/B testing the impact of:
  • Adding comparison charts on page.
  • Adding a size guide.
  • Comparing the fit of other brands with yours in the size guide.
  • Showing alternative products with large images.
  • Add badging to distinguish products.

 

Closing the Loop

Before I suit up for a lap around the park, let’s review.

Customers make decisions by comparing and contrasting. Recognizable brands like Nike, On, Bose, Jaybird, and Orgain don’t just rely on their reputations to increase sales. Through research, they discovered that diversifying product images, reinforcing value propositions and differentiators, incentivizing purchases, and empowering customers with direct comparison tools all have a big impact on the bottom line. They earn their customers’ attention and keep it by investing in CRO, gathering observational and quantitative data on their customers’ behaviors, hypothesizing how they can influence a behavior change, testing out different tactics on their ecommerce sites, and monitoring the results.

At SD, our top priority is for your business to thrive. There is no one size fits all strategy to persuade your customers that you are the best choice for them, but our CRO program can help you form a clear picture of who your customers are, what their frustrations are, and what motivates them in order to rollout focused tests and measure their impact. Are you ready to hit the ground running? Contact us today to learn more.

NeoCell

NeoCell has been the trusted brand for collagen supplements for over 20 years. Their products help customers amplify their beauty by activating their inner self with the boost of collagen. Rather than covering up, NeoCell encourages customers to be their unfiltered self.

Malin+Goetz

Malin + Goetz is a New York based, family owned business focused on simplified skincare solutions for all skin types. Formulated with natural ingredients and proven advanced technologies, every product is gentle and effective without sacrificing luxury.

Animated gif of lipsticks

Give your site a product-driven makeover

This beauty brand’s trailblazing strategy will inspire you

Often during the design phase of an ecommerce site, stakeholders focus on perfecting the aesthetics of the homepage with the assumption that it’s the face of the brand and the first touchpoint. But if the homepage over-emphasizes the brand proposition while downplaying or delaying the ability to shop, it may not deliver the best ROI.

For starters, customer intent can vary. New visitors may want to see a broad range of products up front, whereas returning shoppers might view the homepage as a pit stop on the way to making their next purchase.

Consider this: when gathering requirements for any project, Something Digital asks organizations to prioritize their valued conversions, and nearly all of them define increased sales as their number one success metric. How can we help customers find the products and services they need easily and with fewer barriers?

Let’s do the math. In a typical journey, customers land on a homepage, browse a menu, navigate to a grid of products, narrow their requirements with filters, click through to a product detail page, and decide if they want to buy the product. In this scenario, it takes them five steps just to think about adding one item to a shopping cart.

How might the number of steps decrease if…

  • Most content blocks on the homepage linked to products?
  • The homepage showcased best-selling products that can be purchased on the spot?
  • The navigation linked directly to products?

 

But wait: what if paid search ads didn’t drive to the homepage all, but instead directed customers to the best-performing category?

It’s time to try a more efficient workflow. At Something Digital, we advocate for clients, researching trends across verticals and recommending ways to stand out in a growing, competitive B2C ecosystem. Let’s make a case study of one brand we’re seeing break the mold, Glossier, an innovative online beauty retailer. We’ll observe how they optimize the site’s navigation, homepage, categories, and product pages to guide both new customers and loyal followers into making quick, but informed purchase decisions. First impressions matter; here are some User Experience (UX) and Content Marketing tips to get them right.

One caveat before we look into their strategy: Glossier is always enhancing the site and updating content to keep it fresh. Visual examples described and shown here were captured in August 2019.

Navigation

Megamenus — navigation menus with multiple columns of category links and promotional calls to action — are ubiquitous in ecommerce. But Glossier’s stands out from the pack. Hover over any category on devices larger than a tablet to trigger a panel flyout menu featuring the image, title, and a brief description of every product in it. We have enough visual and verbal information to click through to a product directly without ever visiting a landing page. If the silhouette images aren’t convincing enough, pass your cursor over them to reveal real-life applications of the product. Not only is the desktop navigation streamlining the path to product, but it is also an immersive experience.

Glossier's desktop megamenu and mobile navigation

Glossier looks out for their mobile shoppers, too. In addition to the traditional hamburger menu, which when tapped, expands to display the navigation, we can also intuitively swipe left and right through a list of categories that display outside of the site header at all times on all pages. These categories follow us as we scroll, minimizing friction caused by expanding and collapsing the mobile menu.

Animation showing Glossier's search functionality

Bonus Feature: Shopping via search is as satisfying as browsing the desktop navigation. We see relevant results — a set of large product images, names, and descriptive badges —that dynamically update in real-time as they continue to type. And all results lead directly to products. No tapping return, no page refresh; Glossier shows us that the standalone results page is a thing of the past.

Homepage

There’s often debate about the first content area on a homepage: Should it be a rotating carousel or static image? Should it fill the full screen width or have ample padding around it? Should it be cropped to fit within the elusive ‘fold’? But what if we spent more energy planning not what is looks like but where it links to? While hero images on most sites drive to a category page, Glossier goes bold and links to a product detail page for a top-performing product instead. Click the lifestyle half or the packaged product half of the split hero image; either way you bite, you’re one step closer to commitment. Plus, Glossier updates the hero often, so every product gets its moment in the spotlight.

Glossier's desktop and mobile homepage

Then comes the holy grail of content: Six featured customer skin-care routines fuse editorial, User Generated Content (UGC), and merchandizing into one powerful sales pitch. Conceptually, it convinces us that flawless skin is attainable with an easy DIY regimen. Could it be possible that one day they might showcase YOUR routine? Clicking through any of the real names and faces routine takes us to an intimate profile where we can read about someone like us, follow their routine, and add the full set of products to our shopping bag. Glossier gives us the proof we need to make a decision, no Product Detail page (PDP) required.

Baymard Institute, a leading web usability research institute, recommends that homepages promote at least 30% of the site’s main categories to adequately convey product diversity. Glossier does this by alternating category Calls to Action (CTAs) with a selection of best-selling products from those respective categories. We have options: dive deeper into the catalog, add products to our bag right away, or get more information from the Quick View directly from the homepage.

Glossier's desktop and mobile quick view

Bonus Feature: Quick View is optimized for mobile. Many retailers neglect or disable Quick View for smaller screens, but Glossier takes on the challenge and succeeds; everyone from any device can view product details at-a-glance.

Product Listing Page (PLP)

This is not your average PLP. Within the first viewport — the visible area of the web page — a contextual image and marketing copy communicate the brand voice, while a capsule product collection shows the scope of the category. These featured products are given prime real estate and are strategically merchandized to align with promotions, email marketing, and inventory. We’re enticed to look at items we might not have considered before defaulting to our usual browsing patterns. Plus, there is no false floor. We get brand flavor and a substantial taste of the product set, encouraging us to scroll for even more crave-worthy content. Like the homepage, all products can be viewed, configured and purchased directly from the PLP.

Glossier's desktop and mobile product listing page

Presumably because they have a small product set, we can sort, but not filter products. However, we’re still able to efficiently find the serum, moisturizer, or gift set made for our unique skincare needs. I call this the “MVPL” effect: Minimum Viable Product Listing. First, products have short, unequivocal names that describe what they do. Next, each product has up to two badges: one that displays on top of the image to advertise deals, and one that displays below the name to plug special features. We circumvent the PDP, getting helpful details here and now. Lastly, by combining the price with the CTA, Glossier streamlines visual clutter. It’s clear exactly what we’re adding to our bag, how much it costs, and how much we’re saving.

Hovering over a product on Glossier's desktop product listing page

Bonus Feature: Every hover is an opportunity. For example, hovering a product image reveals an alternate contextual image, intended to surprise and delight us. Some static images hover to animated gifs, telling a story, without words, about who shops Glossier and how they use the products. These joyful interactions persuade us in a way that no bulleted list of benefits can. As for CTAs, button hover states differ when products can be added to our bag right away vs. when we need to make size or color selections. For instant purchase items, the bright, accessible text color on hover reinforces urgency. And in case we still aren’t ready to take the leap, hovering anywhere on the product triggers a reminder that Quick View is an option, too.

Closing the Deal

If we have sufficient information to bypass the PDP, great! If we need more, Glossier’s efforts to push traffic to their content-driven product pages pays off tenfold. Let’s roundup the top five most effective selling tools on the PDP. We’re convinced. Will you be?

  1. Silhouettes? Please. We need results!: The photo gallery, which includes images of real people who swear by the product alongside studio and model shots, is a visual testimony to quality. Plus, makeup captions mention which product variation the person is wearing.Glossier's desktop and mobile product detail page image gallery
  2. It’s all in the details: Everyone shops differently. Whereas I’m a sucker for clever descriptions, you may be more pragmatic and need a structured list of product details to trust the brand. Glossier’s specs vary in length and format, accommodating all of us. Perhaps cute, hand-drawn icons representing product benefits — like a peach for ‘plumping’ — resonate with you? Glossier has those, too.
  3. W.A.K.: As we mentioned earlier, UGC is GOAT. We can read, search, and filter reviews to fill in any gaps within the product specs. And we can rate and leave reviews — pics included — contributing to the community. Post-purchase, we can share our IRL routine and post our experiences to Instagram, where other brand devotees can shop the look. Word-of-mouth is powerful, especially sealed with a shade of raspberry pink.User generated content on Glossier's desktop and mobile product detail page
  4. We’ll have one of everything: Related products and cross-sells are effortless to add on. In essence, we can design our perfect bundle from a single page.
  5. Easy, breezy, beautiful, transparent: Glossier doesn’t have anything to hide, literally. We’re enticed to scroll through the enjoyably rich one-long-page layout and we’re never asked to expand, collapse, show more, or show less to get information. Fewer steps = a faster path to checkout.

 

Bonus Feature: Retailers often opt for a tabbed or accordion layout instead of a one-long-page layout, arguing that customers won’t want to scroll, but Glossier shuts that myth down. The primary CTA conveniently follows us on scroll, AKA Sticky Add to Bag. From anywhere on page, we can access the Buy Form, the area on the PDP where we select color, size, quantity, and/or any other product variant and add the item to our bag. We’re free to explore; the option to buy will be there for us when we’re ready.

Glossier's sticky add to bag feature on mobile

From header to footer, homepage to the shopping bag, Glossier’s ecommerce strategy is product-focused. Their online store experience is tailored for customers to make informed purchase decisions early on in as few steps as possible. Every CTA either navigates to product pages or allows us to bypass PDPs entirely — even signing up for the mailing list triggers a welcome email that links to, you guessed it, a product. And it works. According to Bloomberg, Glossier’s revenue more the doubled last year.

But it doesn’t end there. Glossier could further optimize the site in the future by displaying alternative products for zero search results, saving customer preferences to personalize content, or inviting new customers to take a quiz unlocking the best products for their skin type. They exemplify why retailers should consider deviating from the traditional checkout funnel, investing more in PDPs, and shortening the path to conversion.

Are you inspired to rethink your conversion strategy? Something Digital’s award-winning Designers and Digital Strategists can help you revamp your site’s UX and Content Marketing — and measure the revenue impact. Give us a call or email us to meet your business goals today.

Writer: Gina Angelotti, Interactive Designer

Malin+Goetz

Malin + Goetz is a New York based, family owned business focused on simplified skincare solutions for all skin types. Formulated with natural ingredients and proven advanced technologies, every product is gentle and effective without sacrificing luxury.

Nutranext Supplement Center

Nutranext is a leading B2B manufacturer of nutritional products, including solid dose, softgels, gummies, and powder supplements. Their impressive brand portfolio includes industry leaders such as Iceland Health, Rainbow Light, Champion Performance, Sedona Labs, Venus, Natural Vitality, among many more.