Nordstrom's beauty editorial hub, where every story is shoppable. Built to stay current without a team rebuilding the pages every week.
"Lips That Pop," "Top 5 Serums," and "Get That Glow." Three cards gave merchandising room for the seasonal pushes and kept the page from getting crowded.
The headlines, photography, and copy were written per story. The product data came in from the catalog on its own, so swapping a SKU updated the price, description, and picture with no designer opening the page.
Virtual try-on
Color gradient selector
Lipstick preview
Scroll. It fills the mat, then travels the frame
Use a new photo or the one already on your Style Profile, then drag across a color gradient and watch the shade change on your face as you go. Tap the right red and the product card comes up underneath with reviews, price, and add to bag.
It shipped inside the "Lips That Pop" story, built as its own component so it could move to eye, cheek, or nail. The gradient mapped to the available SKUs, so any shade you could try was one you could buy.
The products changed every week. The pages didn't have to.
Buying never interrupts the read.
Reviews, price, size options and add to bag come in from the side while the story stays on screen behind it.
It also kept the numbers in one place. Time on page, scroll depth, and conversion were all measured inside the story, so merchandising could see which angle drove the most adds to bag with no attribution guesswork.
Three templates, a try-on tool and a drawer.
The templates ran through three seasonal rotations before anyone asked for a layout change. In between, merchandising swapped products and the catalog kept everything else current.
UX Design
Visual Design
Editorial Templates
Custom Components
HTML/CSS/JS
