Cafeteria Meal Plan App

This is a personal concept. The work has been done in no association with Studierendenwerk Stuttgart.
Cafeteria Meal Plan App Meal Plan

Analysis & Problem

The Studierendenwerk Stuttgart provides an app for students in Stuttgart. This app covers a number of functionalities, which make the app overloaded.

Cafeteria Meal Plan App Status Quo

Status Quo

The SW Stuttgart app includes the following functionalities:

  1. News
  2. Locations of SW Stuttgart
  3. Student Stories
  4. Occupation of laundry machines
  5. Meal Plan
  6. Link to the website (opens in app)

Because of all the included features the app appears cluttered with an unappealing interface.

Reduction to core functionalities & Concept

The idea is to split up the elements of the app into two or three dedicated apps, which allow a better focus on the corresponding functions. I decided to create an app that takes care of the meal plan in the cafeterias. The app now has four key functions:

  1. Meal Plan
  2. Saved Meals
  3. Feedback
  4. Settings

The meal plan shows the different courses which will be offered everyday. The user can save a meal in advance. This also allows the kitchen to calculate the amount of food needed. Users can also give feedback to contribute to the cafeteria's continous improvement. Within the settings section, general preferences can be set. This inclused the location of the cafeteria, whether the user is a student or a guest and certain allergies to filter out unsuitable meals in advance.

Cafeteria Meal Plan App Wireframes

Wireframes

UI Design

Cafeteria Meal Plan App Cards UI Elements
Cafeteria Meal Plan App Cards UI Elements

When opening the app for the first time the user will be asked for the preferred cafeteria location and whether he is a student or guest. Assuming the user is going to visit the same location on a regular basis and is not going to change his status often, these are settings that can be set once. This ensures that only one price has to be displayed and no location at all. In case any changes are needed here, the user can affect these in the settings tab.

In the settings tab the user can change fundamental things. This includes the cafeteria location, student or guest prices and common allergies.

Cafeteria Meal Plan App Meal Onboarding & Settings

Onboarding & Settings

At the top of the meal plan the user can choose the weekday for which he wants the information. Meals will be grouped by course. Compact cards display each meal with a picture, price and a bookmark button. This allows the user to save his favorite meals in advance. Also the kitchen can calculate better on amounts of food.

Cafeteria Meal Plan App Meal Plan

Meal Plan

For further information on the meal the user can tap on the meal card. The opening screen displays nutrition, ingredients and allergens.

Cafeteria Meal Plan App Meal

Meal Preview

In the "Saved" tab the user can see all mels he has bookmarked for the week.

Cafeteria Meal Plan App Saved Meals

Saved Meals

For continous improvement the user can give direct feedback to the kitchen through the app. There will be questions about the taste and quantity as well as the visit in the cafeteria as a whole.

Cafeteria Meal Plan App Feedback

Feedback

Conclusion

By reducing unnecessary information and focusing on the important parts the user can navigate through a clean interface. It allows the user to quickly browse through the meals and get the necessary information about nutrition and allergens.

Criticism

As this was one of my first self-initiated projects in UI/UX Design, it has some issues regarding the process, which affect the ultimate outcome.

  • Lack of User Research: All problems identified in the app are personal assumptions. There has been no research with real users to verify issues and to manifest a required redesign.
  • It remains unclear, whether an app or a web-based solution would make a better fit. Also, if a service like this would be used at all.
  • Regarding the UI Design, I followed trends rather than exploring what would be the right fit for the use case.
  • Finally, I learned a lot through this project regarding process, ideation and UI Design.