New e-commerce experience

Interface

Project background

The complete redesign of KFC’s e-commerce solution was a complex and demanding challenge. Used by hundreds of thousands of people, KFC’s e-commerce is key to their revenue in Poland.

More than 60% of KFC’s e-commerce are mobile users, so we knew we had to prioritise a mobile-first approach. We took into account existing processes, and potential technical drawbacks from the back-end driving the food-ordering platform. An even greater challenge was the tight turnaround of the project, with the aim of having the new website up and running in just two and a half months. We designed over 250 screens for both desktop and mobile.

Goal

New e-commerce, conversion rate optimization

Industry

Food Delivery, E-commerce

Platforms

phone desktop

01 Main goal

Redefining impact

Developing a new version of KFC’s e-commerce, leading to an increase of the mid-size basket and ensure a better food ordering experience for users.

02 Secondary goal

Redefining impact

Connecting the two websites: kfc.pl and dostawa.kfc.pl (delivery).

03 Third goal

Shopping e-commerce

Introducing a new “skip the queue” function, allowing users to order food quickly through the website and pick up their order in person.

Interface

Discovery

We started the project with an extensive discovery phase. This gave us a strong understanding of the direction that the project needed to take to achieve the goals that we set with the client.

  • Interviews with stakeholders
  • Gathering quality information - Fullstory
  • Gathering quantity information - Google Analytics
  • Expert Audit
  • Usage survey of the existing version
  • Preparation of project principles
Fullstory

Mobile first

When we gathered information from stakeholders, the quantity and quality data showed unequivocally that the most important element of the redesign was the mobile version.

Over 60% of users are mobile
Mobile is a strategic key growth direction for Amrest
There is almost 100% conversion difference between mobile and desktop

Mobile first

Issues with the existing solution

1. Viewing products

In the old version, users could not view the all products together. When we carried out our rigorous audit and fullstory analysis, we observed that users scroll constantly from top to bottom. Our solution for the product feed is similar to Facebook or Instagram feed. To make it even more user-friendly, there is a sticky navigation that is always accessible.

Comparison

2. What’s in a bucket?

In the old version, users wasted a lot of time comparing buckets. It was complicated for users, as they needed to read each bucket’s description carefully in order to compare the offer in each bucket. Comparing buckets was relatively easy on a desktop interface, but on a mobile - it was close to impossible. We decided to make a radical change. By showing visually what each bucket contains, users can easily compare each buckets’ offer. Most importantly, users can make decisions much faster.

Comparison

3. What is a Zinger?

In the old version, users encountered problems if they didn’t know the KFC menu. Users struggled to navigate and understand the contents of a sandwich. What really is a Zinger?

As the KFC menu has over 150 products, we realised that we needed a much better way of navigating the menu to show sub-categories as well as the products themselves. Our solution to the problem is to use big product pack shots in the redesign, making each sandwich’s contents clearer to users.

Comparison

4. How do you order sauces?

There was a disconnect between KFC’s old online menu, and what KFC customers experience in their restaurants. Users experienced problems finding products hidden in the second level of the navigation.

Old
Old navigation Old navigation
New
New navigation
Screen

Project principles

Making and accepting a list of project principles right at the start helps with decision-making later in the design process.

  • The user can see all the products by scrolling.
  • The user can quickly navigate the website without prior knowledge of the KFC menu.
  • The user can compare similar products (like buckets).
  • The user can quickly discover what is in each set ( e.g. what are Hot Wings).
  • Increase the potential for product upsell (the existing website’s navigation does not show products visually).

Upsell approach

1. Upselling a single product

We wanted to capitalise on the potential for upsell from the user’s visual comparison between products above and below the one they are looking at, and make the most of the differences between complete sets and single products. For example, we wanted the user to add a simple product to their order, like fries to a Zinger.

Interface element

2. Product exchange

The desire to exchange products is the perfect opportunity to upsell. This potential comes from the user adding or replacing a product. When a user decides to exchange a product, this is one of the best opportunities for upselling. At this point, the user is open to the possibilities available, and the opportunities for creating a customised set.

Interface element

3. Upsell in a pop-up

We wanted to keep the existing upsell popup, but change it to increase the conversion rate. On the old website, there was a pop-up which suggests add-on products after users had added something to their basket.

Our interviews with frequent users of the KFC website revealed that they were unaware that the products in the pop-up were cheaper than if selected from the menu. Before the redesign, this option was invisible to the user. We redesigned the pop-up so that this saving is visible to the user, in order to increase the conversion rate.

Interface element

4. Upsell in the basket

We designed an upsell for the basket. This was designed to sell more small products, such as drinks, sauces and other add-ons.

Basket screen
Need to design new e-commerce experience?

Write to us at [email protected]
or enter your email and we will consult your project

Automatic media playback is turned off in your browser. Do you want to turn it on?
It will improve your experience.

accept decline