TUI Menu Curator

Chef’s Table

Teammates

Anannyaa Kapur

Niyah Ali

Timeline

7 weeks

My Role

Research, UX/UI

Rapid Prototyping

Filmmaking

Skill Practice

Immersive Design

TUI Design

Design for collaboration

Tools

Figma

Laser Cut

Project Goal

Explore and Discover the true natural behaviors from daily life.
Connect them with UI to Innovate.

Our team explored the culinary field, driven by our passion for cooking and eating, to identify collaborative TUI opportunities.

Andrew Choi

Anannyaa Kapur

Niyah Ali

Based on secondary & primary research, Fine Dining Restaurant requires

Seasonality,

Staff Collaboration,

Supply Logistic + Pricing,

to curate a new menu.

“HMW create a collaborative TUI that helps fine dining kitchen staff brainstorm dish ideas based on seasonal ingredient availabilities, as well as plan the dishes’ supplier logistics and pricing”

Introducing Chef’s Table.

Users will go through,

1. Season Selection
2. Ingredients Selection
3. Dish Recommendation
4. Competitive Analysis
5. Logistic Decision
6. Print Menu Draft

using TUIs to interact.

User Journey Diagram

Understanding Target Users and their role. Discovering the Pain Points and Opportunities

Stakeholders:

Chef
Sous Chef
Restaurant Manager

Design Process

Ideation sketch + Low-Fidelity Prototype

Ideation Sketch

Low-Fidelity Paper Prototype
Low-Fidelity Wireframe for projection

In-class Feedback

User testing with classmates and professor for feedback every week.

First Iteration

Main changes and insights

  • Made UIs more 3 Dimensional.

  • Used shapes like disk and cube for more dynamic functionality.

  • Compressed more GUIs into TUI.

Second Iteration

Main changes and insights

  • Made the table circular for user collaboration.

  • Assigned too many functions in a single TUI, so they are distributed to multiple TUIs.

  • Created 5 disk TUIs for the selection of ingredients.

User Testing Insights

  • Realized we need a balance between amount of GUI and TUI
    because they support each other’s function    .

  • Testers are still confused(tapped none interface surface)

    = not natural.

Third Iterations

Main changes and insights

  • Included wireframe and animation from Figma.

  • Added more visual feedback like color and animation whenever users complete an action.

  • Rearranged the composition of each component based on Gestalt principles.

More Feedback and Iterations

Adding new stages based on user’s feedback

Dish Recommendation Stage:

Machine will generate lists of dish recommendation base on selected seasonal ingredients.

  • User testers claimed that generated recommendations are helpful for dish ideation.

  • All the iterations are made based on weekly team discussions and iteration sketches.

Competitive Analysis Stage:

Displays local businesses that handle similar dishes as the selection for comparison and inspiration.

  • Take advantage of TUI's dynamic by assigning a new function to the 5-disk TUI.

  • User testers claimed that comparisons among businesses help catch trends.

Logistic Decision Stage:

Plan for the new dish’s logistics and pricing.

  • Dish Recommendation area turn into a spreadsheet.

  • 5 Disk TUIs turn into logistic decision buttons to explore suppliers and their deals.

Updating User Journey Diagram

Including additional information to create TUI specific User Journey Diagram.

  • Stages

  • User Tasks

    +

  • Dynamic of TUI

  • Transition Key

Takeaways from TUI project

Embracing Tangible User Interfaces: A Journey from GUI to TUI

  • Continuously evaluate if tangibility enhances user goal achievement more effectively than GUI.

  • Learned to leverage TUI’s dynamic systems to handle complex concepts efficiently.

  • Learned the importance of visual feedback for enhancing user interaction and progression.

Reflecting on Our TUI Prototype: Challenges and Innovations

  • We successfully pivoted and created a comprehensive user task flow map that organized our information into a cohesive system.

  • Aim to refocus user testing on individuals directly related to the field to obtain a more concentrated user experience.

Rapid Prototype

  • Learned to use a laser cutting machine to create physical prototypes, enhancing both the efficiency and quality of user testing.

  • Invested significant time iterating Figma animations to enhance visual feedback, aiming for a smoother user experience.

Previous

FigGes
Next

Immersive Storyspace