3Wine

3Wine was an Italian subscription-based e-commerce focused on wine discovery and wine-food pairing.

It was late 2012 when I was contacted by 3Wine’s founder. The subscription-based e-commerce space was booming at the time; new startups were sprouting everyday, selling the most diverse kinds of goods, from razors to vegetables.

3Wine’s ambition was to become a relevant player in the wine & food vertical, and the team’s Italian roots – they were based in Verona, a North-Eastern city which is well-known for its wines – was probably the best starting point.

When I was hired 3Wine was an early-stage startup, so there weren’t any prototypes or beta versions of the product: a great opportunity for inventing everything from scratch, from product logo to user interface.

Year: 2012 / Category: Wine & Spirits, Food & Beverages, Subscription Businesses
Services: Product logo, UX study, Website UI

Logo Design & identity

3Wine logo final version
3Wine logo, final version

3Wine's logo design process started with 4 proposals — 3 of which are documented here — that led to a selected version.

That version was refined and improved through several iterations, which ultimately led to the logo in its final version. No detail was left untouched until the logo felt complete, solid and balanced.

Once the logo in its current form was approved, 4 different color palettes were explored, all inspired by the colors of wine, soil, and vine leaves.

3Wine logo iterations
Logo iterations
3Wine logo design process: ribbon study
Logo design process: ribbon study
3Wine logo design process: circle study
Logo design process: circle study
3Wine rejected logos
Rejected logos

Colors & typography

  • #a0b63b
  • #e4dcca
  • #4e6b75
  • #7a655b
  • Font selection: Coustard
  • Font selection: Hammersmith One
  • Font selection: Varela Round
  • Font selection: Droid Sans

Back to table of contents ↑


UI Design & iconography

3Wine homepage
Homepage

The website was the primary touchpoint for 3Wine's customers, and the main platform for buying the product.

The client provided a series of paper sketches outlining requirements and functionalities, and from that starting point my design work began. I chose a simple and clean style, with white backgrounds and soft, washed-out colors. By contrast, call to actions were signaled in bright green. The logo's vintage vibe was echoed in various small UI details and embellishments like ribbons, et al.

3Wine - How it works
How it works

I worked with typography to give the UI a distinctive look: particularly, I used "Hammersmith One" for the navbar, an unconventional choice for a main navigation; then I chose a serif, Coustard, for the headings and finally the light yet easily readable Varela Round for body text.

3Wine - Monthly selection
Monthly selection

▲ "Monthly Selection" was the core of the website's experience: every month it displayed a different curation of wines paired with delicious recipes.

The aim of this page was to communicate to the user, at a glance, the value of a 3Wine subscription: a monthly selection of the best wines and recipes, delivered in an elegant box directly at your doorstep.

The arrow buttons on the top left/right offered to the logged-in user a convenient way to browse the content of each box present and past, like a personal collection.

Photography played a major role here, so two dedicated photographers were hired: the first focused on food photography, and the second specialized in product photography for the wine industry.

3Wine - Item detail
Item detail
3Wine - Subscription Plans
Subscription Plans
3Wine - Wine Shop
Wine Shop
3Wine - Buy form
Buy form
3Wine - Website icons
Website icons

▲ I designed a simple set of glyphs for use in the website; I never use templates, so each part of the app's visual language is my original creation.

In addition to that, the last touch was designing a complete UI Sheet, in order to establish clear and measurable UI guidelines for front-end developers: the document lists all the website's visual elements & styles, and defines in detail how they should look like.

3Wine - UI Sheet
UI Sheet

"3Wine was an early-stage startup, so there weren't any prototypes or beta versions of the product: a great opportunity for inventing everything from scratch"


↑ Back to top!