Foodable

ROLE
TEAM
CLIENT
TIMELINE
UX / UI Design
Interaction
Animation
Illustration

Wenjia Wang
Dusanka Prevulovic
Peter Reimer
Paige Lucas-Dean
Booking.com
Dec 2021 - Feb 2022

CLIENT
JiNan Cailu Media

TIMELINE
8 months

TEAM
Wenjia Wang

ROLE
UX / UI Design
Interaction
Illustration

The motivation for this project come from my personal experience as an international traveler. I found difficulties understanding restaurant menus, which led to what I ordered not being what I expected.  I found most international tourists also face the same problems as me during their trip. I felt this would be an interesting problem to solve, so I started this project with support from JiNan Cailu Media Co, Ltd, which is a company that pays attention to the travel market. They asked me to design a digital product to meet the demands of tourists and reduce their bad travel experience.

I was lucky to design the entire project from scratch, with guidance and criticism from the company's designers, from discovery to research and interviews to conceptualization, creation, testing, and finally delivering the final MVP after iterations.

Challenge

The design challenge is to create an app to solve international tourists' problems caused by the language barrier on dining occasions and to reduce bad experiences at restaurants during their trip, to help them efficiently and successfully order the food that they want.

In what effective ways could an app help independent travelers who are under the cross-cultural background to solve problems that are caused by the language barrier at restaurants in their trip?

How I got there

Kickstar

I began with desk research that focuses on international tourist behavior and the problems they face. After gaining a general understanding of the topic, I created a hypothesis about how international travelers order food in restaurants when they do not speak the language. To test this hypothesis, I conducted 12 interviews and created a questionnaire that received 33 answers. We summarized the results with affinity map.

I also conducted a competitive analysis to uncover design opportunities.

4 Scenarios.

We have realised that there are 4 possible scenarios that can occur when a user performs a search:

User knows dates and destination of its trip

User knows dates but not the destination of its trip

User knows destination but not the dates of its trip

User don't know dates and destination of its trip

Situated Design

I gained some useful information from the interviews, but much of this information was based on visitors' past experiences. To better understand the series of location design experiences I conducted, I worked in a Zhangjiajie B&B for 2 months to closely observe the ordering process of international visitors. I then gathered my findings and created 3 relevant personas.

Situated Design

我们设计了3种体验:一天,我们的团队在不使用技术的情况下进行物理工作;一天,我们使用视频会议工具在线工作;以及我们完全使用音频工具在线工作的一天。我们在日报上收集了3次经验的见解,后来比较了我们的发现,确定了在线工作的优点和缺点

Persona & Journey Map

The data collected from previous researches converged in 2 different personas: Individual international traveler and local restaurant operator (Although they also benefited from the project, a separate design was required and therefore will not be detailed here.)

Research.

What I want to know?

1. Understanding how users search for the travel information they want.
2. Understanding the means and channels people use to find out about travel information.
3. Find out what influences people's decision to travel discover the factors that play a key role in user's travel planning.

This is some text inside of a div block.
Competitive Analysis.

A market full of homogenized products

After learning about the industry, I wanted to take a closer look at Booking's competitors and how they cater to the travel needs and usage habits of younger users.

I identified the direct and indirect competitors:
Airbnb, Trivago, TripAdvisor, Expedia and Qunar. The direct competitors are travel-focused platforms similar to Booking, while the indirect competitors do not focus solely on travel product sales. In exploring each of apps, I evaluated the strengths and weaknesses of each to see how Booking could fill any gaps along the way.

Benchmarking

This is some text inside of a div block.

Fragments of inspiration from other apps

We also looked at apps from other fields and found interesting, learnable features to design.

This is some text inside of a div block.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Interview | Survey.

we were analyzing data and making an affinity map.

We interviewed 10 young people to collect qualitative information for an in-depth understanding. The participants were around 20-25 years old and had travel experience.

Our interviews found out how the younger generation searches for travel information and plans their trips. We also found out about the current shortcomings of the Booking app.

In addition, we learned about the apps that are popular among the younger generation, such as Tiktok. Further analysis of these apps allowed us to understand why users like to use them and learn from them.

Most important insights

Kickstar

74.2% of visitors found it very difficult to communicate with the waiters.
72.5% of visitors want to know the ingredients of the food.
70.4% of visitors value the safety of food.
59.6% of visitors complained about not being able to read the menu.

Situated Design

We realized that the restaurant's menu was only available in Chinese and lacked pictures, so this was frustrating for travelers. Secondly,  the ingredients of the food are not easily distinguishable, so it is important to accurately inform the waiter of their allergens.

Journey map

Travelers try to use body language and translation software to communicate.
Getting recommendations from waiters is a very important experience.
Travelers have to resolve a problem by combining the use of several apps.
Some travelers like to do make plans before, but there is not much information available online.

Findings.

Travel decision making

We were able to identify 6 key points that are the most decisive drivers in Gen Z's online travel planning:

  • 85% of participants prefer to create their own personal tour rather than a package tour.

  • 98% of participant will compare before booking.

  • 80% of respondents claim they enjoy sharing and getting holiday inspiration online.

  • 76% of participant prefer the dominance of pictures and videos over text descriptions.

  • 90% of participants cited budget and location as the biggest considerations before traveling.

  • Sharing journeys and socializing have become part of the lives

Functional, but boring

We tested and asked the target group about their experience of using the current Booking app.
  • The UI style is very commercial, users like a more youthful, lively style.

  • They quickly lose patience with the complexities of filter.

  • The attraction recommendation page is filled with a lot of text, which is not attractive to users.

Persona

Created for International tourists

Ideation

To define the solution, I mapped out storyboards for each persona and analyzed their requirements. Then I applied the Moscow matrix to identify the MVP features of the project. After several brainstorming sessions I got some ideas.

Wireframe & Lo-Fi

After filtering ideas based on design requirements, I combined them to get 3 different concepts and create low-fidelity prototypes. Expert evaluation and user testing allowed me to get the final idea and redraw the wireframe, refining the concept based on UX and UI Standards.

2 Rounds Testing

At the Low-Fi mockup stage, I could connect my user flow and wireframes to better understand possible difficulties between flows and tasks. Solved some problems like button size to increase the usability for my test with real users.

I invited 11 people that way I could analyze their perspective, observing pain points and actions on usability and desirability of the product, in order to have a clear process to follow and compare results.

Final Design
Selecting food allergens

Informing travelers of food allergies and dietary restrictions on the menus and dish descriptions based on travelers' food profiles created during the onboarding.

Explore local food

Find the optimal restaurantsnearby; Recommend the localfood for users.

Visualized menu

Showing dishes through 360°virtual images to help travelers see the ingredients and knowmore information.

Billngual Order List

Presenting what food travelers would taste and what restaurants travelers want to go in.
Travelers can make their food plans with the Foodable app anytime,anywhere.

Translation Feature

The "Camera Translation" functionhelps to translate the restaurant menufrom the camera to the users'preferred language.
The
"Conversation Translation"function helps users better communicate with waiters.
Users also could save sentences that they like to use again in the
"Personal Saved."

Design system