“MensaMatch” — Building new connections while eating in Campus has never been easier!

This project was carried out as part of the TechLabs “Digital Shaper Program” in Dortmund (summer term 2022). “MensaMatch” was awarded as the best project in the summer term 2022.

In a nutshell:

Through MensaMatch we enable an easier way to search for other people who would like to meet and have a nice lunch break with somebody new. Sometimes it can get weird and lonely to eat by yourself, and it would be nice to have a good conversation or simply meet new pals during the break. In the MensaMatch App the possibility to meet new people and connect with new friends is easier than trying to join a table of strangers. This app could be very useful for students, employees and people living and working nearby to find somebody to go eat with in the campus mensas of TU and FH Dortmund. This pilot usage of the app could possibly lead to a broader use in other campuses and working environments.

Introduction:

Our project developed from a proposal by the Techlabs team into the idea to create an app that enables a connection between people who would like to have lunch together in the campus canteens. Despite the word “Match” being used in the name of this app, no automatic matching function is enabled. This specific point was at the center of our discussions during the beginning phase of the project: We wanted to avoid the “matching pressure” and strengthen the importance of a sense of agency in communication. We thought that for such a specific target group — the canteens customers — it would have been particularly nice to work on a very simple navigation focused on the site-specificity of the app (Campus TU and FH Dortmund) and the chatting function. To understand to what extent the possible users would like to know their match, we decided to create a google form and spread it both in the Techlabs community and campus canteens. The results helped us to understand the interest in such an app and the information to be implemented for the user experience.

Methodology:

Mensa Customer Form: Define the target group

As this app could have nice implications and effects already into our Techlabs community, we found it interesting and helpful to start by creating a “Mensa customer form” to understand the interest in such an app but also what people expect from a service like that. We began sharing the customer form in the Techlabs Slack channels, for then starting spreading a QR code also in the different canteens. It became clear that the target group is mainly students between 18–30, either students of TU and FH Dortmund or PhD students, with an average use of the canteens two times per week. The interest in an App like MensaMatch was high and the form also made explicit how much the user would like to know about the other person, for instance it is clear a picture is needed, hobby’s, age and current position are expected.

Design

The MensaMatch Corporate Identity developed by taking inspiration from the two universities colours (TU Dortmund green, FH Dortmund orange). From those colours we developed a simple palette to apply to our design draft. We first defined shapes and navigation possibilities of the drafted wireframe, along with choosing already three font types: Montserrat Alternates Semibold and Regular, and the more elaborated Kharkiv Tone Regular, which gives accentuated character to the app. Then, we proceeded by applying the colour palette to the wireframe.

The logo of MensaMatch is an “M” merging the two main colours — green and orange — from one side to the other.

As we know from Jakob’s Law, users tend to prefer navigations to which they are accustomed. For this reason, we began brainstorming on other solid navigations different from matching apps that enable communication for meeting and connecting. As mentioned before, we wanted to focus on the users deciding to communicate with each other. Eventually, this was possible by using the “invitation” function: The user can create a proposal for having a meal together at a specific time in one of the campus canteens. The invite, along with the user general information, are posted in MensaMatch and other users looking for a pal can find the invite, filtered by canteen or by searching for already added friends, and “match”. The communication then follows via chat.

We have clearly defined the peak and end of our app, and strengthen them through the navigation, particularly focusing on the invitation and decision of the connecting (“match”) function. The law of proximity applies to many groups of items appearing in the app (e.g. friends, lists of invitation, canteens and messages) and strengthens the peak experiences of the user. Also, the target functions — Home with invitations, Invite, Chat, Profile — are clear and easy to achieve (Fitts’ Law).

Web development

We started the frontend part of the web development while the UX design was already in an advanced stage. Based on the UX design, we at first implemented the welcome screens to introduce our app to the user. Following this was the short questionnaire to get to know the user. Furthermore we implemented the login/register pages, as well as a profile page with settings to change personal information if needed to. Until here, we did not have any issues, which we could not solve by ourselves.

While programming the chat frames, we encountered a small problem with the desired slide-up effect, but with the help of our mentor, this was also no problem and could be solved right away.

In the further progress we did not encounter any major issues and could solve these small problems by ourselves.

For the whole implementation we created a technology stack not only consisting of HTML, CSS and JavaScript, but also ReactJS, where the use of react-router-dom played a very big role.

With only three members in our group and only one of them being from the web development track, there are unfortunately still some functions missing in the frontend (login/register, invitation filter, individual pages for the friends/chats/invitations), as well as the whole backend. Nevertheless we as a group are still very content and happy with our results/product.

Feedback and new challenges

The work done on Figma permitted us to show clearly our work to our mentors, with which we had the possibility to improve or put into question ideas we got stuck with in the initial phase. One example is the navigating map, which at the very start was at the centre of our design along with the position of the user. To make a good MVP we understood the implementation of a complete navigating app with position activated would be more difficult than expected to achieve. For this reason, we decided just to have an orienting map in the home-page to find the different locations of the many campus canteens. Eventually, this decision also helped to strengthen the focus on the chat and invite functions, which was actually our main goal.

Another issue we imagine could arise during the first tests of the app is the possibility to decline an invite after matching. As MensaMatch doesn’t work like a dating app, we believe the users can simply communicate their unavailability to join as planned. Although we believe in good communication within our users, a “report” option should be considered and implemented before launching and using MensaMatch. MensaMatch still doesn’t have a backend. The whole wireframe and UX design are ready, the frontend web development is in process, but we still need the whole backend implementation to launch the app. Anyhow, the UX design and web development are solid and in good improvement. We are positive that the further backend implementation phase can be easily realised once the universities campus express interest to invest in this project.

Our result contains the survey results about the campus canteens’ customers, a design and navigation prototype of MensaMatch in Figma as well as the initial implementation of the frontend part of the web/app development. Our results can be found on our Figma file and our GitHub repository.

As our project started with a group mainly composed of UX designers, and our web developer joined us on a later stage, the MensaMatch app has now a solid UX design and the implementation of the frontend web development is also almost done. With only one web developer in our group, we unfortunately did not have enough time to manage both frontend and backend. Nevertheless we are positive to continue working on the last adjustments and think that the app, with further support of the Techlabs team and some work on the backend, maybe helped by possible university funding, could be published and tested in the Dortmund campus at a later stage.

With MensaMatch we hope to provide a valuable platform able to establish a more solid network within the canteen customers, maybe even making the lunch at the campus canteens more appealing for students and people living and working nearby. MensaMatch not only intends to function as an app to facilitate an enjoyable meal together, it also aims at improving the campus social life and communication in general.

GitHub repository:

https://github.com/TechLabs-Dortmund/MensaMatch

Figma:

https://www.figma.com/file/LvbHWC5TVqEEH7T8byn4TF/MensaMatch?node-id=8%3A2

Team members: