Overview
About Frichti
Frichti is a French food-tech company which aims to deliver fresh meals or groceries at your door in 15 minutes. Based in Paris, Frichti has experienced rapid growth which now allows it to offer its delivery service in Lyon, Lille, Bordeaux and Brussels. The platform is accessible via website and mobile app.
About the project
This project was completed as part of the Product Design Bootcamp at The Design Crew. It was introduce for us by Aymeric Joubert, Lead UX/UI Designer at Frichti, as a real-life case of Frichti’s product roadmap. We had 2 weeks as a team of 3 product designers to complete this project.
Timeline
2 weeks
Role
Product Designer
Year
2022
Challenge
Problem statement
What people problem are we trying to solve ?
How could Frichti make the act of purchase a simple and emotional experience?
How do we know this is a real problem?
- Significant checkout abdonment rate
- Complex checkout
- Lots of informations
How will we know if we’ve solved this problem?
- Reduce checkout abandonment rate
- Create a delight and seamless user experience
- Boost XP end (The Peak–End Rule)
Constraints
The solution must be compatible and respectful of Frichti's Design System.
Analysing the current checkout
Auditing the current checkout
Frichti's current checkout is made up of 2 pages: a basket summary and a page for delivery and payment information. We noticed some inconsistencies.
Basket summary
1. It is not possible to add or remove quantities directly from this page, you must click on the item to open its product sheet. We later learned that this was an issue related to Frichti's technical debt.
2. A section proposes whether or not to include cutlery via a switch. But when the cutlery is not available, the switch remains present in an unavailable state.
3. There is a lots of cross-selling items wich are not consistent with the rest of the basket. However, we did not have any information on the business and technical constraints related to theses items.
4. Tips are incorporated into cross-selling as an item in itself.
Delivery and payment information
5. It is possible to modify its address on two elements located one below the other: the map and the address field.
6. The map takes up a lot of space for no reason. It takes 2 clicks to interact with.
7. The "Contactless delivery" block is not seamlessly integrated with the rest of the interface and offers the same action as the "Indications to the deliverer" block.
8. The profile block is not a relevant element at this stage of the experience because this information does not need to be modified with each payment.
9. The choice of the delivery time is made in the form of a list with radio buttons. Having so much information does not make it easy to read.
10. There are 3 payment modes available which add visual noise. In addition, it can be difficult to differentiate between “Restaurant voucher card” and “Restaurant voucher”.
11. The "Billing address" block is only intended for professionals and not for individuals.
No data available on checkout abdonment rate
We did not have access to data for this case study. If we could have had details, we would have looked at when cart abandonment occurs to determine the reasons.
User testing
In order to observe user behavior during the act of purchase, to verify the usability of the current application and to identify potential pain points, we conducted a user test session. We recruited 5 people aged between 23 and 55, users or not of Frichti.
We asked them to place an order on the application, with several constraints, such as entering an address, adding instructions to the delivery person, having them delivered at 8 p.m., adding a promotional code and paying by credit card.
Learnings
User tests helped us find out that:
1. The checkout on the current application is understood and usable.
5/5 users managed to access the checkout
5/5 users succeeded in modifying the information requested in the constraints
5/5 users have successfully placed an order
2. There are some pain points:
a. Cross-selling items are not welcomed. However, we did not have any information on the business and technical constraints related to the purchase options.
I don't want to add new products it's too late once I go to pay - Sarah
b. The basket empties when you change the delivery address after choosing your items. This is due to the fact that Frichti's kitchens do not all have the same products and each serves a different area. However, this problem is technical and we have chosen to put it aside in the rest of our challenge.
Basically I know, because I had so many bad experiences. Once after no longer possible to modify the delivery address otherwise the basket is killed. You have to start all over again from a to z. Otherwise choices are completely different. Now I always check first - Jordan
c. It is not possible to delete a payment method. If the user adds several bank cards, they are displayed one below the other.
There is no way to delete a payment method. Either he should auto kill them or I can delete them. It's visually noisy - Jordan
d. The different payment methods add visual noise if they are not all used and the difference between restaurant voucher card and restaurant voucher is not clear.
I've never had a restaurant voucher, I don't see what it is and I don't understand the difference between the two - Jordan
e. Profile information does not need to be changed with each order.
Me and my phone number it's always the same - Jordan
f. The billing address is not important for individuals.
Billing address is not very important unless you want to change it - Didier
Card sorting
We wanted to understand which elements were most important during checkout for users and why. We asked them to sort all the elements present in the checkout of the most important or least important for them during the act of purchase.
The result of the card sorting can be divided into three categories:
- High priority : Order information (basket summary, delivery information, total)
- Medium priority : The essential elements for the proper functioning of the checkout (payment method, CTA)
- Low priority : Unwanted elements / that do not need to be modified with each order (billing address, FAQ, profile, cross-selling)
Overall a working checkout
This research phase did not allow us to highlight major dysfunctions, but to confirm the insights of the problem. Namely, a poor distribution of elements and an excess of information.
Exploration
Checkout is a pattern
We benchmarked Frichti's direct competitors and companies recognized for their user experiences, and the checkout is a pattern. The experience is standardized and globally identical.
Best practices
Checkout is the most crucial step in any online business or service. This is a subject that has been dealt with by many teams around the world, and we wanted to take advantage of their feedback.
The Medium article How to design Checkout UX like a Pro presents feedback from 3 UX Designers at major ecommerce brands : Matt Chwat (Director of User Experience at ThinkGeek), Kevin Clark (Design Lead at Shopify) and Catherine Ho (Senior UX Designer at REI). Here's what we took away:
Easy to understand, simple, and fast
Kevin Clark and his team at Shopify tested an assumption about how many steps should be in the checkout experience, and conducted a test comparing one-page, two-page, and three-page experiences. The results showed one page felt overwhelming to the user because it presented too much information on one page, two pages divided the steps awkwardly, and three pages felt simple and easy.
Limit and group information
Also according to this study, grouping identical information in a logical order allows the user to focus on a single task at a time. This is also what we observed during the card sorting.
We learned that by grouping relevant information together in chunks, and putting it in a logical order, you allow the user to focus on one task at a time. There is, however, a limit. You don’t want to go too far, like having a ten step checkout experience - Kevin Clark
Limit friction and exit doors
The checkout being a delicate step, the main objective is to avoid getting the user out of the funnel. He must be able to easily use the checkout, not be blocked if he needs to take an action, be able to resolve his errors and quickly find the information he needs. It is also necessary not to consciously offer exit doors, which would push the user to interrupt his payment flow.
Visual design, UX Writing and micro interactions
These elements are now essential to create the best possible user experience. We therefore created a moodboard to guide our choices.
Solution & Prototyping
Based on our analysis of the current checkout and our exploration phase, we have therefore started to build our first prototype. Our ideation phase relied heavily on discussion and brainstorming, and here is the approach we took.
Pragmatism
We chose to use a pragmatic approach for our solution. As we saw during our exploration phase, checkout is a pattern that users are used to. We therefore did not seek to revolutionize the checkout, but to optimize it.
Easy to understand
We have reviewed the navigation using a Progress component, basing it on the 3-step approach: shopping cart, delivery and payment. We made this choice in order to allow the user to focus on one task at a time and to divide the information on more pages.
Hierarchy
Once the navigation was divided into 3 steps, we moved or deleted the elements in order to limit and group the information.
Basket summary:
- Removed adding cutlery if not available
- Moving tips to payment page
Delivery information:
- Retention of the delivery address, instructions to the delivery person and the choice of the delivery time
- Movement of the map in “Indications to the deliverer”
- Deleting of the “Contactless delivery” block
- Deleting the profile block
- Use of cards components for delivery time
Payment information:
- Retention of promotional code, total and payment method
- Moving the billing address in my profile
- Use of cards components for payment method with an overlay for adding a new mode..
Removal of exit doors
We have removed the “Help” tab that appeared throughout the checkout. This tab can take the user out of the payment funnel.
UX Writing
We decided to add a title to each step in order to bring delight.
Micro interactions
We have tried to imagine new interactions with certain components in order to make their use simpler and more pleasant:
- Tips work through a selectable tag system, with an emoji that changes depending on the amount.
- The choice of delivery time is made in the form of cards with 3 pre-selected choices and a choice of planning.
- Saved payment methods are shown as cards and adding a payment method is done via an overlay.
Final result
User testing
We tested our redesign on a panel of 5 users aged 25 to 55, not all frichti users.
We established the following objectives for our test session:
- Ensure that our redesign is well understood and usable
- Observe the reaction of users to the fluidity of the navigation in 3 steps and the use of the new components.
- Determine if the new checkout is simple, quick and easy to understand.
- Observe the emotional reactions of users in order to verify the “delight” aspect of our solution.
We asked them to place an order on the application, with several constraints, such as entering an address, adding instructions to the deliverer, having them delivered at 8 p.m., adding a promotional code and paying by credit card.
Learnings
User tests helped us find out that:
1. Our redesign is understood and usable:
5/5 users managed to access the checkout
5/5 users succeeded in modifying the information requested in the constraints
5/5 users have successfully placed an order
2. There are still areas for improvement:
a. The 3-step navigation is a pattern well known from users, it is simple but does not surprise the user.
We see it everywhere, it's the normal process - Léopoldine
b. The interfaces are standard and lack colors.
It's all grey, I find it a bit sad - Léopoldine
c. The UX Writing of the titles is appreciated but poorly brought to the payment page.
At the beginning we were friends and now we move on to serious things, it’s time to pay! - Serge
d. The choice of delivery time with card component was not very well understood.
I was a little lost by the four cards - Leny
e. Emoji for tip choice shocked users.
The little guy seems to say "you're a piece of shit". I feel like the delivery man is looking at me like that and I'm a bastard - Leny
f. The peak-end rule problem is still present.
The closer you get to the payment, the less you find the friendly side of Frichti - Lenny
Solution improvement
Visual design, UX Writing and XP end
Our solution did not make the act of purchase an emotional experience. During testing, users found the interfaces to be standard, with a lack of color. We have therefore carried out a new phase of UI-oriented exploration, in order to make our interfaces more original and more pleasant to use.
We have reviewed various elements of UX Writing and in particular the title of the payment page. We have opted for a softer wording that does not disturb the user, and harmonize the formality.
The 3-step checkout was appreciated for its simplicity, but constantly having the information in the header did not prove useful for users. We therefore removed the progress component to save space.
In order to bring emotion to the user at the end of his experience, we added animated GIF confetti when the order is placed.
Components
We have reworked the component used to choose the delivery time to simplify it. The user now has the choice between 2 cards (express delivery or nearest time slot), or schedule planning.
The addition of a tip with a scalable emoji was very poorly received in testing, because by default when no tip is selected, the neutral emoji made users feel guilty, making them feel like to be judged. We therefore opted for a more standard choice of tips in the form of tags, and moved the component to the delivery page.
Final result
These solution improvements have not been tested in this project but are required to go further.
Impact
This project being part of my course at The Design Crew, we weren't able to measure its direct impact on users and the business.
If this had been possible though, as said in the intro of this case study, key KPIs to determine the success of the solution would have been :
- Reduce checkout abandonment rate
- Create a delight and seamless user experience
- Boost XP end (The Peak–End Rule)
