Access this project
GitHub repo: https://github.com/komar41/uic-dining-hall-navigation
Tools used: React Native, Expo CLI, JavaScript, JSON, Generative AI (for dish images).
This project addresses the challenges faced by university students with dietary restrictions when navigating UIC's United Table in Student Center East. Through user research and iterative design, we developed a mobile application to improve the dining experience for students with specific dietary needs.
Application Setup
Open a terminal and run the following commands:
- Clone the repository:
git clone https://github.com/komar41/uic-dining-hall-navigation.git cd uic-dining-hall-navigation
- Install Node.js from https://nodejs.org/en/download/
- Install dependencies and start the app:
npm install npm start
- Download the Expo Go app on your phone to test the app on the development server.
- Scan the QR code on your phone to test the app.
Research
Our research involved surveying academic papers to ground our solution in existing knowledge domains. Key insights included:
- The influence of information on food choices and the impact of gamification in fostering informed decisions
- The potential of AR-enabled navigation aids, though not directly applicable due to potential task overload
- The efficacy of conversational interfaces in assisting users with nuanced preferences and context-specific requirements
Requirements
Based on user interviews, we identified two primary user personas:
1. "Irregular visitor" (e.g., John Doe)
- Needs a more organized dining hall experience
- Requires easy location of foods aligning with dietary restrictions
- Desires self-reliance when navigating the space
![Irregular Visitor Persona](https://github.com/komar41/dine-in-uic/raw/main/assets/persona1.png)
2. "Regular visitor" (e.g., Jane Doe)
- Prioritizes quick and efficient location of suitable foods
- Wants to easily avoid specific food types (e.g., spicy foods, pork)
- Needs clear answers about food options without relying on staff knowledge
![Regular Visitor Persona](https://github.com/komar41/dine-in-uic/raw/main/assets/persona2.png)
Common needs included:
- Efficient navigation of dining hall menus
- Detailed ingredient and dietary information
- Clear food labels and efficient navigation tools
Ideation
Our ideation process focused on addressing the needs of both regular and irregular visitors. Key features considered included:
- User profile configuration for dietary restrictions
- Personalized meal planning and recommendations
- Efficient map layout for dining hall navigation
- Detailed ingredient lists for food items
Low-Fidelity Prototype
Our low-fidelity prototypes included sketches of:
- A screen for configuring user dietary restrictions
- A recommended meal plan screen based on user preferences
- A map layout screen for efficient navigation
- A screen displaying ingredient lists for selected food items
Figma Prototypes
Based on our low-fidelity prototypes, we created more detailed Figma prototypes. These included:
- A page for setting dietary restrictions
- A recommended meal plan page with filtered food options
- An interactive map of the dining hall with numbered navigation points
- Detailed food item pages with ingredient lists
Implementation
The application was built using:
- React Native and Expo CLI for cross-platform compatibility
- React Components (DishCard.js and PlanCard.js) for reusable UI elements
- React Navigation for seamless navigation between pages
- Local JSON data for quiz questions and options
- React Hooks (useState and useEffect) for efficient state management
Data flow:
- Expo CLI initialization
- Component rendering
- User interaction triggering state changes
- Navigation facilitated by React Navigation
Key Features
- Personalized dietary restriction settings
- Daily menu recommendations based on user preferences
- Meal planning functionality
- Detailed dish information (ingredients, nutritional info)
- Interactive map for efficient navigation in the dining hall
- Best route generation for collecting chosen meal items
Application Components
Home Screen
- Central hub for navigation to all other screens
- Starting point for setting up dietary restrictions and meal plans
![Home Screen](https://github.com/komar41/dine-in-uic/raw/main/assets/1_home.png)
Set Dietary Restriction Screen
- Users define their dietary preferences and restrictions
- Redirects users back to the Home screen after setup
![Set Dietary Restriction Screen](https://github.com/komar41/dine-in-uic/raw/main/assets/2_set_diet.png)
Set Up New Plan Screen
- Displays recommended food items based on user's dietary preferences
- Allows users to create and save a meal plan for the day
- Access to Dish Details screen for more information on food items
![Set Up New Plan Screen](https://github.com/komar41/dine-in-uic/raw/main/assets/3_create_plan.png)
My Plan Screen
- Displays the user's saved meal plan for the day
- Option to check dish details and navigate to the Map screen
![My Plan Screen](https://github.com/komar41/dine-in-uic/raw/main/assets/4_my_plan.png)
Dish Details Screen
- Provides detailed information on selected food items
- Includes dish description, ingredient list, and nutrition info
![Dish Details Screen](https://github.com/komar41/dine-in-uic/raw/main/assets/5_dish_details.png)
Map Screen
- Interactive map of the UIC dining hall
- Displays the most efficient route to collect chosen meal items
- Numbered tooltips guide users to specific counters
- Clicking tooltips reveals food items to collect at each counter
![Map Screen](https://github.com/komar41/dine-in-uic/raw/main/assets/6_map.png)
Evaluation & Analysis
We conducted a comparative study between our app and the existing "Dine on Campus" application. The study involved:
- 6 participants performing tasks in the actual dining hall
- Data collection through user estimates, screen recordings, and qualitative feedback
- Use of Hart and Staveland's NASA Task Load Index (TLX) for task assessment
- Our app received more positive feedback compared to "Dine on Campus"
- Users appreciated features like dish photos and easier navigation
- Statistical analysis showed improvements in perceived efficiency and emotional stability
- Enhancing map tooltips and favorites functionality
- Improving the dietary restrictions quiz
- Addressing minor usability issues
Future Improvements
- Integration of custom dietary restrictions
- Improved matching of dish images with their physical appearance
- Enhanced quality-of-life interactions and bug fixes
Conclusion
This project demonstrates the effectiveness of a user-centric design approach in addressing the challenges faced by students with dietary restrictions in university dining halls. The resulting mobile application offers a comprehensive solution for menu exploration, meal planning, and physical navigation within the dining space.
Team
- Gustavo Moreira
- Kazi Shahrukh Omar
- Shanghao Li
- Farah Kamleh