We had the opportunity to work together with the designer Pedro Garcia Marques on the new website for Bonifácio Wines, a Portuguese wine producer with over 50 years of business and some lovely wines 🙂
The website itself was quite a challenge since we wanted to combine the fact that this is a family business with a lot of history and tradition with a modern look-and-feel.
When the brand came to us and we started looking at their website we immediately understood some problems:
The width of the content was too narrow,
the site didn’t quite reflect the brand anymore (colors, brand message, etc.),
browsing through the products was hard (no search) and the wine bottles were small.
The initial design concept of having a bottle of wine with the website content inside didn’t work very well.
We wanted to convey that Bonifácio Wines is a family run business and make it really easy for people to connect. For that we included a footer on every page with info on where they are located, how to get there and how to get in contact.
The biggest challenge was really how to display their products and how to make the user enjoy the browsing experience. Most wine producer websites follow a traditional top-down scheme where you choose from a list of wine brands (most labels have several brands), then a list of wine types (regional, table wine, spirits), then a list of wine categories (white, red) and finally you get to the product itself. That represents 4 clicks before the user even sees a product which is utter nonsense.
We inspired ourselves in IDEO’s work portfolio. On clicking ‘Products’ you get a beautiful shelf with selected wines from where you go directly into each one straight away. If you’re not familiar with their wines you can get a feel of which ones you should explore first and if you are there is nothing stopping you from hitting the search input and type away. By the way when visiting this page TRY HOVERING WITH THE MOUSE ON THE BOOTLES, you’ll be surprised with our little HTML5 experience with the audio tag.
On each product you get a full 186×766 high-res wine bootle. Since you cannot have a taste of the wine itself we think it’s important to have at least a good view of the label and it’s features.
For each wine a QR code is automatically generated so you can easily take the wine URL with you on the phone.
On the left side there is a description of the wine and its awards or press clips. On the right you get the wine features, the technical sheet, etc.
On the pages we went with a huge photo gallery which brings color and movement to contrast with the static content. On the contact/distributors page there is a world map where you can see that the brand exports to Europe, Asia, USA and Africa.
We really like the end result and it looks beautiful on the iPad and iPhone as well.
We used WordPress for the whole site and used Custom Post Types for the Wines so that the brand can continue to manage its own information without having to go through us.
As we finish the website new ideas come to our minds on where we can go next. Now that we have a database with all the wines and features we could easily build other interfaces to explore that information in other meaningful ways (via a mobile app for example). Also how hard would it be to offer a shopping cart? With a WordPress plugin not hard at all. So these are all ideas we are willing to explore in the near future, if given the chance by the client of course 😉
At the moment we haven’t yet done a training session with the client to show how he can access the WordPress admin panel and manage all the content through there. We’re sure he won’t have any troubles learning that because the WordPress backoffice is hands down the best solution out there at the moment.
Let us know if you liked it and maybe see you over a glass of wine sometime.