Make the limits of use transparent
As part of my training at The Design Crew, I worked in a team on a brief for La Fourche, an online organic grocery store offering products up to 50% cheaper than in regular shops and delivered all over France. The products are selected from trusted producers and brands, all organic and committed.
Business model: To place an unlimited amount of orders, you must subscribe to an annual membership of 59€/year. It is thanks to the loyalty of its members that La Fourche can reduce its margins and offer products at very competitive prices.
🤝 Conversion – Make it easier for new users to place their first order
🧲 Retention – Facilitating re-ordering among members
Roles: Project Management Benchmark Research User Interviews Ideation UI & Prototyping User Tests
From user research to prototyping a solution, we worked on the entire design process.
« How can the payment process be optimised to increase the number of orders? »
As this was the last project of our training, we had to work in total autonomy this time, by setting up our own planning. To do this, I suggested the implementation of a board on Trello. This board would allow us to distribute tasks, list the different resources and above all to establish a reverse schedule.
We started our benchmark by analyzing the current payment flow on the La Fourche website according to two main scenarios:
👉🏻 The visitor is registered but has not yet activated his free trial
👉🏻 The visitor is registered and a member of La Fourche
State of play and potential improvements in the payment flow:
👉🏻 Lack of visual coherence between the different payment stages and with the rest of the website
👉🏻 Absence of the trademark (logo)
👉🏻 Non-modifiable basket
👉🏻 Inability to resume browsing the website (in case a product was omitted, for example)
👉🏻 In the case of a new visitor: possible reluctance towards the concept (paying a subscription fee to shop on the website, entering your bank details to start the free trial)
The use of the Stripe payment platform by La Fourche is the main cause of the first four points listed above. Indeed, Stripe does not allow for much customization (especially visual modifications) of its tools. The good news is that we have learned that La Fourche intends to eventually develop its own payment platform.
We then extended our benchmark to direct competitors of La Fourche, as well as to other e-commerce websites, in order to acquire a global perspective. This allowed us to define what works and what doesn't - according to us and our knowledge of UX - so that we could draw inspiration from it later.
👍🏻 Presence of a breadcrumb trail and progress bar, total payment amount always displayed, easy selection of delivery time, multiple payment methods
👍🏻 Information on delivery and refund policy, suggestion of alternatives if a product is out of stock, clear and intuitive interface
👎🏻 No mention about payment security, minimum amount to be able to order, too many steps / clicks, impossible to go back to the previous step
The payment process being a crucial issue, we needed to supplement our benchmark with research on good practices and best examples of e-commerce payment processes, and of course try to confirm or disprove our hypotheses as to what works and what doesn't on the La Fourche website, through user interviews.
Along with planning our user research, we browsed and collected articles on good practices and best examples of e-commerce payment flows. This research phase also focused on the main causes of abandonment during the checkout process, and how to address them.
Main lessons on the elements to optimize:
👉🏻 Reduce the number of steps
👉🏻 Reduce the number of fields in forms, and optimize their filling
👉🏻 Allow the shopping cart to be modified and return to the website to resume shopping
👉🏻 Facilitate access to support and to information related to delivery and returns/refunds
👉🏻 Offer alternative payment methods to the bank card (Apple Pay and Google Pay, Paypal...)
Having learned a great deal from our benchmarking and research phases, we were able to formulate hypotheses regarding the improvements to be made to La Fourche's payment flow.
User research enabled us to:
👉🏻 Understand consumer habits on e-commerce websites (in general and with La Fourche users)
👉🏻 Collect feedback on the current version of La Fourche's payment flow by having users test the website
Limitations: We could only have access to two La Fourche users for this research phase. We have therefore supplemented our user panel with non-users of La Fourche.
👉🏻 They noted the lack of coherence between the different screens
All the buttons are different, the information at the bottom of the page is weird I feel like the layout of each page is different. – Benoît
👉🏻 They want to be able to check and edit their shopping cart before payment
Before I pay, I check my list and numbers of each item. If I forget something, I will go back to search. - Leanne
I can't change the number of items before paying. - Anne-Charlotte
👉🏻 They consult the shipping and return policies at checkout
Before I pay, I usually check delivey information. It's hard to find customer service. - Maggie
👉🏻 A secure and fast payment method is appreciated
If I can pay with Paypal, I will feel that the payment is secure. - Leanne
If I can choose another fast payment method, it will make the payment more easy. – Benoît
👉🏻 Going back to the previous step is complicated (on La Fourche website)
If I want to go back to the previous step I click on the logo, but it's not clickable, it's difficult to go back. - Anne-Charlotte
Our two La Fourche users told us that while they use the mobile website to shop, they both only check out on the desktop version of the site, for convenience and readability reasons. In addition, they use the shopping cart as a shopping list that they complete at different times of the week, before placing their order. This partly explains the abandonment rate on mobile.
We also discovered that one of the main inconveniences that the two La Fourche users were experiencing was not related to the payment flow but was rather an issue of inventory and catalog. Indeed, they regularly find that an item added to their cart is no longer in stock, or that certain products disappear from the catalog without them being informed. A visit to the La Fourche community Facebook group enabled us to confirm this problem.
Overall, we were able to confirm that users attach great importance to secure payment, and verify it by looking for the padlock and "https" in the address bar. The presence of known payment alternatives (Paypal) is a considerable purchasing incentive because of the security and simplicity aspect, as the user does not need to enter personal information such as delivery address and credit card details. This last point also made it possible to measure the great importance that users attach to the preservation of their personal and banking data, and therefore their reluctance to provide them on e-commerce websites in particular.
At the end of our research, we rephrased the problem into "How Might We's":
👉🏻 How could we make the payment process smooth and fast for the first time user?
👉🏻 How could we make the following orders even faster and more convenient?
During our ideation phase we decided to focus on a "mobile first" approach, with the watchwords: easy, fast, secure. We therefore sought to increase comfort and ergonomics, to simplify each step of the payment process, while reintegrating the brand and creating homogeneity with the overall design of the website.
👉🏻 Addition of a clickable logo allowing both to retain branding in the payment flow and to return to the website to add any omitted items
👉🏻 More readable shopping cart, classifying products into categories, accessible and modifiable at every stage of the checkout process
👉🏻 50% reduction in the number of fields to be filled in the contact details entry step (4 vs 8)
👉🏻 Addition of an interactive map in the relay point selection step and addition of opening hours
👉🏻 Facilitation of the entry of a new credit card (possibility to scan the card)
👉🏻 Added Apple Pay, Google Pay and Paypal
👉🏻 Addition of a summary screen before order confirmation (with quick access to edit each step)
👉🏻 4 out of 4 users found the checkout process smooth and easy
👉🏻 3 out of 4 users said product quality had the most impact on loyalty than any feature
👉🏻 Notify users of the unavailability of products at multiple stages
I was looking for a product I used to buy on La Fourche and they didn't have it anymore, I didn't get a notification. - Saphir
👉🏻 Make the choice of saving credit card information possible
I don't like that my credit card information is automatically saved, I don't find it reassuring - Cécilia
After putting the finishing touches on our payment flow, we extended our thinking to the whole experience. In particular, we addressed stock and catalog issues with two ideas for solutions:
👉🏻 Warn of product unavailability in advance when possible
👉🏻 Suggest alternative products in the "Shopping cart" page to avoid leaving the checkout
Taking into account the feedback of some users, we have added the possibility to enter a specific address for the search of a relay point, in case the person would like to collect his parcel near his workplace for example.
We have also added a confirmation of item deletion in the basket.
In order to facilitate re-ordering, we have imagined the possibility of adding the contents of recent orders to the basket in one click...
... and a pre-filled payment flow directly to the summary screen.
Finally, we have devised a notification system when a product in the basket is out of stock...
...or when a "regular product" leaves la Fourche catalogue.
In both cases the user can choose to be notified when the product is back in stock...
...and the site offers a selection of alternative products.
This last project proposed by The Design Crew was an opportunity to put into practice the skills and experience acquired during the training in total autonomy and on a very interesting e-commerce case.
On a personal level, I was able to have confirmation of my ability to manage a project and to ensure to maintain a supportive working environment, encouraging everyone to share their ideas. I also had confirmation of my appetite for user research and my ease in conducting an interview or a test.
As for the project itself, it allowed us to acquire a lot of knowledge in UX in the field of e-commerce, more specifically on payment processes. We were also able to measure the importance of the research phase, particularly in that it allows us to discover the existence of problems in other areas of the user experience.
During our research phase, we found that some people may be reluctant to register their credit card in order to activate the free trial. While it is possible to cancel at any time, renewal (and therefore the start of billing) is currently automatic (with a notification as the end of the trial period approaches). We simply suggest that, as with the Uber Eats pass, renewal should not be automatic by default. We suspect this would strengthen the bond of trust with La Fourche, and limit the mental burden of having various subscriptions, while giving the user a sense of control.