on to the next adventure

UI Showcase

1. Landing Page Layout

Sketches and early designs

UI Elements

  • Hero area tailored based on entry point - various layouts depending on content type
  • Feed of related content tiles below - lifestyle imagery and product imagery 
  • Waterfall layout + infinite scroll
  • Clickable content tiles, triggers a shoppable overlay

Desired user experience

  • Seamless purchase path going from entry point to landing experience
  • Minimize thinking and decision making. The obvious next step is scroll down. Don't rely on navigation.
  • Keeps the user in the same behaviour and mindset: browsing and content consumption. 
  • Never drop them into a dead end -  "endless" discovery experience

Goals & KPIs

  • Time on site
  • Number of items viewed
  • Click rate to trigger a preview modal

Design Considerations

  • Hero area configurations
  • Tile designs and content types
  • Number of columns
  • Rollover states: Show price? Show CTA button? Include CTA copy?
  • Ratio of product to lifestyle photography, on-figure vs. lay downs
  • Include global nav or not
 

2. Shoppable Overlays

UI Elements

  • Lifestyle image (or other content) 
  • Featured product area: images, description, prices, shop CTA button
  • Shop the look gallery

Desired user experience

  • Consider the item further without being overwhelmed. Keep it highly visual.
  • Facilitate discovery, keep the rabbit hole going
  • Make it easy to identify a product and shop

Goals & KPIs

  • Click-through to the site via the 'Shop now' button
  • Also tracking views of alternate product images

Challenges

  • Various content types and formats
  • Variety of product information

Shop the Recipe

Shop the Collection

 

3. Mobile and Tablet 

 

Desired user experience

  • Relaxing, lean back vs. lean forward experience
  • Reduce friction 

Considerations

  • How tow to fit in the lifestyle image, product images, product info, product description, and the rest of the outfit items
  • One thumb navigation
  • Have shop button always in view

Results

  • Increased conversion rates on mobile to the desktop levels
     
 

4. Shoppable Ad Units and Editorial

 

5. Campaign Landing Pages