Ironhack project 2: e-commerce website — Le Petit Âne Vert
INTRODUCTION
Following my first UX/UI project at Ironhack (Ironhack project 1: wicked problems — immigration) I entered my third week of classes with a whole new project. Once again, those projects goals are to make us practice on real/fictional UX/UI cases to prepare us for real world subjects and already have some work on our portfolios as soon as the bootcamp ends.
For this project, I’ve been assigned in a group of 3 with my fellows students Jeanne and Thomas.
This time, the project is even more linked with reality because we had to find a real local shop and imagine an e-commerce website for it all the way from design thinking stage to high fidelity interactive prototyping for both mobile and desktop screens… All this in a week time.
Ready to dig into this new challenge?
THE CLIENT
Meet Amar. He’s Jeanne’s friend and the proud owner of the eco-sustainable grocery local store called Le Petit Âne Vert in the 12th arrondissement of Paris.
Amar is obviously very involved in sustainability and ecological subjects and wants to change people’s mentalities on these. He also was very enthusiastic in helping us during our project.
In his shop, he offers a variety of biological products (fruits, vegetables, dry products, dairy products, cosmetics, hygiene…) either in bulk or with returnable containers.
Now that we have our briefing and our client, let’s start with a little bit of research.
CLIENT INTERVIEW
As time was a huge constraint on this challenge (we only had 10 days to go from briefing to high-fidelity prototype presentation), we decided to interview Amar, the store owner as soon as possible in order to get as much information from him about this business right from the beginning.
So we created an interview guidelines document with a list a questions in order to conduct the interview in an efficient fashion. We went to his shop to make the interview, this way we also could immerge ourselves even more in the subject.
We carefully took notes and also recorded the interview (with Amar’s agreement) to be sure to get as much information as we possibly could. Below are the main insights that we got from the interview:
- The majority of the shop’s clients are coming from the neighborhood which is mainly composed of public social housing. For Amar, proximity is very important and he makes sure every client coming in his shop is greeted and has a personalized experience when returning.
- Resulting from this, Amar’s shop prices are actually quite low compared to what is the “norm” for this kind of shop. It’s a requirement for Amar who aspire to be a pillar in the local community.
- People come to his shop mainly to buy fruits and vegetables. As the neighborood already has several more conventionnal grocery stores, clients don’t see Le Petit Âne Vert as their main grocery store but instead come to support Amar’s business.
SECONDARY RESEARCH & BUSINESS ANALYSIS
Knowing all this, it was time for us to dig a little bit more on the competition and also the biological/eco-sustainable grocery market in France.
Le Petit Âne Vert doesn’t has direct competition in the same street per se. The other grocery stores around are all national large retailers or hard discounters such as Aldi, Intermarché or Franprix. But in a 5 to 10 minutes walking time radius, there’s direct competition with national biological and eco/sustainable store such as Naturalia, La Vie Claire and Biocoop. There’s also some direct competition with small shops with Champs Libres and Nous Épicerie anti-gaspi.
Now that we have an overview of the competition. Let’s dig a little bit more of what Le Petit Âne Vert’s competitors are offering with this competitive analysis chart:
As we can observe, almost every store has quite the same offering than its competitors. The main difference for Le Petit Âne Vert is being the only one not having a website, being an e-commerce website or a basic informative one.
We can also see that even without having a website, and so, delivery / click & collect services, Amar is offering other services such as Mondial Relay package collecting and also anti-waste baskets through TooGoodToGo and Phenix apps. Having different services is important for Le Petit Âne Vert as Amar its owner really want to be at the local community’s service.
Having focus on our shop, and its competitors, it was time for us to dig a little bit more on people who actually go shop in this type of grocery store.
USER RESEARCH
In order to get information about the users, we did an online research on people’s habits towards sustainable/eco-friendly stores but we didn’t find information that would be super relevant for us except for two:
- Almost half of French people (42%) that never buy in bulk says that they don’t because it requires to much organization (bringing your own containers for exemple). source
- 57% of consumers who are buying groceries in bulk are doing it in their traditional stores compared to 24% who are doing it in specialized stores such à Le Petit Âne Vert. source
These two insights reveal that buying products in bulk, which is something that Amar wants to emphasize in his shop offer, has to be an easier experience and something that has to be communicated on.
After getting these insights, we wanted to see it these would check-out with people that would be our target. So we created a survey about sustainable / eco-friendly stores, bulk buying and e-commerce that we handed to people that are in our core target group. We had 11 answers of people between 26 and 35 who consume eco-friendly / organic products.
As for the first part of our user research, we did not get a lot of relevant information from this survey but one insight got our attention:
- 72,7% of the surveyed people declared not being interested by a “classic” e-commerce service in an eco-friendly store.
Our project being to create an e-commerce service for a local shop and our client need being to attract more clients in his store physically, we had to come up with an idea to make people come to Le Petit Âne Vert.
PERSONA
Are you still following? After having digested this huge amount of information, it was time to come up with our main persona. Personas are fictional characters created based on the research to represent the differents user type that might use your product. They help understand the real users needs behaviors and goals.
So for our project, please meet Clémentine, our main persona.
Clémentine is our main persona, which means that we’ll mainly use her for the next steps. But as we found out during the research phase, we can have another persona and here is Jonathan:
With these two personas and our research, we then could define a clear problem statement in order to actually create a solution for it. Or I would say, “for them” because we have two problem statements here: one on the user side and one on the business side.
User: Our user needs to find a local practical friendly store that sells sustainable products at a fair price
Business: Amar wants to create an ecommerce website to attract more clients and change mentalities about eco-friendly grocery shopping
Our problem is clear enough, let’s jump to the best part: finding solutions to solve it!
IDEATION PROCESS WORST IDEA METHOD
Here we are, time to use our brains and come up with our concept. As we already knew that it would be difficult for us to imagine something very different and new, we started our ideation process with the “Worst Idea Method”.
Yes, you read this right! Actually this method was the best for our case because it helped us to think out of the box and get ideas that would not rely on our assumptions and knowledge.
The method is simple : in a short period of time (in our case it was 2 x 5 minutes), you have to come up with as many bad ideas to solve the problem as you can. After this first step, each member of the group selected 2 to 3 ideas and tried to improve them and turning them into good ideas.
After the second step of this method, we used the dot voting process: each one of us had two votes and had to put those votes next to the two ideas he/she’d find the more interesting to follow up.
Those votes led us selecting our main idea which is:
A classic e-commerce website with a “free product” that you can order on the website — among all the others classic products — but that you have to come get it physically in the shop (incentive for click & collect).
Now we have our main idea, we are getting back a little bit more into research in order to get more knowledge about designing a great e-commerce website for Le Petit Âne Vert in terms of information architecture and functionalities.
SITEMAP & HEURISTICS ANALYSIS
To begin with, as our client doesn’t have any website (at least at the time of our project), we analyzed the website that we thought was the most relevant in our case: Naturalia.fr
We found it is the most relevant because even being much bigger, Naturalia sells the same products as Le Petit Âne Vert and has an e-commerce website.
We started to re-create Naturalia’s website sitemap in order to understand their website architecture information structure. With this sitemap in mind, we had a clear understanding on how Naturalia’s website was working. We then focused on Heuristics Principles to see what wasn’t working.
Not familiar with Heuristics? They help us review a design to ensure we don’t miss any important function. While creating a website, it helps you think through the possible outcomes quickly and arrive at a solution that may solve your unique problem.
While analyzing Naturalia’s website we saw a couple of thing that were not working well so we put them in a table, ranked them and also wrote how we could overcome them:
USER FLOW
We now know what to do and what not to do to create our e-commerce website. But before jumping to creation, we have to know a little bit about our website architecture and pages hierarchy. So we’ve made a user flow chart to help us. What is a user flow? Well that’s a representation of which paths our users are able to take while navigating on our website.
Of course, in this project’s frame we had to focus on a quite simple user flow. I won’t be talking much further about it but you can see it below:
With this in mind, it is time to start to create our website’s screens!
LOW-FIDELITY PROTOTYPE
Let’s finally jump into our website design creation!
But we’re not creating a beatiful and ready to use protoype yet. We first have to create a “low-fidelity” version of our website just by… sketching.
This allow us to illustrate ideas very fast and iterate on them as fast as we created them. The main benefit of this is that you don’t spend a lot of money or time on something that won’t work afterwards. You just focus on being as clear and efficient as possible.
We decided to first create screens for the mobile version of the website. With this mobile first approach, it’s easier for us to then develop the desktop version because we’ll know that all our elements would then fit into a larger screen which isn’t necessarily the case the other way around!
MID-FIDELITY PROTOTYPE
Now that we got a better idea of what we want our website to look like, we can switch to a “mid-fidelity” prototype that will allow us to proceed to usability tests with real people.
We created our mid-fi prototype in Figma. You can see it on the GIF below:
With this prototype, it’s clearer to see how we display information and how our website is working. It’s. then time to find people to test it.
USABILITY TESTING W/ THE MID-FI PROTOTYPE
For our test, we had 6 people that were also in our core target group. 4 out of 6 tests were led directly with the person who was testing, the other 2 were done remotely.
To do our usability test and get feedback on what is relevant for our project, we 2 tasks that our users had to complete on our prototypes :
- Starting from the homepage, make you way on the website to the blueberries product page, add them to cart and then place the order without forgetting to select a click & collect slot.
- Starting from the homepage, make your way on the website to the free product page, add it to the cart and then place the order without forgetting to select a click & collect slot.
All of our users were able to complete to two tasks which means that information architecture of our website is quite clear. We still got lots of feedback about details and functionnalities. Here are some of them:
- Have some consistency on the buttons and make them bigger
- Add more details to the product page
- Make the burger menu bigger
- Create a scrolling section for the click & collect slot selector
Back to work: we iterated our mid-fi prototype with all the feedback with received and modified it and here it is:
As you can see, we brought all the feedback into our website. But it still lacks a little bit of life does it?
Let’s bring some color and images to it then!
MOODBOARD
Before rushing and adding colors, images, shadows and gradients here and there, we had to know already what our website look and feel would be. To do so, you need a moodboard. A moodboard is a document that gathers images, fonts, keywords and other visual elements and aims to communicate the visual aspect you want to bring to your project.
For ours, we decided to start with Le Petit Âne Vert blue and green colors and then add some more shades of green to emphasize on sustainability and a brown-ish color to bring some authenticity.
What a long journey it has been already. And yes, it is now time to go the final step which is designing and showing the final prototype of our website. Let’s go for the high-fidelity world!
HIGH-FIDELITY PROTOTYPE
With our moodboard set, we had a pretty clear view of the look and feel of our website. Then our job was to apply this to our prototype on Figma but also make it responsive in order for our users to have the best experience on the website whatever device they’re using. For this project we had to come up with a mobile version (the one we developed first) and a desktop version.
And after all this work, the moment you waited for is finally here: discover our prototype of Le Petit Âne Vert mobile version website:
If you want to test the prototype and also see the desktop version, you can access our Figma file here:
CONCLUSION
It has been a very intense project because of the very limited time frame and all the new information we all had to learn during it. It has been frustrating at times because you feel that with more time you could have developed this or this further and maybe the final outcome would have been different.
However, it’s been a very interesting project because we worked with a real shop with real concerns and objectives which is interesting. It felt more connected to the real life than our first project and this is already an advantage.
I really thank my colleagues Jeanne and Thomas for the amount of work we achieved on this project and look forward to the next one. But for now…
