Leading UX and UI for KFC Pakistan’s ordering app — research, user flows, a design system, tested with real customers.
- UX Research
- UI Design
- User Flows
- Design System
- Prototyping
- Usability Testing
- Client
- KFC is an American fast food restaurant chain.
- Role
- Sr. UI/UX Designer — leading UX and UI
Problem Statement
Revamp existing Customer facing digital assets of KFC Pakistan with added new enhancement features. The user experience of existing digital assets lacks minimalist approach, manual processes, and lack of scalability.
Business Objective
The business objective is to develop an E-commerce restaurant ordering mobile application and website for Customers, web admin & Ops panel for Business, and Driver mobile application for Fleets.
Role and Responsibilities
I was leading the UX and UI of the app. Conducted research for Mobile and Web both, make the prototypes based on the research data, and validate the prototypes by testing them with real customers. I also supervised another designer for the designs of the website.
Design Process
- 01
Understand
Competitive analysis · 5 W’s
- 02
Define
User flows
- 03
Ideate
Moodboard · Sketching
- 04
Design
High fidelity designs · Prototypes
- 05
Test
Usability testing
Section 01
Research & Understand
Conducting basic research activities to understand the product and its users. Stakeholder Interview + Competitors Analysis.
Stakeholder interview and competitor analysis
- In this step, experts shared the vision for the product and the end goals. Everyone took notes.
- An extensive competitive market analysis of food delivery apps like Mcdonalds, Burger King, Starbucks, Foodpanda etc was also done to better understand the market.
- Each flow was divided into sections and their features were mapped into a comparison table for existing KFC Pakistan app.
Mobile app Competitive Analysis
Understanding KFC’s competitors by doing feature analysis of their product/platform
5 W’s
Who is affected?
- Customers, aged 12 to 45
- Riders, aged 18 to 45
- Drivers, aged 22 to 45
- The business itself
Where is it?
Across KFC Pakistan’s customer-facing digital assets nationwide — the ordering app and the website.
When does it occur?
Every time a customer orders for delivery, arranges a pick-up, or pre-books a table to dine in.
What is the problem?
The existing experience is cluttered rather than considered, leans on manual processes, and does not scale as the menu and the market grow.
Why does the problem occur?
Adding an item to the cart and placing an order takes more steps and more effort than it should, and the discover page gives a customer little reason to browse.
Section 02
Define — User Flow
After successfully identifying our potential customer’s needs and frustrations, composing a problem statement , All the possible paths to be taken by a prototypical user in the app were strategized and created in user flows. Only few flows are shown in this case study.
The flows
For Guest User — Add to cart
Forgot password
Section 03
Ideate
Creating a moodboard then used inspirations to sketch out few ideas. Stepped up the fidelity with every round and created wireframes.
Moodboard
Once the initial project was set in motion, I created a mood board. It helped us establish the basics of what the end result could ideally look like. It helped us in visual inspiration for the project.
Sketching
After the user flows were approved by the client, I made few solution sketches to determine best possible solution.
Low Fidelity Wireframes
After brainstorming and sketching, Low fidelity wireframes with some variations were made to have an idea how will the placement go on the actual screen sizes etc.
Mid fidelity wireframes
A step up from its low fidelity counterpart Mid fidelity wireframes were designed. These have more detail including text, buttons etc,.
Section 04
Design System
Created a Design system, defined each style and then made high fidelity designs.
Created the entire KFC design system following the atomic design theory of atoms, molecules and organisms. The design system consists of colour styles, typography, icons, illustrations, components, templates and KFC cards designs.
High-Fidelity Designs: Customer App (B2C)
Signing in and OTP Verification
The customer can sign in to KFC app website by entering their name and number. To verify the number an OTP verification is carried out in the next step
Confirm Location
KFC app needs to know your location to confirm if they deliver in your area, second; to show you area specific deals and menu. You can enter you location manually as well as pin it on map.
Discover and Categories
User lands on Discover page where user can explore different mediums to get the food, categories to choose from and deals. Once user clicks on any specific category, they land on Categories page where they can explore items within that category.
Product Description
Once user clicks on any Product card, they land on product detail page where they can upsize, select add-ons and increase the amount of the item itself. Then user can add the item to the cart
Cart and Edit Cart
Once item is added to cart, user can view all of its items in the cart and can also edit them from there. There are few last minute buys for the user too to explore. if user wants to edit the customisation of the item that option is also available.
Checkout and Tracking
Once user confirms order, they are required to provide address information, payment method, any voucher if applicable etc. After placing order user can view their order receipt and track their order in 3 steps.
Delivered and Rating
Once food is delivered user will be notified about it in the app. To ensure customer satisfaction the user can rate the food and rider also.
Comparison
Section 05
Test
Conducted Usability test to evaluate the products user experience with representative users.
Goal
The goal of usability testing was to reveal areas of confusion and uncover opportunities to improve the overall user experience.
Approach
First a script was made for the user interviews. The questions were asked and noted in a template. A task was assigned to the users: add an item to the cart. The screens along that flow were laid out in a template, and feedback was gathered at each touchpoint.
What the test told us
What held
The screens themselves were never the obstacle. All three participants read the login and the discover page without help, and two named the banner carousel and the top-selling rail unprompted as the parts they liked. Nobody asked what a screen was for.
Where they hesitated
What they wanted was fewer steps in and more certainty about what they were looking at. All three reached for a social login and none noticed the guest option beside it; two could not tell whether the banner carousel was tappable; one read “Dine-in” as booking a table rather than ordering to eat there, and could not find where to change the delivery address. The work that follows is labelling and hierarchy, not layout.
Key Takeaways
KFC gave me a chance to apply the whole double diamond approach on the project. It introduced me to so many opportunities and challenges to tackle as a designer. This product has been very rewarding in terms of growth and learning.
Future Plan
After the designs were finalised as we did conduct a Usability test on it, we got real feedback from the user and there are several areas of improvement which will definitely contribute to ease of access for the user. So, future plans are to implement these changes and roll out first version of the app. In future KFC will also be introducing different mediums of getting food that includes car hop, scheduling etc.