Creating a playful experience for a playful brand

Our friends at Vintner, wanted us to redevelop their e-commerce platform to reflect their new brand identity. The brand refresh is playful, yet sophisticated, with a vibrant colour palette, new logo, updated photography style and one key belief - great wine shouldn’t be complicated. It was this belief that underpinned everything throughout our design process of the project.

We immediately knew this experience needed to be engaging, playful and feel unique to the brand. But it also had to be easy to use, raise brand awareness and most importantly of all - sell wine.

The UI

Vintner celebrates the colourful and joyful world of wine and simplifies how you enjoy it and how you buy it. This was something we wanted to reflect both internally and externally for Vintner - from adding content to the site - to their customers and partners purchasing wine.

When designing the site, we made sure to fully utilise the vibrant colour palette to reflect the brand identity and keep users engaged throughout their experience. We certainly didn’t want customers to feel like they were on any ‘normal’ e-commerce site that had a ‘plain white’ background.

It was within the UI that we also looked at adding small and subtle details to help bring through the personality of the brand, such as using the ‘V’ from the logo as an arrow, to indicate to the user it’s a call to action. It’s these little details that can really enhance and give your users much more of a branded UI experience.

With the brand belief of simplifying ‘how you buy wine’, we ensured there was always a clear call to action on every component. This was clear right from us starting the project, not only from a brand perspective, but also from the target audience.

By keeping it simple, you can create a more enjoyable experience.

Whilst creating the designs throughout the project, there was also another thing we constantly considered - interactions. This was a great opportunity to add brand personality and create a more enjoyable experience. After all, interactions are needed.

Interactive experiences are great at encouraging users to engage with your site. And the more users engage with your site, the better chance you have at converting them, which was important for Vintner. They can elicit strong feelings and emotions in a user, and it means they aren’t simply looking at a lifeless website. It’s through these interactions where you create a more unique and enjoyable experience.

Inspiration in our interactions

I’m going to share a few examples of some of the hover state interactions we crafted for Vintner as well as the inspiration and rationale behind our thinking. Hover states were vital to indicate to the Vintner audience that they can interact with the component or button and be taken off to a new page. But they needed to be aligned with the brand identity and the products.

For our primary call to actions, we were inspired by the shape and motion of a wine droplet. As the user hovers over the button, it evokes the feeling of the droplet being lifted and reveals the window to the next page within the user journey.

The secondary call to actions needed to behave differently due to the aesthetics of the button itself. As the user hovers over the button, the arrow moves off to the side, giving a playful nod towards a cork of champagne bottle being ‘popped’ whilst the return state was inspired from the wine bottle lid being screwed back on.

Encouraging the user

The next example showcases the product cards, used to drive customers through to the product page of the wine itself.

Whilst we wanted the product card to showcase the wine in a way that was simple and easy to digest the key information, it was the interaction state where we could make this component come alive.

We drew our inspiration from the motion of somebody about to pour the wine into their glass. While the coloured background growing in size creates a playful feel to the card, the tipping motion was used to create the gesture of the product itself and direction users would be taking to see the product in more detail.

To encourage customers through to each wine category, we created coloured windows that could fully utilise the different styles of photography that is used within the Vintner brand. 

As this is a digital experience, we were inspired from the many things we do as humans when looking at wine in real life - from looking at the bottle label up close to pouring the wine into a glass. When users hover over each category, the image quickly flashes to that next moment after seeing the wine bottle itself, creating an engaging and joyful experience.

We also introduced the use of GIFs to the digital world of Vintner. Inspired by the audience's love of life and everything that wine pairs well with, we created a bold asset that provides a playful approach that keeps users engaged throughout their shopping experience.

Creating an experience that relates to your brand and audience is important, and prioritising interactions will help create emotions, something that will stay in people's minds. It’s important to always think about the brand and how you can take that information and use it to inspire you.