End-to-end product design for an foreign menu translator app
Dishionary
When foreign meal has an unrelated name
When foreign meal has an unrelated name
People struggle to understand and order, even with a translator.
People struggle to understand and order, even with a translator.
What I Did:
What I Did:
User Interview
UI/UX Design
Vibe Coding
Prototype & Iteration
Usability Testing
User Interview
UI/UX Design
Vibe Coding
Prototype & Iteration
Usability Testing
Tools I used
Tools I used
Status
Status
In Progress
In Progress
Willing to download
Willing to download
77%
77%
10 out of 13 participants said they would like to download it after testing.
10 out of 13 participants said they would like to download it after testing.
Support Languages
Support Languages
15 +
15 +
Supports 15+ menu languages with accurate results.
Supports 15+ menu languages with accurate results.
This issue isn’t just mine; it affects many travelers as well.
This issue isn’t just mine; it affects many travelers as well.
This issue isn’t just mine; it affects many travelers as well.
I love traveling abroad, but I often have trouble with foreign menus.
I love traveling abroad, but I often have trouble with foreign menus.
Meals from Europe are often named after history or cultural stories, making it hard to picture the food when the name isn’t related to the dish.
Meals from Europe are often named after history or cultural stories, making it hard to picture the food when the name isn’t related to the dish.
Many of my friends, as well as people online, are experiencing the same issue.
Many of my friends, as well as people online, are experiencing the same issue.
I dug deeper to understand people's needs better.
I dug deeper to understand people's needs better.
I dug deeper to understand people's needs better.
Through user interviews and secondary research, I identified more details about what people truly want.
Through user interviews and secondary research, I identified more details about what people truly want.
I used a top-down analysis to identify the problem:
I used a top-down analysis to identify the problem:
The user’s goal is to order food confidently.
The user’s goal is to order food confidently.
To do that, they need to understand what they are ordering.
To do that, they need to understand what they are ordering.
Translators only provide literal translations of the name, so users are still unsure what the dish actually is.
Translators only provide literal translations of the name, so users are still unsure what the dish actually is.
People need to know the ingredients and cooking techniques to get an idea of the dish.
People need to know the ingredients and cooking techniques to get an idea of the dish.
It’s not a new idea, but current products either lack sufficient information or rely on text-heavy descriptions, and many layouts are not easy to read.
It’s not a new idea, but current products either lack sufficient information or rely on text-heavy descriptions, and many layouts are not easy to read.
Why not just use AI?
Why not just use AI?
From the interviews, some users said they used ChatGPT or Google Lens to translate menus, but the experience isn’t ideal. They have to prompt the tools to get results, and the chatbot format makes it difficult to browse menus quickly.
From the interviews, some users said they used ChatGPT or Google Lens to translate menus, but the experience isn’t ideal. They have to prompt the tools to get results, and the chatbot format makes it difficult to browse menus quickly.
Now that I know what people want, I’ve outlined the goals of this project.
Now that I know what people want, I’ve outlined the goals of this project.
A tool that translates foreign dishes, providing not just the names but also details about ingredients and cooking techniques.
A tool that translates foreign dishes, providing not just the names but also details about ingredients and cooking techniques.
The tool should be effortless to use and help users understand the menu as easily as possible.
The tool should be effortless to use and help users understand the menu as easily as possible.
Present all the information in an easy-to-browse, readable layout so users can understand the menu quickly.
Present all the information in an easy-to-browse, readable layout so users can understand the menu quickly.
All features should support users in ordering food with confidence.
All features should support users in ordering food with confidence.
How I built the design step by step
How I built the design step by step
How I built the design step by step
Instead of starting from a blank canvas, I provided all the information to AI and asked it to generate a prototype, which I used as inspiration.
Instead of starting from a blank canvas, I provided all the information to AI and asked it to generate a prototype, which I used as inspiration.
Then, based on the AI-generated result, I refined the functionality, removed unnecessary elements, and sketched the layout.
Then, based on the AI-generated result, I refined the functionality, removed unnecessary elements, and sketched the layout.
After sketching, I clarified front-end data needs and collaborated with engineers to improve AI prompt quality and consistency.
After sketching, I clarified front-end data needs and collaborated with engineers to improve AI prompt quality and consistency.
At the same time, I named the app “Dishionary” (Dish + Dictionary) and defined its style as clean, clear, with an old-book feel.
At the same time, I named the app “Dishionary” (Dish + Dictionary) and defined its style as clean, clear, with an old-book feel.
Once the design and back end were ready, I used vibe coding to build a functional prototype.
Once the design and back end were ready, I used vibe coding to build a functional prototype.
for UI
for UI
for menu analysis
for menu analysis
for prototyping
for prototyping
I improved the prototype with user feedback.
I improved the prototype with user feedback.
I improved the prototype with user feedback.
I planned three focus groups, each with 4-5 participants, to test the prototype.
I planned three focus groups, each with 4-5 participants, to test the prototype.
The scenario was: “You’re in a foreign restaurant where the staff doesn’t speak English and there’s no English menu.”
The scenario was: “You’re in a foreign restaurant where the staff doesn’t speak English and there’s no English menu.”
Each test had two parts:
First, users relied on their usual methods to understand the menu and order.
Then, they used the prototype to translate the menu and place an order.
Each test had two parts:
First, users relied on their usual methods to understand the menu and order.
Then, they used the prototype to translate the menu and place an order.
It’s good when users give positive feedback:
It’s good when users give positive feedback:
I like the allergen and dietary filters; they make it easy to find options that fit my needs.
I like the allergen and dietary filters; they make it easy to find options that fit my needs.
Compared to Google Lens, the layout makes it much easier to navigate the entire menu.
Compared to Google Lens, the layout makes it much easier to navigate the entire menu.
The meal information helped me clearly understand what I was ordering.
The meal information helped me clearly understand what I was ordering.
It’s more important to know where improvements can be made:
It’s more important to know where improvements can be made:
I didn’t know I could click on the meals on the results page; it’s not that obvious.
I didn’t know I could click on the meals on the results page; it’s not that obvious.
The alert for meal which includes allergens can be more clear and visible
The alert for meal which includes allergens can be more clear and visible
The extra “All” tab makes the number of tabs inconsistent with the menu sections, which is confusing.
The extra “All” tab makes the number of tabs inconsistent with the menu sections, which is confusing.
The bright red background of the cooking technique tag makes it feel like a warning.
The bright red background of the cooking technique tag makes it feel like a warning.
Even if I understand the menu, I still don’t know how to order from a waiter who doesn’t speak English. I have to point at the menu and use my fingers to show how many I want.
Even if I understand the menu, I still don’t know how to order from a waiter who doesn’t speak English. I have to point at the menu and use my fingers to show how many I want.
Iteration and future plan
Iteration and future plan
Iteration and future plan
I’m currently iterating on V2 of the prototype, addressing issues from user testing and improving the overall user experience.
I’m currently iterating on V2 of the prototype, addressing issues from user testing and improving the overall user experience.
I plan to launch this project on the App Store as practice for building and launching more apps and products in the future.
I plan to launch this project on the App Store as practice for building and launching more apps and products in the future.
More Projects
More Projects
More Projects
HoverSpeed
HoverSpeed
I built a Chrome extension to solve a common issue I face on YouTube, making it easy to adjust playback speed.
I built a Chrome extension to solve a common issue I face on YouTube, making it easy to adjust playback speed.
Ummi's Chef
Ummi's Chef
I redesigned a private chef website to improve information clarity and create a more engaging user experience.
I redesigned a private chef website to improve information clarity and create a more engaging user experience.
Let's connect 👋
chluan@iu.edu
CHIA LE LUAN
Let's connect 👋
chluan@iu.edu
CHIA LE LUAN