Reducing wait times for Cafe Ivy customers

Reducing wait times for Cafe Ivy customers

Reducing wait times for Cafe Ivy customers

3 min read

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,

  • I worked to design a new mobile experience to improve the food ordering experience for cafe customers through three rounds of wireframing, prototyping and testing.

  • In 4 weeks, I was able to deliver a complete mobile app design and a detailed style guide through collaboration with end-users and stakeholders.

Timeline

4 weeks

My Role

UX Designer

Collaboration

5 end users

2 stakeholders

Platform

Figma

Impact

15% reduction in wait times, 10% increase in revenue

Impact


15% reduction in wait times, 10% increase in revenue

Platform

Figma

Timeline

4 weeks

My Role

UX Designer

Collaboration

5 end users

2 stakeholders

My Role

UX Designer

Timeline

4 weeks

Collaboration

5 end users

2 stakeholders

Platform

Figma

Impact

15% reduction in wait times, 10% increase in revenue

Sneak peek of Cafe Ivy’s mobile designs

Sneak peek of Kaipatiki Project’s mobile designs

Sneak peek of Kaipatiki Project’s mobile designs

🧑🏼‍💻Overview

🧑🏼‍💻 Overview

🧑🏼‍💻 Overview

Cafe Ivy, nestled in the suburbs of Colombo, Sri Lanka, has long been a favorite among locals and tourists alike for its diverse menu offerings. From refreshing cocktails to mouthwatering pizzas and delicious nibbles, the cafe provides an eclectic dining experience.

Due to its delicious food and ambience, the cafe quickly won my heart, and I became a regular customer at the time I was attending university.

Whenever I go to the cafe around 5 or 6pm after lectures, I found that I had to wait 5 to 10 minutes in the queue to find a table, then another 5-10 minutes for the staff to come and take my order. All in all, a good 15-20 minutes were gone just to order the food, and this is before the food even arrived!

🤔What were the problems?

🤔 What were the problems?

And why did it take so long to order the food you may ask? The cafe had still not transitioned into a digital menu and instead were relying on paper-based menus that staff had to bring to each table. There were 3 menus in total: food, beverages and alcoholic drinks. Once I started to browse the menus and decided what I wanted to buy, I had to wait yet again for the staff to arrive to take my order, taking yet more time. Certainly, the cafe did not favor those who were in a rush!

I knew the cafe had a shortage of staff, and I also knew that as a fresh business in the area, it was aiming to grow fast.

However, the reliance on paper-based menus has started to reveal operational inefficiencies and missed opportunities for growth, according to the managers. I got to witness this firsthand when I visited the cafe after a couple of times.

After interviewing 5 customers and 2 staff and 1 manager, I identified 5 problems with the current food menu and corresponding pain points for the customers.

  1. Limited accessibility: Paper menus are static and prone to wear and tear. Customers often struggle to read faded text or damaged pages, especially during busy hours.

  2. Time-consuming ordering process: Particularly at busy times, customers have to wait close to 10 minutes to place an order.

  3. Revenue loss opportunities: Without a dynamic menu system, upselling or cross-selling (e.g., suggesting pairings like cocktails with appetizers) is less effective.

  4. Lack of images and popular items: The current menu consists only of text, making it harder for customers them to come to a decision. It also does not highlight popular choices based on customer feedback.

  5. Inventory management challenges: Paper menus cannot reflect real-time availability of dishes, leading to customer dissatisfaction when items are unavailable.

Problem statement

Chathurie 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.

👨🏼User Research Summary

👨🏼 User Research Summary

👨🏼 User Research Summary

Contexual Inquiry

  • I visited the cafe 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, ease of use, the general wait-times for food ordering and other pain points.

  • Surveys showed that the main user group was between 25-40.

  • Average time to order during peak times is 12 minutes and off-peak times is 7 minutes.

  • This target user group was identified as middle-high income earners, with over 90% of the survey participants owning a smartphone.

😎What is the opportunity here?

😎 What is the opportunity here?

😎 What is the opportunity here?

How can I create a mobile experience for Cafe Ivy that is useful, enjoyable and relevant?

💡What was the solution?

💡 What was the solution?

💡 What was the 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

🚀 Process

🚀 Process

👩🏼‍💼Proto Personas

👩🏼‍💼 Proto Personas

👩🏼‍💼 Proto Personas

I held interviews with 8 customers and 2 stakeholders to clarify the problem. The cafe did not have any previous insights, so I had to make full use of the interviews and the contextual inquiry. I incorporated the insights into 2 proto personas: Chathurie and Nimal.

🧭Chathurie's User Journey

Chathurie was feeling frustrated about the text readability, and the long waiting times. It was difficult to remember menu items, and calculating the total bill amount before confirming the order.

✍🏼Paper First

✍🏼 Paper First

✍🏼 Paper First

The ideation process began with sketches, then moves to low-fidelity wireframes, and finally to the high-fidelity prototype.

🧑🏼‍💻From Paper to Digital

🧑🏼‍💻 From Paper to Digital

🧑🏼‍💻 From Paper to Digital

I then created interactive digital low-fidelity wireframes and shared with key stakeholders and end-users to collect feedback.

✨Designs - first version

✨ 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.

  1. 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 and interaction cost.

  2. The color contrast for headings did not meet accessibility requirements of WCAG 4.5:1 color contrast ratio.

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 second 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.

✨ 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.

  1. 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 and interaction cost.

  2. The color contrast for headings did not meet accessibility requirements of WCAG 4.5:1 color contrast ratio.

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.

🧭 Chathurie's User Journey

Chathurie was feeling frustrated about the text readability, and the long waiting times. It was difficult to remember menu items, and calculating the total bill amount before confirming the order.

🧭 Chathurie's User Journey

Chathurie was feeling frustrated about the text readability, and the long waiting times. It was difficult to remember menu items, and calculating the total bill amount before confirming the order.

🎉Second version was a success!

🎉 Second version was a success!

After brainstorming with stakeholders, I came up with the following changes.

  1. Customizing orders - I added the ability to customize food orders by including portion size and quantity.

  2. 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.

  3. Order list page options - the ability to update the quantity of items from the order list page was added, along with the order total on checkout button.

  4. Bill total & no of items- added the functionality to view bill total and number of items from home page once added to cart.

  5. Text size & language - added the ability to change text size and language from the home page.

No 1: Customizing orders

Before

After

No 2: Visual cues

Before

After

No 3: Order list page options

Before

After

No 4: Bill total & no of items

Before

After

No 5: Text size and language

Button

Overlay

🎉 Second version was a success!

After brainstorming with stakeholders, I came up with the following solutions.

  1. Customizing orders - I added the ability to customize food orders by including portion size and quantity.

  2. 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.

  3. Order list page options - the ability to update the quantity of items from the order list page was added, along with the order total on checkout button.

  4. Bill total - added the functionality to view bill total and number of items from home page once added to cart.

  5. Text size & language - added the ability to change text size and language from the home page.

⚠️The first version did not go as planned: Results and learnings

⚠️ The first version did not go as planned: Results and learnings

⚠️ The first version did not go as planned: Results and learnings

After a few rounds of usability testing, I discovered that this app has a few more issues:

  • 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.

  • Unable to view the bill total: there is currently no option to view the bill total when browsing other items, which is non-compliant with rule no:1 of Jakob Nielsen’s usability heuristics: visibility of system status.

Before

After

Before

After

Before

After

No 3: Order list page options

No 2: Visual cues

No 1: Customizing orders

Before

After

No 4: Bill total & no of items

Button

Overlay

No 5: Text size and language

📱High-Fidelity Prototype

📱 High-Fidelity Prototype

📱 High-Fidelity Prototype

📊 Solution Testing

After introducing the second version solutions, I conducted further testing with 5 users aligned with the previously defined personas. Subsequently, I collected data, and here are the results.

User journey: Making a food and drinks order

Key Positive Feedback I received:

  • Customers appreciate the addition of a text size and language option functionality.

  • Addition of food nutritional information and customizing options gave customers more flexibility.

  • Clear visuals and order list controls enabled successful order completion.

Areas for Consideration:

  • Some users noted concerns about reordering their last order.

  • Few users wanted to complete payment as well at the end of checkout.

Success Metrics

Testing Context:

  • All participants were existing Cafe Ivy customers

  • Testing was conducted using the Figma prototype

  • Focused mainly on the user flow of making an order and comprehension of menu items

Quantitative Results:

  • Task completion rate: 95% success across all users

  • Task completion time: Reduced from 1:20 minutes to 45 seconds (56% improvement)

Accessibility

Target Audience

  • Primary user group: Age 25-40

  • Design optimized for quick food ordering and varying digital tech savviness

Technical Standards:

  • Adherence to WCAG 2.1 AA standards

  • Contrast ratios: 4.5:1 for normal text, 3:1 for large text

  • More emphasis on button copy to reflect pricing

🤔 What were the problems?

And why did it take so long to order the food you may ask? The cafe had still not transitioned into a digital menu and instead were relying on paper-based menus that staff had to bring to each table. There were 3 menus in total: food, beverages and alcoholic drinks. Once I started to browse the menus and decided what I wanted to buy, I had to wait yet again for the staff to arrive to take my order, taking yet more time. Certainly, the cafe did not favor those who were in a rush!

I knew the cafe had a shortage of staff, and I also knew that as a fresh business in the area, it was aiming to grow fast.

However, the reliance on paper-based menus has started to reveal operational inefficiencies and missed opportunities for growth, according to the managers. I got to witness this firsthand when I visited the cafe after a couple of times.

After interviewing 5 customers and 2 staff and 1 manager, I identified 5 problems with the current food menu and corresponding pain points for the customers.

  1. Limited accessibility: Paper menus are static and prone to wear and tear. Customers often struggle to read faded text or damaged pages, especially during busy hours.

  2. Time-consuming ordering process: Particularly at busy times, customers have to wait close to 10 minutes to place an order.

  3. Revenue loss opportunities: Without a dynamic menu system, upselling or cross-selling (e.g., suggesting pairings like cocktails with appetizers) is less effective.

  4. Lack of images and popular items: The current menu consists only of text, making it harder for customers them to come to a decision. It also does not highlight popular choices based on customer feedback.

  5. Inventory management challenges: Paper menus cannot reflect real-time availability of dishes, leading to customer dissatisfaction when items are unavailable.

Problem statement

Chathurie 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.

🍔 So what happened next?

  • Wait times for Cafe Ivy reduced by more than 15%.

  • Satisfaction scores for the cafe increased by 10%.

  • Cafe revenue grew by more than 10%.

  • As the need for printed menus is eliminated, the cafe saved costs on design, printing, and frequent updates.

  • Menu changes can be made instantly within the app.

  • As the orders placed through the app go directly to the kitchen, it reduced manual errors and freed up staff to focus on service rather than order-taking.

  • Future versions of the app could allow customers to make pickup orders by processing payments digitally.

That’s it. Thank you for reading. 😇

3 min read

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,

  • I worked to design a new mobile experience to improve the food ordering experience for cafe customers through three rounds of wireframing, prototyping and testing.

  • In 4 weeks, I was able to deliver a complete mobile app design and a detailed style guide through collaboration with end-users and stakeholders.

📊 Solution Testing

After introducing the second version solutions, I conducted further testing with 5 users aligned with the previously defined personas. Subsequently, I collected data, and here are the results.

User journey: Making a food and drinks order

Key Positive Feedback I received:

  • Customers appreciate the addition of a text size and language option functionality.

  • Addition of food nutritional information and customizing options gave customers more flexibility.

  • Clear visuals and order list controls enabled successful order completion.

Areas for Consideration:

  • Some users noted concerns about reordering their last order.

  • Few users wanted to complete payment as well at the end of checkout.

Success Metrics

Testing Context:

  • All participants were existing Cafe Ivy customers

  • Testing was conducted using the Figma prototype

  • Focused mainly on the user flow of making an order and comprehension of menu items

Quantitative Results:

  • Task completion rate: 95% success across all users

  • Task completion time: Reduced from 1:20 minutes to 45 seconds (56% improvement)

Accessibility

Target Audience

  • Primary user group: Age 25-40

  • Design optimized for quick food ordering and varying digital tech savviness

Technical Standards:

  • Adherence to WCAG 2.1 AA standards

  • Contrast ratios: 4.5:1 for normal text, 3:1 for large text

  • More emphasis on button copy to reflect pricing

Let's create something
awesome together.

@2025 Isuru's Design Portfolio. All Rights Reserved.

Let's create something
awesome together.

@2025 Isuru's Design Portfolio. All Rights Reserved.

Let's create something
awesome together.

@2025 Isuru's Design Portfolio. All Rights Reserved.

3 min read

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,

  • I worked to design a new mobile experience to improve the food ordering experience for cafe customers through three rounds of wireframing, prototyping and testing.

  • In 4 weeks, I was able to deliver a complete mobile app design and a detailed style guide through collaboration with end-users and stakeholders.