Épicerie Circulaire

For the second project in Iron hack’s UX/UI Design bootcamp we got the opportunity to help a local business.

The challenge: Designing a desktop website for a local shop to improve their online presence to be more competitive in the actual market.

Week 1 — the UX part

The customers

We conducted 4 user interviews to get insights into the customers habits, wants and needs and especially their pain points.

After transcribing the interviews, grouping them together in Affinity diagram we dot voted on the pain points we thought were the most important ones and where we could contribute to improvement:

“I’m not buying more zero waste items because of a lack of options near my home”

‘’I might be convinced to buy online if I was aware of a good traceability, good prices and a good brand story’’

“I think having a website selling anything you want at the same place would be a good thing’’

The competitors

To get an overview of the competitors and the Épiceries market positions, we did several analyses. We included two local stores located in proximity of the store, a zero-waste chain, an ecological chain and a big supermarket chain. We included the larger chains because we assume some clients will go to these stores due to convenience.

User Persona

Based on the insights from the user interviews we created a primary persona called Anti-waste Antoine. We did this to get a better image of who the core customers are.

User journey

We imagined Antoine being in a situation where he can’t go shopping in his favourite zero waste store, due to COVID-19 regulations, however this can apply in multiple situations, like being located too far away from the store.

His pain points then clearly show themselves when we do find the shop's website, but they do not have enough information on their products, and they do not have an online shop.

In addition, there are no delivery options and no way to return packaging.

Problem statement

We all brainstormed a lot of problem statements using a customer centred approach and, in the end, decided on the below statement. We believe it best describes the problem the clients are facing based on the information we got in the user interviews.

We then decided on three how might we’s to help us find the features we needed to create the best solution.

• HMW help users find the goal of this zero-waste store and provide them with information about the product they sell?

• HMW help users buy the products online and do it in an efficient way?

• HMW help customers to have more information about the process of zero waste online, like how to return containers, so they can live a zero-waste lifestyle.

Minimum Viable Product Statement

After using the MOSCOW method to agree on what features we needed to have on the website we created a Minimum Viable to clearly define what this website needed to be and to not be tempted to add all the other things we wanted to add.

User flow

For this assignment we needed to create a happy path for this website. One main action to complete. To visualize this path we created a user flow chart that shows the user buying an organic yoghurt. We also created a site map.

Concept sketching and testing

To test our idea, we sketched out the frames to be able to test them. We tested them with three people. Ideally, we should have tested it with more people but due to time limitations we did not. However, there was similar feedback from the users. Like confusion with the weight option and default number being 0 and not 1 in the product page and too many submenus on the HP.

Mid FI prototype

We applied most of the feedback when designing the Mid FI Wireframes

Usability testing

After testing the MID FI we made new changes to the wireframes.

The recurring feedback was

• Too many submenus (still)

• Lack of filters

• Confusion with the quantity drop down that was in fact a weight option

• Clearer delivery scheduling

We also had some technical limitations with Figma, we did not make the frames scrollable.

With this feedback we made some changes to our Mid FI.

• Instead of the drop down/ submenus on the HP, the user now goes straight to a page with all products. We added filters on the side and a sort by option.

• On the PP page we changed the wording Quantity for Weight. And changed the Drop-down menu for buttons. As well as making 1 the default quantity.

• On the cart pop up we added a more visual delivery scheduling.

Week 2 — the UI part

New for this week and this project was the UI design.

Visual Competitor Analysis

We choose the brands Zero waste Bulk foods, L’intendance, bio c bon and Negozio Leggero. We pulled some images from their websites and analysed their colors and what brand attributes we thought they represented.

Brand Attributes

We brainstormed all the adjectives that came to our minds. We added them on sticky notes on Figma. We then regrouped the stickers and dot voted on the group we thought represented the brand best. From the groups that had most of the votes we picked the word we thought was the best fit.

Brand Attributes before testing: Responsable/ Engaging/ Sociable/ Innovative/ Healthy

After testing the Mood board with the class, we changed the words a bit as we realized some of them where too similar and generic.

Brand Attributes after testing: Eco-conscious/ Engaging/ Innovative/ Accessible/ Quality

Moodboard

We found images online that we believed best represented the brand attributes. We then tested it with our class that wrote down the 3 adjectives that came to mind seeing our moodboard. They were not 100% the same as ours. So, we changed our moodboard a bit. We had focused too much on the actual business and not the feeling we wanted to evoke with the board.

Style Tile

Based on our Moodboard we decided on using earth tones to communicate our brand attributes. We decided on an orange accent tone to make it stand out and we believe it went well with our attribute accessible. We had first tested a greener palate as the color is well represented in the moodboard, however we decided not to use it as it is overused in the eco friendly world.

HI FI Prototype

We added all the typography and colors to our Wireframes.

Learnings

It was an interesting project to work on. It again shows how important it is to always be thinking about the clients. For me, the most interesting and frustrating part is to create the wireframes. Little by little learning what mostly work and what does not. How to create designs that are clean and easy to use.

The new part for me was the UI part which I also enjoyed but I look forward to being able to work more with it.

Thank you so much for reading my case study, please don’t hesitate to leave a comment.