University Group Project:
A web application that helps form groups in classroom settings.
High-Fidelity Prototype
Functioning Web Application
ongoing
The Groupee project focuses on designing a user-centered web application which is used for organizing groups quickly in a classroom setting. Through a questionnaire that everyone has to answer simultaneously, the groups will be formed based on personality and skills in order for the groups to be balanced.
Groupee is a web-based tool designed to streamline the process of group formation in academic and organizational settings. The platform utilizes a fun, user-friendly interface to gather information about users' skills and personalities through a questionnaire. Leveraging a matching algorithm based on theories like Belbin’s Team Roles, Groupee ensures the creation of balanced and diverse groups to minimize conflicts and enhance collaboration. The platform provides detailed profiles of team members and offers follow-up features such as group chats and event sign-ups. As the application is simultaneously used on a web device (eg. Computer that projects the Application on a Screen) as well as a mobile device, the application must be coherent and adapt to the functionalities of device-agnostic design.
The challenge is that traditional group formation methods are often inefficient, time-consuming, and result in unbalanced teams, with organizers manually sorting participants or relying on random algorithms. This leads to teams lacking complementary skills, causing conflicts, unequal participation, and increased anxiety for students who struggle to form groups on their own.
The goal is to efficiently create balanced, diverse teams while reducing manual effort and participant stress.
In this case we have more than one target user, as the application will be used from different sides. The application could technically be used in many other scenarios but here we only focus on the university setting.
Hosts:University professors and lecturers responsible for managing and creating groups in classroom settings for their lectures.
Participants:University students that have to form groups within their class/studies.
To get a better perspective on both user groups we created the following personas:
Use Case 1: A professor initiates a Groupee session to form student groups for a project, simplifying the process and ensuring balanced teams without student intervention.
Use Case 2: Students fill out questionnaires through a QR code, and the system automatically assigns them to balanced teams, displayed both on personal devices and in-class screens.
In this Design Process, we started off with simple sketches and then went further and created a high-fidelity prototype.
The first step in the design process after we had the idea was to start on Sketches. We made very simple drafts to convey the idea and discuss it.
In the Web Sketches you can see that the host first chooses the number of groups, extra questions and if there should be follow-up actions. After that he starts the session and the Waiting Room with the QR code will be projected in the classroom. When participants start joining the session you can see avatars popping up. WHen the host presses "START", the questionnaire starts which will be answered simultaneously by all users. During the questionnaire the professor goes on to the next question when everyone is finished. At the end you can see a big skilltree with the skills and personality traits of all students, which then animates into the formed groups.
On the Mobile version you can see that the user will first scan the QR code and then proceeds to a waiting room screen where a random meme will appear. When everyone joined the waiting room and the questionnaire starts the participants will see an answering screen for each question. When all the questions were answered, the participants will see their own skilltree, leading to the displayed group formation and (if selected by the host) a button for the follow-up action.
In this version of the prototype, the functionality is almost the same as described above. The main difference is that next to the QR code the users can also join the session with a session code. Furthermore after scanning the QR code or joining the session with the session code, the user gets to select a user name for the session.
Frontend: Here we use Angular for the web app, styled with Tailwind CSS. Component libraries like PrimeNG enhance the UI development.
Backend: Firebase is used for real-time database management and hosting. It also includes custom algorithms for skill-based group formation. Below you can see the stuckture of the backend.
Security: Firebase security rules ensure proper access control and data protection. GDPR compliance ensures that personal data is handled securely and transparently.
