Pop the Wine — E-commerce design
Helping a small and super cool wine shop from Lisbon to create an e-commerce
So, another Ironhack challenge where my amazing group did a great job. Meryll Davis, Emanuele Tibaldi and Kat. A bit thank you for everything.
Challenge
The challenge was to design a desktop website for a local business or professional. The focus of this project was to organize the information on the website in a clear way, so we did a lot of work on the Information Architecture using lo-fi and mid-fi prototypes.
The client
Pop the Wine is a small shop that our colleague Meryll Davis knew and loved. It’s a local business owned by Luis Miranda, and it sells natural, organic, and biodynamic wines from small businesses in Portugal. Also, he sells art from local artists in his shop and sometimes organizes cultural events there.
The business
We did a visit to Luis to ask him if he agreed to be interviewed and the “object” of our research. He doesn’t have a website yet but he agrees to be a part of this project. His business:
- Only markets his wines through Instagram
- Sells them in boxes of three
- Buyers message him on Instagram
- Free delivery
The Problem
He doesn’t have a website to promote his brand and maybe do more sales. He focuses only on the customers that already know him or his store.
Our Solution
To build a website for the shop, including e-commerce to increase the sales but with a simple layout. We wanted to reflect the mood of the shop, with information about the producers, since he works with small familiar producers. We want to make the website with the same personal and connective mood we found in the store.
Research
First of all, we needed to understand his business needs, clients, and objectives. Also, we needed to understand his market with some competitive analysis.
Survey
To define the scope and questions of our survey we used the Lean Survey Canvas.
With this information, we created our survey and distributed it. In total, we had 28 answers and really good insights.
With the Qualitative data, we found that:
Interviewing the client — Talking with Luis
Luis's idea was to have a wine store for wine, music, and art lovers.
He is a Sommelier and sells only Natural, Organic, and Biodynamic Wine from small family businesses of Portugal. He’s not thinking about a website right now but it would be an improvement to his sales on Instagram.
Competitive analysis
In the competitive analysis, we compare Pop the Wine with other 5 wine stores from Lisbon. We found that:
- Pop the Wine has free shipping all over Portugal — the others don’t
- In the market, there’s only 1 e-commerce focused on organic and natural wines
- Pop the Wine has a loyal customer base
Site map
Now was the time to create our site map based on the ideal user flow. We started by doing a brainstorm and agreed in some parts that were really important for the users.
To verify if our suppositions were right we tested the site map with card sorting. With this step we found that we needed to simplify our site map even more. We had too many information in the menu, and things that users didn’t need in a wine shop e-commerce.
So, we created a simplified site map and now we can work the information architecture of our website.
User flow
The ideal user flow would be this one:
But well, based on our card sorting and previous research we found a clear and intuitive user flow. The main goal of the user if to buy wine in our website, so we need a simple but with good information flow. The users want to know about the product background but also want to buy really fast (sometimes not even login-in) and finalize the purchase really fast without many steps, or information to share.
Information architecture
After we did the User flow we created the complete information architecture of our website. For our prototype we will test only the Buy a wine flow but since the store also sells arts and promotes events we already included it to our information architecture.
Lo-fi Prototype and User test
With all the structure build, we started to think about the layout of our pages to do our lo-fi prototype.
We create a simple homepage with information about the producers to show how interesting is their products.
For our e-commerce page we divided the wines by type: Natural, Organic, Byodinamic and we also add the boxes of 3 that Luis already sells.
For the product page we wanted to have those traditional wine information like the taste, with what it matches with, etc.
For the purchase flow, we wanted a complete login, with user login, create account, login with Google, Apple or Facebook and buy as a Guest. Also, a clear way to the user confirm the information about the purchase.
With our lo-fi prototype ready it was time to test it. We test with 5 users that drink wine (one of them not much).
They gave us some good insights for our mid-fi prototype:
Use filters in the products page to select the wines that they like most (like only red wine).
Have more than one producer in the home page, to see different stories.
For now, the purchase process was smooth and intuitive.
Mid-fi prototype and User test
For the mid-fi prototype we did some improvements but followed the same structure since users in the lo-fi test really liked our user flow and architecture of the website. We knew from all the research and user test did before that:
- Users want more filter options
- Users don’t want to create an account and want to have the opportunity of buying as a guest
- Users want fast payment options
This time, users had a more clear view of how the website would word. The did the prototype using Figma and did a user test with 5 participants.
With the user test with our first mid-fi prototype we had really good feedbacks. With this feedbacks we improve our mid-fi prototype and here I’ll show them in details:
Filters Page
“The filters are too big and I wish to have them more divided by type of wine, region, etc”
We made it smaller and divided into Type of wine, grapes and region.
Product Page
“It’s too big and the Add to card button is too big and not aligned to the image”
“I wish I had more information about the properties of the wine more on top of the page”
We made it smaller and with more information in the page to better understand the characteristics of the wine and with what it pairs well.
Login Page
“I want to login as a guest but the button is weird, I almost could’t see it”
We made the “login as a guest” a button.
Payment page
“Oh, too many pages to pay, I don’t like it”
We made is smaller and with all the information in one page.
Review page
“I don’t know if I want to review but it’s too many information to review, maybe it’s too big”
We made it smaller and with all the review information fitting the page better.
Final Mid-fi prototype
Ta-da!
Our last mid-fi prototype.
If you want to test it by yourself you can do it by clicking here.
Next steps
Since we didn’t test our second mid-fi we need to test it again with some users (if you test it and have some feedbacks, please leave in the comments).
Also we want to show all the process to Luis, so maybe he get’s excited and create a real e-commerce for his business.
It would be really interesting to help him with this since we know it’s really hard to have a small shop, and now with Covid businesses have more difficulties to connect with consumers. So maybe going online is the best solution for small companies.
I wish I could help more since I already had a company and I know how hard it is, and I know that having a website is not enough. You have to be a good seller and for sure Luis is. He is a great guy and I wish him all the luck!
Pop the wine!
https://www.instagram.com/popthewine_lx/
Monday to Saturday, 16h — 22h