The WineTubeMap takes users on a wine discovery journey based on wines they like.
Our client wanted to make it easy for the layman to discover and learn more about different wines based on what they liked. They came up with a novel way of visualising the different types of wines and categories on a map. The map showed which wines were of a certain type by showing them on the same line. Each wine was then represented as a station on the line.
The whole map was then overlaid on food zones that showed which wines went well with which type of food. The idea was to make this map interactive so customers could learn about the different wines and types and also sell tickets to events which would be tasting journeys from the WineTubeMap.
The biggest challenge on this project was to create the interactive map, and still make it sure it worked well and had a good user experience on mobiles/tablets too. When the user clicked on a station, we wanted to be able to display some brief information about the station, and the user could then click through to more detailed information. The map also had to have pan/zoom functionality.
We also wanted to display the stations, lines, wines and food zones as a grid rather than just a list. Each of these then had to have the ability to be linked to each other, so that the user could keep clicking through to related items. For example, a station could be linked to one or more lines, wines and food zones, and these would be displayed on the station detail page.
Events integration was also required whereby we could show upcoming events and also sell tickets for them. Once at the event, the users needed to be able to rate the wines that they tasted there.
We also needed to be able to sell some merchandise on the website, this was to be limited to a few items only. Frequent blog articles were also planned, so we had to showcase this effectively to engage the users.
We implemented an interactive map that worked on both PC’s and also mobiles/tablets. It worked with both the mouse and with touch events. The map automatically resized and centred depending on the screen size of the device it was being viewed on. When the user clicked or touched a station, an intro was shown and the user could then click through to the detail page.
The detail page gave all the information for the station, and showed related stations, lines, wines and food zones. This encouraged users to keep clicking on links to flow through the site. Users were able to register and login easily using their Facebook accounts, or more traditionally by entering their email and selecting a password. This reduced the friction to users signing up and logging in. Once the user is logged in, they can rate the various wines, book tickets for events, get preferential rates for booking events and manage their favourites.
The website also works in sync with the mobile app which we have developed with our partners Appetise. The website has been well received and was featured during the WineTubeMap events at the BBC Good Food show.