Brief: The parisian grocery “Au Bout Champ” wants to give more information to sell more fruits and vegetables.
Team: For UX research part, it has been realized with the collaboration of Elina Lapierre, Amandine Laville and Ironhack teachers (Louis Massuel, My-Lan, Pamela & Romana).
Au Bout du Champ is a grocery composed in 7 stores in Paris which works with local fruits and vegetables farmers. This grocery has only a showcase website, that’s why Parisian can only buy in stores. After an interview with Julien, the stakeholder, we had a first preview of the unhappy experience of customers in store.
Research questions asked to user
- Why do you buy products at Au Bout du Champ ?
- What do you want to improve in your purchasing experience ?
- Will you be interested to use application to improve it ?
- What problem do you meet when you are in the store ?
- Customers loose time in shop because there is a lot of people.
- Not enought space in the store during affluent hours
- Lack of advices ( “how to cook this vegetable ? I don’t know it”)
- Lack of information about new products
- People have to complete their purchases because there are only seasonal fruits and vegetables and they need other ingredients to cook.
- To give quick access all products
- Give information about un-known products.
- Shop with more advices
In order to understand how Au Bout du Champ can give more experience that we can find on the market, I have analyzed the good and bad approach of competitors and found the relation to each another.
User Persona Snapshot
Anyone can buy fruits and vegetables in Paris. Thanks to a survey sent in local food topic groups of facebook, I target the parisian women managers between the age group of 25–39 who loves quality food, concerned by the environment.
User Persona journey
We have built the ideal day of Lola in order to define the pain points and her frustrations. At first, we are in the morning, Lola wakes up and meets her neighbors. She decides to invit them to diner tonight. When she arrives at her job, she doesn’t know what to cook because her fridge is half empty. After working, she decides to go to “Au Bout du Champ”, there is a lot of people and she can’t read the recipes displayed on the wall. She is desperate when she arrives at home but she decided to go to Marmiton website to find a recipe.
After studying the market and interviewing 5 users, we have used the “affinity diagram” method in order to organize the facts, the ideas and the problem by natural grouping. This method allows us to diagnose problems and generate a large number of ideas during a group work. That’s why, we have kept several good ideas about the context :
- The target : middle-aged, educated & busy customers
- They love original and tasty products
- They are attached to authentic shops and personal and human suggestions
Define the problem
After understanding the pain points and the needs of the user, we have cleared a real problem : How help customers to cook with new un-known products and keeping human advices ?
MVP Feature listing
Here we have developped several features for 3 retained ideas that we judged good for the user :
- Daily recipe suggestions in which customers can find Au Bout du Champ fruits and vegetables (as a basket)
- In-store pickup thanks to several time-slot
- Map localization for choosing the nearer store
After that, it was important to detail each feature :
It will take the photo and the details identification of the user. Hence, the app will give automatically the nearest store.
2.Recipes of the day
We proposed an evolution for recipes, thinking about 3 daily recipes (listing) and a details view with steps, number of person, additionnal ingredients needed, etc… .
The final booking is also as simple as the selection. The confirmation page displays the food selected, no payment mode, time of pick-up, confirmation.
Information of shop are important : opening hours, contact of seller, informations, adress. The user doesn’t receive his order, he will pick-up her fruits and vegetables basket.
As we have defined details of main features of the app, we have built the user flow to create an useful and usable application. Lola selects her shop, takes information about 3 recipes and the detail of one recipe. She adds to heir cart, log quickly with social application (Facebook, Google +), confirm what she wants to book for tonight and confirm the order.
For creating the solution, the skeletal framework of the design was done. After a set of trials, I had made the design of every screen.
User Tested Design
Before designing the real app, we have endured the usage of the app in paperwork.
After testing the flow, we had multiple remarks from various users.
1. They didn’t understand the aim of the application.
2. Some users found it’s tiresome with too many screens in the payment flow. Login seems to be in another place in the flow.
3. Other users think recipes are not complete : number of person for recipes is not clear.
4. Some labels have to be modified
Where the problem is analyzed, the solution is achieved.
Analyzing the feedback of the user from the critic round, I have completed the UI of the design. I was the one to work on this part.
- At the first, we noticed that users didn’t understand the concept, so I decided to create onboarding screens.
- I have redesigned all the recipes screen on two colomns to avoid to scroll a lot.
- Users want to add recipes without entering in the details screen, that’s why in the new version we can click on “+1” to put the recipe in the basket
- We have forgotten the necessary to keep in touch with the sailor of each grocery. In the new screens, at the end of the command tunnel, user can contact the grocery manager.
The first step for creating the design app is to make a moodboard with all colors, images, typographies which can inspire me. What we can found in our plate about colours, contents were my first inspiration. I have also analyzed the graphic chart about the group on their website and noticed their main color : the green. It’s was important to use it for the mobile application.
Style tile :
I finally retained the shapes of green, the red for notifications and a little grey to contrast. I didn’t retain the “Quicksand” font of the Au Bout du Champ chart for its lack of lisibility and I chose the “Roboto” font for a faster reading. I thought that green color can be use for its healthy symbol, as a main color. Shapes of red color will be used for notifications or
Some illustrations let to give a human approach.
Since the design is for Android, I have used all the basic material design styles so that they can easily relate. I let me to add some personalizations like the cut of the font in buttons. Some grey backgrounds underline white blocks and symbolize the hand-made work of productors. I know the green color is very present in some screens but I thought that it was a good approach to underline important informations.
For creating a good application, as an interaction designer we have to create clever micro-interactions. It’s a part of my work which needs to be well thought. Interactions in all the screens are not necessary and can become ineffective for users. In that case, information can become invisible. According to me, onboarding explaining the concept of the app needed interactions for attract users’ intention.
👉 All the user flow is here 👈
In this part, we test the appearence to the application. Users have to give 5 most important words for them on 40 words. I have defined 5 adjectives and 5 adjectives that I wouldn’t like to heard. The rest of the words are part of the semantics.
5 users have tested this applications. 80% have thought that the design was honest and friendly. 50% have found that the mood is trendy. It was a good feeback because it’s really the values of Au Bout du Champ business.
This project was my first UX project. It was really fun and interesting to work with my team and listen to the users. I understood that exchanges with users are the key to create a usable application.
- Creating the next micro-interactions
- Connecting to grocery store stock
- Contact a developer to realize the app