Mocha Delites Cafe
Service Redesign
Rethinking the dining experience at Mocha Delites for cancer patients and other customer groups.
Duration
Jan.2020 - Apr.2020
Roles
User Researcher
Observation, Stakeholder Interview, Competitive Analysis, Affinity Diagraming, Idea Evaluation Sessions.
UX Designer
Empathy Map, Wireframes, Usability Testing, Lo-fi Prototyping
Service Designer
Ecosystem Mapping, Stakeholder Mapping
tools
Figma
Miro
Illustrator
XD
team members
Rhea Laroya
Yiming Lyu
Yining Liu
Project Overview

Located at the Winship Cancer Institute

Mocha Delites is a cafe on the first floor of the Winship Cancer Institute Center. It serves a menu of familiar cafe fare & coffee in a simple setting.
As efficiency and convenience being the current management goals, food service isn’t what the Cafe is focused on for now.
Meanwhile, because of it’s medical setting, there’re multiple stakeholder interests that Mocha Cafe need to consider and serve for.

Food matters

Food is an essential part of a cancer patients’ treatment and recovery. Cancer patients also are likely to have specific nutrition and dietitian needs.

User Research

Research Methods

Observation
Secondary research
interviews
competitive analysis

Research Goals

Gain a better understanding of how patients, families and staff view their needs for food and nutrition to improve the dining experience at the Winship Cancer Institute.
1.
What are the user profiles of our customers?
2.
What is the user journey for customers at the cafe?
3.
What are the customers’ physical, cognitive, and communication tasks?
4.
What are the main pain points that customers have?
5.
How does the menu currently address the needs of customers?
6.
How does expert opinion on patient nutrition correlate with it being served, and the choices that patients make?

Research Synthesis

Stakeholder
‍Mapping
Ecosystem
Mapping
Competitive
analysis
Hospital Cafe
/ Restaurant
Related Apps

Foodsby is a lunch delivery service for office professionals. Foodsby partners with local restaurants and nearby office buildings to solve lunch and save people time.

Key Features
Order up to 5 days in advance;
Rotating restaurants for food variety;
Individuals order before a cut-off time, and restaurants make and deliver all the meals at one time;
Notifications once meal is delivered;
Pickup is done at a special kiosk.
4.8/5.0, 18.3k Ratings

Nourish is an app specifically designed for hospitals to help nurses, doctors and visiting family members enjoy tasty, healthy meals.

Key Features
Order ahead from onsite dining;
Flexible pickup times;
No additional fees;
Customizable options;
Easy checkout;
Exclusive promotions.
4.8/5.0, 18.3k Ratings
Affinity
diagram
Key insights
01 / OVERALL IMPRESSION

The general impression of the cafe is that it is a quick, efficient, grab and go pitstop. This lowers customer expectations for the quality of food being provided.

02 / LOCATION

The central location of the café makes it a landing space for people to congregate, and is a welcome respite from the rest of the hospital like environment.

Although there are other popular dining options such as the CHOA cafeteria, patients usually eat at the Mocha Delites café because of it’s convenience. Staff prefer to eat elsewhere.

03/ seating

The cafe is small and gets crowded during rush hours. Seating may be hard to find depending on the time of day.

Staff generally prefer to not sit in the cafe and want to save space for patients while caregivers and patients need the space to recharge and relax.

06/ FOOD NEEDS

Patients need high calorie food which can often be unhealthy. This conflicts with staff needs of healthy food.

Older patients generally order the same food during every visit to the café whereas staff members seek variety.

Patients have very specific needs for food regarding-Portability, Portion size, Calorie content, Smell, Food texture, Spice levels, Hygiene

Customers are interested in information and foods that work for their diet.

The food preparation in front of customers gives the appearance of freshness but the food itself does not taste fresh.

05 / ORDERING EXPERIENCE

The flow of buying and paying for food is unintuitive, especially for new customers.

Patients maybe immobile and unable to get food for themselves, leaving nurses or caregivers to help them. Alternatively patients bring their own food, often in coolers for the entire day.

04 / CUSTOMER RELATIONSHIP

Cafe service can be one of the best parts of the patient, staff and caregiver experience at the institute.

Frequent customers have expressed interest in a membership or rewards system. Vouchers to the café are currently being used as service recovery for patients, and performance incentives for nurses.

07 / CAFE BRANDING

The café lacks character and a cohesive brand, although people universally love the bright and airy environment.

Customer Profiles
PERSONA/EMPATHY MAP
User journey map
Ideation and Evaluation
Redesign the User Journey
Evalutation
Iteration
Prototype Design

Problem Statement

TACKLING SERVICE PROBLEMS
How might we improve the current food service in the café to make it easier for patients to place orders?
TACKLING MENU PROBLEMS
How can we redesign the menu to cater to the dietary needs of different user group’s?​

Experience Goals

Gain a better understanding of how patients, families and staff view their needs for food and nutrition to improve the dining experience at the Winship Cancer Institute.
1.
Grab-and-go convenience that doesn’t compromise on quality
2.
Cater to staff members who want healthier options & more variety
3.
Use technology to streamline not complicate experiences
4.
Reduce waiting times and improve physical flow
5.
Patient and caregiver support at every step of the way

Redesigned User Journey

Using a food delivery system, we want to address the needs of different customer groups in the ordering process and their choices of food.
Discovery
Story
THOUGHTS
CHANNELS
Both María and Elena are headed to the doctors both María and Elena are headed to the doctors appointment when they see a poster for a new preorder app near the information counter when they see a poster for a new preorder app near the information counter
“I know María is going to be hungry soon. I need to plan what lunch to get her.”
  • Information desk
  • Poster
  • Volunteers
  • Winship Website
  • Patient Portal
  • Social media
  • Email
  • Printed materials w/ QR codes
  • Tablet application
  • Kiosk application
Information Desk
DOWNLOAD APP, SETUP PROFILE
& BROWSING
Story
THOUGHTS
CHANNELS
Elena downloads the app. She then sets up her profile and creates another profile that links María to her.
“My throat is a little sore today. I wonder if there are foods on this menu that won’t irritate it more.”
  • Mobile application on
    personal mobile
  • Poster
  • Tablet application
  • Kiosk application
  • Menu placed in the café
    or hang on the wall
PROFILE SETUP
RECOMMENDATIONS
MAIN MENU
ORDERING
Story
THOUGHTS
CHANNELS
Elena and Maria make their food selections along with customizations of size, toppings, and some of the ingredients.
  • Mobile App
  • Tablet application
  • Kiosk application
  • Checkout Counter in the Cafe
“I like that I can choose a small portion size,
now Elena doesn’t have to eat my leftovers.”
“My throat is a little sore today. I wonder if there are foods on this menu that won’t irritate it more.”
CHECKOUT
Story
THOUGHTS
CHANNELS
Both María and Elena are headed to the doctors both María and Elena are headed to the doctors appointment when they see a poster for a new preorder app near the information counter when they see a poster for a new preorder app near the information counter
  • Mobile App
  • Tablet application
  • Kiosk application
  • Checkout Counter in the Cafe
Profile Setup
Recommendations
Main Menu
“Now that the food is out of the way, I can focus on keeping María happy.”
“I’m hungry. It looks like the food will be ready for pickup in 5 minutes.”
wayfinding
Story
THOUGHTS
CHANNELS
The app notifies Elena and Maria that their order’s ready. Elena
heads to the pickup counter following the map on her app, and the
signage. 
“The map on the application is helping me find my way to the pickup point”
  • Pickup Zones
  • Mobile application map
  • Volunteer assistance
  • Tablet application
eating
Story
THOUGHTS
CHANNELS
The meals are packaged with easily understandable nutrition labels in a standardized system that matches what’s on the app. Elena and Maria enjoy their meal.
  • Food and food package
“Great! food at last. And it’s healthy and nutritious too.”
“I need to show María how to use this app for
her next appointment because I won’t be
here.”
Next experience
Story
THOUGHTS
CHANNELS
The app notifies Elena and Maria that their order’s ready. Elena
heads to the pickup counter following the map on her app, and the
signage. 
  • Mobile Application on personal devices
Rewards
“Great! food at last. And it’s healthy and nutritious too.”
Evaluation
We used value map to measure the value of design ideas (touchpoint and App features) along
two dimensions:
         - Feasibility: How easily can the idea be implemented?
         - Effectiveness: Does the idea effectively solve the problem?
Eval chart for service touchpoints
Eval chart for service touchpoints
Eval chart for mobile app features
Eval chart for mobile app features
Key insights
1
DIGITAL DEVICES
Need to consider the fact that mobile phone is not accessible to every customer.

Tablets will address the traffic flow better than kiosk while customers feel that they’re more familiar with kiosk.

2
PICKUP DELIVERY
Pickup zone is not applicable considering the real situation.

Pickup zone can cause confusion among patients and lead to mess.

3
PHYSICAL DESIGN
Physical designs make information more accessible.

Signage redesign reduces the confusion in way finding. Menu redesign helps customers make better choice. Package design educates people about nutritional information.

Prototype Evaluation

Lo-fi prototype
4 users
usability testing
45 min
Key Takeaways
“ The processes, tools and technology are not up to the same level of care as the staff are. The staff have to be the people who provide the care. We want to use things like an app that can order food to also portray that we care, that you’re in good hands, and that you’re safe, that your care is holistic. Technology is the missing link at Winship. ”
– UX Expert
design implications
The App is an attempt of the Winship Institute to provide care through technology. Besides a useful tool for the Cafe customers, it's also a part of the service from the Institute.
I like it when you ask users about how do they feel today! It’s very empathic and you can add more options to it.
- Former patients at Winship
design implications
The App should embody the caring and friendly characteristic of Winship Institute and provide users with the feeling that they're taken care of.
“There is a disparity between what patients think they need and what they actually need- food suggestions have to keep this in mind.”
– Clinical Dietician
design implications
Patients may not know what their dietitian limits are. An opportunity can be to link the profile of caregivers to patients so that they’re notified about what they should eat.
“ If the wording matches, I’d connect the preference selection, filter and recommended menu together.”
– UX Expert
design implications
The App should embody the caring and friendly characteristic of Winship Institute and provide users with the feeling that they're taken care of.
Sign up
Quotes
"I wouldn’t want to use facebook because I would be fearful that if I used Facebook that somehow what i was doing on this app would show up there. I’m mistrustful." P1
"My first impression of "Welcome to the Winship Cafe App " is that this app is for ordering but also has other functions." P5
"I don't have a context of using this app, but i think the ad before downloading will help me understand." P5
Implications
Social media might dissuade sign ups because of privacy fears.
User would be comfortable with using email to sign up.
Indicate to the user that it is beneficial to create an account, what are the benefits. Can use onboarding for that.
Quotes
"Is the information necessary? Why do i need to add my phone number here?"
"a 4 digit code..." should be moved down after "mobile". it's a bit odd if you read from top to bottom, since i need to input information other than mobile number. P5
"The sign up process was simple and quick."
Implications
Indicate to the user that it is beneficial to create an account, what are the benefits. Can use onboarding for that.
Inform users of why the information is needed.
Food Suggestion
Quotes
"If i've been here before, i’ll click suggest food, if its my first time, i’d browse the menu." P4
Do you think patients will know about their dietary limits? I don't think all of them would know and use this. P4
"Add visuals for patient, staff, caregiver." P2
"Why would I skip?" P2
"What will happen if i click 'skip'?"P5
Implications
Inform users of what to expect after clicking certain buttons.
Let users know if they can still edit the information in the future.
Probably allow users to switch between the full menu and suggested menu.
Inappropriate illustration.
Quotes
"I like it! It’s very empathic and you can add more to it."
"Maria is probably going to need high calorie, high protein, high fiber and low carbs. Frequently cancer patients need hi-calorie foods."
"Should link the patients' account with dietitian's, so i know what they suggest i should eat."
There is a disparity between what they think need and what they actually need.
"It might be helpful for people to standby to help during the profile creation process for older people."
Ask them what kind of food they want rather than symptoms
"Gluten free is not there."
More into different types of meals, e.g. vegetarian, vegan. Or sth like Half-size portion, Hot or cold, or Taste: sour vs bland...
Implications
To link the patients' profile with doctors' might be a way to inform users of what kind of food they need.
An average instead of low and high is needed.
Select all that apply was not seen.
Options need be finalized under the suggestions of dietitians.
Homepage and ordering
Quotes
"The description helps me assess the food."
"Photos make me salivate- it helps me make a decision."
"The labelling is really great, especially for a cancer patient who is nervous about what to eat."
"A scroll bar would indicate that I could see more, especially for older adults."
"How many ounces are in each item would be a good thing to add."
"What does "Allergen-free mean?"
"I don't know what to expect from 'filter' at first."
"I didn't notice that the recommended items are based on the selection earlier."
Implications
Should make the horizontal scroll nav more intuitive.
The information displayed on the menu is helpful for users to make decisions.
Should make the "Filter" more noticeable.
Should make the wording for "food preference", "filter", and "selected menu" consistent so that users understand they're connected.
Should expand to what they are allergic to, now it is too broad.
Information hierarchy collapse between recommended items and menu category。
Quotes
Would like to customize the smoothie and salads- build your own (p1)
I didn’t know smoothie appears under "Drink". (p1)
Implications
Drinks does not adequately describe smoothies
Quotes
"I don’t know how to go back to the screen with the choices."(talking about the menu) P1
"It’s very similar to previous experiences I’ve had with my iphone." P1
"There are other programs where I feel like I’m left hanging. That if I leave I’m not sure if my order will be placed." P1
"Add a price information of the item on "add to cart" button." P5
"Customization is wonderful." P1
"It's a bit wired to tick to remove items." P5
"Add ingredients and remove ingredients is weird. Icons are a great way, maybe green and red." P2
Implications
Arrow is not noticeable.
Make it clear that the item has been customized and placed.
Adjust the flow of "Ingredient Customization" to make it more intuitive and efficient.
Checkout
Quotes
"I want to see what the customizations are as well as how to edit my order." (p2)
"We offer patients a free meal at mocha delites. How do they apply the coupon? By input the code?" P4
Implications
Include customizations of items on the Cart page and allow editing.
Consider existing physical coupons when designing the checkout process to streamline the experience.
Quotes
The zone is good. But we don’t encourage people to eat at the waiting room. There are patients who stay at the cafe all day and don’t want food. P4
Implications
Should design the pickup area according to the Institute layout and consider patients needs.
Possibly divide dining areas?
Quotes
"I want to see previous orders on this page." P4
"I want to know what 1,2 and 3 are. Is three when I start walking." p2
"Why do you put order placed and my cart in one page? they are two different things for me. I'd go to 'my mocha' to see the order placed." P5
Implications
Should redesign the flow of "Order History" and "Order Status".
Should clarify the steps of order preparation in order status.
My Mocha
Quotes
"The visual of the coupons is confusing but the text- how many more to get coupon for free item is clear." P2
"I wants to see recommended items based on what you enjoyed." (p1)
What does settings and update do? (p2)
Implications
Rethink the coupon procedure and redesign the UI to better explain it.
Favourates
Quotes
Can I save my customizations?(p2)
Implications
Allow users to also save their customizations that will enable fast ordering in the future.

Summary of insights

1.
Information
Indicate users of what the information gathered in the App is for.
Add necessary nutrition facts, and work with doctors and dietitians to finalize the screening questions.
Other information like "steps in order status", "incentive rules and coupons".
5.
Accessibility
Icons and illustrations to assist understanding.
Error tolerance.
6.
This is some text inside of a div block.
What are the user profiles of our customers?
2.
Hierarchy
Simplify categories of food.
"Category" and "Filter" collapse on the menu page.
3.
Features(possible)
Save customizations and order from saved items.
Link patients' profile with doctors'.
Recommended options based on what the user enjoys.
4.
Information Architecture
Adjust the locations of "Order Status", "Order History".
Allow users to place order from "Saved items/customizations".
Add the access to doctor's profile and dietary restrictions.