Interactive Web
An interactive pork anatomy site that bridges language gaps and cooking knowledge.
My family runs a pork stall in local market in Taiwan, and I grew up watching them introduce different cut of meat to customers.
One day, a foreign customer pointed at “pork collar” and asked me which part it was ?
I couldn’t explain it in English.
That moment made me realise that everyday food carries hidden language and cultural gaps.
I designed an interactive pork anatomy website that divides the pig into four main sections.
Users can see where the meat they usually eat comes from and use the search function to locate specific cuts.
Each clickable area reveals details about the name, cutting style, seasoning, and recommended cooking methods, presented through a playful interface.
The site currently supports Chinese and English, with plans to expand into Vietnamese, Thai, and Indonesian to make it inclusive for multicultural users in Taiwan.
A-Rong runs a traditional pork stall and interacts with dozens of customers daily, both local and foreign.
He spends most of his time explaining the differences between similar cuts and how to cook them.
Lin wants her family to eat healthier, so she started learning how to cook and often shops at local markets, but she’s not confident in identifying pork cuts or matching them with dishes.
Nguyễn recently moved to Taiwan , where she now works as a live-in caregiver for elderly people. She cooks for the elderly family she cares for and often visits local markets to buy ingredients, but she finds it difficult to communicate with stall owners due to the language barrier.
Sketching the pig icon and experimenting with the placement of typography to find a clear and balanced composition. At the same time, a flat anatomy layout was explored to represent the pig divided into four main sections.
Converting the sketches into a clean and scalable vector illustration using Adobe Illustrator for web display.
Tang-Tai Pork Stall
