AR Interaction Design

Dine 360

COMPANY

Course Project

ROLE

UX Designer

Group Members

Holly Wang, Sandy Zhao, Lucy Cao, Peiran Ge

YEAR

2024

Project description

This project aims to develop an AR-based ordering system that allows users to filter food options by dietary needs, calories, price, and wait time, while viewing realistic AR projections of meals. It focuses on improving accessibility for people with disabilities by simplifying food court navigation. With Spatial Computing managing virtual orders and robots handling real-world tasks like delivery and waste collection, the system enhances both user experience and efficiency.

Timeline

From explorations to final designs in 6 weeks while working with multiple projects at the same time

Background

This project addresses the need for more accessible and efficient dining experiences, particularly for individuals with disabilities. Food courts often pose challenges like long lines and crowded spaces.

This project calls for the use of spatial computing for a public space. Our team chose augmented reality as an area of focus, and mall food courts as the public space.

Please view the rest on a tablet or desk top.

Process

Research & Planning

Concept Selection

In developing our concept, we first visited a local mall to take photographs and carefully analyze the existing issues within the space. Each team member proposed ideas on how spatial computing and robotics could enhance the experience, which were then categorized based on feasibility and potential impact. We considered accessibility challenges faced by diverse groups, such as mobility issues, sensory impairments, and cognitive differences, and evaluated how each idea addressed specific needs, including visual assistance, physical navigation, and language translation.

Through our analysis, we identified the potential of using augmented reality (AR) and robotics in food courts. AR offers real-time dietary information, enabling individuals with allergies or restrictions to make safe, informed decisions.

User Flow

We used the existing user flow to develop a proposed flowchart detailing AR and robotic interactions. However, we realized that combining these technologies could complicate the user experience. To prevent this, we opted for a more streamlined workflow, prioritizing usability and ensuring the integration remains user-friendly and accessible, aligning with our commitment to simplicity and accessibility.

Our initial approach, though comprehensive, required refinement. It was crucial to narrow our scope to prevent overextending resources and ensure focused development in one impactful area rather than spreading efforts too thin. This led us to ask a key question: "What’s the smallest experience we can design that creates value?"

We then focused on simplifying the user journey, aiming to answer: How can we help customers make more informed and confident decisions about what to eat? We refined our flow to the following.

User Interview

User interviews provided valuable insights into the challenges faced by our target audience, highlighting key pain points in the food court experience:

Chaotic Environment: “There are always too many people in line, I can’t focus on ordering.”
Vision Difficulties: “If I didn’t wear my glasses, I have to ask my friends about the menu or use my phone to zoom in to see.”
Unclear Allergy Documentation: “I didn’t even know there was any (allergy information) on display. And even if they displayed it, I wouldn’t have been able to see them since they are so small.”
Expectation vs. Reality: “Sometimes I make the order imagining the dish, since all menus are text-based, and what I get is always different from what I expected.”

Design & Prototyping

Each group member created a prototype of the final flow, and we then discussed the feasibility, clarity, and aesthetics of each design. This collaborative review allowed us to identify potential issues and refine our approach to ensure the best user experience.

Key features gathered from members' flows include:

Multiple display settings: fixed & dynamic layout options
Collecting users' dietary preferences
Warning symbols for foods containing restricted ingredients
Group ordering mode: view what your friends are ordering
Bundle suggestions during food ordering

After testing the implementation of these features in a potentially crowded and noisy environment, we decided to eliminate the bundle order option to streamline the workflow and improve usability.

Solution

Dine 360 is an AR ordering system that allows users to filter out foods by dietary restrictions and needs, calories, price, and wait time; users can view realistic AR projections of foods that reflect the portion size, and add their friends to the virtual table to view their orders together.

Video

Google Drive

Prototypes

Figma

Focus on dietary restrictions
Stay safe—any item containing restricted ingredients will display a caution symbol for easy identification
Flexible Layout
Choose your view—switch between overlay or fixed format for restaurant details, designed to fit your needs
Group Mode: add friends to your table
Add your friends—visualize everyone’s orders and make group dining a breeze from the start.
Focus on dietary restrictions
Stay safe—any item containing restricted ingredients will display a caution symbol for easy identification
Flexible Layout
Choose your view—switch between overlay or fixed format for restaurant details, designed to fit your needs
Group Mode: add friends to your table
Add your friends—visualize everyone’s orders and make group dining a breeze from the start.
Focus on dietary restrictions
Stay safe—any item containing restricted ingredients will display a caution symbol for easy identification
Flexible Layout
Choose your view—switch between overlay or fixed format for restaurant details, designed to fit your needs
Group Mode: add friends to your table
Add your friends—visualize everyone’s orders and make group dining a breeze from the start.
Focus on dietary restrictions
Stay safe—any item containing restricted ingredients will display a caution symbol for easy identification
Flexible Layout
Choose your view—switch between overlay or fixed format for restaurant details, designed to fit your needs
Group Mode: add friends to your table
Add your friends—visualize everyone’s orders and make group dining a breeze from the start.