“Vino Chance” — your perfect wine
Do you feel clueless about choosing the right wine? Let us help you find the perfect wine for you.
This project was carried out as part of the TechLabs “Digital Shaper Program” in Dortmund (winter term 2021/22).
In a nutshell:
The project “vino chance” was all about finding the perfect wine based on your taste or food choice for the night. We all know the problem of standing in front of the wine shelf in the supermarket and being overwhelmed with the wide range of wine bottles. In our project, we developed a website whose main focus is the filter, where you can choose different criteria to select the wine. Also, the website wants to resolve the overwhelming lack of knowledge by providing basic information about the wine.
Introduction:
Even though the problem description did not come from a member of our team, we all were intrigued when we read about the problem, which we all know ourselves pretty well. The background of our project is that there is an overwhelming selection of different wines at supermarkets, a lack of knowledge, and different tastes in wines. And the website should help select the right wine for the right occasion. It should help wine newcomers and enthusiasts with their selection, recommend the perfect wine fitting to their taste or depending on the dish they want to eat, and help wine experts or those to be to broaden their horizons. Also, it should help people who do not know anything at all about wine to finally learn the basics, which they can even brag about to their friends.
Our main idea to solve the problem was to create a website that is linked to a dataset in the backend, which should include thousands of different wine bottles from many different producers and regions. With a good-working filter on the website, the user can select different criteria which the wine should fulfill and thus find their new favorite wine. We also wanted to highlight the idea of the wine-fits-to-the-food-idea, so we wanted to create another way of finding the right wine. We wanted to give the user the option to choose the food that they want to cook that night and then get the perfect wine for that meal recommended. The last component of our idea was to create a landing page on this website, where the user can learn more basic knowledge about wine. What kind of grapes are there, where can wine be cultivated, and what kind of wine types are there? That was a crucial thing because, in our mind, the filter could only help this far without having more knowledge about wine. Because if you want to impress your friends with your great wine choice, you should also know a little bit about your wine.
Methodology:
To solve the problem and bring our idea to realization, we first started as a team, trying to concretize and synthesize our idea with our skills. In the beginning, our team had two data scientists, one web developer, and one UX Designer. Later on, Alisa, our machine learning expert, joined our team, too. We created a Trello Board and planned the timings in almost-three months that we had to work on our projects, so we would not have problems in the end. We also decided to meet weekly to talk about our process, problems we encountered, or if we wanted to change something. We used a kind of weekly sprint approach for the review and refinement of our project. Lastly, we decided to use OneDrive and later Google Drive in addition to GitHub and Slack for working on our documents.
After we focused on project management, we started to focus on the different skill areas. The data science team started by researching suitable data sets which would be both free and also big enough to make our filter really useful. They simultaneously did an analysis of the competitor’s data sets to understand the application and usage better.
In the beginning, Pauline and Kathi, who were responsible for web development and UX design, also worked together as a team to create a mutual understanding of what the website should look like and what features the front end should have.
To create that, they also conducted a competitor analysis which was rather focused on the concept and design of different websites. They also looked at other state-of-art websites they found appealing to understand what makes a website interesting and easy to use for the user. It was also important to check in with the data team in that step to see if there was useful data to create the features the UX-Design / Web Development had in mind. The competitive analysis can be found on our mural page, which we will link right here, so you can check it out:
After researching different competitors and possible solutions for our website, Pauline, the UX Designer, started to search for user feedback to understand the possible uses of vino chance better. On that the one hand, countless review pages were looked at to see what the users of other websites liked or did not like and what was important to them. Furthermore, they researched wine drinkers in Germany, in general, to get a broader picture of potential users and made assumptions based on that information. The assumptions were, for example:
- The person does not know about wine or is just starting to learn more about wine
- The person already knows a lot about wine but wants to know more options for the wines they are familiar with
- The person is looking specifically for wine, e.g., from a certain growing region, a certain price range, and wants to know what it really tastes like and what others think
They also conducted an interview with a possible user of vino chance. He was a man in his middle age who liked to drink wine but was never really exposed to a lot of specific wine knowledge. In the interview, multiple questions were asked, for example, how they normally choose their wine, what they are looking for in wine (for example, being cheap, looking pretty, tasting good, etc.), what would make them use a website like vino chance or competitors to find their wine. This helped to really empathize with the users and understand their needs better.
After gathering all this information about the users and also about wine in general to understand the product better ourselves, they created two personas together to visualize the user needs. The personas and user stories are located on our mural board as well. Their top pain points are having no (basic) knowledge about wine available and being quickly overwhelmed; they do not recognize good and favorable wine which fits their personal taste and have a fear of buying wine, which in the end, does not taste good but was really expensive.
With all that information gathered, a user journey (also located on the mural board) was created, which later functioned as a base to create the first sketches. The very first sketches were drawn by hand but quickly brought to Figma to visualize them digitally. Often components were designed roughly and then overthrown because they did not really work as a flow.
But soon, the sketches became the first wireframe, which still exists in the Figma file.
In the wireframe, there is no design available, just the user flow, the suggestion of different components on the pages, and very little detail to see if it works in general. This was also discussed with the team before the design was included. Simultaneously we decided on the logo and colors we wanted to use in the design. For that, we got inspired by the typical colors of wine, such as dark red, green, champagne, purple, rosé as well as white and gray as neutral colors. The design should be minimal but also friendly-looking so people would feel invited to browse through the website by looking at it. We also choose a simple and popular font, Montserrat, to stay in the modern style.
Kathi, our Web Developer, started developing the website according to the wireframe right after the first outline was set so that we would have a base to start off with. She decided to use react js as it allows to create fast and simple web applications. In the first step, a landing page was created, which had a simple navbar and a footer. After Pauline chose the main design features, Kathi adjusted the colors and fonts.
Then, she began to more and more implement the wireframe, e. g. the homepage with its background and a button leading to the wine filter. Also, on the page ‘about wine’, cards with basic information were added. Due to a lack of time, the subpages with more information couldn’t be developed.
To have a base for our own filter, Kathi first implemented a filter fetching another API to start with and then adjusted it as we combined react and flask.
A quick overview of the development of the website can also be found in our MURAL.
After we found a good dataset, the data science team then began to analyze it to get an understanding of the data we were dealing with. Then it was time to prepare the data for the website and the machine learning for the food recommendation. For that, we split up in two. Anna made sure the data was ready and filtered for the general filter of the website. The idea is that the user can filter the wine data to his or her needs in terms of wine category, origin, price category, and with or without food.
We also decided to already add a simpler approach to connect wine to food in case the machine learning part doesn’t work out — as a backup plan. We used a website and researched the internet in order to get a basic understanding of wine-to-food-match.
We mainly made use of two infographics which helped a lot for a simple match-making-process:
- https://s.yummlystatic.com/s/media/Yummly_Wine_Pairing_Infographic_BB.png
- https://www.inspirationoutdoors.com.au/apres-trek-walk-and-wines/different-types-of-wine-v2/
First, the different grape varieties were organized into different wine categories like dry white, medium red, sparkling, etc. These categories were then assigned to different food categories like vegetables, hard cheese, fish, red meat, etc.
Last but not least, we also built a simple backend with python with the framework flask and connected it to our frontend. It was kind of a challenge combining the two, but in the end, we got it. Unfortunately, due to a lack of time and some technical problems, Kathi could not implement a real filter but a search console.
Tayfun was responsible for the data preparation for the machine learning part. Since the available dataset contained detailed descriptions or reviews of the different wines, Natural Language Processing (NLP) was a natural choice. After reading into the topic, the main idea was to train word embeddings for the aroma and non-aroma descriptions. The review data in the Amazon food dataset and the wine dataset were processed separately, but the main idea was the same. In both data, unnecessary stopwords or prepositions had to be deleted. Each review was reduced to its word stems so that each review entry was a list where each list entry consisted of the word stems of a sentence. In addition, bigram and trigram models were created because word compounds such as ‘high-tanning’ sometimes occurred in the reviews to describe an aroma.
Reviewers gave similar descriptions of an aroma, and so these were grouped together and assigned to an adjective or even a description. For this purpose, a ready-made mapping file was accessed.
For the machine learning part, the wine dataset had to be adjusted. In addition to the description, information was made about the type of grape (grape variety) used for the wine, as well as the geographical growing locations of the wine. Only reviews that occurred often enough were considered. Therefore, only the data where the grape variety in combination with the growing location occurred more than 30 times were considered further. Unfortunately, the preparation of the datasets for the machine learning part was a bit too complex and needed further understanding in the field of Natural Language Processing, so the recommendation system to find a suitable wine for dinner could not be finished.
Results:
The final solution of our project is a simple web application where people can filter within a huge data set of wines according to certain criteria.
Our results help people to learn about and explore different wines.
The next steps in our project would be to further develop the website according to the wireframe, fill it with content and implement the filter. Furthermore, we would like to develop a QR Code Scanner, so that people can scan a wine in e. g. the supermarket and find suitable food.
A long-term goal for our project could likely be an app, making it even easier to scan and search wine. Furthermore, a machine learning program that automatically matches wine and food.
We want to say that the project was sometimes tricky and not as easy-going as we expected it to be, but still a very interesting and fun experience. We as a team worked together well, and the weekly meetings were very useful to keep on track and prioritize the project in our rather busy schedules. We only can recommend taking the digital shaper program to learn more about tech skills but also about yourself and how you work in a team.
The central results of our project are:
- the website on MVP Level, which has the first version of a filter function,
- a matching dataset,
- and wireframe as a long-term goal for our website.
GitHub repository:
Team members:
- Alisa Gromova (Artificial Intelligence)
- Anna-Lena Warrink (Data Science)
- Tayfun Kalembasi (Data Science)
- Pauline Nothhaft (UX-Design, https://www.linkedin.com/in/paulinenothhaft/)
- Kathi Zimmermann, (katharinazimmermann697@gmail.com, https://www.linkedin.com/in/katharina-zimmermann-619546171, Web Development)
Team mentors:
- Florian Zimmer (Overall Management)
- Kai Bitterschulte (Web Development, Data Science)
- Nico Kranz (Web Development, Data Science)
- Saumya Bhatt (UX-Design)
Sources:
- All pictures used are from https://unsplash.com/, which provides freely-usable images.
- The wine bottle pictures were used from https://www.vivino.com/DE/de.
- Both datasets can be found on Kaggle:
https://www.kaggle.com/datasets/snap/amazon-fine-food-reviews
https://www.kaggle.com/datasets/zynicide/wine-reviews?select=winemag-data_first150k.csv.
