Ironhack Challenge 2: Wireframing Vivino
For my second challenge I decided to wireframe Vivino’s app, the world’s most downloaded and used wine app; a successful mix between a social network and an online store.
According to their own website:
Vivino is the world’s largest online wine marketplace and most downloaded wine app, powered by a community of millions. Vivino’s unique wine shopping experience uses community data to suggest personalized wine recommendations…
This duality makes the app (to me, at least) a curious hybrid to analyse. And, of all the flows available, I decided to focus on the apps’ most outstanding feature, the one that grabbed my attention when I discovered it and the one I use the most: Scanning a wine’s label and rating it. The process is simple, take a picture of the label on a bottle of wine and rate it, so I know if I tasted it or not years from that moment.
Another version of this feature is to scan a label so Vivino’s AI can fetch all the info it has about that wine; name, cellar, region, grape varieties, tasting notes… Incredibly useful when one has to buy a bottle of wine for a dinner or for a present.
The first thing I did was to draw a chart of all the app’s flows to choose the path I would follow. I decided to capture one wine, review it and buy 10 bottles of it.
After choosing the flow I’d work on, I started by doing a quick sketch of the process, so I could be aware of anything I might miss otherwise.
After that I started gathering all the images I would need for the wireframe: Vivino’s graphic identity, the icons used in the app, the images I would need for wireframing…
The job was to do a wireframe of 5 screens, but I decided to add an extra one to include the buying process. I was intrigued to see how it was solved because, at the beginning, I thought it might have been tricky to navigate from the rating and reviewing aspect of the app to the purchase of the wine, from the social network to the online store, but it was completely painless and required absolutely no thought work at all. Even I managed to do it in a breeze ;-)
In the end there was more clutter than I had envisioned previously, and than I would have wanted, but I felt that using crossed boxes for all photos was a bit confusing and it made it more difficult to understand at first glimpse the pictures that belonged to the app and the ones that were captured on camera by the user.
The workflow (which can be seen here) is very swift, but I wasn’t able to turn that swiftness into lightness at the stage of wireframing.
All in all, a very lightening experience. But tough, because when one is learning, doesn’t know when something is good enough; and I could have spent 100 hours doing this task.
