All projects

Valera

Wine Ecommerce Web Design
Role Design
Platform Figma
Year 2026
The Valera product slider, Explore all our wines with the 2016 Crimson Elegance, on a MacBook on a deep blue couch
Overview

Boutique wine, chosen the way a friend would choose it.

I took the wine ecommerce website design for Valera from my own 2023 concept to a US online store in 2026, keeping the brand and the product slider people liked and reworking the rest, with new bottles and labels, new photography, a component library and a design system for desktop and mobile.

Problem

Choosing wine online feels like a test.

Most wine stores lead with grapes, regions and scores, so someone who only wants a good bottle for Friday is left guessing, and the 2023 Valera design looked lovely but sold everything from a single slider.

Solution

Shop by taste, with one honest price.

Every bottle is $40 and says what it tastes like and what it goes with, the shop starts from the type of wine you feel like, and reviews, pairing guides and a beginner's tasting set do the explaining a good wine shop would do in person.

Design process

  1. 01

    Discovery

    2023 design review Store study
    Headline font scan US store conversion
  2. 02

    Structure

    Sitemap Shop and filter flows
    Cart and checkout Age gate
  3. 03

    Design

    Bottles and labels Photo direction
    Component library Mobile layouts
  4. 04

    Handoff

    Design tokens Text styles
    Behaviour notes Responsive rules
The Valera homepage, Handpicked wines for every occasion, on an iPhone in a marble stand on a beige desk The Valera wine ecommerce homepage in full, from the hero and shop by type through the bestsellers, the product slider, the wine collections, the guides and the reviews to the footer The Valera design system, with Valera green, yellow, paper and ink colours, Marcellus for headlines and Albert Sans for the interface Four Valera bottles with their own labels, the 2016 Crimson Elegance red, the 2018 Elysian Fields white, the 2017 Serene Bliss rosé and the 2014 Radiant Reflections sparkling Valera inner pages, with all wines, a product page, red wines, the side cart and the age gate, the cart, checkout, the Learn hub, contact, our story and a beginner's guide The Valera 2016 Crimson Elegance product page on an iPhone lying on concrete Valera on the phone, with the home hero, all wines, a product page, the cart, checkout and the menu Friends raising glasses of red and white wine over dinner, closing the case study with Mike's contact email

Let's collaborate

Mike Lopez © 2026 designed & developed by Mike LopezPrivacy notice GMT+8
All projects

Valera

Wine Ecommerce Web Design
Role Design
Platform Figma
Year 2026
The Valera product slider, Explore all our wines with the 2016 Crimson Elegance, on a MacBook on a deep blue couch
Overview

Boutique wine, chosen the way a friend would choose it.

I took the wine ecommerce website design for Valera from my own 2023 concept to a US online store in 2026, keeping the brand and the product slider people liked and reworking the rest, with new bottles and labels, new photography, a component library and a design system for desktop and mobile.

Problem

Choosing wine online feels like a test.

Most wine stores lead with grapes, regions and scores, so someone who only wants a good bottle for Friday is left guessing, and the 2023 Valera design looked lovely but sold everything from a single slider.

Solution

Shop by taste, with one honest price.

Every bottle is $40 and says what it tastes like and what it goes with, the shop starts from the type of wine you feel like, and reviews, pairing guides and a beginner's tasting set do the explaining a good wine shop would do in person.

Design process

  1. 01

    Discovery

    • 2023 design review
    • Store study
    • Headline font scan
    • US store conversion
  2. 02

    Structure

    • Sitemap
    • Shop and filter flows
    • Cart and checkout
    • Age gate
  3. 03

    Design

    • Bottles and labels
    • Photo direction
    • Component library
    • Mobile layouts
  4. 04

    Handoff

    • Design tokens
    • Text styles
    • Behaviour notes
    • Responsive rules
The Valera homepage, Handpicked wines for every occasion, on an iPhone in a marble stand on a beige desk The Valera wine ecommerce homepage in full, from the hero and shop by type through the bestsellers, the product slider, the wine collections, the guides and the reviews to the footer The Valera design system, with Valera green, yellow, paper and ink colours, Marcellus for headlines and Albert Sans for the interface Four Valera bottles with their own labels, the 2016 Crimson Elegance red, the 2018 Elysian Fields white, the 2017 Serene Bliss rosé and the 2014 Radiant Reflections sparkling Valera inner pages, with all wines, a product page, red wines, the side cart and the age gate, the cart, checkout, the Learn hub, contact, our story and a beginner's guide The Valera 2016 Crimson Elegance product page on an iPhone lying on concrete Valera on the phone, with the home hero, all wines, a product page, the cart, checkout and the menu Friends raising glasses of red and white wine over dinner, closing the case study with Mike's contact email

Let's collaborate

Mike Lopez
© 2026 designed & developed by Mike Lopez
Privacy notice GMT+8