Role
UX/UI Designer
Company
Why the re-design?
Why the re-design?
Why the re-design?
Ever since COVID hit, people couldn’t visit KFC physically. Thats when their app came into play, which received unsatisfactory feedback from the users because it had usability issues, hindering the app's overall experience and also the company's sales.
Ever since COVID hit, people couldn’t visit KFC physically. Thats when their app came into play, which received unsatisfactory feedback from the users because it had usability issues, hindering the app's overall experience and also the company's sales.
Ever since COVID hit, people couldn’t visit KFC physically. Thats when their app came into play, which received unsatisfactory feedback from the users because it had usability issues, hindering the app's overall experience and also the company's sales.
User Research
User Research
User Research
Before talking to users to find out about their pain points, I went through KFC Pakistan's reviews on the app store to find out what feedback was given by the users. Most reported issues on the app store were related to login, location, slow loading, buggy checkout process and limitation of payment modes.
Before talking to users to find out about their pain points, I went through KFC Pakistan's reviews on the app store to find out what feedback was given by the users. Most reported issues on the app store were related to login, location, slow loading, buggy checkout process and limitation of payment modes.
Before talking to users to find out about their pain points, I went through KFC Pakistan's reviews on the app store to find out what feedback was given by the users. Most reported issues on the app store were related to login, location, slow loading, buggy checkout process and limitation of payment modes.
Heuristic Evaluation
Heuristic Evaluation
Heuristic Evaluation
After going through the app reviews, I downloaded the app and examined the design with great detail and used my intuition and knowledge of best practices to point out issues. I also did a heuristic evaluation which gave me valuable insight ahead of interviewing users and learning about their frustrations in detail.
After going through the app reviews, I downloaded the app and examined the design with great detail and used my intuition and knowledge of best practices to point out issues. I also did a heuristic evaluation which gave me valuable insight ahead of interviewing users and learning about their frustrations in detail.
After going through the app reviews, I downloaded the app and examined the design with great detail and used my intuition and knowledge of best practices to point out issues. I also did a heuristic evaluation which gave me valuable insight ahead of interviewing users and learning about their frustrations in detail.
Key Insights from the usability evaluation
Key Insights from the usability evaluation
Key Insights from the usability evaluation
Home
Aesthetic & minimalist design / Consistency & standards
The home screen is unattractive and unappetizing. Only the ongoing promos are shown here which do not serve the users completely because users are familiar with viewing menu items and categories right on the home page, which is how most food delivery apps are designed.
Menu
Flexibility & efficiency of use / Recognition rather than recall
To view food items, users have to navigate to the menu screen, tap on one of the listed categories and then finally view food items in that category. Thats just too many touchpoints to view food items.
Product Detail
Consistency & Standards
Tap target on the dropdown items was small which lead to a wrong election most of the times.
Checkout
Error prevention / User control & freedom
After adding items in bucket and entering delivery information on checkout, the app sometimes would prompt to edit the bucket because some of the added items weren't available for delivery in that location.
Home
Aesthetic & minimalist design / Consistency & standards
The home screen is unattractive and unappetizing. Only the ongoing promos are shown here which do not serve the users completely because users are familiar with viewing menu items and categories right on the home page, which is how most food delivery apps are designed.
Menu
Flexibility & efficiency of use / Recognition rather than recall
To view food items, users have to navigate to the menu screen, tap on one of the listed categories and then finally view food items in that category. Thats just too many touchpoints to view food items.
Product Detail
Consistency & Standards
Tap target on the dropdown items was small which lead to a wrong election most of the times.
Checkout
Error prevention / User control & freedom
After adding items in bucket and entering delivery information on checkout, the app sometimes would prompt to edit the bucket because some of the added items weren't available for delivery in that location.
Home
Aesthetic & minimalist design / Consistency & standards
The home screen is unattractive and unappetizing. Only the ongoing promos are shown here which do not serve the users completely because users are familiar with viewing menu items and categories right on the home page, which is how most food delivery apps are designed.
Menu
Flexibility & efficiency of use / Recognition rather than recall
To view food items, users have to navigate to the menu screen, tap on one of the listed categories and then finally view food items in that category. Thats just too many touchpoints to view food items.
Product Detail
Consistency & Standards
Tap target on the dropdown items was small which lead to a wrong election most of the times.
Checkout
Error prevention / User control & freedom
After adding items in bucket and entering delivery information on checkout, the app sometimes would prompt to edit the bucket because some of the added items weren't available for delivery in that location.
User interviews & Empathy Mapping
User interviews & Empathy Mapping
User interviews & Empathy Mapping
Users were given the goal of browsing through the KFC app and placing an order, and were interviewed afterwards to gather insights about their needs, pain points, experiences and behaviours.
Afterwards, I synthesised the insights from interviews in an empathy map, which allowed for a more profound understanding of the users, serving as a valuable tool in capturing their behaviours. Furthermore, the process facilitated the creation of a comprehensive and relatable "user" in the user story.
Users were given the goal of browsing through the KFC app and placing an order, and were interviewed afterwards to gather insights about their needs, pain points, experiences and behaviours.
Afterwards, I synthesised the insights from interviews in an empathy map, which allowed for a more profound understanding of the users, serving as a valuable tool in capturing their behaviours. Furthermore, the process facilitated the creation of a comprehensive and relatable "user" in the user story.
Users were given the goal of browsing through the KFC app and placing an order, and were interviewed afterwards to gather insights about their needs, pain points, experiences and behaviours.
Afterwards, I synthesised the insights from interviews in an empathy map, which allowed for a more profound understanding of the users, serving as a valuable tool in capturing their behaviours. Furthermore, the process facilitated the creation of a comprehensive and relatable "user" in the user story.
Competitive Analysis
Competitive Analysis
Competitive Analysis
The space of Food Delivery apps is saturated so I explored other similar applications. The goal was to understand their key features, strengths and use this information to set a direction for KFC app's improvement.
The space of Food Delivery apps is saturated so I explored other similar applications. The goal was to understand their key features, strengths and use this information to set a direction for KFC app's improvement.
The space of Food Delivery apps is saturated so I explored other similar applications. The goal was to understand their key features, strengths and use this information to set a direction for KFC app's improvement.
Users' pain points
Users' pain points
Users' pain points
Problem # 1
Users didn’t like the experience of browsing through the items because they are nested within the Menu screen. Inorder to view a different menu, users had to go back from the items list to menu screen and then go into the detail of a different menu.
Competitor apps had easy and intuitive navigation
Problem # 2
Some users weren't getting OTPs, hence they weren't able to login.
Competitor apps had no OTP issues
Problem # 3
After adding an item in bucket, entering delivery information would sometimes prompt the user to edit the bucket because the previously added item wasn’t available for delivery in that area.
Some competitor had this issue
Problem # 4
Most users preferred to pay online but that option wasn’t available in the app.
Competitor apps had more payment options
Problem # 5
After successfully placing an order, there were no real time status updates.
Competitor apps had real time status updates
Problem # 1
Users didn’t like the experience of browsing through the items because they are nested within the Menu screen. Inorder to view a different menu, users had to go back from the items list to menu screen and then go into the detail of a different menu.
Competitor apps had easy and intuitive navigation
Problem # 2
Some users weren't getting OTPs, hence they weren't able to login.
Competitor apps had no OTP issues
Problem # 3
After adding an item in bucket, entering delivery information would sometimes prompt the user to edit the bucket because the previously added item wasn’t available for delivery in that area.
Some competitor had this issue
Problem # 4
Most users preferred to pay online but that option wasn’t available in the app.
Competitor apps had more payment options
Problem # 5
After successfully placing an order, there were no real time status updates.
Competitor apps had real time status updates
Problem # 1
Users didn’t like the experience of browsing through the items because they are nested within the Menu screen. Inorder to view a different menu, users had to go back from the items list to menu screen and then go into the detail of a different menu.
Competitor apps had easy and intuitive navigation
Problem # 2
Some users weren't getting OTPs, hence they weren't able to login.
Competitor apps had no OTP issues
Problem # 3
After adding an item in bucket, entering delivery information would sometimes prompt the user to edit the bucket because the previously added item wasn’t available for delivery in that area.
Some competitor had this issue
Problem # 4
Most users preferred to pay online but that option wasn’t available in the app.
Competitor apps had more payment options
Problem # 5
After successfully placing an order, there were no real time status updates.
Competitor apps had real time status updates
Information Architecture
Information Architecture
Information Architecture
Drawing from the knowledge obtained through the preliminary review, analysis of competitors, empathy mapping, and understanding user challenges, I outlined the app's information structure.
Drawing from the knowledge obtained through the preliminary review, analysis of competitors, empathy mapping, and understanding user challenges, I outlined the app's information structure.
Drawing from the knowledge obtained through the preliminary review, analysis of competitors, empathy mapping, and understanding user challenges, I outlined the app's information structure.
Low fidelity design
Low fidelity design
Low fidelity design
I created low-fidelity designs which fostered creativity and allowed me to rapidly explore multiple design concepts. These helped facilitate initial communication with stakeholders and facilitate the decision-making process regarding the specific components, content, and layout.
I created low-fidelity designs which fostered creativity and allowed me to rapidly explore multiple design concepts. These helped facilitate initial communication with stakeholders and facilitate the decision-making process regarding the specific components, content, and layout.
I created low-fidelity designs which fostered creativity and allowed me to rapidly explore multiple design concepts. These helped facilitate initial communication with stakeholders and facilitate the decision-making process regarding the specific components, content, and layout.
High fidelity design
High fidelity design
High fidelity design
I crafted the high fidelity, interactive visuals that encapsulate the brand's distinct identity. The design solved the users' problems and accentuated KFC's signature colors, typography, and imagery to offer a familiar yet modern digital experience. By focusing on an intuitive user journey, each element was placed with intent, ensuring that users can effortlessly navigate through the app. This polished version set the stage for practical user testing, ensuring that the app not only looked good but functioned seamlessly before diving into the development phase.
I crafted the high fidelity, interactive visuals that encapsulate the brand's distinct identity. The design solved the users' problems and accentuated KFC's signature colors, typography, and imagery to offer a familiar yet modern digital experience. By focusing on an intuitive user journey, each element was placed with intent, ensuring that users can effortlessly navigate through the app. This polished version set the stage for practical user testing, ensuring that the app not only looked good but functioned seamlessly before diving into the development phase.
I crafted the high fidelity, interactive visuals that encapsulate the brand's distinct identity. The design solved the users' problems and accentuated KFC's signature colors, typography, and imagery to offer a familiar yet modern digital experience. By focusing on an intuitive user journey, each element was placed with intent, ensuring that users can effortlessly navigate through the app. This polished version set the stage for practical user testing, ensuring that the app not only looked good but functioned seamlessly before diving into the development phase.
Login / OTP
The new design has additional login options for the user (Google & Facebook). The OTP process is swift and doesn't keep the user waiting like it did in the previous design.
Login / OTP
The new design has additional login options for the user (Google & Facebook). The OTP process is swift and doesn't keep the user waiting like it did in the previous design.
Login / OTP
The new design has additional login options for the user (Google & Facebook). The OTP process is swift and doesn't keep the user waiting like it did in the previous design.
Location Selection
Having location selection in the beginning eliminates the issue that the users were previously facing (the app sometimes would prompt to edit the bucket because some of the added items weren't available for delivery in that location).
Location Selection
Having location selection in the beginning eliminates the issue that the users were previously facing (the app sometimes would prompt to edit the bucket because some of the added items weren't available for delivery in that location).
Location Selection
Having location selection in the beginning eliminates the issue that the users were previously facing (the app sometimes would prompt to edit the bucket because some of the added items weren't available for delivery in that location).
Home / Category
The home page now has many different components, as opposed to just promos in the previous design. This helps the user discover and view different menu items and also access other info such as location and modes (delivery, pickup, dine in).
Home / Category
The home page now has many different components, as opposed to just promos in the previous design. This helps the user discover and view different menu items and also access other info such as location and modes (delivery, pickup, dine in).
Home / Category
The home page now has many different components, as opposed to just promos in the previous design. This helps the user discover and view different menu items and also access other info such as location and modes (delivery, pickup, dine in).
Item Description
After tapping a menu item, users land on its detailed screen where they can view all the add-ons and customize the order.
Item Description
After tapping a menu item, users land on its detailed screen where they can view all the add-ons and customize the order.
Item Description
After tapping a menu item, users land on its detailed screen where they can view all the add-ons and customize the order.
Cart / Checkout
The cart screen clearly shows the order summary and price breakdown. It allows for easy customization. Other payment modes (online wallets, debit/credit card) are also added here, which were absent in the previous design.
Cart / Checkout
The cart screen clearly shows the order summary and price breakdown. It allows for easy customization. Other payment modes (online wallets, debit/credit card) are also added here, which were absent in the previous design.
Cart / Checkout
The cart screen clearly shows the order summary and price breakdown. It allows for easy customization. Other payment modes (online wallets, debit/credit card) are also added here, which were absent in the previous design.
Order Status
The app now shows real time order status updates in the form of a sticky bar at the bottom of the screen. Tapping it opens up a more detailed view which shows the steps involved and order details.
Order Status
The app now shows real time order status updates in the form of a sticky bar at the bottom of the screen. Tapping it opens up a more detailed view which shows the steps involved and order details.
Order Status
The app now shows real time order status updates in the form of a sticky bar at the bottom of the screen. Tapping it opens up a more detailed view which shows the steps involved and order details.
Outcome
Outcome
Outcome
The updated design was tested with the same group of users and the issues that they reported earlier were resolved. The users and the business stakeholders loved they way the prototype felt because it was way more engaging and delightful to use.
The updated design was tested with the same group of users and the issues that they reported earlier were resolved. The users and the business stakeholders loved they way the prototype felt because it was way more engaging and delightful to use.
The updated design was tested with the same group of users and the issues that they reported earlier were resolved. The users and the business stakeholders loved they way the prototype felt because it was way more engaging and delightful to use.