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
-
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
Persona Profile
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.
Strategy & Outline of Scope
Sitemap
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 Interface Design
Style Guide
Design States
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.
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
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
Making the Order
2.
4.
7.
3.
6.
1.
5.
Mobile Prototype
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.