Carrefour Checkout Renovation

13 min readAug 2, 2020

How can we improve the shopping experience for one of the world’s biggest grocery shopping platforms? A step by step process and investigation into improving the customer journey through www.Carrefour.com checkout.

Challenge

Carrefour is doing an exceptional job processing thousands of orders per day, but there is always room for improvement: higher customer satisfaction rates, increased customer loyalty, conversions to subscriptions, etc.

Today the checkout process has several redundancies. My assumption is that a faster, more streamlined checkout will result in a higher conversion rate.

Taking a look at the Qualitative data results from my research, I will take you through recommendations for the next iterations in design.

Throughout this case study, I would like to take you through my work process and how I would solved this UX problem as the Lead Product Designer on this project.

Discovery & Research

I have decided to go forward with a mobile-first approach, data shows this is the fastest growing platform and will have the most impact. I design with a responsive approach as we should respond to users behaviours and environments based on screen size. Not to forget the normalization of online shopping during the Covid-19 pandemic.

According to a Business Insider Intelligence survey released in early April, over 40% of digital grocery shoppers during the pandemic never used online grocery shopping prior to the lockdown. This means we will need to be vigilant as UX designers to make sure the online shopping process is as simple as possible for these first-time and existing users.

Mobile is predicted to account for 54% of online sales, or $659 billion, by 2021. — Big Commerce

Let’s get started …

The checkout flow is complicated (for a reason) with numerous UX problems. That is why I always recommend going through the shopping process myself and watching others do it too. I have always said that as a UX designer the checkout is one of the only places on our website that we want people to leave and get out the fastest.

To make sure I was fully immersed in the process, I took the time to do my weekly shop via Carrefour.com. I realised that this process did not end when I put my mobile down or left my desktop tab, but when I received my items and put them into my fridge. Experiencing the solution is the key to success.

For now, my task is to improve the navigation, it’s time for some pencil work! Going over the flow with a fine-tooth comb to weave out any finer UX issues in the process.

Though I have not received data or any actual performance indicators for this workflow, I have discovered some of the most apparent UX obstacles:

Logging in, no guest checkout available. Even people who have an account forget passwords; in many cases, it will be easier for them to check out as guests than to recover their password on their mobile device.
UI inconsistencies, in the login screen and registration screen the field component is entirely different from the rest of the checkout UI
I witnessed several bugs on the payment page. One issue to note is the keyboard optimisation, we should use a numeric pad for numeric data such as credit card numbers or phone numbers. For email-address fields, use a keyboard optimized for entering email addresses, which prominently features email-specific characters like “@” and “.”.

Designing friction into your product to adhere solely to business needs is not warranted as good UX practice

For instance, take budget airlines. When checking out, they’re given loads of consecutive screens or overlays that ask them if they want to upgrade seats, add baggage, and so on. The friction presented here is intended with the sole purpose of enabling the company to upsell. Nevertheless, if users notice friction counter to their end goal, they will find it bothersome, and it could negatively colour their experience with the Carrefour brand

Here I’m only given two options, either login or I register. What if I forgot my account details or just want a guest log in

So, acknowledging the intentions and tasks our users have when checking out is imperative. I’m studying error-prone points in the user journey and scrutinising whether a forced login is helping the user complete their order.

The last thing I want to do is to spend my time filling out this form. Furthermore, a lot of the information seems unnecessary for ordering food items. DOB and Nationality??? What has that got to do with ordering food, I wonder? Can this be removed to ensure a more streamlined flow?

Guest Checkout does not only help new users but also can aid existing users, however we need to detect whether or not the email is a registered account.

Here is an example: I have a carrefour account but haven't logged in for a year, I click on Guest checkout make the order, then the system recognises my email matches one in the system and asks if I want to merge this order to my history. This would also prompt me to login next time and use my account,

Analyzing the competition is essential at to understand the current UX offerings that customers may see while shopping online

Competitor analysis

I like to use a Competitive Analysis Matrix — Scoreboard while surveying the indirect and direct competition. I notice that interpreting the data in this form gives me a rapid summary of the general market.

On a scale of 1–5 ( 5 being the highest), I compared Emirates direct competition over several key metrics

You can find a link to the full study here

Spinneys offer a consistent and clear UI lots of white space and accessible easy to read copy
Though they did not provide a guest checkout option, we can appreciate the opportunity to login via Facebook
Clear one-page design format

Walmart offers the option to continue as a guest
The flow is broken into stages, and they operate quite differently by firstly asking for the users to pick up options. Then giving the users an estimated delivery time/date. I think this is important to observe from a users’ perspective that knowing when the item will be delivered is most important
Clear and consistent UI, highly accessible and easy to decipher

Amazon does not offer the option to continue as a guest however, it is highly logged in user experience with the offer of products like Prime enticing users to register.
The flow is also broken into stages, the first option being to select your delivery options.
I found the UI for Amazon to be quite complicated compared to the other examples, not as clean.

Apple offers a clear, simple UI, easy to read, and highly accessible.
The UX copy is written humanly with “How would you like to get your order” rather than the more robotic “Shipping Options”
They allow users to take photos of their credit cards to populate information. This option enables users to take a picture of the credit card; the details are scanned, and the information is then added to the website’s credit-card field.
They Offer mobile-friendly payment options, but don’t overwhelm users with too many options. Recognizable third-party checkout options such as Paypal or Apple Pay can be helpful, but too many options can cause choice overload.

Developing the Solution

User testing

To get a more profound insight into the customer journey, I ran a series of remote user test with 5 users. I wanted to understand the key pain points for users and not be influenced by my own bias. Once I have gathered these insights, I will use them to build my first prototype and eventually test my prototype against the live site. Below are the details and a highlight of the results from user-testing www.Carrefour.com

Hypothesis

My assumption is that users will overall complete the checkout process but find friction in the Sign-up flow and Delivery/Shipping flow.

Introduction

YOU WILL NOW CHECKOUT YOUR ITEMS. Complete your order with a Home Delivery. SPEAK ALOUD and discuss any you find difficult in this checkout process
Users given generic details to fill out the form.

Questions

Launch URL: http://www.carrefour.com (used the share function for a prefilled cart).
Please proceed to checkout as you normally would speaking aloud at each stage of the process
What, if anything, is **missing** on this page? [Verbal Response]
How did you find navigating around this checkout flow
If anything, what did you like about this checkout? Explain your answer

Insights & Quotes from User testing:

From my user study, I mapped out a customer journey highlighting the points at which we could make a value proposition for logging in.

User journey map, identifying the users pain points throughout this journey

User story

“As a grocery shopping customer, I want to be able to use Carrefour to easily order my weekly grocery shop in the simplest and fastest way possible.”

This means, I need to be able to:

Update my Shopping Cart;
Add my correct address and details easily;
Pay seamlessly;
Track my order.

User Flow

In psychology, contextual factors are often more influential than personality in determining behaviour.

Also, another factor to observe is the Primacy Effect. This is a well-established finding in psychology that the first impression shapes subsequent experiences.

Taking these theories into account, how can we implement this into our design? I have begun by giving our users the opportunity to checkout as guests. This reduces the cognitive load at the early stage of checking out and allows first-time users to checkout expeditiously.

**Here I’m looking at how we can create a flow that reduces the user’s cognitive load at the beginning stages and allows for the most expeditious and most comfortable checkout experience**

“Context is crucial”

I moved the registration form to a more contextually relevant part of the flow; at the end! The logic is that once the user has paid, the journey is not over. We still have two more stages, the first stage being for the user to receives his/her items. No better opportunity for the user to sign up, seeing that we have already acquired your details in the checkout all you now need to do is add your password. For example, a simple message “Sign up to track your order” makes the most sense here because the immediate value in signing up for an account is provided.

Secondly, users may not know, but they can sign up for an account and earn loyalty points from every order. At this point, we could reveal a message like “100 points earned from this order sign-up and redeem”. Again the same logic of instant gratification applies here. The reward for taking your time to fill out the sign-up form (which at this stage is only 1 field) is explicit

Sketching

Doodling is a great tool for UI design exploration. I’ve always been passionate about using new technology to aid my design process that’s why I’m back to sketching with Samsung Galaxy Note 9. The tools allowed me to get a range of different fidelity designs out as quickly as possible. I used Figma on my phone for low fidelity-level designs. Everything you are about to view was designed using my smartphone. I later exported these designs onto my macbook where I used a combination of Figma and Framer for prototyping.

I also want to highlight a helpful app for timekeeping while designing. Forest: Stay focused is my go-to application to stay on time and away from procrastination and distractions. Focus allows you to time box each task and motives you by planting trees, virtual and real!

Sketches are drawn by hand using the Samsung stylus pen

Design System

In this particular case, it would be challenging to work on a solo project to create a full design system. However, I thought it was necessary to involve this practice into the Carrefour checkout redesign. I had noticed various inconsistencies in the UI elements during my research stage. Using Figma’s power library asset tools, I was able to build a simple design system for the checkout with the idea to scale this via collaboration with a broader product team.

Design systems enable so much, like enormous time savings for designers, developers, and product teams; amongst other things, the consistency in design is felt by the users and enhances their experience.

For full transparency in my design process, I have shared my live working Figma file. Usually, this would be part of my process as I love the collaborative side of designing with Figma and honestly believe that design should be a collaborative process.

File can be viewed here: https://www.figma.com/file/i8peN0xXB6tn79OiZQeQHm/Carrefour-Research?node-id=12%3A6

Framer Prototype

Solving real design issues requires use to be agile and continually produce prototypes. I personally like to prototype my ideas as fast as possible and validate my assumptions. Whether that be paper prototypes or super high levels designs in Axure or Framer.

Framers integration with Figma allowed me to work seamlessly between programs. Quickly designing, testing my designs and making iterations.

https://framer.com/share/Carrefour-rvtFEcFc7oSZTGH2Kip8/60%3A1364%3A0.20441497716618895?fullscreen=1

Carrefour — Framer

Live Prototype framer.com

Iterations on design components —

User testing this payment page showed that the buttons were not clear and often overlooked by users. I promptly changed these out to radio selection buttons.

Iterations on design components —

I observed that the journey at this point did not make much sense to the user. I consolidated the delivery and shipping details into one page. Reducing the number of steps to complete the checkout to 3. Here we will ask the user how they would like to receive their order first then requiring for delivery details.

Final thoughts

It’s difficult to be sure whether or not a design will be successful without testing. The fact is that testing really is the only way to find out whether my design recommendation will have a positive impact.

In this particular case, I focussed my efforts on the mobile journey. As the next steps, I would test and validate my assumptions on this design and try to optimise it for the desktop.