UX/UI Case Study: KFC Australia

How we used data to redesign the KFC online experience

Chris Rusnak
Ogilvy XD

--

With the global shift towards mobile e-Commerce, we worked with KFC Australia to assess and improve the mobile experience of their website, unify their brand and e-Commerce sites, as well as refresh the UI, increase conversion, and optimise the overall user experience.

Sprint before you walk

Kicking off the project, we ran a full design print to identify pain points with the existing sites. This involved analytics reviews, customer journey mapping and usability testing.

It was clear the current button layout wasn’t working well

In order to measure success and assess the current state of the website, we worked with Google to implement a set of metrics, goals and trackers we can use to benchmark the site performance.

After we gathered our findings, we presented our recommendations as inspiration at a Google Design Sprint we attended with the KFC team.

Merge. Streamline. Optimise. Convert.

This was our brief moving forwards. The Ogilvy UX team worked on producing a set of mobile-first wireframe flows to map out all of the customer journeys possible across the site — including edge cases — in order to assure a smooth transition through to development.

We not only had to take into account principles of good design, but also business rules and limitations, such as Point of Sale systems and how data gets handled, and human factors, such as the device that’s being used, age and location.

Every decision that we made was backed up by a piece of data, whether that be numbers from our analytics, or results from the usability testing.

UX Enhancements

A majority of the effort we put into the flows was to reduce the number of clicks required to perform a certain task. This required some re-working of a few critical flows, such as setting a store, which we have opted to do automatically based on a customer’s location.

This has the added benefit of allowing a customer to see live prices for products that are available to them (as prices and products can vary from store to store)

Some of the micro-interactions we added to the site

We also added subtle animation to the site in order to provide affordances or give feedback to customers, for example, when an item is added to the cart, the cart icon will do a little shake to draw attention — customers will know where the cart icon is. When a customer clicks the “Add” to cart button, the button changes state to give feedback that the product has been added.

Another nice change we implemented was using the mobile designs for product pages on desktop. They appear as a slide-over, rather than opening and refreshing a new page.

The Result

It’s still early days since the launch of the site — we’ve recieved great feedback that the user experience has drastically improved. We’re holding our breath until we can see how we’ve improved conversion & resolved usability issues.

Check out the live site in the link below:

We’re not done yet

Early on, we set out a roadmap for future enhancements and continuous improvements to the site. It’s in our nature to want to make things bigger and better, so we’re going to continue to build, test & learn moving forward.

Watch this space!

--

--