monttilva web design logo

VERRE VERT

SERVICES

Experience Strategy, Content Strategy, Content Guidelines, Creative Direction, UI/UX Design, Art Direction, Accesibility, Styleguide, Engineering.

APPLIED METHODOLOGIES

Competitive Benchmarking, Brand, User and Product Discovery, Interviews, Usability Testing, Low-fi Prototyping, Hi-fi prototyping.

verre vert hero image case study monttilva web design
VERRE VERT
/OVERVIEW
verrevertglass.com — A digital transformation that enhances the Verre Vert brand experience.
VIEW LIVE SITE

Over 3.1 billion bottles of wine are produced annually in the U.S. alone that continue to use packaging technology deeply rooted in the past and little progress has been made in reducing their environmental impact. With Verre Vert bottles, winemakers can increase the efficiency of the shipping process and decrease the environmental impact of their production in a cost-effective way. Verre Vert is a company dedicated to providing winemakers and wine drinkers the opportunity to lead the industry into a sustainable future and make a difference with every glass of wine consumed - without sacrificing the tradition and mystique of wine.

CHALLENGE

Clarify the brand's visual direction and display in an appealing way the complex technical information of the technology behind the bottle.

OUTCOME

Monttilva helped Verre Vert showcase the benefits of the bottle in a simple and intuitive way.  This allowed us to build the marketing materials to start promoting the technology and let the world know about it.

TEAM

2 Product Designers
1 Project Manager

SPRINT TYPE

Design for print
Web Responsive

DURATION

1 month

01

EXPERIENCE STRATEGY

When the Verre Vert team approached me, they were taking the final steps to introduce their bottle to the world. However, they had no solid brand identity and no way to clearly present their product to the market. The question was simple:

”Can you help us showcase our product?”
Absolutely!
Verre Vert Discovery Slides
02

We were going to need

Define the brand attributes to build a brand identity.

In order to understand wine culture and further solidify Verre Vert’s position within it, we started the process with a brand discovery workshop becoming well versed in the brand, its challenges, and its outlook.

We collaborated to set new objectives, benchmarks, and KPIs, as well as conducted qualitative and quantitative research to inform our strategy moving forward.

Brand Attributes Cover Slide Verre Vert Discovery Session DeckBrand Attributes Cover Slide Verre Vert Discovery Session DeckDiscovery Process Presentation Deck Cover

Define the user personas and the user journeys for the marketing website

Winemakers are people who are passionate about the world of wine. And they can be quite protective of the industry's age-old traditions. To understand the needs of these users we created unique user profiles to represent the range of the audience. This painted a clear picture of their demographic profiles, their stories, issues and needs.

Attribute Clustering Excercise | Monttilva Discovery ProcessVerre Vert's User JourneysUser Persona Slide from Verre Vert's Persona Definition excercise.

Define the positioning as a guide through the process

Through a series of exercises in the strategy session, we defined the creative pillars that would differentiate the brand: what is the Verre Vert brand and who they work for. This helped us define a consistent tone for everything created for the brand.

Brand Statement - Verre Vert DiscoveryBrand Direction | Monttilva Brand Discovery Process
DESIGN PRINCIPLES
KEY INSIGHTS
01
Be friendly

Winemakers are very passionate about their work and can be very closed to change. We needed to emphasize the characteristics of the bottle and the voice of the brand to talk about how tradition is maintained while creating an environmental benefit.

02
Be transparent

When working on such an fast-paced project, it is important to align and include all stakeholders related to the product definitions (marketing, technology, administration & strategy).

03
Be consistent

We should use appropriate illustrations at each stage of the life cycle that benefits from the new technology to reduce the cognitive load for users.

04
Keep it simple

The importance of streamlining the understanding of highly technical terminology with complementary information for the user.

03

Getting started

In order to achieve these goals we assembled a fullstack team focused on design, development and marketing strategy that was in charge of most of the product decisions.

We had 4 weeks to develop this so collaboration was an essential part of the process.

We worked with agile tools and methodologies to ensure the best communication and performance throughout the process.

During the development, we helped the Verre Vert team through the following steps:

  • Build the website.
  • Design the brochure.
  • Launch the website and print the brochure.

“We designed the brand elements with a focus on transmitting confidence and empathy to the users, who were traditionally accustomed to using the same packaging technology for many years.”

Serggio Montilva Headshot | Monttilva Web Design
Serggio Montilva
Brand Designer, Monttilva

“From the beginning of the project we spoke with the different areas of the company to understand the metrics that made the product special, identifying the areas where we would make a connection with the user would improve the comprehension of the data and reduce the cognitive load.”

Abraham Pena Profile Picture | Product Designer at Monttilva
Abraham Peña
Product Designer, Monttilva
04

Our Approach

Typography system

A traditional and
approachable experience.

»Inknut Antiqua« is an Antiqua typeface for literature and long-form text. Approaching the idea of web-publishing as a modern day private press, it is designed to evoke Venetian incunabula and humanist manuscripts, but with the quirks and idiosyncrasies of the kinds of typefaces you find in this artisanal tradition.

Raleway is a display face and the download features both old style and lining numerals, standard and discretionary ligatures, a pretty complete set of diacritics, as well as a stylistic alternate inspired by more geometric sans-serif typefaces than its neo-grotesque inspired default character set.

Font specimens from Verre Vert's Branding Deliverables.
a differentiated branding

Telling a story of sustainability and tradition.

Monttilva developed an entire identity system to make sure every user touchpoint reflected the brand. This included updating the color pallete, a new typography system and vintage-inspired design elements. This created a more cohesive experience for both the physical brochure and its digital extension.

Brand visual references for Verre Vert's visual direction.
COLOR DEVELOPMENT

Cal-Wine Fare.

The color palette lends itself to the rich hue of the wine bottle glass, with the warm linen tone and stone gray found in the region’s local environment. To further enhance the tradition experience, Monttilva derives textures and illustration styles from authentic hand-drawn engineering diagrams. The best of California is here.

Color scheme and inspiration for Verre Vert's visual direction.
05

ILLUSTRATIONS

A collage of vintage hand-made illustrations made to populate the designs of Verre Vert's marketing intitiatives.
06

MULTIPLATFORM DESIGN

Early hand-made sketches of the website illustrations and the website wireframes.
High fidelity mockup of Verre Vert print brochure deliverable.
Mockup of an iMac and an iPad showcasing the hero section of Verre Vert's marketing website.
Mobile mockups of several sections of Verre Vert's marketing website.

Verre Vert wants to be where its users are. This meant we had to create a consistent experience across different media from physical to desktop and mobile.

At the beginning of the project we started developing ideas, prototypes and wireframes focused on the print version of the design. This decision was crucial to be able to iterate quickly in the creation of the printed brochure. Once the print version was finished we started planning the responsive website.

Maintaining a consistent experience. Regardless of size.

To ensure the same bottle discovery experience across the different viewports available, we used a dynamic scaling system based on the user's screen width.

This allowed us to scale fonts, images, illustrations, and even the proportion between the different elements, maintaining a pleasing visual coherence and saving valuable time when implementing responsiveness.

“Our business is quite complex (scientific to be exact) and Monttilva picked up on the important aspects very quickly and was able to take a very complex business and portray it beautifully and simply.”

Dylan Robbins Headshot Verre Vert Glass' CEO
Dylan Robbins
CEO, Verre Vert Glass
07

MARKETING MATERIALS

High fidelity mockup of Verre Vert's marketing website homepage.
High fidelity mockup of Verre Vert's marketing website team page.
Front page from Verre Vert's print brochure deliverable.
Back page from Verre Vert's print brochure deliverable.

Verre Vert asked us to create a digital communication piece to advertise the product and attract early adopters. This was the first time verre vert appeared before the world and we wanted to let the world know about it.

For this first step of the project the first impression was crucial, especially on the website. We created many variations of the design but in the end we realized that animation would be a great approach to apply to the product landing page.

08

MOTION UI

09

DEV TIME

We relied on agile methodologies to keep designers and programmers close during production and to deliver results with tight deadlines.

We integrated our design team with Verre Vert as soon as the project started. Once they finalized the design system, we focused on integrating this system into all of Verre Vert's marketing products.

“They are incredibly well-organized, they stick to deadlines, and they produce a great work product. They bring great energy and enthusiasm to each project I've worked on with them and I couldn't be happier with the consistently high-quality work we receive. Most importantly, they are flexible, adapting throughout the project to different needs from our team. I would work with them again 10/10 times and look forward to doing so!”

Dylan Robbins Headshot Verre Vert Glass' CEO
Dylan Robbins
CEO, Verre Vert Glass
10

The RESULTS

VIEW LIVE SITE
  • Through a process of continuous iteration we managed to make the information of the benefits of the bottle visible in a simple and intuitive way.
  • We were able to develop a library of components designed from atomic design to have a scalable product.
  • With the difficulty of data complexity, we were also able to achieve a super clean visualization that helps readability.

Let’s do something amazing together.

If you want to work with me or just say hello: