Adding a wine-shop database to the Vivino app
Ironhack week 4 | individual project | 3 days
On this week’s project, I had to analyze an already existing and highly adopted app and incorporate a new feature based on an area of functionality to be explored and compared to user input. All of this in three days. The app I had to develop a new feature for is Vivino.
Vivino app
Vivino is a wine database that has more than 9 million wine entries. It has a community of 30 million users that review, rate and buy wine through the app. They can get information like the average price of a bottle of wine, the characteristics of the grapes and pairing with the food, for example.
My task this week was to create a database of wine-shops and wine-events on each city on Vivino.
Research
I interviewed six Vivino users to learn about their habits using the app and the desirability of the new feature. I had to follow up on each question with the 5-why protocol to dig deeper into the answers I was given.
One of the main inputs I got from the interviews is that the users mainly use the app to scan wine labels. They compared it to “Shazam a song” but with wine. They scan a wine bottle label that they have in front of them and they get information about the characteristics of the wine instantly.
The heavy users of the app (those who use the app weekly) were especially interested in a shops and events database and said they would use it. The rest of the users said that if the feature would work properly they might/would use it. Some of them were a bit skeptical that the shops’ database would work better than Google Maps.
In general, all the users seemed to be more interested in finding where to buy a bottle of wine in a nearby physical shop rather than finding wine-events on the city so I focused on the wine-shop database feature when developing the prototypes.
Low-fi prototype
I found three ways where and how I could fit the feature (finding nearby wine-shops) in the app and I tested all of them with low-fi prototypes.
I created three flows of tasks based on the context the users would be using the feature. On the first one, the user is in a restaurant, has a bottle of wine in from of him/her and scans the bottle to find out the nearest shop (users said they wouldn’t do this when they are in a shop). In the second scenario, the user has the bottle already saved in his/her profile and from there he/she would find the nearest shop where to buy it. The third option would be that the user wants to find nearby shops directly.
After the low-fi user testing, the option that the users were more likely to use was the second one: they have a bottle of wine saved on their profile and they search for the nearest shop where to buy it.
User flow
The user flow of the task is the following:
Below there are the current screens of the Vivino app: Homepage > User profile > My wines > Specific bottle of wine information. The new feature would be placed on the last screen (Information of the wine screen) and from there would be two new screens.
Hi-fi prototype
Before starting to design the hi-fi screens of the app I created an Atomic design library with particles, molecules, and organisms.
The kernings and the sizes of the text were not consistent throughout the screens. The fonts were not different enough for it to be noticeable on the bare eye but they were slightly different when recreated in Sketch so I had to invest more time than I expected in this section.
After recreating all the screens in Sketch I put together a hi-fi prototype with InVision:
Next steps and take away
My next step for this project would be to do more testing with the hi-fi prototype as I just got to test it with two users. For the following screens, I would spend less time checking inconsistencies between the fonts sizes and tracking and I would focus on having the hi-fi prototype ready for early testing.
This was my first time using Atomic design. At the start of the project, this methodology can seem a bit tedious but afterward, when all the assets are organized and ready, it speeds things up the process and it helps to have visual consistency.
