Education Technology is a class in Georgia Tech in which we learn to apply learning theories to design effective web products for education.
As a Final Individual Project in Education technology, I created a prototype of web application named "Table Virtuoso" (Figma Prototype Link), to teach people good table etiquettes for boosting self-confidence and preparing for formal dining events.
Many people do not have a chance to formally learn table etiquettes. My intention is to build this project is to help bridge that gap through accessible and engaging technology.
Here are learning outcomes of this application prototype:
1. Identify appropriate table settings for different formal dining occasions (e.g., where each utensil, plate, and glass belongs) for more convenience while eating food.
2. Demonstrate correct dining etiquette, including when to begin eating, how to signal they’re finished, and how to handle awkward situations like dropped utensils.
3. Recognize cultural variations in table manners and apply them appropriately in international or multicultural contexts.
Proposed Features
Users learn table manners through segmented, step-by-step instruction, from understanding utensil use to applying proper formal dining etiquette, supporting scaffolding and gradual learning.
I have include the multicultural dimensions of the etiquette, such as how to use chopsticks, useful for oriental cuisine, which will promote cultural sensitivity and support situated-based learning theory.
To foster intrinsic motivation and engagement, this feature incorporates Constructivist Learning Principles, allowing users to interact with table settings, make situational decisions, and receive feedback, promoting active learning and reflection through trial and error.
User Feedback on the First Prototype
Notes Feature:
The user appreciated the notes section, which allows users to reflect after watching the etiquette videos.
Test Feature (Spot the Mistake):
The user liked the structure and functionality of the test feature.
They also found the ability to view previous test results helpful.
Misleading Links:
Some clickable links show incorrect content. Example: Clicking on “Fillet” shows “Spaghetti”. Same issue with world cuisines.
Clickable Areas in Image-Based Tests:
In the “Test Knowledge” feature, the user couldn’t click on multiple mistakes. The user suggested adding invisible clickable rectangles over mistake areas, which trigger a blue circle when clicked.
Simple Format:
The user liked the format of the “Food Etiquettes” section—simple and easy to grasp.
World Cuisine Section:
The user found the world cuisine section enjoyable and engaging.
Label Confusion:
“Food Etiquettes” vs. “How to eat properly?” caused confusion. Suggested rename: “How to use the cutlery?” instead of “How to eat properly?” as the latter is too broad and ambiguous.
Notes Section Size:
In the “How to eat properly?” screen, the Notes section is too big. The video component should be more prominent or dominant.
Terminology Issues:
“Identifying a mistake” should not be labeled as a ‘Strength’—strength implies skill mastery, not correctness in spotting errors. Suggested to change the wording of result categories accordingly.
Homepage:
The homepage was found to be intuitive and well-organized.
Readability Issue:
The title “Table Virtuoso” was hard to read due to the backlight contrast.
Tab Placement:
The “Ready to test” tab at the bottom felt out of place.
Color Contrast Issue:
In Test Results, the text inside the “Strengths” and “Needs to improve” boxes had low contrast, making it difficult to read.
Back Button Request:
A Back button is needed—preferably at the top left of the screen.
Cutlery Pop-up:
In the “Food” section, users suggested having a cutlery pop-up for better context before eating instructions.
Improvement based on the User Feedbacks
To address previously misleading links (e.g., clicking “Fillet” showing “Spaghetti”), I implemented accurate content mapping to ensure that each clickable element now leads to the correct instructional material for the selected dish or cuisine.
Based on user feedback, I implemented Figma’s Variant feature to enable multi-point click interactions within the image-based test. This allows users to identify multiple mistakes by clicking on various locations, enhancing engagement and aligning with the intended test experience.
In response to user feedback, I added a cutlery icon at the bottom of relevant screens, allowing users to easily reference utensil types while learning how to use them. Additionally, a Back button has been introduced (positioned at the top left) to enhance navigation and support a smoother user experience.
Inspiration from the Existing Technologies:
Many of the ideas I got inspired from were from the YouTube, such as food video, etiquette videos, etc. I wanted to get them at one place.
I use Tasty application to cook food, I wanted to know how we can serve the food and eat the food with appropriate table manners.
I also took some inspiration from “Big Interview” web application which is used for practicing behavioural interviews. One can practice these etiquettes if a similar interface is used.
I was checking “Emily Post” website which has a lot of articles on how to handle different etiquette situations, I wanted to incorporate them with educational and learning principles.
For the food etiquettes learning path and cuisines, I had taken inspiration from "wikiHow" was well.