Meal Delivery Mobile App Design Café CCBC Case Study Sudheendra Chadaga – ICPM2022C Project overview CCBC CCBC The product: Café CCBC is a regional vegetarian restaurant located in Mysore. It serves not only Coffee and Chow-chow bath but also other special South Indian foods and side dishes because of the location. It offers high quality foods for affordable prices. Café CCBC targets customers like commuters and workers who cannot cook or find time to cook in pace face busy life. Snacks Drinks Deserts Parcel About Call us AARAMBHA Idli Vade Rs. 80 Per plate Project duration: Golibaje Ten Days Rs. 60 Per plate Plain Dose Project overview The problem: The goal: It may take a long time to order at the To give the busy workers and commuters a restaurant if you are in a hurry. mobile app where they can order with various methods in order to be faster. Project overview My role: Responsibilities: UX Researcher, UX Designer, UI Designer, Conducting interviews, paper and digital Interaction Designer wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs. Understanding the user ● User research ● Personas ● Problem statements ● User journey maps User Research: summary I conducted online interviews with users and created user empathy maps to understand their needs better. A primary user group defined through research was working adults who do not have time to cook meals. This user group confirmed initial assumptions about users want to choose meal delivery app in restaurants to be faster, but research also revealed that the factors such as hygiene, usefulness and enjoyable of the product can be important for other users prefer to use meal delivery app. User Research: pain points 1 2 3 4 Time Accessibility Content Management Hygiene Working adults don’t want to allocate time for food ordering process wherever they are -Some hard copy menus and food apps might not have images of the menu items and language option. -Images of menu items are not clear enough, texting is hard to read. Some menus don’t contain images, prices, reviews, and detailed ingredients of every menu items. In the pandemic period, users prefer to order and pay by using own mobile without touching hard copy menus and money. “I’m passionate about developing myself in tech field, I believe one day I will be at the peak of my career.” Goals ● ● ● Rachita Ram Wants to keep up with new technological developments to be up to date. Wants to have more efficient order experience in a restaurant. Tries to balance between work and social life by minimizing the time needed for her basic needs. Frustrations ● ● ● “Cooking is a time consuming activity for me.” “I can’t understand that the restaurants use still heavy hard copy food menus in the age of technology.” “I wish to order without queuing and pay my order via my mobile without getting up from my table in the restaurant.” Rachita Ram works as a mid software developer in a big company based on 28 Bengaluru. She usually spends her spare time at home by working extra by willingly. Bengaluru She likes to meet friends and watch sci-fi series together sometimes. Because she Hometown India doesn’t want to allocate time for food preparation at home and there is quite Occupation Software Developer distance between her work and home, she prefers to have her dinner at a restaurant Age kLocation Relationship Single, lives alone after work, but frustrates about time consuming meal order process in there. “Cooking makes me feel relaxed. I’m also a big fan of restaurants that have beautiful view and different cuisines.” Goals ● ● To learn to cook new recipes at home To discover elegant restaurants which have beautiful view and cuisines in different countries. Frustrations ● ● ● ● Yash Kumar Age Location kk 38 Bengaluru Hometown Mandya Occupation Actor Relationship Lives with wife “I’m allergic some ingredients, so I read menus carefully when I order.” “It is difficult to understand the menu if there is no english subtitle on it when I’m abroad.” “If I will order a food that I haven't tasted before, I wish I want to see the other customer reviews about it in the menu.” “Due to pandemic, I don’t prefer to touch hard copy menus.” Yash works as an actor in Kannada movie industry. He usually spends his spare time by travelling with his partner. He likes to taste world cuisines and try to cook them at home. He wishes to see a well designed digital food menu in every restaurants to decide better which food to order. Persona: Rachita Ram Problem statement Rachita ram is a busy software developer who needs mobile meal app with ordering options because placing an order can take too long and she loses her time.. Persona: Yash Kumar Problem statement Yash is an actor liking travel who needs to order from a menu that enables readable and detailed content, well-organized and to allow for quick revisions options because He has to ask many questions to a waiter before deciding which food to eat User Journey Map of Rachita Ram Goal: Speeding up the ordering process User Journey Map of Rachita Mapping Rachita’s user journey revealed how helpful it would be for users to have an access to Café CCBC app with different order options. Starting the design ● Paper wireframes ● Digital wireframes ● Low-fidelity prototype ● Usability studies Paper wireframes Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. Paper wireframes For the home screen, I prioritized a quick and easy ordering process to help users save time. Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes. All star elements were used in the last version. Digital wireframes CCBC As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research. This button at the top of the home screen makes it fast and easy for users to place an order. This button provides an easy option for users who want to see what there are in the menu first Digital wireframes Order options providers users to place their orders wherever they are easily CCBC Different order types serves users to choose whatever they want according Arrow buttons enable users to Ontikoppal, Mysore change their to their situation location, pick up time or other information needed to order without going Rs. back Digital wireframes Estimated delivery time gives an idea to user how much time he/she will be waiting, so the user can pick the meal according to his/her condition. The order tracking page allows users to find out the estimated delivery or cooking time if you eat at the restaurant or want it delivered. Low-fidelity prototype Usability study: findings I conducted two rounds of moderated usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining. Round 1 findings Round 2 findings 1 Users want order options 1 User flow is not efficient 2 Users want to order food quickly 2 The checkout process has too many unnecessary steps 3 Users want to see detailed menu 3 Reorder process should be reconsidered in terms of items in the basket Refining the design ● Mockups ● High-fidelity prototype ● Accessibility Before usability study After usability study Mockups Early designs allowed users to CCBC CCBC change the menu from the top Snacks Drinks Deserts Parcel About Call us button, but after the usability studies, I AARAMBHA added horizontal scroll menu and search bar so users see all the menu categories when they first Chow-Chow Bath Rs. 70 Per plate Idli Vade Rs. 80 Per plate land on the screen. Idli Vade Rs. 80 Per plate Golibaje Rs. 60 Per plate Golibaje Rs. 60 Per plate Plain Dose Rs. 60 Per plate Plain Dose Before usability study Mockups Early designs did not allow users to learn when they placed an order, and it was not noticeable at what stage the order process was due to the user interface. After the usability studies, I added order time, order type, payment info, ETA and colorful icons for the process tracking on the tracking page. After usability study High-fidelity prototype The final high-fidelity prototype presented cleaner user flows for ordering and checkout. It also meets user needs for a pickup, delivery, join a waitlist and meet outside option and it is refined reorder checkout basket process. Screenshot of prototype with connections or prototype GIF Thank you!
