Carrefour Checkout Renovation

Chidi Nwaubani
Aug 2 · 13 min read

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.

Image for post
Image for post

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 solve this UX problem if I were 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.

Image for post
Image for post

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.

Image for post
Image for post
  • 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 “.”.

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

Image for post
Image for post
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.

Image for post
Image for post
On a scale of 1–5 ( 5 being the highest), I compared Emirates direct competition over several key metrics
Image for post
Image for post
  • 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
Image for post
Image for post
  • 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
Image for post
Image for post
  • 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.
Image for post
Image for post
  • 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

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

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

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.

  1. Launch URL: http://www.carrefour.com (used the share function for a prefilled cart).
  2. Please proceed to checkout as you normally would speaking aloud at each stage of the process
  3. What, if anything, is **missing** on this page? [Verbal Response]
  4. How did you find navigating around this checkout flow
  5. 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.

Image for post
Image for post
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:

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

User Flow

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.

Image for post
Image for post
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

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!

Image for post
Image for post
Sketches are drawn by hand using the Samsung stylus pen
Image for post
Image for post
Wireframes designed using Figma

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.

Image for post
Image for post

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.

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.

Image for post
Image for post

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
https://framer.com/share/Carrefour-rvtFEcFc7oSZTGH2Kip8/60%3A1364%3A0.20441497716618895?fullscreen=1

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.

Image for post
Image for post

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.

Image for post
Image for post

Suggested solution

All suggestions should be run as AB tests and also in conjunction User test where necessary.

Speed is something that has come up several times in my findings. Limiting the steps to user success is essential. Allow users to check-out in the most uncomplicated fashion. Plus maybe also show the benefits of logging in, like getting the points, Express checkout etc.

Help users find the correct address with an address lookup form field. This minimises the effort in typing in your new address. From user testing, this was one part of the journey that brought the most friction.

Minimal UI increases speed and decreases cognitive load. Simple changes in the UI have been applied in my design to make the site more streamlined, simple, and easy to use

Users will register for new accounts at the most relevant time for them as a customer and not at the most convenient time for the business. This means we have to be a little bit smarter in the way we sign-up our new users. Contextual sign-up uses the science of psychology to get users to say yes

Simple changes in the UI have been applied in my design to make the site more streamlined, simple, and easy to use. Prefill user data, work smart for the user

I have added in the function of a chat-bot which will only be initiated when the user shows distress or friction behaviours. For example, if a field is consistently coming up with errors or user has been stuck on a specific page on the checkout out for a prolonged time. This will initiate the chat logo, offering the user assistance and the opportunity to speak to a live agent. In the future this chatbot can also be integrated with WhatsApp to further help the user along there journey


Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Image for post
Designing with a responsive approach

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.


Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store