Casa Ereaux Wines Website

Casa Ereaux is a fine wine destined for a select target of people, produced in one of the main wine producers in the world: Mendoza, Argentina, and it is only made for exporting to anglo-speaking countries.

Time: 1 Week

Tools: Adobe XD, Adobe Illustrator, Adobe Photoshop, Visual Studio, HTML, CSS, Javascript, JQuery, GSAP Animation Library.

Introduction

Challenge

Create the product branding & wine concept to communicate it through user touchpoints.

Craft the UI design and the UX flow of the web page.

Develop and code the web page for the wine.

My Role

In this project, my role had a 360º view/action responsibility, from branding to product development. I intervened as a UI designer, front end developer and branding master. My collaboration with Casa Ereaux began with brand development. Once I got deep into the project, I gladly took on pretty much every task. I didn’t limit myself to branding, but developed the website.

Tools Used

Competitive Analysis, Concept Design, Information Architecture, Visual Board, UX Design, UI Design, Landing Page Development.

The Problem

Casa Ereaux had poor existence over digital media so it needed to be freshened up to date. Also they didn’t have a strong and concrete visual identity and could not communicate clearly.

The Solution

Creating a concept that could describe the wine and connect with the audience and communicate it through user touchpoints, in this case, the creation of a website.

The Process

Research

I investigated competitive websites of other wines from the region that are also exported to extract significant UI Components and with it create in an atomic way, from really tiny to a big masterpiece, to show how the design language could apply to the user interface without interfering in user experience but adding significance to it. After reviewing different existing websites and audience types I developed recommendations on Information Architecture and User Experience, what the site should have, how it should communicate and how it should interact with the possible clients.

Audience

Bon Vivant
audience one

This client is a sociable person who has cultivated and refined tastes especially with respect to food and drink. She knows exactly what she wants.

She navigates the page in order to know more about the wine, where and how it is made, if she can relate to it and see every detail that makes the wine special.

Distributors
audience two

A group of people that like to discover new wines and offer to be sold by them through their networks.

These kinds of customers like to know about the region where the wine is made, the varieties and what other products we can offer and if we have a strong and consolidated identity that can separate us from other wines.

The Solution

I developed a cohesive and coherent branding and applied UI design with UX patterns to facilitate the journey of the user.

View Live View Code

Landing Page

I turned the entire website into a one big lifestyle journal. Every aspect of the website was built for communication purposes. Whenever you see a product image, that image is deeply integrated into the context of the site.

Concept Creation

The design of the landing page focuses on delivering a user center experience, a fast delivery of information. It represents the color of the branding board and has a cohesive design that respects the brand system. The UX Principles applied make a better and more fluid experience for the user.

Unrivalled digital
production expertise
to produce
world-class visuals.

Exceptional content, beautifully executed, has the power to rise above the crowd and truly engage with viewers. This is where I come in.

mockup image

Design for performance & pleasant aesthetics.

In every project, I’m daily balancing aesthetics and performance. For this site, this was easy. I believe that a good user experience starts with delivering content as fast as possible. And that experience can be enhanced with a good story to tell and extraordinary graphics and imagery. That means performance and aesthetics go hand in hand with each other. One should not choose one over the other but make them flow together. Good content, layout, images, and interactivity are essential for engaging your audience, one without the other can be seen as incomplete or low cost. In every step of the design and development, I looked at how I could get a nice user experience and design while having an excellent impact on performance.

mockup image