Site Face-off: BeautyMNL vs. Sephora PH

Ahh, online shopping. I would say that it’s my latest ‘hobby’, but the more accurate term is “addiction”. I have spent the last three weeks burning so much of my money in online shops that I had to give myself a one-month ban on online shopping (unless I really need to or if the product is on sale). I could go on defending my impulsive and irresponsible tendencies but that’s for another post not what I’m really here for.

I’m here to rave about BeautyMNL, and to rant about Sephora PH. Not about their products or their service (I’m sure both are stellar), but about their websites. Spoiler alert: BeautyMNL wins almost all the rounds because I love that website so darn much.

Round 1: The Homepage (is where the heart is, bleh-heh)

It’s understandable to want to have as many information in the homepage as possible, especially if it’s an e-commerce website. But it is evident that Sephora can learn a thing or two about simplicity. I am personally irked by that “Fast Forward to Black” banner at the top. As well as with their Search bar which isn’t really a search bar. You hover your mouse on it, and this appears:

The call-to-action buttons in their banners are also worth noting. BeautyMNL’s CTA is in a clear and direct red button, while Sephora’s CTA blends too much to the design.

Winner: (surprise!) BeautyMNL

Round 2: Menu & Navigation

Daaaayum, BeautyMNL back at it again with amazing use of white space! The navigation bar for BeautyMNL has been given more clickable space, which to me is a good thing. I’d have to say, though, that Sephora’s menu is pretty good as well. You can already see everything here, and that’s great if you are looking for a specific category. BeautyMNL’s is a little more for those who don’t want to be too overwhelmed. I also daresay that theirs is more future-proof, should there be more categories of makeup in the years to come.

Sephora’s “Brands” menu is also a treat to look at and to use. I frequently browse the Brands list when shopping, and I don’t like it when BeautyMNL brings me to another page just to see all their brands:

Also, for some reason, I never noticed those ‘A-Z #’ navigation items before.

Winner: Sephora PH!

Round 3: Search Filters & Results

This is one of the most crucial parts of an e-commerce website. This is also the main reason I started this post: Sephora’s search page is a perfect example of what not to do.

I could not see the products clearly because the search filters were blocking the search results!

Not to mention, the design of Sephora’s search filters is not for the obsessive-compulsive faint of heart.

That ‘breadcrumb’ looks off. There are two different line widths. That ‘Clear all’ button is not only confusing, but it also doesn’t look clickable at first. There’s another ‘Clear’ UI element in the design. That search bar also blends too much to the design. The arrow down icons are not properly aligned and lastly, the ‘Others’ choices had bigger font sizes for some reason.

OK, I’m calm now. During times like this, typography is your best friend. Here’s how BeautyMNL does it:

Another instance that BeautyMNL shows great use of typography is in their search result thumbnails:

Again, during times like these, typography is your best friend. I am in love with how BeautyMNL plays with it.

The only problem I have with BeautyMNL is that there’s no “Quick View”and no hover effects except for the Buy Now button. But that is a tiny issue compared to Sephora’s mess.

Winner: Hands down, BeautyMNL

Round 4: Reviews & Related/Recommended Products

While Sephora’s product details layout is not that bad, there’s is still some room for improvement. It confuses me why they chose to highlight the brand name instead of the product name. But I do like that they showed how many reviews a product has.

Although there’s not much difference between the two layouts, BeautyMNL is better aesthetic-wise (is this a thing? No?).

As per usual, Sephora’s recommendations bar looks way too cluttered for me.

Interestingly, Sephora shows their recommended products before the reviews. For BeautyMNL, it’s the other way around. But when it comes to makeup, skin care, etc. reviews are much more important. So BeautyMNL is on the right track.

Sephora’s UI looks really outdated. It also has features that don’t really make much sense here like the sorting and viewing options, and the “No” ratings. Meanwhile, BeautyMNL has provided more useful information like the reviewer’s skin type and features (which actually matters when reading reviews because it might work for one skin type and not for another). What would be a great addition to BeautyMNL is a filter for different skin types, etc.

Another important detail is the dates of the review. I love how BeautyMNL already does the math for us and shows us how recent a review is. It’s really the small things like this that make my heart flutter. ❤ LOLJK

Winner: BeautyMNL, obvs

Round 5: Checking Out

“Order is eligible for free delivery” sounds so impersonal and robotic. I like how BeautyMNL does it.

Alright, there’s not much difference between the two and, frankly, I’m getting tired. So I’m gonna say that this.. is a tie!

Winners: both

In Conclusion

1. Simplicity is hard to achieve, but it is something we should all strive for.
2. When in doubt, play with your type. (But, jeezas christ, keep it consistent!)
3. More features =/= good user experience. I doubt Sephora ever tried to look into what features are actually being used, and which ones are being snubbed.

• Sephora: 2
• BeautyMNL: 4

Winner: BeautyMNL!