Glossier Mobile Redesign Concept

Glossier Mobile Redesign Concept

2 Attachments

Glossier is one of my all-time favorite beauty brands (shameless plug to my referral code here: with an exploding online retail presence.

I'm on their mobile site often and thought through some UX and UI tweaks to make navigation a little more fluid. For one, I moved the navigation tab bar from the bottom to the top because once I'm in one of the product category pages, I live there and don't need to change categories often (which I imagine is why navs live at the bottom). Secondly, when I tap my account, I'm given a long list of items that require at least 1-2 scrolls on my 6s, so keeping their "takeover" model, I made the account page a prominent overlay and removed the boxes to tighten up the leading.

Their overall aesthetic is funky and cool and sometimes futuristic (spaceships and aliens, like what?) so I also updated the typeface to something monospace and added a header "highlighter" to further emphasize its funky freshness.

Images, copy, and color palette are property of Glossier; iconography courtesy of the best icon app in the game, Nucleo.


keyboard shortcuts: L or F like Z toggle zoom