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