Responses by Six Socks Studio.

Background: Brand Breeder was born as a biodiversity laboratory focused on developing excellent contemporary wines and spirits 100 percent made in Italy. This e-commerce website introduces Brand Breeder to the world. Currently, Europe is the only market on the website, but we’re already discussing implementations and expanding the positioning worldwide through different activities and campaigns.

Design core: Overall, the website concept is wrapped in a bold, unusual grid. The vertical lines anchor to the menu through the navigation flow, creating a different layout for each page—which we conceived of one by one! That said, we got inspired by the doggy-bottle symbol in Brand Breeder’s logo and had fun designing a custom, cohesive icon system for each label to play interactively with throughout the website, on the homepage and on the 404 page—which we love, by the way.

Another fancy thing we ended up applying to this project is a time-changing color scheme. We began our visual research with the proposition that the website would have two different color palettes, considering how experiencing wines during the day or night involves a completely different atmosphere. An unexpected thing happened when the client wanted both of them online. Try checking out the website during the day and night!

Challenges: There were a few tricky details, primarily transitions between pages. On the design side, merging different brands within Brand Breeder, each with a small range of products but all very recognizable and relevant on their own, was an excellent exercise for us to play with by not prioritizing one brand over another and even designing a series of layouts able to enhance them all at the same time.

Navigation structure: As mentioned in the design approach, a dynamic but rationally gridded structure is what we revolve around. A shape-changing container means to amaze the user with microinteractions as they explore around and buy products online. At the very beginning, we questioned if the bottom-page navigation we went with could work for the website’s target audience, but several UX interviews revealed confidence in finding the menu on the bottom and the will to explore the experience starting from the homepage.

Technology: E-commerce is one of our strengths. Most of the time, we follow a well-crafted protocol we’ve fine-tuned through experience. It includes a Jamstack solution: Webpages are statically rendered in a pipeline. The user navigates between static HTML pages. The stack delivers a high SEO performance, blazing-fast navigation and, last but not least, a low impact. We used Nuxt to build the front end in combination with GSAP as the animation engine, while for the back end, we went with Shopify. For a good headless approach, we went with a cloud CMS called Sanity for managing editorial content and complex fields and relationships. Everything is hosted on Vercel, enabling us to push websites live easily and share our Git branch change requests and demos for approvals with our clients.