UI Design
UX Design
BLOOM Berlin
A support project for people affected by discrimination
TIMELINE
October 2024 – February 2025
TEAM
3 Designers
ROLE
UI Design and Prototyping
CONTEXT
Course project at the University of Applied Sciences Potsdam in collaboration with CityLab Berlin
Scope
Where we started …
Our project began with the Berlin Register, an initiative for reporting and documenting incidents of discrimination. Our analysis of the platform revealed several key issues: the absence of tangible benefits for those affected, substandard UI design, and a conspicuous lack of human touch, evident in various aspects.
The course focused on user experience, which is clear in our project. We began by focusing on the absence of a human element and proceeded to develop our research, surveys and analyses accordingly.
How we started …
Research
Problems and needs of potential Target group
Collecting resources
Where do these problems come from?
Our research began with the Berlin Register, a website documenting incidents of discrimination and right-wing activity in Berlin. We analysed the Register's website, as well as other anti-discrimination and community platforms, including LesMigras, ZebraYouth, HateAid, Antidiskriminierungsberatung-Brandenburg and AnDi.
Our research revealed complex problems and opportunities for improvement in supporting those affected by discrimination. The platform lacks visibility, established procedures and a clear structure, as well as direct benefits for those affected.
This led us to conclude that, although there are already numerous ways to report incidents, these are not widely known. Furthermore, the process is often bureaucratic and primarily serves statistical purposes, failing to provide direct assistance to those affected. Another issue is the lack of interpersonal contact (keyword: empathy). Even when contact persons are listed, there is no sense of having a direct point of contact. Personal exchange and/or joint activities rarely take centre stage.
Survey
In order to analyze the needs and wishes of those affected and offer concrete help, we created an online survey on the topic of discrimination and exclusion—anonymous and voluntary. A total of 14 people took part.
Reporting incidents is therefore not the main focus, and direct discussion of the issue is sometimes rejected. However, many would like to see more discussion among themselves.
Ideation
Wir werteten die Online-Umfrage aus, nutzten Miro-Methodiken wie die Mehrwert-Aufwand-Matrix, führten Feedbackrunden im Kurs durch und erstellten Archetypen. Unser Ziel war es dabei eine realistisch umsetzbare Projektidee zu entwickeln, die Betroffenen echten Mehrwert bietet.
Bloom Berlin
What is BLOOM?
Bloom is an association for everyone. There are events and communities you can join. Our goal is for everyone to feel seen and heard. We want a Berlin without discrimination, prejudice, and fear!
Why an association?
An association offers the advantage of bringing people closer together. Through events and personal contact, it is possible to address issues precisely where they need to be addressed. In addition, an association can work in a more versatile manner and is designed to develop alongside its members.
Defining the target group
Defining the target group was a key step in the design process. By identifying the primary users, their needs, and their context, we were able to create a clear foundation for informed design decisions.
About me
Malik
“I'm looking for a community in my city where I feel welcome and accepted.”
What's my personality type?
Open-minded, friendly, creative
What's my gender?
Male
How old am I?
26
About mY job
What did I study?
Training as an automotive mechatronics technician.
Where do I work?
At a medium-sized auto repair shop in Neukölln
What are my responsibilities at the shop?
Vehicle repair
Personal
Where I am from?
Eritrea. He came to Berlin as a refugee a few years ago.
What's my story?
A few years ago, due to the political situation in his home country, Malik decided to leave his family and his country behind in order to live safely and build a better future. The first few months in Germany were a huge challenge for him. The new language, unfamiliar culture and life in a new country were initially overwhelming. However, he didn’t give up and worked hard to integrate. Through his training as an automotive mechatronics technician, he found a career path, an opportunity to make new friends, and a chance to grow in confidence.
User Journey
The user journey, based on our Malik archetype, illustrates a specific use case for our final product. This user journey and its corresponding archetype are two of the three that we created during the process. Exploring these different use cases enabled us to focus more effectively on the various needs of users, making the entire platform as user-friendly as possible.
The Designsystem
Primary Font
Kumbh Sans is a modern, geometric sans-serif typeface characterized by its clean lines and balanced proportions. It offers excellent readability and, thanks to its simple aesthetic, pairs well with our decorative typeface. With this font, we have found a typeface that is both professional and inviting.
Secondary Font
Our decorative font is Fredoka One. It is used for the logo and the main headings. It combines highly geometric elements with rounded corners, giving it a friendly and slightly playful look.
primary color
#3600C0
secondary color
#d924ac
accent color 1
#f9811f
accent color 2
#1cb2d4
background color
#ecebe9
off-set black
#333639
Our visual language is based on a deliberate choice: rather than depicting real people, we use figures and characters that we have developed ourselves. This approach helps us to avoid stereotypes and ensures that no specific groups of people are underrepresented. While photographs may not always capture this diversity, abstract figures offer a more inclusive alternative. At the same time, they serve as intuitive controls, giving the platform a welcoming and accessible atmosphere.
The APP
Homescreen
On the home screen, users can navigate through the different sections. They also receive personalized recommendations based on their profile, such as events or articles that might interest them. Additionally, users can learn more about the Bloom association here.
For better clarity, the individual sections are color-coded. The characters appear repeatedly, at the top as navigation elements and further down as purely stylistic elements. On the home screen, users can navigate through the different sections. They also receive personalized recommendations based on their profile, such as events or articles that might interest them. Additionally, there is an option here to learn more about the Bloom association.
Community Section
In the Community section, users have the opportunity to connect with others. They can join groups and find buddies who can support them in specific situations—whether they have questions, need help, or simply want to chat.
The section is divided into two parts: the general Community section and “My Community.” In “My Community,” users can find the groups they’ve already joined, as well as their friends and buddies.
Event section
The core element of Bloom is personal interaction. That’s why Bloom offers a wide variety of events that users can sign up for. The events section is divided into two views: the default feed view and the map view. In the feed, events can be filtered by topic and interest, while the map view shows what’s happening near the user.
When an event is selected, the user receives all relevant information. In addition to the usual event details, there is also information on accessibility as well as the option to contact the organizer(s) with any questions. Finally, the user simply needs to register. However, the registration button is only visible for events where registration is mandatory. There are also intentionally events without a registration requirement to keep the barrier to entry as low as possible.
Profil
The profile is the only place where photos are displayed. We deliberately chose not to use individual avatars in order to make the profiles and interactions more personal. The profile includes interests and personal notes. If a user relies on wheelchair-accessible events, this information can be entered here to receive appropriate recommendations.
Onboarding
Bloom requires registration to ensure a safe space. During the onboarding process, users can specify their personal preferences so that the app is tailored to their needs. Additionally, questions regarding accessibility are asked to ensure that everyone receives the support they need.
