La Fourche

About the project

As part of a Product Design training bootcamp taught by The Design Crew, I was asked to work on a problem encountered by La Fourche, an online organic grocery store. In teams of 3, we had to understand the problem, explore potential solutions and test them with users in order to increase the completion of first orders and the conversion to a paid subscription. We delivered an interactive prototype to La Fourche's Lead Designer, to give her an external point of view to a problem they are trying to solve.

The fairest online organic grocery shop

La Fourche is an e-commerce website that strives to make organic products and responsible consumption accessible to everyone. They offer products up to 50% cheaper than in retail shops, deliver them everywhere in France and work with a subscription system that users have to register to have access to the products catalog.

Founded in July 2018, La Fourche now have over 30,000 paying members, secured funding and went from 3 co-founders to a team of 30 enthusiasts. Relying on their loyal and engaged customers' community they call The Tribe, they are now creating their own product range and aim to become the benchmark for organic online shopping in France.

Relying on an e-commerce infrastructure, they have been building their user experience without much consistency so far. Now that they are becoming one of the largest company of their market, they are recruiting their first product designer to transform business objectives into effective design.

The problem

La Fourche wants to activate their users by making them place a first order and convert them into paid subscribers. Today, 20% of their users do not place an order within their month of free-trial and 35% of them do not convert their free-trial into a paid subscription. The design team has now to solve the following problem:

We tried to solve this problem through a carefully crafted process comprising research, design, iteration and user testing over a two-week period. To make sure we reach our objective, we built a Notion workspace centered around a Gantt roadmap.

1. Discover

We decided to tackle this complex problem using the double-diamond framework. First, we entered the Discovery phase to understand the roots of the problem, the context and the constraints we will face.

App Mapping

We were not familiar with La Fourche's website, so we decided to do an audit and map the customer journey both on desktop and mobile. We indexed every screen the user faced from the homepage all the way to the confirmed order. This analysis allowed us to get to know the current flow better of the app and identify its main flaw: the length of the ordering process for a new customer.

There were 10+ screens between the order button to the payment confirmation, with two separate payments needed: one for the subscription and one for the order. An online purchase must be an efficient and fast process, as most of the customers buy groceries on the web to save time: the subscribing and ordering process must become faster more efficient.

Business Model

La Fourche's unusual way of doing e-commerce made us spend some time trying to understand it. To order from their catalog, users must subscribe to a 60€-a-year plan. This allows them to offer lower prices by amortizing low margins, but requires strong engagement from their customers as well as an important level of trust. To reassure new users, they offer a 30-day free trial  allowing them to order and benefit from the same prices as the premium members.

We discovered that the usual user goes through 4 stages. La Fourche's business objective is to convert as many visitors as possible to paid members, as this is where lies their biggest source of revenue.

To make sure we stay on track to solve the problem, we decided to go further and map entirely the user journey of a La Fourche visitor, and define the scope we will be working one. We defined 6 steps and decided to focus on 3.

Finally, we decided to design our prototype for mobile only, from the point of view of a freshly signed-up user. La Fourche used to focus its efforts on desktop but is progressively shifting to a mobile-first approach, currently having a web-progressive app and working on a fully-functioning mobile-app. We believe this decision goes along the strategy of La Fourche and their users' habits, as 65% of them browse with their smartphone. This decision will also have the biggest impact, as the mobile version has been neglected for some time by the design team, because of its lower conversion rate.

Personas Development

Once we understood the scope of the problem, we decided to use empathy and put ourselves in the shoes of the users by building personas. We decided to create one persona that encompasses as many La Fourche users as possible.

Meet Capucine, a 36-year-old mother living in the french country. She loves organic food and goes to her local market for fresh food, and shops online for dry food and daily products. She heard about La Fourche through a friend but did not complete her first purchase because she didn't understand the concept and wasn't very fond of making 1-year commitment to a unique shop.

User Interviews

With Capucine's background and story in mind, we decided to conduct interviews to understand their usage and comprehension of the concept. Prior to that, we had to formulate the following hypothesis to formalize our research and make the problem easier to address:

H1 - Users are in line with the brand's values

H2 - Users don't clearly understand the concept

H3 - Users are reluctant because of the membership cost

With these hypothesis in mind, we built an interview guide to put them to the test and try to learn as much as possible from users. We conduced 4 interviews with very different profiles, from La Fourche users and newcomers to understand how they interact with the website and if they understand the subscription-based concept.

We decided to split the interview in 2 sections, the first one being a website visit with the objective of completing the purchase of a 25€ basket, the second being an open discussion about their visit, and habits about online shopping.

2. Define

The second phase of the double-diamond process consists in synthesizing and analyzing the information gathered to formulate the problem to be solved as an opportunity.

Clustering interview answers

Once we conducted the interviews, we decided to assemble our notes to bring out trends to assert or refute our hypothesis:

✅ H1 - Users are in line with the brand's values

🚫 H2 - Users clearly understand La Fourche's concept

🚫 H3 - Users are reluctant because of the membership cost

We then selected verbatim that represented the interviewees' voice and point of view, to help us better understand their feelings and offer them a proper solution that will answer their problems.

Success Criteria

We defined KPIs that will need to be monitored in order to measure the impact our solution will have on the user experience and the company's business objectives.

3. Ideate

Our challenges being clearly stated, we were ready to enter the solution space. With all this data in mind, we started the ideation phase to generate several solutions to address our problem.

Benchmark

At this point, we believed that we should open our minds by looking at online platforms working on a subscription-based model. We scouted the web to look for the most successful companies providing easy and trustworthy user experiences.

The main thing we noticed was that the payment flow was way faster and easier and online stores took a different approach. Instead of differentiating the subscription and order payment, they combined them by adding the subscription as a cart item. We believed this was a relevant solution and decided to leave the current Shopify Plus interface and internalize the payment flow.

Mind Map

We put everything we learned so far on a large piece of paper and drew a mind-map with our problematic in the center and explored different solutions without any limitations. We aimed to propose as many initiatives as possible, and stimulated our reflections with a Crazy-8 exercise.

Once we finished the mind-map, we had a wider vision of our solution space and were ready to start to explore potential solutions directly with the product.

Exploration

To make the exploration phase easier, we decided to standardize the design system by simplifying the actual brand identity and design elements. This normalization allowed us to go faster during the component creation process and deliver an overall more coherent and harmonized experience. We also took the decision of building the WPA screens as opposed to a browser-based solution, as La Fourche is aiming toward creating its own mobile app.

We rebuilt the existing screens faced by a visitor placing its first order and applied the new simplified design system. Then, we iterated on several solutions to offer the best user experience we thought of, aligned with our objectives and driven by our learnings.

The first page we rebuilt was the homepage. On the original page, we perceived that it lacked the most important information about the company: its subscription-based business model. We worked on several different versions, and aligned on showing it as soon as possible, without the need to scroll.

Next, we tackled the cart page. We had minor adjustments to make as the page was already perceived positively. Our main challenge was to make sure that the following message was clearly understood: "in order to complete the order, you must subscribe".

We decided to build a carrousel, coming between the cart and the payment to once again explain to the visitor what he was about to subscribe to, the perks and the payment details. We were not sure that it was a relevant addition to the already complex ordering process, but decided to put it to the test.

4. Deliver

After exploring many ideas, it was time to materialize our most promising solutions into a prototype, test them and iterate to implement the best one.

High-Fidelity Prototype

After agreeing on the most relevant solutions for each screen that will provide the most suitable experience, we stitched them together and built a functioning prototype with realistic transitions in Figma.

User Testing

To test the prototype, we created a scenario to carry our user testing sessions. The scenario consisted in completing an order from the homepage, hence subscribing to the membership. We established a more realistic context by asking the tester to behave as he was doing his online groceries shopping to prepare a meal for his friends.

We conduced four 30-minute tests. First, we introduced the testers to the scenario, and let them explore the prototype without taking any action. Then, we did a walkthrough of every step of the process they went through, to ask questions about the specific actions they performed and why they did so. Lastly, we took 5 minutes to ask them general questions about the prototype and the payment experience.

Iteration

These interviews helped us understand if our solutions had the intended effects: creating a flawless shopping experience and making the membership trustworthy. We gathered the data from the tests and understood that our solution needed some more work to convey the message we wanted to. We organized the feedbacks in three learnings:

With those new feedbacks in mind, we iterated, learning from our mistakes and the verbatim interviewees shared with us. We focused our work on clarity and fluidity, in order to deliver the experience users expect with their first order.

On the homepage, we presented the subscription model and advantages further up, while reassuring the consumer on the commitment-free dimension of their engagement. We built three new blocks comprising call-to-actions, each one with a different objective: inform, convince and compare. We also thought about the homepage once the signed-up user becomes a member, and focused on reordering with a savings counter and the latest product releases up top.

We made a few incremental changes on the cart page. First, we offered a collapse option for the cart items to make sure the user would not have to scroll multiple times to find about the total price, and put the order button into a sticky position. We also clarified crossed-out prices within the item list and once again in the cart total. Finally, we decided to move the gifted product after the cart to increase retention before the payment process.

We reworked the payment process to make it a seamless experience by getting rid of the Shopify checkout and combining the two payments into a single one. Before that, we build a 3-slides carousel to clarify the subscription model and its advantages, before entering a classical 3-step checkout: information, shipping and payment. We made sure to reassure the user on the final step of the checkout and offered the possibility to set a reminder for the end of the free trial.

Final Prototype

Here's our final work, that you can try on right here. We suggest you to follow the scenario to have a better vision of the solutions implemented : go to your cart to finalize your order and complete the checkout.

Conclusion

After spending two weeks trying to figure out a better way to activate and convert users, we presented our final work to Alexiane Gibert, Head of Product @La Fourche. We were given great overall feedback, praising the way we precisely scoped the project to address a specific problem within the company's roadmap.

Personal takeaways

This project was the first one where we adapted the double-diamond design process to our needs for a project, without being guided by The Design Crew's coaches. I feel that we did a great job on the project management and project scope sides while sticking to the tight deadlines we defined.