07 August 2022 Design Critique Case Study CA1B Report Group 05 DMAD/FT/2A/DC04 Chriselda Goxentia Hartanto P2137348 Matthew Colin Lunardhi P2008026
KFC (Kentucky Fried Chicken) KFC is an American Fast Food Restaurant chain that is headquartered in Louisville, Kentucky, that specializes in fried chicken. Harland David Sanders, the Colonel, was born in Henryville, Indiana, in the year 1890. The Colonel does a variety of occupations in 1900, including those of a farmhand, a streetcar conductor, an army soldier in Cuba, a blacksmith assistant, a railyard fireman, a salesperson, and a service station operator for Standard Oil. In 1930, he managed a Shell gas station in North Corbin, Kentucky, where he also served meals to passing motorists at his own dining room table in addition to selling fuel. The first buckets of KFC were on sale in 1957. By 1960, KFC had opened more than 600 franchise locations across the United States, Canada, and England. KFC became public in 1966. Hublein Inc., an American manufacturer and marketer of alcoholic drinks and snacks, purchased KFC in 1971. KFC first landed in Singapore in 1977, when it first opened its doors at Somerset Road. Today it serves more than 1 million customers each month through 80 stores across the whole of Singapore. Making KFC one of the biggest fast food chains across the whole of Singapore. Yum! Brands, Inc., originally known as Tricon Global Restaurants, Inc., is an American fast food company with more than 54000 locations throughout 155 different countries. Yum! Brands is headquartered in Louisville, Kentucky. They are the parent company behind KFC, Taco Bell, Pizza Hut, and The Habit Burger Grill, among other names.
The rise of Kiosk Machines Origins and popularity: Vending machines were the first self ordering machines. It was invented by Percival Everitt in 1833. This self-ordering machine was seen everywhere selling things from drinks to packaged meals. - The first interactive kiosk: Murray Lappe, from the University of Illinois, developed the first interactive kiosk which had a plasma touch screen interface and was used as an informational kiosk for students. - Supermarket self-checkout: In the early 1900s, Dr Howard Schneider developed the first self-checkout kiosk. By 2003 these kiosk machines were almost used in every Supermarket in America. - Evolution of the kiosks: In 2000, self check-in kiosks were rolling out in US airports. After 9/11 happened, new airport security measures slowed down queues in airports and caused congestions therefore they turned to self check in kiosks to lower manpower cost and reduce congestions - Mcdonald's self-order kiosks: In 2003, Mcdonald’s started testing and rolling out self order check out kiosks in their Canadian outlets. - Rise of self-order kiosks in Singapore: In Singapore most F&B merchants face challenges such as lacking manpower, high manpower costs, long queues which results in driving away customers. Therefore the implementation of self-ordering kiosks were implemented to tackle these problems.
KFC and Kiosk Machines Kiosk Machines are known to be convenient and create a more efficient ordering system in general. The Benefit of introducing Kiosk Machines will benefit not only the customers but manpower as well. ● Utilizing the Kiosk Machine will benefit in: ○ Decreased waiting time for customers ○ Increased efficiency (and related profits) because more people can serve themselves in a shorter amount of time ○ Less human interaction with staff, so staffs can focus on doing other tasks ○ Multi-service functionality (ex. one system can provide information and take payments) ○ Customers will have more control over how they interact with the brand (improving customer experience) Today, companies are interested in decreasing interaction between staff and customers to reduce potential exposure to COVID-19 and its variants. They also help decrease waiting in close-quarters lines because they move people through faster-both great benefits to address COVID_19 concerns. (insert citation) As modern and advanced technology have become the norm in today's society for the use of a structured streamline systematic order in order to engage and create a positive customer experience it is no surprise why KFC would incur the use of Kiosk Machines. There are multiple reasons why KFC and many other fast-food chains are using kiosk machines. ● Implementing the use of Kiosk Machines may also possibly conclude based on: ○ Reducing manpower ○ Reducing cost of the manpower also ○ Reduce congestion of queues ○ Kiosk is also more convenient in terms of having the menu all on the screen so users can just view the specific items they want to look at and order. Firstly, reducing human error. - Human error can often occur when ordering directly at the counter. The employee working at the counter has a higher chance of mistaking your order and inputting the wrong set of orders into the system as compared to a kiosk machine where before checking out the user will be able to look at exactly the items they are ordering first.
Secondly, waiting time is reduced. - Due to having fewer people to manage people's order directly at the counter, they could have more people behind in the kitchen to work on preparing the food for the customers. Thirdly, improved customer experience. - Due to the user being able to have full control over how they want their order through the self-service kiosk machine this would increase their satisfaction and possibly bring them back more as they would feel that using the machine feels more personal and have more control. Plans for Achievements KFC KFC wants to provide great food and service; served with pride. They aim to make sure that every consumer is satisfied and delighted when they depart. They should provide hot, filling, and nutritious meals. They employ natural, high-quality materials and provide all the comforts needed to make visitors feel at home. KFC strives to provide a welcoming and energetic environment that encourages you to hang out and spend time there with your loved ones. In order to make it simpler for them to enjoy their cuisine, they are also willing to continuously try new items. KFC doesn't seek uniqueness only for its own sake. They have deep roots and were established a long time ago. KFC restaurants proudly display the fact that 100% of their chicken is made from scratch. Only natural, high-quality materials are used, and they offer all the amenities required to make guests feel at home. From the table designs to the music in their restaurants, they create a warm and lively atmosphere that invites you to linger and enjoy your time with friends or family. KFC is not hesitant to keep experimenting with new ideas that will make it easier for consumers to enjoy KFC chicken, whether it be by creating enticing new restaurant formats or by creating inventive methods to place orders. Additionally, KFC makes an effort to uphold the colonel's ideals. We can see these beliefs manifest in their cuisine, people, service, and restaurants.
KFC Profits KFC makes around 7-8% of its sales as a profit. A store can expect to earn around 70-90k in total profits per year. For a piece of chicken, KFC earns approximately $0.4 In a year, a kfc franchise unit earns up to $942k - $1mil. Brands keep their franchise owner's salaries private, it can be estimated that owners take home roughly $120,000 a year, based on average food franchise owner salaries. KFC generated a revenue of approximately 2.79 billion U.S. dollars in 2021. Previously in 2020, they earned 2.27 billion U.S. dollars, reflecting an increase from 2020 to 2021. There are 22.6k KFC outlets in 135 countries around the world. 90% of the units are franchised. KFC Competitors Based on the US data, (according to https://www.comparably.com/companies/kfc/competitors) KFC ranks 3rd in place following McDonald’s and Chick-fil-A. ● They are ranked in accordance to: ○ Gender rank, which touches upon gender equality and positive experience where votes come in from women who work/worked at KFC, ○ eNPS - Employee Net Promoter, where current and past employees would vote in accordance to the scale of 1-10 if they would recommend working at KFC ○ NPS, the same as eNPS however it focuses on the brand itself where customers are led to ask if they were to recommend KFC on the scale of 1-10 ○ Product quality, customers voting for the quality of their products, etc.
In Singapore, there is no official ranking yet to be announced; however we have compiled data from our user testing to showcase the preference from locals. Other brands not voted or has been voted but not shown according to the pie chart, however is in Singapore and has relevance as a competitor: (Not listed in accordance to rank) Subway Mos Burger Jollibee Burger King Long John Silver’s A&W Texas Chicken Pizza Hut Dominos Canadian Pizza GO Pizza! Arnolds Carls Junior Five Guys Shake Shack
4Fingers Pezzo WingStop Jinjja Chicken MONGA NeNe Chicken Chic A Boo Poppeyes Mos Burger Dip n Go What type of Digital Product is the Kiosk Machine? Touch The KFC Kiosk Machine is an interactive self-service device, utilizing the needs of the use of physical touch and motion in order to operate. It is a form of a Touch Digital Device. A kiosk Machine is a standalone digital display monitor offering software services for customer experience. It is able to offer, softwares, photography, music, etc. The Kiosk Machine in general used in the Food & Beverage Industry is a touch digital product. Gestures have been thought of and however are yet to be hardly implemented due to the need to be fast and efficient in a quick-service environment. Kiosk Machines are used as a type of Advertising Display and Digital Signage Kiosks and Information Kiosks.
There have been movements in recent times for gestures to be implemented in consideration with the ongoing spread of COVID-19 and hygiene purposes. PepsiCo, based in N.Y., who previously owned Yum! Brands, Inc., went to include KFC in a recent launch for a trial in Poland with the creation of a touchless screen technology controlled by gestures for use in quick service restaurants (QSR) amid greater concern over hygiene with the thought of solving real world problems as mentioned previously. “What we’ve shown is that this is a viable option of food and drink ordering that had not been proven before. Now that we have shown the effectiveness of gesture technology, the possibilities are endless for how we can use it to benefit our customers – and our restaurant partners.” (Green, 2021) Purpose With the increase in technology, the world is now in the digital age where many things are done through computers and a lot of information is accessible through computers. Many people have their own smartphones that allow them to access the internet anytime and anywhere.This is because there has been an increase in technology, which has made it possible for people to work from anywhere with online meeting rooms being so accessible. For fast food restaurants, in the past, a real person had to operate the cashier.It requires a lot of manpower to do this, and there is still the possibility of human error when doing this. The cashiers may not be very quick either.It depends on how quickly the cashier can enter orders into the system and how quickly they can serve customers. All in all, this takes a considerable amount of time and queues can grow and congest the area. Digital products like kiosk machines make it much easier for customers to order food quickly and easily. They still have the freedom and control to look at the whole menu. The business opportunity for KFC is to adapt and join the digital era by using technology like kiosk machines. Problem solving with Kiosk Machine 1. Waiting time/Congestion of queue - Due to the high human traffic at most outlets, customers are expected to wait longer than usual to order and collect their food. 2. Shortage of labor
- Shortage of labor is a chronic problem slowing down the whole process of serving the customers. Common shortages are: Cashiers Serving customers Attending technical issues Cooks 3. High Cost of manpower - The high cost of manpower had been an issue for KFC. This is because hiring more labor will increase expenses as KFC already has operating expenses to top handle with hence, hiring more labor will be difficult for them What goals does the business want to achieve with the Digital Product? 1. Reduce congestion of the queue at the counter and collection point. - With the help of self-kiosk, the congestion of the queue from the ordering point and the collection point will be reduced significantly and customers do not need to wait for so long just to order their food hence, it also create spaces 2. Reduce the cost needed to hire manpower to serve the customer. - By implementing the self-kiosk machine, KFC no longer needs to hire more manpower to improve the serving speed and with that the cost needed to hire manpower will drop down significantly. 3. Make it easier for their customers to order food at their convenience. - With self-kiosk machine, customers can order their food at their own pace of convenience without needing to ask the customer as the self kiosk machine provides most of their food selection that they can order with customizable options included 4. Increase the speed customers are served. - To speed up the process of serving customers with the help of the self-kiosk machine so that most of the staff can be deployed to the food
preparation point and the customer need not have to wait so long for their food. User Research The user research method that we used was contextual inquiry which is a qualitative research method that involves in-depth observation methods by interviewing users in their own environment. Observing how they perform their tasks and is generally used at the beginning of the design process. We are using contextual inquiry because we want to gain information on how the user behaves when using the digital product to see what pain points and processes need adjustments or to be changed. Needs to be addressed - Customization - Easy food customisation to address users needs and wants on food personalization - Flexibility - Seamless and clear navigation which users are able to navigate through back and forth the screens - Layout efficiency - Showcase seamless and efficient layout with consistency to reduce users frustration and negative experience due to misclicks of scrolling process - Process Improvements (user Flow) - Efficient user flow process to minimize customers efforts and reduce the waiting time along with redundant user interactivity - Lack of Informational Data - The lack of findability affects the effectiveness of the user experience Persona
User Flow & Goals Shown above is an image of how a general user flow of the kiosk machine will generate and look like according to a user's goal to order food from the kiosk machine. Users have options in between the flow to access and process through the next decision making. In order to reach the end goal of ordering a meal users have to go through the process of 8 steps with additional 6 steps that could occur during the process.
Above we have the starting point to the selection of the meal. Users are to trigger the Kiosk Machine to the Dining Mode by tapping onto the screen as the advertisement slide is automated after a period of time and at every transaction made. Main Menu screen/ Hot deals screen After selecting the Dining Mode users are directed to the menu page where it will appear to the menu category of the Hot Deal by default and showing the different promotion items, popular food items and meal bundles which the user can select which will bring them straight to the customisation page for the food item or meal. If the user decides not to click on any of the food items on the hot deals screen they can also select the different categories nearer at the top of the screen which are ‘Sharing’, ‘For One’ , ‘Ala Carte’ and also the ‘Hot deals’ icon. Clicking specific categories If the User selects the ‘ For One’ Option a list of icons for sub-categories will appear which are ‘Chicken’, ‘Boxes’, ‘Burgers/Wraps’ and ‘$5 Fill Up Meal’. When selecting on one of the icons it would then bring to a screen with the food items on that page for example for ‘Burger’ if they click on the screen it would bring them to a page full of Burger Meals. After selecting the food item it would then bring them to the customisation page for the item chosen. Likewise this is also how it works for the other categories of food.
Customisation page flow Once the users have selected the food item they are moved to the customisation screen of the item where there are different decisions that the user can make through the buttons which are to change the sides, change drink choices, customize the main meal such as the type of chicken, select add-ons, return back to main menu and lastly to add to cart. When entering this screen the user can choose to either go straight to adding the item to cart or customizing then adding to the cart, If the user does not want to do either they can go back to the previous page of the food selections list. After adding to cart the user will be led back to the main menu screen and this could encourage the user to make more decisions and look around the menu to see if they want to get more items. Checkout screen flow After the user is done selecting their food items they can go to the cart where a sudden pop-up for food will appear which then the user has to close then it would lead them to the checkout screen where all the food items that are in the cart will be displayed. In the checkout screen there are many icons that the user can tap. There’s icon for them to input a promo code, plus button to add more quantity of item, minus button to reduce quantity of item, X button to remove item, an area with certain food items displayed to add-on to meal, a recommended section where there is food items that user can also select to add to cart and lastly an icon to checkout to payment screen.
Payment flow Once at the payment screen the user will then be able to see a selection of multiple payment methods in an order with contactless payment at the very top to show hierarchy for it as many people would usually prefer to use a contactless payment method especially due to the covid pandemic recently everyone has been using contactless payment and now in today’s society everyone is adapting to e-payments. Summary The overall flow is easily navigable for users with technology experience and are adaptable to digital devices however for users that may possibly be in the rush and for those who lack digital knowledge (Elderly) it may come off as an inconvenience and users would presumably lack the patience in both scenarios. KFC does not even try to be more subtle in their aggressive selling marketing strategy. 5 User Interface (UI) & User Experience (UX) Design Critiques 1. Icon Placement User Goal: Removing Food items from the cart Whenever the user wants to remove a food item from the checkout screen they would always tend to struggle removing the food item, this is due to the fact that when the user is looking at the screen and wants to remove the food item the first symbol she spots is the minus button which she would associate with removing the food item that was chosen, but when she is clicking the minus button nothing happens then she spots at the top right of the food item that there is an ‘X’ symbol so she clicks it and realizes that that was the button to remove the food item.
Based on the usability heuristic effectiveness we feel this isn’t very efficient and would also lead to the customer not being satisfied because of struggling to find the button. Placing the remove food item button at the top right isn’t very efficient as people would look at the ‘minus quantity of food item’ button first because according to the rules of intuitive UX design we should obey the law of locality. Associating another icon with ‘removing from cart’ The law of locality basically states that the buttons or elements should be placed near the effect of change, this is because users would unwillingly glance at where they feel the change would happen. In this case the effect of change would be the name of the food item disappearing, since the minus button is the closest thing to where they feel the effect of change is the users do not notice the ‘X’ button which results in them clicking the minus button which is the wrong thing. As you can see in the image there is the ‘-’, ‘+’ and the ‘x’ button and users would tend to press on the ‘-’ button usually when wanting to remove the item as they may associate ‘-’ with removing the item and associate the ‘x’ with closing the checkout screen and since the ‘-’ button is closest to the effect of action which is removing the cheese sauce. Solution: Therefore for the solution based on the rules of intuitive UX design of how we should obey the law of locality we have decided that since the effect of change is the title & picture of the food item and the closest buttons are the minus and plus button for the quantity we could actually just remove the ‘X’ button and instead make it so the minus button is also to remove the food item. 2. Poor Layout User Goal: To swipe through the screens smoothly
Whenever Rachel the persona is swiping through the screens on the kiosk machine she would often accidentally click on the food item by accident even though it may not be the food item she wanted to select. Misclicks when swiping There isn’t any indication of where to swipe and the user would just swipe through the middle of the screen as it seems very natural therefore causing her to accidentally tap food items that she doesn’t even want to tap on and based on the usability heuristics efficiency’ the interface will not be very efficient because when the user is swiping and accidentally clicks onto a food item, it will then open up another screen for the food item which they then have to close if they don’t want the item and this would be extra unnecessary steps which makes the process of ordering longer then it should be which is really inefficient. Solution: The solution we have come up with is to reduce the space that the icons take up and create more negative spaces on the sides of the icons by reducing the sizes of the icons which would just fill up the page causing accidental misclicks to happen very often and also to add a scroll bar on the right side of the layout to show the users that they can use the scroll bar to also swipe up and down the interface. 3. Lack of Informational context User goal: To be able to find information on food selection
Some users may have a food allergy to certain types of ingredients, due to that they would have to always check and be sure whether the ingredients contain anything that they may be allergic to. But when using the KFC kiosk machine they do not give any sort of descriptions for the food items and this would be a problem as the user wouldn’t be able to check and assure that the ingredients will be safe for them. In other cases sometimes users may dislike certain ingredients and want to remove them from their meals but because there isn’t any description they won’t be able to tell what is inside leading them to maybe purchasing something with ingredients they dislike inside and making them unsatisfied. The problem here lies in the visual and lack of informational details of the ingredients used for the menu. Although visually the images of the menu are shown and straightforward for anyone to take notice of what ingredients the meal would contain, for someone like Rachel with a food allergy they can never be too sure. Images could be misleading according to the colors or imagery shown on the platform. Not only that but will Rachel have a hard time choosing and selecting her food options which will cause damage to the queue behind her. This issue can easily be solved by using an informational approach and taking in consideration the informational architecture of UX designing. “A well-designed, user-friendly information architecture ensures that users spend less time and effort searching for information and are successful in finding what they need.” Informational architecture is there to assist consumers in navigating a product interface and achieving their objectives, it tries to give information that is clear, organized, and practical. In short, it is to be kept straightforward in order for information to easily be spotted and absorbed. What is lacking here is Peter Moreville honeycomb Findable. Findable: Information needs to be findable and easy to navigate. If the user has a problem they should be able to quickly find a solution. The navigational structure should also be set up in a way that makes sense. (Wesolko, n.d.) Here’s an example of a misleading visual image.
At First glance, you would have thought of cheese according to the color and visual of the melt on the burger as cheese is one of the biggest main ingredients and factor into a burger however. In fact it is mustard not cheese! This clearly shows how while images showcased on the Kiosk Machine may give clear sight of what the meal is to offer they lack the informational context of ingredients which is highly important for someone like Rachel.
An example would be this meal right here which would’ve caused Rachel to have an allergy reaction. In this meal right here it features the KFC Original Recipe Burger which features a piece of chicken drizzled with a special pepper mayonnaise sauce and packed with lettuce between sesame buns. At first glance no one can be sure as to what the sauce may be. Even the promotional banner does not provide any information nor does the finalized order list which targets the failed customization design critique. Solution: With the issue of the ingredients information being findable it throws off the user towards their end goal. While there may not be a perfect balance prioritizing every single aspect of the honeycomb there should still be a balance as every user is unique and has a different experience. Not showcasing the ingredients nor providing a solution for Rachel’s food allergy causes a negative and worrying experience. With the issue of the ingredients information being findable it throws off the user towards their end goal. While there may not be a perfect balance prioritizing every single aspect of the honeycomb there should still be a balance as every user is unique and has a different experience. Not showcasing the ingredients nor providing a solution for Rachel’s food allergy causes a negative and worrying experience. Examples of what KFC Kiosk Machine can do to solve this issue is by showing through visual imagery which they are strong on by separating layers of informational ingredients. Another great example will be from McDonald’s where they can adopt the idea of customization. Through customization users will be able to easily find out the ingredients used for their meal and remove or add to adjust their meal accordingly to their needs or personal preferences.
4. Customization Goal: To allow consumers to find out informational context on their selected meal choices and allow them to make their own decision of creating their own personalized experience. Problems of lacking customisations for main food item Every user is unique and different. With various preferences of one another if not for reasons of their health, from our observations based on User Research we have found, the KFC Kiosk Machine lacks empathy towards their users. With this issue they have created not only a limited personalized and emphatic UX design but also missed out the chance to create a much more positive customer experience for their brand. “Customization lets users make their own selections about what they want to see, or set preferences for how information is organized or displayed. It can enhance user experience because it allows users to control their interaction.” (Insert citation) We have noticed that the only customization that has been spotted through the ordering system in the Kiosk Machine are the Drinks, Sides and Add-on sections. The main food item in the meal lacks the selection if not is already restricted to the default ingredients in the menu. This leads to the big question we have in mind: What if our user has a medical issue that needs to be met? Taking our persona Rachel into consideration, she has a Mayonnaise allergy. Even if visual imagery is straightforward and easily known to users what ingredients are in use in the meal, what if a scenario comes forth where she is unable to come into a realization if the ingredients used in the meal is safe for her to eat or not?
We believe this should touch upon the hierarchy of needs for the users in order for users to gain a positive customer experience. Empathy is important in order to create a connection with users with the form of a cause and effect relationship. Being empathic allows us to show that we understand the user's needs of recognition and belonging. This can also build customer loyalty. Different preferences but limited customisations Different users may have different preferences, some users may be fine with having vegetables on their food items and some may not, some may also want a specific certain part of the chicken instead but when using the KFC kiosk machine there are very limited customisation options. The only customisable options when using the KFC kiosk machine is the type of sides the user wants, which drink they want, what food item add-on they may want and when ordering chicken the selection choice of ‘original’ or ‘hot and spicy’. These limited customisable options leaves the user with very little freedom to what they can change to their meals which may lead them to being unsatisfied. According to the UX honeycomb framework the customisation options is useful but only to a certain extent as it may not meet all the goals of the user when wanting to customize their food options. Solution: How can we create a digital interface with customization that will satisfy and answer their needs of health intake? Our solution that we concluded and decided upon is to link it with the previous solution which is, when clicking on the food item that the user wants it will move to the food item screen with a layout of the food separated by layers of ingredients with indicators whether to remove or add the ingredient, additionally for the chicken the chicken customisation they could also add indicators or and option dropdown whether for what part of the chicken they want. Our solution links back to point 3 where the lack of informational context is touched upon. Perhaps what KFC would need to take note and be more aware of is Data mining technology in personalization design.
5. Long user journey During our user research Contextual Inquiry, we observed that our users had a long user journey and would get frustrated at the many pop ups screen. The pop up screens lack empathy towards users and are highly money driven ads in order for consumers to purchase more. Long Journey due to the unnecessary food pop-ups When the user is clicking between the screens on the kiosk machine, pop-ups on food items may appear to entice the user to maybe add the item to the cart and buy more food. The user would then have to click on the ‘X’ button to close it and because it keeps constantly popping out there are chances where users are trying to do another process but they may accidentally click on the pop-up and cause the process to increase even more because of that. Based on the usability heuristics, these pop-ups are very inefficient as it makes the journey to the goal for the user very long-winded. Long User Journey due to the amount of screens that user has to go through In the main menu, when the user clicks on a category of choice it would bring them to another screen with sub-categories that they then have to click again before looking at the list of food items which they still have to select. If the user doesn’t want that food item they would have to then go back to the screen with the sub-categories and then back again to the main menu and this creates a very long process which according to the usability heuristics isn’t very efficient because it causes the process of the journey to become longer. Solution: Our solution for the data management folder area is to make it so when tapping on category a dropdown list with the specific types of options in that category showing where the user can then tap on one of the options to open a new screen. Instead of having to keep changing to a different screen everytime they tap on a category then clicking on a specific option to get to the food, why not we make it so that all this process can be done straight away in one screen to get to the food item selection screen. Next also instead of having a pop-up appear everytime which can frustrate the user as it distracts them from their goal of ordering food instead they could make a section for all the add-ons at the end when in the checkout screen full of different things that the user could add-on. Prototyping Wireframing Ideation Based on user flow of ordering a meal
Starting Page Main menu/Hot deals menu The welcome/starting page here has the The menu page here will have the user flow reduced to 3 in 1. The screen navigation of categories shown here for had a redundant choice of dining mode better visualization and clear layout. shown at the start of the screen only for Subcategories is shown under the main the users to tap once again into the for consistency of layout and easy screen for nothing to start and then navigation for users to be direct in the selecting the choice of dining mode user flow. The food selection will be again. shown 3x3 if not 4x4 depending on the main selection of category, additionally Order page/ Customisation page more negative space will be created near the icons so that the user will have an empty space where they can use their fingers to swipe up and down the interface and this will touch on the critique of having a poor layout due to the misclicks while swiping up and down. Cart/ Checkout Page
A pop up of the selected food option will The order page shows instantly the order appear on top of the main menu. A pop of the user inside a frame that will gain up was decided as we feel that it will be users attention as the main emphasis on easy for users to easily go back to the the screen. Previously on the frame of the main menu screen and it gives an illusion food item there was the X icon at the top of easy accessibility. The customization right of the frame for the food item and features informational context and this may have caused confusion with choices of customization for the users users when wanting to remove the item food selection with visibility and from the cart as they would mistake the interactive in importance to the frame of minus icon as removing the item from the box. As stated in the law of locality, cart because it was closest to the effect of the X button is placed at the top for the change. Therefore as stated due to the effect of cancellation to occur. law of locality since the closest thing to the effect of change which is the - icon we have decided to remove the X icon since people already originally associated the - button as the removing the item from cart and also since the - icon is closest to the effect of change. High-Fidelity Based on user flow of ordering a meal and improving the 5 Design Critiques
Welcome/Starting Screen Main Menu/Menu Based on the original design of the Kiosk Following the KFC Kiosk original page, Machine, targeting the Long User once choice of dining mode has been Journey Design critique, we have selected, users will be directed to the reduced the amount of interactivity main menu and into the first menu needed to start ordering by combining category, “Hot Deals”. As the KFC in the sliding advertisement/promotional general does not have much on their banner and choice of dining into one main menu we decided that the kiosk frame which will allow users to directly machine can simply follow this user flow make a choice while also be exposed to step. Once directed to the menu users the brands promotion are able to look at the whole menu based on the categories, additionally, what we have done is to reduce 1 user step by simply showcasing the sub categories under the categories. This allows easy access for users and is less of a hassle for them to go back and forth to choose their meals. The category has a red border which indicates that it has been selected. A scroll bar at the side showcases that there is still more food options to be viewed if scrolled down.
Menu Sub Category Screen The navigation bar is gone as well at the button and now has been reduced to 2 icons placed on top of the categories, by doing this is allows spacing and minimizes the overload of the screen. The idea of putting the mode of dining at the top is to simple showcase the users selected mode of dining which can easily be switched by going to the home icon. The advertisement banner is stationed at the top and will help the brand to consistently promote different promotions going on. Order page/ Customisation Screen
Once a sub category has been selected, Once a meal option has been selected, a the button will turn red showing pop up screen will be shown about the indication of the selection. The menu will meal customization, this targets our change according to the sub category users lack of informational context and and showcase the relevant options. customization as previously the original kiosk did not have both. The screen will showcase the ingredients in the meal and grant users to be able to remove or add additional ingredients but the main purpose of this is for users to be able to look out for ingredients that are in the meal. Each of the meal selections are able to be swiped to the left in order for users to enjoy more selections and also
Main Menu/Menu for easy navigation and information take (After adding into cart) in. Cart/Checkout Screen After users have added into the cart their We made changes from the wireframing. meal selection, users will be directed The cart/order page has users direct right back into the menu page where attention within the box framing that will showcase their order. We inserted the they left off instead of the cart page. The image of the meal as we realized users reason why users are not directed will be able to recognize visually better on what they see. The gap between the immediately into the cart page is for the information on the pricing has been convenience in case of quantity ordering reduced for easy visualization and information absorption. of different meal selections. The cart button has now switched and taken over by a restart icon which makes more sense as users are already in the
cart/order page. This will allow them to easily make the choice of restarting their meal. Here users are able to put in their promo code and a selected recommendations are shown to entice users to buy more, a marketing strategy from the brand. Overall: We have used grids of 8-12 columns in order for better guidance and in order to achieve this layout. Our layers have been more spaced out and are more minimalized compared to the original which makes the layout look more organized and simplified for users to be able to enjoy and easily navigate through the Kiosk. It allows users to focus and have a clear sense of direction for the user flow to process. Graphics have been created with visual weight that makes them look interactive along with appropriate sizing for easy optimization and design consistency. Additional High Fidelity Frames A la Carte
Hot Deals
For one
Empty Cart Usability Testing Feedbacks For our usability testing we did a qualitative testing/informative testing Interviewee 1 Interviewee 2
- Finds the interface to be a lot more - The order/cart page has too much intuitive and easy to use compared spacing to the original interface. - The menu is nicely consistent - Categories are labeled well and easily viewable Observations - User easily go through the entire Observations process and looks at the different - User easily navigates through the categories different categories easily - Was quick to proceed to the end - Didn’t look like she was facing Insights much troubles while tapping on - User has poor eyesight the different icons and did not - User does not care about the price mis-click on anything Insights - User doesn’t get frustrated while navigating through Actions Actions - User would only tap once to - Taps on the icons once without having to keep tapping a lot of proceed through times Interviewee 4 interviewee 3
- like the implementation of the - Buttons could be slightly bigger circle and a tick to indicate to users that those items have been - Image for the starting page is selected huge - Sharp rectangles might or might - Easy navigation and interaction not work as these days, buttons are rounded off to give off a more friendly vibe Observations Observations - User do not have face any issues - User has the tendency to double when navigating through different click category - User is fast with her hands -Would instantly proceed through after selection of his desire choice - User only looks at the order image for confirmation Insights Insights - User is very particular with food - User does not look at the price but selection and does not care of the food selections only price Actions Actions - user tap twice by accident but he - User double clicks by accident as a form of habit but would look at the proceed through very fast icon for a second before doing so Interviewee 5
- enjoys the bigger variety of customisation - the menu makes the food look more appetizing Observation - user very easily figured out what he wanted and could navigate around the site easily. Insight -user was intrigued by the promotions Action - user clicked on the items and was able to make his order efficiently.
Final & MockUp Main Menu/menu Alterations after feedback Welcome/Starting Screen For our welcome/starting screen we have Our buttons for the entire Main shrunk the size of the promotional Menu/menu has been slightly enlarged banner/ads to be shown, as based on our for a better and easy usability for users feedback it can tend to look that will efficiently help them to target overwhelming. We have created a red their goals on ordering a meal. border at the top which goes along with the color theme allowing the welcome signage to be more exposed. Menu Sub Category Screen Order page/ Customisation Screen
Our buttons for the entire Main Our buttons for the entire Main Menu/menu has been slightly enlarged Menu/menu has been slightly enlarged for a better and easy usability for users for a better and easy usability for users that will efficiently help them to target that will efficiently help them to target their goals on ordering a meal. their goals on ordering a meal. Main Menu/Menu Cart/Checkout Screen (After adding into cart)
Our buttons for the entire Main Previously we had a huge white space at Menu/menu has been slightly enlarged the top and was given feedback that it for a better and easy usability for users was lacking and empty. We decided to that will efficiently help them to target bring forth once again the advertisement their goals on ordering a meal. banner that may potentially attract customers to add more to the cart allowing KFC to gain more profits yet at the same time we have managed to target and make use of the white space to showcase the mandatory information needed for a checkout page. Our button for the entire Main Menu/menu has been slightly enlarged for a better and easy usability for users that will efficiently help them to target their goals on ordering a meal.
Conclusion & Reflections Things we have learned through this CA - Through this report we have learned many new things and skills that are very important in terms of UI/UX and also in terms of how to write a report. Firstly is having to do research, lots and lots of research as there are many different things that is needed to be known be known before actually tackling design critique of the whole kiosk, for example we had to first learn about the background of KFC and why they started implementing the use of kiosk machines. Through researching these things we are able to find out the main reasons behind why kiosk machines are so important now. - We’ve also learned about the importance of user research and in this case study specifically contextual inquiry which is a qualitative research method. In contextual inquiry we are able to observe users performing a certain task while having them describe what they are doing. This is a good way of user research as it allows us to learn more about how the users feel and behave when performing a certain task in front of the kiosk machine. It’s a good way of gathering insights and information because we get to observe them in the environment and also see their behavior patterns with our own eyes. - We also learned to gather our insights from the observations and interviews into different categories to help us identify the problems that are in need of the most adjustments. Being able to categorise the different insights was also something important that we learned as being able to see more accurately what each category is helps us to visualise what is the most important and what isn’t. - Through this CA we also learned about how to write a case study written report. It is really important that the report is structured and not messy. It needs to be structured because if the report is jumbled up everywhere the reader will have a lot of trouble understanding. - Another thing that we have learned while doing this CA is about how to make a proper UI/UX design critique of the KFC kiosk machine. There is a structure on how it should be done and also it is important that we highlight important UI/UX principles when critiquing a design flaw in the kiosk machine. The critique part is also one of the most important parts but without the user research we wouldn’t be able to even have any critiques therefore the user research is probably the most important part of the whole case study. - Through this CA we have also learned how to make a wireframe and what it is for. Wireframes are basically the layout before all the graphics are put in to create the actual prototype. It’s basically the process before the prototype
- We also learned how to implement our critiques into the prototypes and implement basic figma skills to make a high fidelity prototype so that user testers can visualize and also test our how the new adjustments and changes towards the kiosk interface can look like and feel like. - We have also learned how to user test and why it’s so important after making a prototype. We cannot just always assume that the prototype is going to solve all the issues and be okay because other people may actually have other opinions about it. After user testing we will be able to gain feedback and learn about more that can be changed and adjusted to make a better prototype again. Biggest takeaway - We feel that the biggest takeaways from this CA is realising that behind the works of digital products alot goes behind the scenes from having to do a lot of user research and being able to identify many important design details that requires the use and knowledge of UI/UX theories and principles. Being able to understand all this different theories and principles would help to make for a very intuitive and useful user interface for users. - Additionally we feel that a very important takeaway from this CA that can also be implemented in future works is the use of user research. With a very well done user research near the beginning of a project it would be able to help in giving important information and insights towards us as we proceed further into the project. If the user research is very shallow with little information designers like us would struggle to know what needs to be changed and what causes frustrations to users. That is why without user research a good prototype will not be able to be produced. What could be improved if we had more time - If we had more time we could have probably fully animated the prototype more to make it a better high fidelity prototype to show user testers. This would enhance the experience of testing the prototype as it would feel much more real for our user testers. - We could have also probably tested out different user test methods if we had more time such as the first click test and 5-second test to also get more insights from people about our prototypes. - The user research part could definitely still be more improved, especially at the part where we had to sort the insights into different categories and sub-categories. Due to this part we weren’t very explicitly clear at first about the critiques because not everyone thought about what critiques we should highlight on.
Appendix: Overview Interviewee 1 Name: John Age: 18 Occupation: A full time student and a part-time chinese dessert shop worker Demographic/Details: About 165cm tall, 1 sister and 1 brother, Gymbro, prefers other Chicken fast-food chains like popeyes, jollibee and texas over KFC. Interviewee 2 Name: Ruth Age: 19 Occupation: Full time student studying in Singapore Polytechnic Demographic/Details: About 160-161 cm tall, wears spectacles, loves KFC Interviewee 3 Name: Xingyi Age: 22 Occupation: Full-time Diploma Student studying in Singapore Poly Demographic/Details: Wears spectacles, the only child, dislikes chicken breast Interviewee 4 Name: Phyllis Chiun Age: 22 Occupation: Full-time Diploma Student studying in Singapore Poly Demographic/Details: Has long blond (bleached) hair, rarely eats KFC, hates cheese to her very core Interviewee 5 Name: Judah Age: 19
Occupation: NS men Demographic/Details: rarely eats KFC, loves food, bald Interviewee 6 Name: Benson Age: 19 Occupation: Full Time Student Study in SP Demographic/Details: Has one younger brother, Wears Spectacles, dislikes coffee Observation John Ruth Xing Yi Phyllis Judah Benson Queuing Didn’t really There was a Looked Goes to the There wasn’t The queue need to queue at the between at queue for the any queue at was average queue kiosk the counter kiosk not the kiosk but (Not long and machine but and Kiosk really paying there was a not short) the wait time and Found mind to the short queue wasn’t long that the length at the queue at the counter and kiosk wasn’t collection long so she point went to order from there Ordering Faced some Accidentally Went Was not sure Had to tap The scrolling frustrations misclicks through the on what to multiple process of when items while ordering order and times on the the menu scrolling scrolling process quite went through ‘dine-in or feels a bit through the through smoothly. But the various take-out’ laggy. menu screen. menu. At first had to go categories on screen before Couldn’t when through a lot the Kiosk it loaded. wanting to of pop-up Machine. remove item screens. from the checkout screen keeps pressing the wrong button before realizing the right button
to remove. Payment Payment Payment was Checkout Scrolled Looked Take awhile process was smooth. process was through all through a to load the smooth and Knew that smooth as the payment long list of the desired easy the most she knew types to look payment selected frequent what type of at them but methods payment payment payment to knows what before method. The method is choose. Did payment to finding the payment had placed at the not want to choose from VISA error due to top. have an and picked payment the machine e-receipt as contactless method. running out required payment. Other than of receipt email so Overall was that the paper which decided to smooth payment need to use just payment, process was another remember after that did smooth. kiosk. the queue not want an number on e-receipt and screen decided to remember queue number by staring and rememberin g the number Collection Relatively Just had to Just waited Waited for People The smooth just wait for the for queue the queue ordering at collection had to wait order and number to number to the counter process was for order take. Didn’t appear on appear on did not block smooth he number. But really have screen and screen but the collection collect it also had to any troubles. then collect did not area and the without an ask for a food. pop-up when TV above issue. different the food was displayed all piece of ready. the queue chicken as he numbers didn’t want making it that specific easy to know part. when order is ready. Findings User was User seemed User knew User tends to User take
actually quite to be quite what she move slowly quite of time fast in frustrated wanted to while using when interacting with the order hence the Kiosk and selecting his with the kiosk she was able looks around desired kiosk machine to directly to see what choice of machine even though place an to interact food in the even though she loves KFC order with to kiosk as he is there were progress very many errors particular like with it misclicking User would Observation of Interviewee hesitate whether to Managed to User easily User would User include find takes frustrated as take a sec to hesitates on addon for his awhile to look she keeps locate icons her food selection of around the faceing in order to choice and food interface but problems proceed has the still manages and struggles tendency to to find the double check icons quickly her orders Interview John Ruth Xing Yi Phyllis Judah Benson Queuing Prefers the Interviewee Prefers using Prefers using prefers the Prefers the kiosk goes straight the Kiosk the Kiosk kiosk as it is counter as because he to queue at Machine Machine as easier and some of the doesn’t have the kiosk she doesn’t less contact food that he to interact instead of the need to have wanted to with anyone. counter any order was not interaction in the kiosk and choose her order without having any pressure from the cashier Ordering - Could add a - Interviewee - Kiosk has a - Does think -kiosk is could make that the easier as it is the scrolling search couldn’t find limited
button to the food she selection of cashier easier to read. and the make it originally food and provides a -On the other button less simpler to wanted and missing better hand, if i sensitive find specific decided to menu customer order over when items. When find another selections. experience as the counter, i selecting for selecting food item. there could can do a food that he food items - Layout is be issues special order. want to order there isn’t - Fonts and okay with should only -they should any area graphics easy can be also allow the where he can were okay, navigation handled customers to put specific they did get through the directly choose instructions. the job done main different and show category. - The layout is languages, - Finds that what the quite specific which would when specific food - Has clear which she be more ordering the item was. and big can inclusive. customisatio graphics and understand The fonts are ns are a little text to see and generally big and easy limited knows what to read, the because - Does not she wants to screen is when update the order already sensitive to ordering the Kiosk so she can touch and chicken he Machine directly go to buttons are wasn’t able to accordingly the certain easy to find pick what to stock category and press. part of the availability -They can chicken that - Thinks that improve by he wanted. - The KFC needs to adding in He preferred promotional show the custom the breast banner is not ingredients of orders, and but there attractive the meal allowing wasn’t any more options to - Color theme customizatio give is not n to my instructions attractive orders. (like macdonalds) Payment Said Checkout - Unclear and Payment -When could add a checkout payment was failed loads quite customers notification to process was quite smooth instructions slow - the order alert the user the without for the after verification wrongly, it that the kiosk smoothest much payment part can get quite is out of across all the hiccups but process complicated receipt and is kiosks in doesn’t really (Receipt) - Does to refund not usable at other like the fact Paywave as them. Also if the moment restaurants that if the - the screen its fast free customers as they label user wants with the and easy want to each an e-receipt queue change their
payment they would number order, it can method have to type disappears get quite specifically. their email fast complicated down on the to help them screen which - Depending do so. may not be on the outlet -The very sensitive some checkout as other payment process is a people who process is little are queuing slow and will complicated or at the have errors as there are kiosk occur but many options machines mostly a for payment beside them smooth and can get would be process for confusing to able to see her look for my the email. payment Sometimes method people just -i can tell the don’t want to order is being reveal their processed email in after public. payment as Additionally my number the space to appears on type their the screen by email is quite the counter big so it -Additionally, makes it very they should visible to have a people machine that around. allows cash payment. Collection Had to ask for No issues Not Has no issues No issues Has no issues a different consistent in with it with it chicken part alerting as he couldn’t queue choose the number, chicken part sometimes that he staff will just wanted shout the through the number kiosk machine Findings
- Thinks that - Don’t - Place Kiosk - The -Mcdondals -Could add the display food Machines at placement of offers more more customisatio items on the the side, as the Kiosk customisatio food/meal ns are quite food display far as machine n for burgers options on lacking. He screen if it possible from (next to the and meals, the kiosk doesn’t get isn’t even the counter counter) popeyes and machine much being sold, it because the allows her to jollibee freedom to is very queue directly ask a serves better -Should choose the misleading creates a staff for chicken. change the ingredients and can lead crowd enquiry Additionally bin icon to or chicken to a around the Jollibee has a cart icon for parts for his frustrating counter - Thinks that bigger variety checkout to food meal. ordering there could of food, such avoid experience if - Not a picky be more as spaghetti, confusion. - Would the user can’t eater hence verification rice, burger, much rather find the item doesn’t really notification chicken -he thinks other fast that they need to by adding in -The kiosk that kiosk food fried want. customize sound effects machines are machine is chicken meals not very very places such - User likes - User elderly convenient as Jollibee, KFC a lot but understands friendly as these days Popeyes and everytime that in order they struggle even though texas chicken. she goes to use the with he encounters Doesn’t really back to the kiosk she technology issues every like KFC and KFC kiosk she must “touch and it may be time he additionally still has screen to harder for orders the the kiosk minor begin” them to food. machine struggles adapt to the lacking when using - Thinks the machines customisatio the machine. pay to option ns makes should just him prefer be rid of other places even more. B. Preferences -An easy to - aesthetically - Easy Clear - smooth preferred fast use interface pleasing Navigation graphics and - simple and smooth visuals typography in - clear in kiosk - Fast and - Hassle-free Kiosk images performance simple user - Easy to machines experience. understand - Easy to Simple and Doesn’t want interface as understand - Likes user friendly to go she can get fuss-free and through so easily convenient many frustrated things as it processes saves time B. Motivations
Eating wrap Genuinely Thinks KFC Likes to eat preferred to and cheese likes KFC has the best with friends eat with fries chicken friends B. Pain Points will only eat depend on Doesn’t like Kiosk Doesn’t like Does not eat the choice of to eat fast machine isn’t inconvenienc KFC unless food that is food recently to the users e especially invited available liking having to queue once Calm and again due to patient errors easy to communicate Observation of Interviewee Answered Easily Is direct with Mildly Patient calmly and frustrated her answers & easy-going thoughtfully. with person but Thought clearness would take about each time to answer answer carefully Data Research Microsoft Forms Summary: https://forms.office.com/Pages/AnalysisPage.aspx?AnalyzerToken=E8XmZs4XV6jjikXIL7T evACl47k92HxU&id=Av8Edtir20WMrFUAVDI_yYen7NhrqUBJh2qB5ZvWhrNUMTBZMjIxT lBVVjdOUkxVRjlMQVpHSlkxUS4u References COMPARABLY. (n.d.). KFC Competitors. Comparably. https://www.comparably.com/companies/kfc/competitors Daly, J., Hudson, W., & Osman, M. (2019, March 19). Empathy in UX Design: What It Is and Why It's Important. UX Planet. https://uxplanet.org/empathy-in-ux-design-what-it-is-and-why-its-important-3f6 a8919ef10 Green, E. (2021, September 22). PepsiCo unveils touchless menu gesture technology targeting convenience in fast food outlets. Food Ingredients First.
Search