Elevating the Restaurant Experience with Cafe Ivy Food Menu App: A UX Success Story
At-a-Glance
I got the chance to design a mobile app for Cafe Ivy, a cafe located on the outskirts of Colombo, Sri Lanka, as part of course 5 in the Google UX Design Certificate. This was carried out over a period of 1 month in October 2022. I worked to design a new mobile experience to tailor the user experience for cafe customers and food enthusiasts through three rounds of wireframing, prototyping and testing. In 1 month, I was able to deliver a complete mobile app design and a detailed style guide through collaboration with end-users and stakeholders.
Timeline
1 month
My Role
UX Designer
5 end users 2 stakeholders
Collaboration
Platform
Figma
Sneak peek of Cafe Ivy’s mobile designs
📄
Client’s Need
After interviewing a few stakeholders, the following business needs were identified:
Need to address customer dissatisfaction regarding food ordering
Need to improve cross-selling of menu items
Need to gain valuable data on customer preferences, popular items, and peak ordering times
🤔
Problems
No images - customers cannot see any images of the food as the menu consists only of text, making it harder for them to come to a decision
Too cluttered - the current menu is too cluttered with little spacing between sections
Limited customizing options - customers aren’t able to see portion sizes or other add-ons in the current menu
No additional information - customers cannot view any additional information such as nutritional information about the food
After interviewing users and also analyzing the data, I identified 5 problems with the current food menu and corresponding pain points for the customers.
Problem statement
Sarah is an avid foodie who needs an easy app experience to explore the different dishes at her local cafe because she finds text-based food menus difficult to read.
😎
Opportunity
How can we create a mobile experience for Cafe Ivy that is useful, enjoyable and relevant?
💡
Solution
I designed a mobile app experience for Cafe Ivy customers with clear visuals, user flows and easy navigation. The new app experience also included high-quality images of food and drinks, food customizing options, nutritional information and easy app layout.
🚀
Process
👨🏼
User Research Summary
Contexual Inquiry
I visited Cafe Ivy in Wattala, Colombo during both peak and off-peak times to see how they operate, spent time observing how customers make orders, and analyzed their current paper-based menu. I was able to understand the communication flows, sequence of tasks, the general wait times for orders and the general environment.
User Interviews and surveys
Interviews with Cafe Ivy customers and stakeholders yielded valuable information about the current perception of the food and drinks menu, how easy it is to use, the general wait-times for food ordering and other pain points.
👩🏼💼
Persona
To understand the users, I held interviews with 8 customers and 2 stakeholders to clarify the user problem. The organization did not have any previous research, so I had to make full use of the interviews and the contextual inquiry. I incorporated the insights into the proto and qualitative personas; Reena and Alfie.
🧭
Reena’s User Journey
The user journey for Reena in her current environment and paper-based menu was created.
✍🏼
The ideation process began with sketches, then moves to low-fidelity wireframes, and finally to the high-fidelity prototype.
Paper First
🧑🏼💻
From Paper to Digital
I then created interactive digital low-fidelity wireframes and shared with key stakeholders to collect feedback.
✨
Designs - first version
I started designing the screens for the food menu page and drinks menu page. After a few rounds of sketching, there were a few options I wanted to visually try out.
This was one of the first options I designed for the food and drinks menu home page. But soon realized there are certain issues here.
The dropdown to go to the drinks menu from the food menu and vice versa was too cumbersome for users, leading to increased cognitive load.
The color contrast did not meet accessibility requirements of WCAG 4.5:1 color contrast ratio.
The buttons did not utilize the full width of space, thereby wasting space.
After taking the above issues into consideration, I worked on a few other iterations. I shared those iterations with stakeholders and cafe customers to get their feedback. Then we agreed on a final go-live version. The main changes that were done were to function of switching between the food and drinks menu and the color contrast issue.
This is the first version for Cafe Ivy.
⬆️ First version of Cafe Ivy food menu app
⚠️
The first version did not go as planned: Results and learnings
After I finished building the above design, I held a few rounds of usability testing. As a result of these tests, I figured out that this app has a few concerns.
Unable to customize your order - Early on in user interviews and user research yielded that users prefer to customize their order, but this was not implemented in this first version, which is non-compliant with rule no:7 of Jakob Nielsen’s usability heuristics: flexibility and efficiency of use.
Cannot see if an item has been added to the list from the home page - Once a user adds an item to the list, there are no visual cues to let the user know that a certain food or drink item is already added to the list, which is non-compliant with rule no:1 of Jakob Nielsen’s usability heuristics: visibility of system status.
Unable to edit the quantity from the order list page - there is currently no option to change the quantity of an item from the list page, and users faced difficulty navigating back to the item page to edit the quantity. This was non-compliant with rule no:3 of Jakob Nielsen’s usability heuristics: user control and freedom.
No order number is generated - after sending an order to the kitchen, there is no order number generated, which could be helpful to inquire about the order later.
🎉
Second version was a success: Learnings
After figuring out the above issues on the first version, my challenge was to rectify those.
After brainstorming with stakeholders, I came up with the following solutions.
Customizing orders - I decided to add the ability to customize food orders by including portion size and level of spiciness. I added the ability to change the size for drink items.
Visual cues - I added subtle visual cues on the home pages of both food and drink pages to let the user know of items that have already been added to the list.
Updating quantity - the ability to update the quantity of food and drinks items from the order list page was added.
Order number - added the functionality to generate an order number on the order page
⬆️ Snippets from the second version
After building the above solution, I conducted further usability testing with volunteers and stakeholders.
Customizing food - I observed that users appreciated the ability to customize their order, especially defining the portion size and spiciness. In addition, the food ordering process from the orders page was also more effortless and smoother.
Improved visual cues - Including an icon for food and drink items that has already been added to the list allowed users to easily identify items they added to the list.
Faster food ordering - Including a slide-up pop screen on the home page when users press the add to list button allowed them to add items to the list faster without visiting the food or drink item pages.
📱
High-Fidelity Prototype
🍔
So what happened next? What did I learn?
Due to current overheads, the cafe was not able to go ahead with implementing my designs, but they were positive that it could be re-visited in the near future. The mobile app designs were shared with the cafe and received a positive response.
Throughout my time working with Cafe Ivy, I’ve learnt the importance of good communication with stakeholders, as they have the final say in what requirements they wanted implemented. Understanding the cafe's business model, goals, and customer base was also crucial. I learnt how to align user experience goals with the cafe's objectives, ensuring that the designs contribute to the business's success.
Managing tasks, timelines, and resources effectively allowed me to prioritize tasks, meet deadlines, and adapt to changing requirements, enhancing my project management skills.
Steps to improve the app further:
Include food tracking capability, ie: accurate idea of time for the food to arrive
Including the ability to process payments
Introducing social logins and ability to favorite dishes for future reference
Including the ability for people to put reviews
