First-ever Byrdie Bag: an editor-curated bag of skincare or hair-and-makeup essentials and experience. Designed a flip card interactive grid to drive product conversion.
User path begins from a homepage takeover or social post.
Commerce Product Page: Interactive mobile first designed, with quick Shopify checkout integration.
Mobile: 2 column product grid with 2:1 interstitial hero and feature product. With a bottom that appears and disappears on scroll.
On Tap CTA Behavior: flip side reveals product size and custom product description written by selected Byride beauty editors.
Sticky Shop Button Behavior: (1) Product and shop button slide up on scroll down and hide when scrolling back up. (2) Shopping cart slides in from the right for checkout.
Tablet: @414-1024px products shuffle into a 3 column product grid with section headers stacked above and shoppping cart overlay modal.
Desktop: 5 column grid @1024px and above.