KFC - Pick for Me (In-App Feature)

My Role:

Brand & UX design

Project Type:

Feature for KFC® UK's App

Deliverables:

Branding
User Interface design
Low-fidelity wireframes
Hi-fidelity wireframes
Prototypes
User Testing

The Problem

As a frequent user of KFC's mobile app, sometimes it's difficult to decide on what to order from their extensive yet delicious menu. I wanted to create a feature that helps users to order in a more time-efficient manner especially when they are indecisive about what to eat.

The Solution

KFC® 'Pick for Me' is an in-app feature designed to help indecisive users by ordering for them.

The feature surprises users with randomly-picked meals from the available menu, based on their budget and party size.

Users can edit, change or remove meals where possible to suit dietary preferences. And add additional items should they feel hungrier than usual.

HIGHLIGHTS

A playful in-app feature to help speed-up ordering for indecisive users.

Slide 2
Slide 2
Slide 2
Slide 2
Slide 2
Slide 2
Slide 2
Slide 2
Slide 2
Slide 2
Slide 2
Slide 2

CONTEXT

An opportunity to solve those 'not sure', 'don't know' or 'I don't mind' moments.

Slide 2
Slide 2
Slide 2

Image: A typical example of the family group chat trying to order food.

We've all been there - hangry but undecided over what to order…

It's a frustrating situation especially when it's not just you who can't decide on what to eat, but family and friends too! This is where the idea of KFC 'Pick for Me' was born. A helpful feature to help you get your order rolling.

EXPLORATION

How would this feature fit within the existing KFC app?

Slide 2
Slide 2
Slide 2

Image: My initial sketches looking at the user flow for the 'Pick for Me' feature.

Quick sketches exploring the user flow

I started sketching possible layout variations that indicated the placement of the 'Pick for Me' feature on the main menu screen. Out of the options I explored, I went with a tab that sat just above the navigation bar. The CTA needed to be easily accessible and noticeable whilst not conflicting with existing information.

DESIGN SYSTEM

Adding to KFC's design system

Slide 2
Slide 2
Slide 2

Image: Core components from the KFC design system.

As I had no access to KFC's design system, I had to build my own using screenshots from the official app. Once I had the foundations in place, I was able to create new components for the screens I was designing for, including person and budget counters and mystery meal placeholders.

WIREFRAMES

Turning the initial sketches into hi-fidelity wireframes

From sketches to hi-fidelity wireframes
From sketches to hi-fidelity wireframes
From sketches to hi-fidelity wireframes

Image: Translating the original sketches into hi-fidelity wireframes.

The rough sketches were a great starting point. But, it wasn't until I started designing the hi-fidelity wireframes where I noticed additional layers of detail were needed to make the experience more logical for the user.

USER FEEDBACK

So, what did KFC app users think of my first hi-fidelity designs for 'Pick for Me'?

User Feedback
User Feedback
User Feedback

Image: Feedback from KFC app users on the initial hi-fidelity wireframes.

The overall feedback was great with a few valid points to consider implementing within the designs:

Allow users to add a budget

Make it easier for users to distinguish between adult and kids' meals

Allow users the option of adding additional items to their order

ITERATION

Adding extra features to allow users to further personalise their ordering experience

Slide 2
Slide 2
Slide 2

Image: Adding a budget input to the hi-fidelity Pick for Me screen.

Allowing users to input a budget

Allowing users to input a budget meant they could have further control over their spending. This is particularly useful if there are multiple people in your party and you're not trying to break the bank!

Slide 2
Slide 2
Slide 2

Image: Implementing a button to allow users to add on additional items to their order.

Allowing users to add additional items

Following user feedback, some users mentioned they would like the ability to manually add additional items to their order. This could include sides, snacks or full meals.

FINAL DESIGNS

The complete collection of screens for the KFC 'Pick for Me' app

Slide 2
Slide 2
Slide 2

Image: The complete hi-fidelity wireframes for the Pick for Me in-app feature.

FINAL THOUGHTS

What would I consider next for the app?

Introduce sharing options e.g KFC Buckets

At the moment, the 'Pick for Me' feature is only designed to match each adult or child with 1 meal. However, I think the next steps would be to incorporate a sharing option whereby it suggests the famous KFC buckets as opposed to individual meals.

Adding menu filters

Adding menu filters would allow users to narrow down their search and further tailor suggested meals according to their dietary preferences. For example, filters for vegan or vegetarian only meals and being able to choose between burgers, wraps or chicken pieces only.

Illustrations and animations

To further add to the playful experience of Pick for Me, it would be great to explore fun illustrations and screen transitions as part of the 'Pick for Me' feature. For example, designing a short animation loading screen when the user taps the 'Surprise me' button.

Next project: