top of page
mockup-BeGood_edited.jpg
The Challenge
How to provide healthy and quality-assured eating options for patients and people with special dietary needs?
Team

Design team of one; Non-profit Project for ChaiMiDuo Restaurant

My Role

Research, Concept development, UI/UX Design

Timeline

Oct 2019 - Dec 2019

Tools

Figma, Adobe Illustrator, Adobe Photoshop, MS Office

Project Overview

This is a website design project for BeGood, a farm-to-table restaurant catering to patients and people with special dietary needs in Shanghai, providing healthy and quality-assured eating options.

Motivation

Witnessing family member with chronic illness made me realize the significance of nutrition and supportive care. Holistic treatment for patients is essential, that patient support should not be restricted to medical processes within the hospital. To ensure a better recovery, aspects such as nutrition, physical exercise, social support should all be taken into consideration. With the opportunity of this project, I want to design a product that features on the patient community and provides quality-assured support to better facilitate their rehabilitation.

1. Problem Scope

While Shanghai is the cradle of both the middle class and foreign-educated returnees, Jing'an district is not only highly populated with large corporations and shopping malls but also high-end nursing homes and hospitals. Healthy meal options at the hospital are nutritious but oftentimes tasteless. How can we improve the taste of healthy eating options without sacrificing the overall quality of food sources and services for patients and people with special dietary needs? 

Map of Jing'an District, Shanghai
  • Concentrated hospitals and private care centers

  • Gathering of middle-class, foreigners, and foreign-educated returnees

  • A large base of patients and the elder community

Screen Shot 2022-07-28 at 2.46.04 PM.png

User Pain Points (patient community): 

01.
Tasteless hospital
food catering

Hospital meal are quality assured, but oftentimes blend and tasteless.

02.
Unhealthy food delivery options

Ordering food delivery is an efficient option, but most are with superfluous sodium and fat.

03.
Food quality
not guaranteed 

External restaurants are also less assured in food quality, which requires extra effort to examine.

From the Business Perspective:

01.
How to establish trust with the target users?
02. 
How to cater to users who are less physically mobile?
03.
How to support
customization with diverse options?
Project Objective

Eat

Well

BeGood

Join Us

Design of a restaurant and its service platform which cater to the special-diet population and the patient community.

Potential Benefit

For Users:

For Business:

  1. Quality-assured healthy eating solution
  2. Provide convenience and minimize mental burden 
  1. All-in-one service platform 
  2. Improve customer retention rate
  3. Branding which speaks of business value
Preliminary Research

In order to better understand the problem scope and current situation, I have conducted a survey, a semi-structured interview, ideation workshop and market research. These research inputs helped me to position my study through testifying my earlier assumptions and gain insights from real beneficiaries and stakeholders. 

Market
​Research
Semi-Structured Interview
Co-Design Workshop
1. Market Research

Most restaurants do not have individual delivery service options, but under the umbrella of two delivery tycoon playforms in China: Meituan and Ele.me. Delivery platforms have provide users with diverse options, but lack of quality-assurance as there have been a number of food-related issues over the past years. Element Fresh and Wagas, focus on western/fusion cuisine while patients, espcially the elderly, have a strong preference towards the traditional Chinese way of cooking.

Screen Shot 2022-08-03 at 1.50.52 PM.png
2. Semi-Structured Interview

To better understand the perspective of patients and their care-givers, I created an online survey and received responds from to 58 people at Jing'an district, of which 67%  identified the need for a better system platform for healthy food options.

After​ the survey, I talked to three participants who are willing to share their thoughts with a 30-minute semi-structured interview. Below are some of the quotes:

 U1 (23), Grandmother in hospital with lung cancer:

“My grandma is the only one at our house who cooks. Since she’s sick, my grandpa tried to cook for her but she didn't like the taste at all. My parents and I are just too busy that it's difficult for us to take care of her.”

 U3 (46),  hospitalized for two months

“I feel like the available healthy eating options are very limited. Those are mainly western food - like salad, very cold, but I want some Chinese style hot meals most of the time. ”

3. Co-Design Workshop

A co-design and brainstorm session with two patients and two patient care-givers about their ideal food service platform. The responses are recorded in four dimensions: Functionalities, Problem it solves, Service it offers, and Platform Integration.

co-design_edited.jpg
Key Insights

From the above research, three of the mostly picked functionalities are listed:

Delivery & Scheduling

A web-based platform with delivery option and enables ahead-of-time scheduling.

Quality Assurance

Credentials with food quality assurance, either by providing source information or testimonials.

Ease of Use

Since most patients have low technological literacy, making it easy to navigate is essential. Functionalities like order-tracking should be included.

Solution Space
Identify Target Audience

Emma

Screen Shot 2022-08-05 at 5.40.28 PM.png
Persona Profile
avatarr.webp
Lee
  • 56, male, college professor

  • Recently retired, lives alone, not good at cooking;

  • High blood pressure and requires low-salt diet;

  • Mid tech-literacy, browse news online;

  • Would love to have a convenient weekly set menu provided which fits his needs.

Emma
  • 36, female, work in Finance 

  • Emma’s mom is hospitalized, while she does not like patient meal provided;

  • Busy working in another district, so Emma don't have enough time and energy to take care of her mom by herself;

  • High tech-literacy;

  • Keen on healthy lifestyle and effective work-life balance.

avatarr.webp
Strategy & Outline of Scope
Screen Shot 2022-08-05 at 5.57.08 PM.png
Screen Shot 2022-08-05 at 5.57.20 PM.png
Screen Shot 2022-08-05 at 5.57.20 PM.png
Screen Shot 2022-08-05 at 5.57.30 PM.png
Information Architecture

Sitemap

site-map.jpg

Wireframes

The page-level wireframes follow the site map which breaks down the website to basic components and main functionalities. The interaction flow of user on each page was carefully considered and mapped. 

User can make order without registering an account, following the steps of:

[location - plan - menu - schedule - confirmation - sign up - checkout].

Screen Shot 2022-08-08 at 3.45.00 PM.png
User Interface Design

Visual Research 

Picture1.png
Picture2.png

Style Guide

Screen Shot 2022-08-08 at 3.49.09 PM.png

Design States - Button States

Screen Shot 2022-08-10 at 10.12.16 PM.png
Iterations & User Testing

The low-fidelity prototype was presented to three target audience who have participated in the previous survey and semi-structured interview. They were introduced to the above wireframe and observed when they were asked to perform different tasks including making an order, access personal account and check order information. 

 

From observation notes and participants' feedback, several issues/obstacles during the interaction process were further addressed as part of the iteration cycle. Two main design challenges are listed below:

Design Decisions

  • Visualize complex nutritional information 

Initial mockup put side menu on the side of nutritional chart, which users find difficult to read during testing. In final prototype the information are separated into tag - nutritional chart - ingredients with different visual cues to indicate information more clearly.

Web 1920 – 4.png
Web 1920 – 18.png
Nutrition Card Visualization

When user click on the thumbnail view on website, a nutrition card will pop up.

Green labels categorize meals with tags like “soy-free” ,“low salt” ,“low cholesterol”  for users with special needs to easily search and identify.

  • Easier representation of food cost per week and per meal
Screen Shot 2022-08-11 at 3.30.14 PM.png
Screen Shot 2022-08-11 at 3.30.25 PM.png
Initial Mockup

The first iteration allows tapping on the button to select number of meals users would like for a week. The estimated total price and price per meal is shown below.

Second Iteration

Buttons were changed into a slide-bar which users can toggle to compare price/meal differences. This saves unnecessary actions of multiple clicking and minimize user effort.

High-Fidelity Prototype
Web 1920 – 16.png
Web 1920 – 15.png
Web 1920 – 17.png
Web 1920 – 18.png
Making the Order
Web 1920 – 19.png
Web 1920 – 20.png

2.

Web 1920 – 22.png

4.

Web 1920 – 26.png

7.

Web 1920 – 21.png

3.

Web 1920 – 24.png
Web 1920 – 25.png

6.

1.

5.

Mobile Prototype
Web 1920 – 27.png
Web 1920 – 28.png
Evaluation - OKRs Framework

Objective

Design of a restaurant and its service platform catering to people in Jing'an, Shanghai with special dietary needs

Objective Description

This project aims to support target users by providing healthy, tasty and quality-assured eating options which satisfy individualized demand of target audience. 

Key Result 1

A service platform for healthy and quality-assured eating options

Key Result 2

Delivery and scheduling functions covering target location

Key Result 3

Categorized meal type and visualized nutritional information 

Key Result 3

Supports local farm and sustainable farming 

Reflection & Takeaways

Challenges

Carrying out user interview and seeking feedback from the target audience was not easy, as it entails the vulnerable community. How to work with them and their family/care-givers was a tricky question, as well as how to conduct research in an objective and non-biased manner. One healthcare expert has suggested me to conduct a co-design workshop, however with limited access to number of participants, the workshop was a smaller scale comparing to earlier expectation.

Future Development

Reflecting back it would be beneficial to secure a team for the full-cycle iteration and testing including technical developers. As BeGood was an individual project, I wasn't able to evaluate and test from the perspective of real-time website deployment. Having different voices on the team would largely contribute to the comprehensive design thinking of the envisioned product. A proper working prototype also allows more in-depth user feedback from iteration testings.

Key Takeaways

The first and foremost takeaway from BeGood project is understanding the cruciality of Co-design Process and including participants' voice. Co-design workshops helps to discover unique perspectives through such collaboration and further alters the traditional power dynamic between designer and user as a one-way channel. Co-design larges facilitates design equality and realizes user demand in a much more accurate way.

bottom of page