Ironhack Project 2: e-Commerce/Practitioners Website
INTRODUCTION
This is my case study for my second project at Ironhack. The challenge this time was to design a responsive website for a local business or professional. We were in a group of three and had seven days to finish.
Because of the extreme situation COVID-19 has created around the world, local shops and practitioners are seeing a drop in demand for their services and products. This can have a negative impact on local economies as well as many families. At the same time, we see a growing trend to support local businesses in many communities.
Online presence is a good way to hijack the issue. More and more professionals are on the verge of their digital transition. Let’s help local shops and professionals improve their online presence to be more competitive in today’s market.
THE PROBLEM
So to start we had to find a business that wanted to work with us. That did not go as planned. Many just said plain “no”.
Our client
Then we talked to the manager at CAVAVIN Charonne, Patrick. He agreed to an interview but said he had no interest in having an online website. So off to a rough start.
CAVAVIN is a franchise platform with more than150 franchisees, each wine merchant offers at least 600 to 800 alcohol products. CAVAVIN stores offer a warm and cozy atmosphere that focus on very good value for money.
Industry research
We needed to do industry research to understand the business, what drives people to go to wine shops, who are the main competitors and who buys alcohol online and in store. After the research we found for example:
- Covid-19 majorly changed the way people do business
- Wine e-commerce is strongly growing over the past ten years
- Millennials the biggest age group of customers buying alcohol online
- Nicolas is their main competitor
Interview the manager
The manager of the store Charonne main focus is personal service and advice on what wine to buy. For him it’s also important to get feedback when the customers return to the store. He doesn’t think an online store will help with that. He believes that a website won’t deliver the personal service like he does at the store.
The competitors
Competitive analysis matrix of three biggest competitors was the next step. Focused on other franchisees and wine shops in the 11th arrondissement in Paris. We had four main groups like shop info, reviews, online info and service and customers. After having gathered that information we could make a perceptual mapping.
Heuristic evaluation
We did a heuristic evaluation of the main competitor, Nicolas.
A heuristic evaluation is a method of inspecting and evaluating the usability of a website, or product. To be honest there are a lot of things Nicolas could do better on their website like you can see.
SWOT
After looking at the competitor we had to make a SWOT analysis to see more clearly where our strengths and opportunities were. SWOT stands for Strengths, Weaknesses, Opportunities, and Threats. Strengths and weaknesses are internal to your company, things that you have some control over and can change. Opportunities and threats are external, things that are going on outside your company, in the larger market. There we saw for example that customer service was our biggest strength and the location and the size of the store had potential for degustations for example.
Interviews
Still a little bit lost what to do and how to find an online solution for a business that isn’t interested in having a website. We decided to do a CDS matrix. CDS stands for Certainties, Suppositions, and Doubts.
There we write down our suppositions and doubts that we have and from that we could prepare interview questions to get answers to those suppositions and doubts. We interviewed six people and gathered their answers in an Affinity diagram. Affinity diagrams help us generate, organize and consolidate information.
Pain points and needs
For the interviews and affinity diagrams we could pinpoint the pain points and needs of the users. Interviewers needed to get advice when buying expensive wine and thought it was really important to taste the wine before buying it.
User persona
From all of the information we had gathered we made our user persona, Laura.
Problem statements
Now we had two different problem statements. One problem statement for the user, the other one for the manager.
User’s problem statement
An aspiring wine drinker needs a way to get informative advice on how to combine alcohol with meals. They don’t know how to pair them and want to avoid being disappointed in purchasing products.
Manager’s problem statements
Manager of the store Cavavin Charonne needs to keep human contact because he wishes to keep receiving feedback on his advice.
SOLUTION
Ideation for the solution
So two different problems that we need to combine. After brainstorming through ideas and also crossing some of them out right way we found our solution.
Our solution, a website where you can sign up for degustations. There our user persona, Laura, can go online and sign up for a degustation that fits her needs. Is she looking for pairing wine with a certain type of food or cheese or is she just looking for a good red wine to share with friends? At the same time we keep the human contact and the feedback the manager wishes for.
Site map
Having found a solution we made a site map of the website. Because CAVAVIN already has a website we wanted to have our solution integrated into the main website. So from the main website you would be able to pick the store you wanted to have a better look on.
From that home page you could see the gift boxes they already have for sale online, find another store you are looking for, log in or sign up, see the degustations available or your chart.
The degustations would have three options. Degustation for one person, two persons or a group.
Mid-fi prototype
Started on the mid-fi frames and focused on three main frames. The home page, the degustation page and the chart.
Usability testing
Then we could do some usability testing on our mid-fi prototype. Got some good feedbacks like
- To have on the homepage a quick description of the degustation
- Give more quick access to the page of the degustation
- Remove the upcoming events because they didn’t understand the link with the service provided
- Didn’t understand the “in person” so we change it to “one person”
Hi-fi prototype
Because CAVAVIN already has a website we decided to keep the same color palette and outlook that they already have. Here down below you have photos of the hi-fi but you can also visit this youtube link to see the prototype.
NEXT STEPS
Our next steps would be to do some more usability testing on the website of course. Get permission to make a direct link from the CAVAVIN main page. Add a calendar in the user flow and chatbox for advising. Expand the profile section, Show user the availability of manager in real time and add review section on the degustation page including ratings and comment section.
SUMMARY
I learned a lot from this project. Looking back on this process I can certainly see it more clearly than when I was working on the project itself. Seeing how going through all of these steps that we are learning about and encouraged to use helps us find a solution. We had a double sided problem which was also hard to even begin to think of a digital solution for. But having those steps and tools helped us find a solution in the end.
For the UI part of the website though, there are many things I know today after getting feedback and learning more about UI that I would change.
For example:
- Having a white font on a yellow frame like the buttons are now — doesn’t work.
- Having the same color on the selected overlay and the headline confuses people.
- Not having a photo background after your scroll down the home page and so on.
I could probably go on and on about UI design points that could have been done better but we are here to learn and hopefully we will never stop learning new things.
Thanks for reading my second case study!
