top of page
mockup-BeGood_edited.jpg
UX Research | UI Design | Web
Website Design for BeGood Restaurant, catering to special-diet population and patient community
Team

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

My Role

Research, Business design strategist, Concept development, Branding, UI/UX Design

Timeline

Oct 2019 - Dec 2019

Tools

Figma, Adobe Illustrator, Adobe Photoshop, MS Office

Project Overview

This is a 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. Project content contains business branding, design strategy and website design.

Client Requirement

1. Design of a website which supports online food ordering and delivery; 2. Provide a system that allows order customization; 3. Communicate fresh, healthy, nutritious and upscale brand image.

Problem Scope
Location: Jing'an District, Shanghai, China
Screen Shot 2022-07-28 at 2.46.04 PM.png
  • Concentrated hospitals and private care centers;

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

  • A large base of patients and the elder community.

User Pain Points: 
01.
Tasteless hospital
food catering

Hospital meals 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?
User Research
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.

avatarr.webp
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.

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. 

Screen Shot 2022-08-08 at 3.45.00 PM.png
User Interface Design
Style Guide
Screen Shot 2022-08-08 at 3.49.09 PM.png
Design 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

Website design for BeGoof Restaurant, 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