by Joe Pendlebury (@theuxchap)

The Mobile Makeup of Instagram’s Beauty Success Stories

Joe Pendlebury
Dec 11, 2017 · 38 min read
At the time of writing this article, ColourPop has a whopping 5.3m Instagram followers.

Glossier (glossier.com)

Milk Makeup (milkmakeup.com)

ColourPop (colourpop.com)

Lime Crime (limecrime.com)

Fenty Beauty (fentybeauty.com)



Home Page

Glossier

A statement image dominates the full height of the viewport on Milk Makeup’s home page.

Milk Makeup

ColourPop

A home page image that epitomises the personality of the Lime Crime brand.

Lime Crime

Fenty Beauty

Summary


Navigation

Glossier

Glossier’s “Tab Bar” approach to navigation — the replacement for their “Burger Menu”. Glossier were among the first to implement this style of navigation on the mobile web. Until relatively recently, it was more commonly featured across iPhone apps.

Milk Makeup

Interacting with ColourPop’s “Burger Menu” icon results in a full-page takeover, displayed in the form of an overlay. Interestingly, their icon consists of just two horizontal lines, rather than the three we’ve so often seen associated with the Burger Menu.

ColourPop

Lime Crime

Fenty Beauty’s design of the “Burger Menu”, adopts a ‘drawer’-style approach, rather than the full-page takeovers we’ve seen implemented by some of the other brands above. Note the displacement of the menu itself — potentially, a result of the underlying “Holiday Delivery” notification, which cannot be dismissed or closed.

Fenty Beauty

Summary


Search

Glossier

Glossier’s super secret “Search” function that is currently visible to 50% of their website traffic. Apologies for the dodgy colour representation in the GIF — the search autocomplete background should be white, not blue!

Milk Makeup

ColourPop

Lime Crime’s search implementation is one of the better offerings from a usability standpoint — especially as far as the design of the search input box itself, is concerned.

Lime Crime

Fenty Beauty

Summary


Product List Pages (PLPs) / Search Results Pages

Glossier

An example Product List Page (PLP) on Glossier’s website. Note the benefit of being able to add to bag directly from this page.

Milk Makeup

ColourPop

ColourPop’s “Liquid Lipsticks” PLP. It’s great to see review star ratings featured as part of the listings themselves. A further improvement would be to include the number of reviews that the aggregated rating is based on.

Lime Crime

The “All Makeup Products” PLP on Fenty Beauty’s website. The feature of the “Rihanna’s Fave” marker is a shrewd move to drive more clickthroughs to that particular product.

Fenty Beauty

Summary


Product Details Pages (PDPs)

Glossier

Here’s a prime example of the excessive use of whitespace on the Product Details Page (PDP), on Milk Makeup’s website. Whitespace is a good thing but needs to be used in moderation. In Milk’s case, there’s just way too much of it on the PDP.

Milk Makeup

ColourPop

ColourPop’s PDP is oozing with goodness. Even if you weren’t to scroll down the page (easy to mistakenly think that there isn’t anything else to scroll, given the “sticky” ‘Add to Bag’ CTA), there’s arguably enough detail “above the fold” to still make an informed purchasing decision.

Lime Crime

Fenty Beauty

Fenty Beauty’s ‘Pro Filt’r’ PDP is an excellent example of how to display lots of colours options on mobile. With 40 shades to choose from, you can select any one of them in a single tap, all without the need to scroll or tap to see/expand all of the options.

Summary


Closing Thoughts

Glossier’s PDP offers nothing unique or noteworthy. It just does a great job of ticking all the right boxes. As indeed it’s end-to-end “browse and shop” experience does, making Glossier the pick of the bunch.
Sephora has built a brilliant community vibe to its website offering. They even offer the ability to filter user-generated content and reviews by your “Beauty Matches”, thereby only surfacing content from other customers with character traits like you — identical skin condition, hair colour, eye colour, etc.

One Last Thing…

THE UX CHAP

UX, CX, Mobile, E-Commerce & Retail Insight from Joe Pendlebury - The UX Chap

Joe Pendlebury

Written by

UX Alchemist & Experimenter 🧙‍♂️ | Sharpie Addict ✒️ | Dad of 2 😴 | Connoisseur of Hip Hop 🤑, Hall & Oates 🧔 & Jimmy Buffett 🍹 | Imitation ≠ Innovation 💯

THE UX CHAP

UX, CX, Mobile, E-Commerce & Retail Insight from Joe Pendlebury - The UX Chap