The Mobile Makeup of Instagram’s Beauty Success Stories
Social media has a lot to answer for. Thankfully though, it’s the viral nature of user-generated content like “selfies” that has helped to elevate the profiles of some of the most exciting and emerging brands in the beauty sector today.
“Mirror, mirror, on the wall, who pulls the best ‘Duck Face’, of them all? First, let me take a selfie.”
Instagram, in particular, has acted as a springboard for edgy cosmetic retailers like Glossier (869k followers), Milk Makeup (343k followers), ColourPop (5.3m followers) and Lime Crime (3.2m followers), creating cult-followings and celebrity-backed fan bases. Through the use of hashtags like #GlossierPink, #LiveYourLook and #ColourPopMe, their following is growing from strength-to-strength.
More recently, Rihanna launched Fenty Beauty, which only last month was awarded the accolade of featuring in TIME Magazine’s, “The 25 Best Inventions of 2017”, for its ground-breaking inclusivity. Since the brand’s Instagram launch at the beginning of September, it’s already racked up an impressive 2.4 million followers.
With such a rapid rise to social stardom, an equally-enriching online shopping experience is an absolute must. But, how do you emulate the appeal of Instagram to this ‘Gen Z’ and ‘Millennial’ cohort? And on a mobile device, where these users are already interacting with Instagram?
Glossier (glossier.com)
Founded by the superwoman that is Emily Weiss, Glossier debuted its first line in October 2014 — four years after Emily launched her hugely successful blog, “Into the Gloss”, and grew it to be the beauty behemoth it is today.
With early-stage, financial investment from renowned customer-centric, Venture Capital firm, Forerunner Ventures, (also run by another superwoman, in Kirsten Green), Glossier is already well on its way to following a similar path to success.
Emily’s intent behind the launch was to create a range of beauty products that women just can’t live without as part of their daily regime. With a focus on celebrating “real girls, in real life”, there’s a real community vibe among Glossier’s fan base. It stems back to the loyal and influential readership established and maintained throughout the evolution of Into the Gloss.
The now iconic, pink association with Glossier, epitomises everything the brand represents — a sense of fun, coolness and vibrancy.
Milk Makeup (milkmakeup.com)
Unconventional, experimental make-up brand, Milk Makeup, was conceived from a full-service creative studio — not your typical breeding ground, for a beauty startup.
In much the same vein to how the Factor brothers bought the Smashbox Cosmetics brand to life in ’96, Mazdack Rassi’s Milk Makeup venture was also born out of a photo studio. It was the vision of he and his wife, Zanna Roberts Rassi (Senior Fashion Editor of Marie Claire Magazine), to create a line that doesn’t just focus on how you build your look, but rather what you do with it. Not only that, they wanted to create something uniquely inspired by their studio, and its NY and LA surroundings.
Their efforts resulted in a paraben-free, cruelty-free product offering that prides itself on utilising high-quality ingredients, aimed at championing diversity, and a desire to live life limitless, as embodied through the #LiveYourLook hashtag.
ColourPop (colourpop.com)
Born and raised in LA three years ago, the Insta-famous ColourPop Cosmetics is worshipped by vloggers and 5.2 million Instagram followers alike. Set up with the intention of targeting primarily millennial makeup enthusiasts — the aptly named, “ColourPoppers” & “ColourPopettes” — brother and sister duo, Laura and John Nelson, made a conscious decision to market the brand via social media. It turned out to be a stroke of genius.
ColourPop pride themselves on being wallet-friendly and 100% fur baby-friendly, bunny-approved. They only test their products on humans — those based at their Oxnard-based, Southern California HQ, to be exact!
Okay, so ColourPop might not have quite the backstory that some of their competitors do. Nevertheless, when it comes to the range of shades available for the eyes, lips, face and brows, they do live up to their name. Especially, with vibrant-sounding bestselling products like “Lunch Money”, “Lightning Bug”, “Star Crossed”, “Waffle” and “Moonwalk”.
Lime Crime (limecrime.com)
As one of the first digitally-native beauty brands and leaders in the social space, Lime Crime has taken the Internet by storm. I think it’s fair to say, they have caused quite a storm in the process too! It’s the attention-seeking, disruptive, rebellious teen of the cosmetics startup scene. Much like its Founder — self-proclaimed “Unicorn Queen”, Doe Deere. Love her or hate her, she sure knows how to cause a ruckus!
In 2004, a love of sewing led to the setup of a new ‘limecrime’ eBay account — a DIY fashion line. It was during this period that Doe’s obsession with hard to come by, bright and unusual colours, led to her idea of a makeup brand for boys and girls, which she founded just four years later.
Controversy aside, this unapologetically provocative brand offering has caught the attention of “Unicorns” worldwide, with its in your face, expressive makeup offering. Today, Lime Crime are continuing to strike a chord with their feisty followers — those that dare to wear kick-ass, rainbow-coloured lipsticks, resulting in looks as individual as their moods.
Fenty Beauty (fentybeauty.com)
Founded and imagined by Rihanna, Fenty is the new kid on the beauty block. Her line focuses on diversity and inclusivity, seeking to deliver a quality product offering that inspires individuals with all skin types and tones — something to “have fun with”. It’s for women everywhere — irrespective of attitudes and cultures.
Fenty isn’t another run-of-the-mill, celebrity-endorsed brand though. No, quite the opposite. It’s something Rihanna has passionately been involved with from concept to creation, during the two-year development cycle. From the selection of shades, right through to the choice of fonts featured on the resulting packaging design, she’s had a say on everything.
To drop a liquid foundation in 40 different shades on your debut release is a significant statement of intent and a nod to everything the brand portrays. Rihanna’s renowned for being a hit-maker and her latest business venture looks set to become another huge success.
Oh, you fancy, huh? Nails done, hair done, everything did.
Without further ado, let’s take a look at whether each brand’s mobile experience lives up to the hype of its Instagram following, when it comes to shopping on their respective websites.
Home Page
A primary goal of any home page is to entice users to explore what the rest of the site has to offer. On mobile, it’s made that little bit harder. You have a much smaller-screen to play with from a real-estate perspective, and other external factors to contend with — namely, distractions. The likelihood of something or someone diverting the user’s attention away from the screen is magnified considerably, so maintaining focus and engagement is crucial here.
Glossier
A product carousel dominates the top of the page, acting as an entry point to each department — skincare, makeup, body, etc. Below that, there’s an evident push to surface the bestsellers from the skincare and makeup departments, with the ability to add to bag. Nice touch.
A little further down, there’s a bit of an upsell piece on who Glossier are and what they stand for, with links to the social channels they have a presence on, beneath that.
Above aside, it’s the tactical injection of pink that first caught my eye — both in the bag icon and the ‘Tab Bar’-style of navigation, pinned to the bottom of the viewport. There’s something iconic about that shade of pink, that’s seemingly synonymous with the Glossier brand, specifically.
Milk Makeup
On initial page load, you’re greeted with a full height photo — somewhat of a statement piece. While a great picture, on my iPhone 6S Plus it’s not immediately apparent that the page continues “below the fold” — nor that this forms part of a carousel. My inquisitive nature meant that I instinctively attempted to scroll down the page anyway.
In turn, I encountered a ‘New In’-style carousel, immediately followed by a list of five brand USPs, eloquently outlined with no more than two words, per USP — “Multi-Use”, “Cruelty-Free”, and so on. Further down the page, I found a carousel of bestsellers, links to a few editorial features, and another carousel of award-winning products.
Here’s how one customer summed up her first-time experience of browsing the Milk Makeup home page:
The hero images and use of colour are definitely memorable, and definitely build saliency.
ColourPop
No sooner than I’d loaded the page, was I then presented with an annoying “$5 Off Your First Order” interstitial. Not a great start. Negative aside, this was one of my favourite home pages (after Fenty) from a layout standpoint.
The page started with three beautifully-designed product banners advertising bestsellers, new arrivals and palettes for the festive season. Beneath that, stood two product carousels, each with review star ratings and the ability to add to bag. Bonus. Not only that, there was a clear peek of the two products partially hidden off the left and right-edges of the page, acting as a visual cue to highlight the ability to scroll horizontally.
Toward the bottom of the page, I came across an inspiring ‘Shop The Look’ feature. Tapping the model shot surfaced a set of markers relating to a key beneath, outlining the products used by that model with the option to purchase. The concept was good, but the execution, poor — a badly-implemented, overlay-style approach.
Lime Crime
As far as ‘Hero Images’ go, this was by far the best in immediately conveying a sense of the type of makeup sold on the site.
Unfortunately, that moment of excellence became quickly overshadowed by the inappropriately-timed pop up of an email signup box, followed by a ‘Live Chat’ message box. As a first-time visitor to the site, it’s way too soon to prompt for either.
Scrolling further down the page, the underlying theme of celebrating individuality shines through the resulting photography representing the product banners.
Further down, there’s a list of bestsellers — albeit, with no option to add directly to bag.
Just beneath that, there’s a scrollable gallery of User-Generated Content (UGC), being pulled through from Instagram. Smart move, as UGC is a proven method for improving conversion rates.
Fenty Beauty
A striking photo of Rihanna wearing a head-turning red shade of lipstick dominates the majority of the viewport. It’s an eye-catching photo — a statement of intent, almost. It depicts everything that she and her new brand, stand for.
A little further below, there’s a product carousel of her “Faves”, followed by a mishmash of high-quality product and editorial banners, UGC (you can upload your own photos too) and video-based makeup tutorials.
Everything about the page, suggests that this is a premium beauty offering — and that’s primarily down to the quality and ranging styles of the photography.
Summary
Except for the odd, inappropriate interstitials, they’re all pretty well-thought-out homepage designs, from a layout, composition and length perspective.
The ability to add to bag directly from the home page on Glossier and ColourPop’s sites is a compelling proposition — expose those review star ratings! Likewise, the simplicity of Milk’s USPs and their prominence towards the top of the page, struck a chord with me — especially as a new user, not familiar with the brand proposition.
I can’t help but feel that there’s a more significant opportunity on this page, in particular, to make a fuss of the UGC though. Bearing in mind, Instagram was, and still is, a massive contributor to the growth of their businesses, why wouldn’t they play to their strengths?
Navigation
Forget the aesthetics for a second, if a user can’t find what they’re looking for, you’ve not got a cat in hell’s chance of them sticking around on your site for long, let alone making a purchase. You’ve likely read and heard many stories about the infamous “Burger Menu”. Whether you’ve got beef with this or not (bad bun — sorry, pun), it’s essential to explore the alternatives. What’s right for one, isn’t necessarily right for all. Don’t be a copycat. Test and learn.
Glossier
This is a ‘Burger Menu’-free zone. Rather than steal Jan-Niklas Kokott’s thunder (he’s Head of UX at Glossier), I’ll let you read his excellent article on why Glossier ditched the Burger, a little later.
In short, customer-driven insight led them to favour a thumb-friendly, sticky, ‘Tab Bar’ navigation design — a concept first popularised in iPhone apps. Glossier were one of the earliest examples I saw of this style of navigation being repurposed for the Mobile Web — and for the most part, it works for them. But why? Well, they have a pretty flat website hierarchy, meaning they can consolidate their product categories into four of the five ‘Tabs’, leaving the last tab as a route in to shop all products.
After the point of interaction with a tab, you are presented with what looks a little bit like a Product List Page (PLP). It’s not though. It appears to be a selection of bestsellers, which when interacted with, directs you to a Product Details Page (PDP). At the bottom of this somewhat deceptive ‘overlay’, you will find a nondescript link labelled, “Shop All Makeup”, or similar. Tapping this, directs you to the PLP for the department represented by the tab, in question. This was bought to my attention, on the back of the following customer’s feedback:
“I was confused when I tapped on one of the icons on the tab — all the products in the category pop up, but at the bottom, there is a “Shop All Body” link which is deceiving because all the products are already displayed. The link leads to a page with richer content (e.g. the ‘Body Hero’ campaign shots), which in my opinion is one of Glossier’s greatest strengths and what I love about the brand.”
There’s another slight niggle though. And that’s concerning Safari for iPhone. When Safari’s toolbar is not in view, if you were to tap a ‘Tab’, it brings the toolbar into view. You have to tap it a second time to be directed to the page you were expecting to load, following the first tap of the Tab. On the face of it, it doesn’t sound like a huge issue, but it soon becomes an annoyance.
Milk Makeup
Milk have opted for a ‘Burger Menu’ implementation, represented by the so-often-favoured, three-line icon. On tapping this Call-To-Action (CTA), the resulting menu transitions into view from the top of the viewport, as a full-page overlay.
A search input box features prominently, with the top-level department links listed beneath (“New”, “Bestsellers”, “Makeup”, “Skincare”, etc.) Tapping an option expands in an accordion-like manner to reveal a series of category links, which are vibrantly coloured, in-keeping with their style guide. I’m not sure this would pass web accessibility checks, mind you!
The double-line spacing between every menu option (first and secondary-level links) is a little overkill, as well. Don’t get me wrong, I’m all for whitespace, but this is too much.
On a more positive note, the choice of terminology is both logical and consistent. The majority of links listed in the Burger Menu don’t strike me as being at risk of causing any potential confusion among users, except for one top-tier link — “Vibes”. This is Milk’s editorial offering, but it’s not clear from that label alone, so I wonder how many of those not in the know, would inquisitively think to tap the link anyway?
ColourPop
Given ColourPop’s immense Instagram following, I am surprised that they haven’t adopted a similar approach to Glossier in plumping for a ‘Tab Bar’ — a navigation convention their followers will be all too familiar with. Nevertheless, for now at least, ColourPop have gone with the Burger, and to be fair, it’s a pretty good execution.
Unlike Milk’s implementation which seems to be slightly less reactive to interaction, ColourPop’s response time is almost app-like. The secondary-level links feel like they load almost instantly, following interaction with a top-tier link. Something as simple as converting all of the primary links to uppercase and setting the white of the links off against a darker, poinsettia-coloured background, seemingly aids the scannability of the menu itself.
What I also like about this, is that the secondary-level links slide into view in isolation of the primary links, which help to focus better. A slight improvement would be to feature the parent category at the top of this list (e.g. “Lips”), just as a reminder of the link you previously interacted with, to arrive here.
Lime Crime
Another fan of the Burger here, albeit with a lime twist. Lime Crime has lived up to its name here, choosing to adopt a lime green background on the CTA representing the opening and closing of the Burger Menu. Not only it is “on brand”, but it also does an excellent job of drawing the eye to what is arguably the most important and interacted with area of the site.
Again, I commend Lime Crime on the ample-sized ‘hit areas’ representing the links in the Burger Menu too. The height looks sizeably larger than Apple’s minimum recommended target area of 44px by 44px.
It’s not without its flaws though. There’s nothing aesthetically different between top-tier links and secondary-level links in the menu, which may create confusion for some users. Likewise, with both a pinned header and footer (when the menu is open), on a smaller-screen phone, you’re limiting the number of links that can be viewed in the scrollable area. Not only that but when you do scroll, on occasions, the underlying page is being scrolled rather than the overlaying list of links.
Fenty Beauty
Of those with a Burger Menu, Fenty Beauty are the only ones who’ve gone for a ‘drawer’-style implementation, rather than a full-page takeover approach. In this case, the drawer extends little over halfway across the viewport. In doing so, it’s straightforward to dismiss the menu by tapping in the vacant area to the right of it. Whether or not that’s a good thing, depends on if you intentionally or inadvertently tapped there. Swings and roundabouts.
Again, I can’t help but feel that design has done more damage than good to the usability of the menu. For me, they’ve overdone it with the letterspacing on each of the menu items. Combined with the use of full uppercase wording and a lack of weight to the font against a solid white background, it slows down my ability to scan down the list, as I find myself spending longer trying to read and interpret the menu links.
Not only that, but some of the menu items are meaningless to those unfamiliar with Rihanna’s brand — terms like “GALAXY”, “PRO FILT’R”, “MATCH STIX”, “KILLAWATT”, and so on.
The open menu also sits out of place on the page — partially, residing above the site’s main header, and intersecting midway through a ‘Delivery Upsell’ pinned to the top of the page.
Overall, it’s somewhat of a disappointing implementation. I’d expect a much more refined, better thought-out design, given the premium nature of Rihanna’s beauty range and the usual high standards associated her name.
Summary
Of the five retailers, it’s the only one without the Burger that offered the most pain-free navigational experience — Glossier. By saving me that excruciating thumb stretch up to the top left-hand corner on my wannabe phablet-esque, iPhone 6S Plus time and time again, I can dive straight into one of four main departments (“Skincare”, “Makeup”, “Body” or “Fragrance”), with ease. Not only that, this guided approach to navigation, prevents the temptation to “dump” anything and everything into a Burger, with little to no thought about the resulting usability and paradox of choice. That said, I was vastly impressed with ColourPop’s app-like performance and execution. Sadly, on the flip side, I was hugely disappointed with the Fenty Beauty’s implementation.
Search
When it comes to shopping online, there are two distinct groups of user — “Hunters” and “Gatherers”. In short, Hunters generally know what they want before arriving to your site — they’re reliant on the most direct route to the product in question. Gatherers, on the other hand, need a little more help with researching and collating information to make an informed purchasing decision. Both groups are known to conduct on-site searches, but I’d argue, such a functional offering is of particular importance to your Hunters given the ease and speed of arriving at their end goal.
Glossier
Glossier do not currently offer a search function on their website. Shock, horror! Interesting decision, but I’ll come back to why I’ve italicised the “currently” a little later.
For those new to Glossier, I kinda understand their logic. They want to invite individuals to explore their entire range, without pigeonholing them with a potentially limited choice or product, by way of encouraging users to search. On the flipside, regular customers may know precisely what they want. They may find it quicker and easier to perform a keyword search for a specific product name they already know of, or frequently purchase (e.g. “Haloscope”), as oppose to browsing by department using the Tab Bar.
Let me go back to that first sentence. The very next morning, after I wrote about Glossier’s lack of a search option the night before, I went to browse their site again and low and behold, there’s a search CTA that’s now appeared! What are the chances?!
Just to make sure I wasn’t hallucinating (I’m a Dad of two kids under two — I live off no sleep!), I cleared my browsing history and cookies, reloaded the site again, and there it was.
A quick tweet and a response from Jan-Niklas later that morning, revealed that he and his team are currently testing a new search function, with 50% of their website traffic. Sweet!
It’s a brilliant design and implementation too.
I don’t want to risk influencing their test results by telling too much more, so for now, my lips are sealed! Shhhh. You heard nothing from me, okay?!
Milk Makeup
At first glance, you could be forgiven for thinking that Milk don’t offer the ability to search on their site, either. But they do. It’s just not located in their header — an area we’ve learned to expect to find such a functional offering. No, it’s hidden away in their Burger Menu. Even so, it’s easy enough to miss there too.
While it does hold pride of place at the top of the Burger Menu, Milk have chosen not to adopt the look and feel of a standard input box. Instead, they’ve gone for a grey horizontal keyline, with a supporting magnifying glass icon and “Search” label, above. The issue for me is that keyline. The first couple of times I opened the Burger, I misinterpreted it for precisely that — and subsequently ignored it.
When the search input box gains focus and you begin inputting your search term/query, there’s also no option to clear the entire string. You can delete characters, one at a time, but there’s no way to remove the whole line. It’s a minor annoyance, but a staple feature of most other retailers’ on-site search offerings, that’s missing.
Likewise, when typing in your string, the font colour of the search term itself remains the same shade of grey as the placeholder text. There’s nothing to distinguish between the two. Not great.
The only real positive I can take from this is the ‘Search Autocomplete’ option. It’s a nice touch, albeit a poorly implemented solution — the underlying navigational links are visible through the search suggestion layer. To see this for yourself, try typing in “Bro” then wait before inputting any more characters.
ColourPop
ColourPop go one step better than Milk in bringing the ‘Search’ CTA to the forefront, placing it in the site header. Tapping this CTA brings a search input box into view, just beneath the header itself, advising the user to “tell us what you want”. A direct message by way of placeholder text, with a slightly aggressive tone of voice, but at least it’s clear with its demands!
The solution offers a search autocomplete facility, delivered in much the same vein as Milk’s, but as a full-page overlay, paving the way for larger-sized thumbnails.
This great work is to some extent undone, by the slightly peculiar decision to apply a claret to coral gradient to the search input box itself. It goes against the grain of what customers have come to expect by way of the appearance of a search input box — a white background. Inverting the colour of the search input box with the white of the header may have made more sense, from a styling standpoint. ColourPop’s designers have redeemed themselves a little, by using a high contrasting colour for the search input — white text.
Lime Crime
While I’ve been pretty honest with where I’ve found fault with Lime Crime so far, this is where I commend them for ticking all the boxes concerning their site search implementation.
It’s accessible via their header. The choice of magnifying glass icon to represent the call-to-action is a fitting one. The site search box had a hit area that appears to be greater than 44px — perfect for those fat fingers, again. The input box automatically gains focus on tapping the ‘Search’ CTA in the header. The pink “Search” placeholder text transitions to a solid black, on input of the search term, resulting in sharp contrast against the pale pink background — great from a readability perspective. The search autocomplete function does its job well, even if it does lack the enhanced, image-rich capabilities of its competitors.
It’s a solid search offering. Top marks.
Fenty Beauty
Interesting take on the magnifying glass icon, representing Fenty Beauty’s ‘Search’ CTA— a hexagonal-shaped glass piece. I like it — it’s got RiRi’s stamp, all over. Much like Lime Crime and ColourPop, the CTA is located in the header to the left of the ‘Bag’ icon, so is always only a single tap away, irrespective of which page you’re viewing.
On interacting with the magnifying glass, an input box transitions into view, pinned beneath the header itself. No placeholder text here — just a flashing cursor, indicating the box already has focus (the fact that the keyboard is now in view, is also a pretty big hint!) The white background to the search input box, helps in making it look like exactly that, so bonus points there.
Search suggestions are triggered by as little as three characters and are displayed in a near-identical manner to how they are on ColourPop’s site.
A couple of minor negatives to bring up though. No ability to delete the whole search string, and no clearly-labelled CTA to submit the search. A right-facing arrow represents the latter, but there’s no “Search” or “Submit” label to make this more obvious.
Summary
Of the four sites that allow the user to search, Lime Crime is the resounding and deserved winner here. Not perfect, but a cut above the rest. The most significant surprise and shock for me is the absence of a search function from Glossier’s website. I’m still trying to get my head around that one, but at least they’re testing a viable search solution in the right manner. And from what I’ve seen of it, it’s as good, if not better than all of the above. Let’s just hope the majority of their test sample, share a similar opinion!
Product List Pages (PLPs) / Search Results Pages
A Product List Page (PLP) / Search Results page is a vital component of the ‘Browse and Shop’ experience. It’s where users will spend most of their time filtering and refining results, in the hope of finding something that catches their eye. Ironically, it’s often the most overlooked and unloved page type — the one that I feel gets the least care and attention from those responsible for maintaining it. Somewhat odd, given that a significant number of users will have to pass through such a page to progress to the Product Details Page (PDP). That is, if indeed, they can find what they’re looking for. An excellent filtering and refinement experience is pivotal to reaching this goal.
Glossier
Product listings are displayed in the often preferred, two-column view layout. One thing that stands out for me immediately is the consistency of the manner in which the products have been photographed against a grey background. It’s elegantly simple and helps draw attention to the Glossier-renowned pastel pink in many of the products’ packaging.
All promotional messaging (upsells, discounts, etc.) are beautifully-presented over the top of the listing imagery and feature a quirky icon in support, including rainbows, cherries and stars. The symbols themselves serve no apparent purpose, other than to maybe draw your attention to the promotions. I still like them though.
The ‘Saving’ aspect of the PLP, was also praised by one Glossier customer, when I asked if there were any standout features or functions, she felt added value to the mobile experience?
“Save $X” sticker on the products that come in a set — this is on both the desktop and mobile site but I’ve always liked seeing how much I’d save — makes it way more tempting to just buy the lot!”
I also like the way in which you can add to bag directly from the PLP, through firstly selecting a balm colour or shade on the item listing. The item price is displayed on the ‘Add to Bag’ call-to-action itself, so there’s no excuse for not monitoring your spending!
The only fault I can pick out here is the proximity of the ‘Add to Bag’ button to the underlying product listing. I imagine some users will confuse the price as being representative of the item below, even though it correlates to the product above. Another apparent omission is the lack of any means of filtering the results. Even though Glossier have a relatively limited product inventory, I still think users would want to be able to refine the listings — by skin type, condition, shade, etc.
Milk Makeup
Another two-column implementation, albeit in this case, with product images offset against a white background. This approach to photography, certainly alleviates the distraction factor, however, given the page background is also white, the result is an excessive amount of whitespace. Yes, contrary to popular belief, you can have too much whitespace. As a result, the product information (product name, description and price) is distanced too far below the product images, thereby wasting valuable real estate on those smaller-screen devices, and unnecessarily increasing the page length and the resulting amount of scroll required on the user’s part. There’s then further whitespace introduced between this information and the choice of shades.
I like the way that the Milk have chosen to add separation to the product listings, by mixing in content ads that link through to editorial content, too. It grabs your attention and alleviates the subconscious state of continuous scroll, whereby you’re not really concentrating on what products your scrolling through. This customer, echoed my thoughts:
“Crisp, large and clear hero images and obvious what the product offerings were. Product listings were clear and concise and easy to navigate visually.”
The only danger here is that, if a user were to interact with such an ad, you’re diverting their focus away from a browsing state of mind to one of learning, presenting them with makeup tips and tutorials. In turn, you inadvertently run the risk of losing that intent to purchase. It’s a fine line that needs to be tread carefully.
The presentation and ability to cycle through the shade options themselves is another positive to highlight. No option to add directly to the bag though.
ColourPop
Alas, a Retailer that ticks all the boxes! Filtering, check. “Quickview”, check. Reviews, check. Add to bag, check! Not only that, the spacing is spot on. The appropriate level of priority/weighting appears to be given to the various elements collectively representing a product listing too. Although the font size of the price, could be a fraction larger, in my books.
The ‘Quickview’ implementation is one of the best I’ve seen of any retailer, across mobile. No modal or overlay. It just loads in situ, beneath the row in which the product listing in question, resides on. There’s also enough information there to allow you to make an informed purchasing decision, without needing to go to the Product Details Page (PDP), so it serves its purpose well.
That said, the same love for the ‘Quickview’ function, wasn’t shared by this customer:
“It is really confusing to be able to tell between an items product page and its quick view page. Both are shoppable? I kept clicking on quick view by accident when trying to scroll. This site is just super overwhelming!”
She went on to praise the size and quality of the product imagery:
“The product images on the PLP are a nice size, it’s easy to see the quality and grain of a powdered eye shadow, for example.”
The filter offering is limited on some PLPs, allowing you to refine the results by product type, finish, shade and rating, in the case of the “Lipstick” results. Nevertheless, that’s more than enough to accommodate the basic needs of most users.
A near faultless execution. One minor recommendation for improvement would be to include the number of reviews left for a product in brackets, alongside the review star rating. There’s a significant difference between a 5-star rated product based on 50 reviews, versus the same but rated by only one user.
Lime Crime
Lime Crime offer something different in defaulting to a three-column view, with the option to switch to a single-column view. For some product types, like lipsticks, where the photography predominantly focuses on a model’s lips (with that lipstick applied), the three-column layout works pretty well. In other scenarios, it’s less beneficial — eye palettes, for example. You can’t see the detail in the product shot. Don’t forget though, you do have that option to switch to the more substantially-sized imagery by reverting to single-column view.
They too, offer the ability to filter AND sort. Filtering is limited to “Colour” only, but there is a whole host of sorting options — “Top Sellers”, “Newest”, “Price, Low to High”, etc. Ironically, it’s near-impossible to dismiss the ‘Filter’ overlay, if you choose not to proceed to apply a filter(s). The ‘Close’ CTA in the top-right hand corner of the viewport, requires the fineness of the tip of your fingernail! Not ideal.
No ability to add to cart from the PLP either.
Fenty Beauty
Another one in favour of the two-column view. The premium nature of the product offering remains ever-present in the style of photography representing the product listings. They comprise of a product title, type, price and review star rating. You’ll also find the number of shades the item is available in, but oddly, it doesn’t show the colour swatches as part of the listing — just the number. You instead have to tap through to view them on the resulting PDP. That also means, no option to add to bag directly from the PLP.
In much the same vein that Amazon has recently started using an “Amazon’s Choice” flag on their product listings, Fenty has done something similar, applying a “Rihanna’s Fave” marker to select listings. A seemingly smart tactic from a commercial standpoint given her fan following, and a great way to drive traffic through to the PDP in question.
Summary
The two-column layout is an overwhelming favourite here. Glossier and ColourPop are the pick of the bunch, with their ability to add to bag directly from a results listing — a sure fire way to get users to convert there and then.
Don’t underestimate the power of the review star rating at a listing level either. Yes, users will spend more time reading reviews on the PDP, but on the PLP, when your scrolling through those listings at speed, users subconsciously keeping an eye out for those 4 and 5-star review ratings, as they rapidly scan down the page. Hence the reason, it’s hugely important to indicate how many reviews the aggregate rating is based on.
The most prominent oversight by all five retailers is the lack of an option to ‘Heart’ or ‘Favourite’ an item to save it to a wishlist of sorts — another common component of many larger online stores. Such functionality allows a user to quickly scan down a PLP and tap to save an item of interest to review in detail later. On mobile especially, users can easily become distracted by events happening off the screen. As and when they website consumes their interest again, they may well forget what they were doing/looking at. With that in mind, give user the option to essentially ‘bookmark’ items, in the manner described above. Not only will it help them easily relocate items of interest, it’s also a great way to drive effective retargeting of upsells and cross-sells, as well as other personalisation-driven initiatives, in future too.
Product Details Pages (PDPs)
The Product Details Page (PDP) is the one page on an ecommerce site that every stakeholder seems to want to have a say on. Usually, the topic of debate is around what needs to reside above the so-called, “fold” (resulting from this myth that users don’t know to scroll on mobile):
- “Move the ‘Add to Bag’ button up a bit more…”
- “Make the product image bigger…”
- “We need to make more room for upsells…”
The list goes on.
There’s no doubt that the PDP is one of the most important pages on your site — especially, from a conversion standpoint. Striking a balance between offering too little information to make an informed purchasing decision and overwhelming the user by giving them too much choice, is no mean feat.
Glossier
I randomly selected to view the PDP for a product named, “Cloud Paint”. At the top of the page, is an auto-rotating carousel of product images, comprising of a mix of actual product shots and what appears to be user-submitted imagery of customers wearing the product. Either that, or they’re model shots that have been photographed to look like they’re UGC. Some beautiful photography, nevertheless.
Beneath that, you have the option to select a shade. What I love about this, is that when you do, three video stills display below, which when tapped result in a video being played depicting that particular shade being used by a model.
Then comes the ‘Add to Bag’ CTA, which also features the price of the product (much like on the PLPs). In the vicinity, you’ll also find an option to subscribe. When interacted with, you have the option to specify the frequency of delivery — every 1, 2 or 3 months. Another great upsell initiative to ensure a regular purchase, by alleviating the pain point of a user having to reorder every time they run out of the product.
Further down the page, you’ll find a detailed product description, followed by some handy information about what the product is, how to use it and what its main benefits are, as well as the ingredients used within it.
Scrolling on (it’s a long page!), you’ll find a stack of 3 or 4 images (including an animated gif), one or two of which already feature in the image carousel at the top of the page. Not sure what purpose this serves. It seems odd to duplicate the imagery.
Lastly, you’ll find a series of product reviews, followed up with a cross-sell opportunity. Pretty much, standard procedure for a PDP. Some of the reviews also have UGC in support, which I would expect to prove helpful. I missed it at first glance, but at the top of the list of reviews, there’s also a breakdown of skin type, age range and skin tint shade, representative of the reviewers themselves. This function could be further enhanced to allow a user to filter the reviews by selecting the attributes that represent their own characteristics/traits.
Milk Makeup
This time I went for the ‘Holographic Stick’. I love a good hologram, me. Especially, of the Tupac-kind. The top of the PDP features the product title, price and review star rating. Interestingly, I completely missed the product price, the first time of viewing the page. It’s floated to the right of the product title, hugging that far right-hand edge of the viewport. Even if you are to believe the ‘F-shaped’ reading pattern, it’s too far over to the right in my opinion, given how heavily weighted towards the left-hand side of the screen, the rest of the content above the product image is.
I mentioned it before with the PLP, and unfortunately, the excessive use of whitespace above and below the product image, is evermore present here. It wastes valuable real estate on the page. Things don’t get much better, as far as the display of the colour tiles are concerned. They reside directly beneath the image thumbnails — identical in size — meaning they could easily be overlooked. Then there’s the use of a grey button for the “active” state of the ‘Add to Bag’ CTA. Another, no-no, as grey is so often associated with “inactive”, or even “disabled” states.
Beyond that, things get back to winning ways, with video-based content, USPs and benefits of the product, and in this case, a testimonial-like quote about how good the product is from the hugely popular fashion and beauty media outlet, Refinery29.
It’s just a shame that the two most essential elements of the page from a conversion standpoint — the shade selection tiles and ‘Add to Cart’ CTA — haven’t received that same level of design thinking from a usability standpoint.
ColourPop
As a huge Jay-Z fan, the ‘LAY-Z’ lip gloss was always gonna be the go-to choice here. My immediate thoughts on load of this PDP were overwhelmingly positive. Image carousel at the top of the page, with the focus point on the centrally-positioned image. It’s a 360-degree image carousel, so you can see the previous and next image, in a semi-transparent state, peeking off the left and right-hand sides of the screen. A good visual cue though, along with the left and right-facing arrows to indicate you can swipe in either direction.
Just below that, you’ll find the product title, product type, price and average product review rating, followed by a pinned ‘Add to Bag’ CTA, which scrolls with you up and down the page. I’m generally in favour of ‘pinned’ or ‘sticky’ CTAs, but specifically, when there are no attributes that a user firstly needs to select on the page (‘Size’, ‘Colour’, etc.), for which there aren’t in this case. Things get a little bit messier from a validation perspective, when such a CTA is interacted with, but the attributes haven’t yet been selected. How do you handle the automatic repositioning and scrolling of the viewport? Where on the page is the error handling managed with respect to the pinned CTA? Etc.
A little further down the page, you’ll find a short product description, followed by a quantity selector, taking shape as a numerical stepper. From a personal point of view, I find it much quicker to change the quantity in this manner, as opposed to invoking the ‘Picker Wheel’ for me to select a value from a predefined list, in the case of iOS devices.
In the interest of not taking up valuable space in the viewport, with information that may not be relevant to all visitors, ColourPop have chosen to display their more detailed product information, application tips and list of ingredients in a collapsed accordion menu. Makes sense.
After the accordion, you’re presented with a carousel of UGC. It’s a brilliant idea, given the manner in which their brand was firmly built on Instagram. Even so, I have one real annoyance with this. It doesn’t look like any of the images in question, represent customers wearing the product for which I am viewing the PDP for. When you tap a customer image to ‘Shop the Look’, the products listed as having been used in the first five or six photos I looked at, don’t include the ‘LAY-Z’ lip gloss. With that being the case, it seems strange to surface them on this page.
Lastly, you’ve got a ‘Complete The Look’ carousel of products (upsells and cross-sells), followed by the ‘Reviews’ section.
Lime Crime
I recently heard that these guys had launched a Polly Pocket-inspired range of palettes, so I went to check these out. My lil’ sis used to have a Polly Pocket back in the day, but insisted on playing with my Mighty Max toys instead (similar clamshell concept).
Like with ColourPop, the product image carousel takes pride of place at the top of the page. No peek of the previous and next image here though — each image occupies the full width of the viewport. Even so, there’s a great mix of product shots. Closeups of the product itself, as well as model shots.
Next up, are the product title, colour selection options and price. The product title is impossible to read. With a white fill and a faint pink border, it’s not in the slightest bit legible. The price point is just as bad, at what appears to be a measly 8pt font size, floated over to the far right-hand side of the screen, away from where you’d likely scan for content. Ironically, the name of the selected colour option features is also more legible than the product title!
Moving swiftly on, you have the option to ‘Favourite’ / ’Like’ the product, as well as add to bag. So far, this is the first of all the sites I recall seeing this type of function on. As I mentioned earlier when reviewing the PLPs, this is such a core feature to have on your site, so credit to Lime Crime for presenting the option here.
More UGC below, which look like photos being pulled directly from Instagram, using the #LimeCrime hashtag. Tapping an image, also allows you to shop all of the items used to create the look in question. Always a winner in my book.
Scrolling further down the page, you get to the product details, which consist of 4–5 paragraphs — that’s a fair bit to read on a mobile device, even if you are just scanning the content!
Below that, you’ve got an accordion menu, with options to expand to view information about Lime Crime’s PETA verification and Leaping Bunny certification, ingredients contained within the product, and customer reviews. Finally, followed up with what is effectively a list of other bestselling items for the user to consider purchasing.
Fenty Beauty
Here, I looked at the PDP representing the ‘Pro Filt’r’ foundation, on the recommendation of the girls in our office. Header aside, the product image dominates the majority of my significantly large iPhone 6S Plus screen. This full-width image forms part of a carousel, comprising of six images in total — all professionally-taken photos.
Underneath, you’ll find the product title, a one-line product description, the price and average review star rating, including the total number of reviews the rating is based on. All good so far, minus the fact that you need a magnifying glass to see the price.
This is where things get interesting. With 40 shades to choose from, I was intrigued to see how Fenty would go about presenting these. It’s been displayed in what can only be described as a honeycomb-like format, with each shade, styled as a hexagon, lined up in eight columns of five shades. It works. Due to the closeness in shades, there’s even a ‘Shade Finder’ function, which helps you to visualise better, which shade is best-suited to what skin tone. It takes a minute to realise what purpose the Shade Finder serves, but when you do, it’s beneficial.
Below this, you’ve got the ability to increase quantity (another numerical stepper implementation), add to bag, or add to wishlist (like Lime Crime’s ‘Favourite’ function).
Further down, you’ve got a collapsed accordion which can be expanded to show extensive product details, commentary from Rihanna herself and written instructions on how best to apply the foundation. Again, possibly too ‘wordy’ for consumption on mobile.
You’ve then got a video-based application tutorial, followed by a carousel of complementary products, and a content feature enticing users to upload some UGC. Equally, you have the option to view the existing panel of customer-uploaded photos, which opens in a new window. This is a possibly counter-intuitive move, as it’s detracting from the goal of enticing the user to purchase the item they’re viewing.
One Fenty Beauty customer, highlighted the UGC content at the bottom of the PDP, as a “standout feature”:
“#FENTYBEAUTY UGC content at the bottom of product pages is nicely swipe-able and feels innovative within this. It’s easy to upload to via a mobile device, even though you are prompted to log into social media accounts again if you choose to upload from Instagram, for example — kind of annoying.”
She also highlighted issues with the “Plays Nice With” cross-sell carousel:
Grrr. The feature is made to be swipe-able. However the placement of the arrows to swipe through the products allow you to end of tapping on the next products detail page without realising it. Really irritating as the feature basically loses its function.
Lastly, you’ve got access to view all customer reviews. This BazaarVoice implementation is one of the better examples I’ve come across, if not the best, purely because it’s the only one to include UGC, in the reviews themselves, which can only be a positive thing.
Summary
All strong PDPs, but some are better than others — namely ColourPop and Fenty Beauty, ticking more boxes for me. Given the nature of the beauty sector, the ability to surface UGC on the PDP is an absolute must, in my opinion. I go back to the distraction factor of shopping on mobile again. Last time, hopefully! The key is to quickly showcase the range of styles in which that product can be worn to achieve a specific look. In my mind, the most powerful way to convey that is by encouraging customers who already own that product to upload their own photos. Customers, generally trust other customers. It’s why reviews can be so influential in the purchase decision-making process. Mixing the two together, can only be a good thing. It’s worked for Rent the Runway.
Closing Thoughts
Based on my points of view from a UX standpoint, along with the feedback obtained from the customers I spoke to, of the five contenders, Glossier stands out as offering the best overall mobile experience.
Whereas others performed better in some areas, Glossier’s mobile site is refreshingly simple, yet easy to navigate, namely thanks to its ‘Tab Bar’-style approach — a concept familiar to users of the Instagram app. The brand’s iconic pink is used sparingly, complimenting the clever use of whitespace. Product listings provide just the right balance of information, while the ability to add to bag directly from the PLP, makes it tempting to spend a little bit more! The PDP on the other hand, provides in-depth and insightful information, about product ingredients, benefits and application tips to help make a better-informed purchasing decision.
Even without a search function currently in place, it’s reassuring to see and hear that Glossier are going about introducing new features to their website, in the right way. They do so by adopting a “test and learn” cycle (which led to a decision to ditch their “Burger Menu”), using the resulting insight to improve their mobile offering further. Likewise, this approach mitigates time, money and resource from being wasted on developing a function that may otherwise never get used.
It’s a great design and implementation, which for the most part, plays to the strengths of the smaller screen, where the likes of Milk Makeup and Lime Crime, in particular, haven’t yet quite nailed it. Nevertheless, it’s far from perfect. Plenty of room for improvement for Glossier — and everybody else.
In all instances, I think the use of UGC could be vastly improved to better build on the Instagram foundations that elevated the profiles of each brand to be the success stories, they are today. All five retailers should be looking to the global success of Sephora for inspiration, who are well on their way to building a self-sufficient, style community, empowering customers to share their beauty regimes, tips and advice, with one another. Their ‘Beauty Matches’ feature, in particular, which allows you to sort reviews on the PDP by customers who share your beauty traits, is excellent. Not only that but Sephora, by far, have one of the best mobile shopping experiences (web and app), of any retailer, in any sector. Period. It’s up there in that elite echelon — a close second to The Home Depot, in my opinion.
Lastly, I need to draw attention to the use of carousels, and swipe gestures, in general, across all mobile experiences. As one customer said:
“There’s too much emphasis on making features that need to be swiped rather than tapped.”
So true. Interactions that lend themselves well to apps, don’t always translate across quite in the same way to the mobile web. In Safari especially, it’s so easy to inadvertently ‘overswipe’ across the edge of the viewport. As a result, you’ll either end up going back to the last page viewed or forward to a page you previously chose to go back from. It’s irritating for the customer. Product carousels, price sliders, swiping to open/close a “Burger Menu” — all UI elements that when interacted with, could lead to the frustrations mentioned above. While I didn’t recall witnessing this myself, during the testing of these sites other customers did, so it’s something to be mindful of.
Imperfections aside, all five retailers offer a pretty solid and generally well-designed mobile shopping experience — up to the point of checking out, at least, anyway. It’s a testament to all the good that’s happening in the beauty sector right now, with respect to the surge in mobile and customer-focused, start-up success stories, like these.
N.B. Huge thanks to all those customers that kindly shared their shopping insight with me. Much appreciated! Julianna Brown, Kate MacFarlane and Kate Huentelman, especially.
One Last Thing…
If you liked this article, please applaud it 👏 and share it with your friends, work colleagues and followers. Remember, you can clap up to 50 times — it makes a big difference for me in helping to focus my writing on what you guys enjoy reading the most.
You’re also welcome to follow me on Medium, on Twitter, or even connect with me on LinkedIn. Thank you for your support! 😊
