ClubMe: The platform that brings together people with a common interest
This project was carried out as part of the TechLabs “Digital Shaper Program” in Münster (winter term 2020/21).
Abstract
Did you know that over 17 million people in Germany do voluntary work?! And the trend is rising!
Most of the time, the search for a suitable club or association to get involved starts on the web and then ends very quickly. Two reasons behind this: 1. small clubs often have either no web presence or a poor one and 2. common search engines neither provide an accurate nor a user-friendly overview of the clubs.
ClubMe is designed to reduce the distance between clubs or associations and those interested in their activity offerings, by helping them to create a nice web profile on the ClubMe platform with relevant information for interested parties.
Through the platform, everyone who searches for local civic engagement and volunteering can find the associations’ offerings and filter them based on their interests. Thus, you will get a much better overview of what is on offer compared to common search engines.
Regardless of whether it is a sports club, a cultural association, or a guerrilla gardening club, with ClubMe everyone can find something for themselves!
How we did it
To understand the problem behind our idea more precisely, we conducted qualitative user interviews. We focused on the one hand on the organizations, and on the other hand on the interested individuals/people looking for leisure time. In total, we interviewed six organizations and four interested parties. The organizations were from different categories like sports, music, society, social, sustainability, economy, entrepreneurship. In particular, on the organization side, we investigated how internal and external communication works and how the organizations present themselves to the outside world. Here we could see that the way the organizations present themselves nowadays is mainly on digital platforms such as Instagram, Facebook, YouTube, Twitter. These channels are ultimately seen as an addition to the frequently existing website. All communication channels together result often in an outdated image of the organization to the outside world. This problem, especially keeping the website up to date, arises due to the lack of technical know-how of the members of the club. In contrast to today’s social media profiles, it is noticeable that the website consequently requires more know-how and work than a standard profile on Facebook or Instagram, for example. This conclusion is an important insight that is considered a basic requirement for our Vereinsplattform. Every organization that registers on ClubMe should be able to create a profile based on the modular principle. There should be standard templates available and some simple personalized options to create a unique web presence. The goal is to create a platform that gives every organization the chance to be more visible, making it easier for interested people to find an organization that matches their interests. Among the interviewed persons it could be seen that the medium Internet for researching new leisure activities is considered a favourite here. Finally, this supports the idea of making all possible club activities in a city visible and findable on a single platform.
Based on the data collected from the interviews we conducted, we created personas and scenarios. Let us take a look for example at our first persona — Max:
Max has just moved to Münster and wants to meet new people. He searches for organizations and possible leisure activities on google. He finds ClubMe in the search results and visits the website. He sees different categories such as sports, politics, and education. He chooses sport and filters by sport (team/individual sport) and distance. He reads information about different organizations (“About us”, number of members, location, membership fee), browses through photos and videos and reviews. He clicks on the links that redirect to the social media pages of the organizations. After a while, he decides on two organizations and wants to take a trial lesson. In addition, he signs up for the newsletters of both organizations. He contacts the organizations directly via the contact function and receives an invitation to a trial lesson within the next few days. Max is satisfied, he registers with the sports club, he leaves a positive rating, and he shares the organization with his friends via WhatsApp.
After having identified what our users really need and want, we continued to figure out strategic opportunities which provided value for the users and us. We needed to distinguish between those things that were a ‘must-have’ versus those things that were not worth doing. For this, we listed all the problems and opportunities that we have identified, and we assigned them a value between 1 and 5 for importance and feasibility.
This UX exercise helped us to clarify for everyone in the team what the minimum valuable product (MVP) should be.
Afterwards, we learned one of the most important UX principles, which is progressive disclosure. This principle tells us that any information presented to someone who is not interested in it or is not ready to process it is noise. We worked then on creating a decision path for the website that progressively showed information, that is, from simple to complex. With this, the user is presented with only the necessary information at any given time for them to take the next action.
Then we started generating requirements. Due to the scope of this project, the team could not maintain constant contact with the interviewees to get their feedback at each stage of the development process and iterate the UX design. However, we always kept in mind the data collected from the user interviews and the scenarios we developed. Again, in this step, we focus on both of our user groups to generate requirements: On the one hand, the people interested in joining a club, and on the other, the clubs which wanted to create their Internet presence with ClubMe.
Another important UX step was the one concerning the information architecture. Here, we worked on structuring the content of the website in a way that was easy for our users to understand where they were and how to arrive at the page that they needed next. We kept in mind the concept of progressive disclosure and we developed a site map.
Then the time came to start prototyping! For this step we used Figma, and we developed several options for the different pages of the website. Our goal was to make the site as simple and clean as possible. So, we kept to simple design elements that allow the user easy navigation and the content of the organizations are directly in the foreground. The site should work for the organizations according to the modular principle so that they can decide which elements of the profile are to be seen on their own. Thus, personalization and an own character of the Internet presence shall be enabled.
Throughout the whole development process, we stayed in touch with Nina, our team’s mentor, and we included her valuable feedback in every stage.
Based on the prototype we developed a rough structural framework of the most important features for getting an idea of where to start and where to go. We scraped Udemy and YouTube for getting a more detailed introduction of how the various components that we would like to integrate into the platform can be coded with ReactJS. The React framework being quickly set up, we directly started with creating the landing page, including the navigation bar, footer as well as a search bar and the club cards representing the search results. Overwhelmed by our fast progress we presented our results to Lukas, our mentor. Lukas was able to give us a lot of feedback and helped us with the folder structure of the react app and with making our code cleaner. He also introduced us to “live share” for VS code, so that we were able to work together in one coding editor. Every Wednesday we coded together until Tom left to watch “Der Bachelor” with his roommates and arranged some smaller duties for the next week. After the landing page, we decided on continuing with the registration page where we set up a form and photo upload. Via routes, we were able to link the different pages. The CSS Flexbox Froggy thankfully taught us how to arrange all the different components on the registration page. The more specific our coding ideas got the more we left our edyoucated track and focused on more specific YouTube videos and spent a lot of time on Stack Overflow searching for solutions to our problems. In the following coding sessions with Lukas, we made our website responsive, reimplemented the search function and changed the colour scheme of the platform.
The final result is something to be proud of. There is room for improvement, but the idea has already become more tangible, and we have taken a first step towards bringing interested citizens and clubs together. Unfortunately, we were not able to create the backend until the end of our project, so we could not create our own club page after entering the information into the registration page. That means a working database and things like user registration and user communication tools are challenges to face in the future. Finally, we created an URL making ClubMe available for the World Wide Web! You can visit ClubMe here.
