DC Menu App

Introduction

Currently, the UC Davis dining commons’ website is divided into four separate sites corresponding to each dining commons. This fragmentation poses challenges for both staff and students when transitioning between options and exploring menus, dietary choices, and macros. Our goal is to develop a React Native app that simplifies the process for students, allowing them to effortlessly access information on all four dining commons’ menus, dietary options, and macros with just a few taps. Additionally, the app will offer a feature enabling users to save their personal favorites and track their dietary choices efficiently.

Our Team

Leads:

Avnoor Sidhu — Project Mentor

Roshini Pothapragada — Project Manager

Designers:

Rashi Bihani

Reiley Johnson

Maxim Saschin

Developers:

Aadam Mirza

Aiden DeVaney

Connie Zhu

Hideaki Park

Varun Thakkar

Rytham Dawar

Timeframe

Oct 2022 — Jun 2023 | 22 weeks

Tools

Design — Figma

Development — MongoDB, Express JS, React Native, Node JS, Python

Maintenance — Jira, Notion, Slack, Github

The Project

Here is our prototype

Design

Market + User Research

First, our team had to figure out our go-to market. Since our app was aimed directly towards UC Davis students, we began narrowing our search from there. UC Davis has around 40,850 students as of Fall 2023. Of these students, primarily freshmen and transfer students would have a dining meal plan and would visit the dining commons the most. This narrowed our market to around 9,000 undergraduate students. Our app would be for these 9,000 students.

Next, we had to research which features our market deemed the most important when choosing which dining commons to eat at.

Comparative Analysis

First, we looked at potential competitors across the market, as well as what features they had to offer. We found that three traits were offered on all three apps: a list of dining locations, their opening/closing times, and information on when each menu item was available (whether time or sorted by breakfast/lunch/dinner). Additionally, we noticed that some competitors had features that we were implementing as well, such as dietary restriction filters, some sort of nutrition info, etc. We also noticed that both campus apps also had breakfast/lunch/dinner categories. However, we realized there were no specific timestamps for each meal time, and we figured that defining the specific times each meal is served would be helpful since college students are known for having hectic and unusual schedules.

We did not just stop at comparative analysis, however. We took a further look at our market by interviewing and surveying fellow students as well.

Analysis and Key Insights

This process also helped us come up with our user flows. We started with a simple user flow

and iterated upon it utilizing the data we analyzed during our ideation phase.

User Flow

Wireframing + Prototyping

The design process went through multiple iterations, starting from lo-fi sketches and progressing towards final wireframes. Each iteration aimed to refine and improve the user experience.

Low-Fidelity Sketches

** Mid-Fidelity Sketches**

As we continued along the design process, more focus was given to the aesthetics of our app. We created a comprehensive design system to start bringing the app to life as well as begin brand development efforts. This design system included colorography, typography, as well as iconography.

Comprehensive Design System

Moving onto mid-fidelity designs, we gave our attention to the functionality of the app. Flexible search filters were introduced to allow users to customize their searches and narrow down results based on their specific preferences. This flexibility improved the overall search experience and made it easier for users to find the information they were looking for. Additionally, the team implemented saving options, enabling users to store their preferred food items from specific dining commons for future use. With this feature, users will be able to receive notifications for their favorite foods after saving their favorite foods in the app. This eliminated the need for users to repeatedly search for their preferences and enhanced their overall efficiency within the interface.

Another important consideration was the progress page. We wanted users to be able to keep track of the macros consumed from dining commons items and check their daily, weekly, or monthly progress.

Dining Commons Menu App High-Fidelity Wireframes

In conclusion, the design process progressed through several iterations and incorporated different features within the interface to enhance the user experience. From creating a hierarchy and clarifying user flows to introducing flexible search filters, saving options, and a progress tracker, the iterative enhancements led to a polished and user-friendly interface. The final wireframes exemplified the culmination of these improvements, providing users with an intuitive, efficient, and gratifying experience in the application.

Development

In fall, our developers got started with web scraping which was the main pillar of our project. Menu items are systematically scraped directly from the current DC website using BeautifulSoup, ensuring an up-to-date and accurate representation of the available offerings. This scraping process includes the extraction of comprehensive data, storing nutritional information such as calories and macros, as well as dietary details like allergens and ingredients.

# Function to extract and structure nutrition and allergy info
nutrition_section = food_item.find('ul', class_='nutrition')
            if nutrition_section:
                # Extracting nutrition and allergy info
                nutrition_allergy_info = extract_info(nutrition_section)
                # Structuring the data
                food_data = {
                    'date': date,
                    'meal_period': meal_period,
                    'station': station,
                    'food_name': food_name,
                    'nutrition_allergy_info': nutrition_allergy_info
                }
                data.append(food_data)

To efficiently manage and retrieve this wealth of information, a MongoDB database is employed for storage. The stored data is then made accessible through an API implemented with Express, facilitating seamless retrieval and utilization of the extracted menu data. This integrated system ensures that users can access and leverage the most current and relevant information about the menu items offered by the DC.

In winter, we shifted our focus to backend development and building the CRUD route operations. Throughout the weeks our developers constructed the backend using Node.js and Express.js, which became the solid foundation of our entire project. This included setting up a range of API calls to make the interaction between the client-side application and the server, supporting functionalities such as fetching menu data, and handling user authentication. Then in the next steps, we integrated the system with MongoDB, which takes care of the data management and validation for user information, menu items, and preferences. Towards the end of winter, the initial steps in front-end development were started using , where we focused on developing components that were designed by our designers to interface smoothly with the newly built backend. The development of the front-end work laid a strong foundation for the project and set the groundwork for the more intensive development to follow.

During spring, the development focused on completing all front-end pages and cleaning up of the CRUD routes. We finalized the user interface, which ensured a responsive and efficient experience across various devices. Each page was built to allow users to browse menu items, view detailed nutritional information, and manage their preferences. At the same time, we refined the CRUD routes to ensure they are optimized for performance and security. An important addition during this phase was the implementation of Google Auth, which is used for the login process by allowing the users to authenticate their accounts using their Google accounts. This simplified the user experience and improved the overall security. Lastly, we made several minor formatting adjustments to the UI, focusing on the outlook and accessibility improvements to ensure the application was functional and visually appealing.

Takeaways & Challenges

Navigating timing conflicts and task assignments within our sizable college student group, amidst the complexities of demanding schedules, presented a formidable hurdle in the course of our project. The intricate balance required for academic commitments, extracurricular engagements, and various responsibilities made the identification of mutually convenient collaboration windows a daunting task. To address this challenge, we underscored the importance of transparent communication, consistently sharing our availability updates with the team. A hybrid workflow, melding in-person gatherings with asynchronous work, emerged as a strategic choice, adeptly accommodating diverse schedules and work preferences. This approach not only facilitated continuous progress but also optimized productivity. Despite the initial challenges, our success lay in the adept allocation of tasks, capitalizing on individual strengths and preferences, thereby nurturing collaboration and triumphing over scheduling hurdles.

Towards the end of our project, we ran into a disruption that was caused due to an accidental update from Expo SDK 49 to Expo SDK 51. This unexpected change occurred without our notice, that most likely happened due to an automatic update setting or a misconfiguration in our development environment. Some of us had the old version while others had the new version which caused a lot of confusion and uncertainty. As a result, our application, which had been stable on SDK 49, unexpectedly experienced numerous issues and errors. The newer SDK version brought in changes and deprecations that rendered several parts of our codebase non-functional. This led to broken components and unexpected behavior at the last minute. From this experience, we understood the importance of monitoring and managing version updates carefully to avoid such disruptions in the future.

Overall, working on this project gave the entire team a great learning curve with solid technical skills along with strong soft skills. The teams faced so many high and lows but we persevered through everything and helped each other grow. We are very grateful for CodeLab for giving us a great learning experience!