trenntmap.de

Together for a better Berlin

Presentation of various sustainable places and events around Berlin.

Concept phase for Berlin Recycling GmbH

We have set ourselves the ambitious goal of reducing waste in Berlin for Berlin Recycling GmbH. We wanted to achieve this by showing citizens places where they can donate and sell used items. The main objective was to support the circular economy and make life in Berlin more sustainable. To achieve this, we have developed a web platform where users can enter locations or events related to the circular economy to reduce waste.

Technology and Design

The platform was developed with a powerful backend based on Django and has a customized geolocation database. An interface for Berlin Recycling GmbH staff has also been integrated, allowing them to manage locations and approve user-submitted information. In terms of design, we closely followed the Material UI principles and drew inspiration from the Airbnb platform.

Our approach

In the concept phase, we initially focused on understanding exactly what the end users expect and need from the solution. For this purpose, we created "User Journeys" to ensure that the client's business logic aligns with the users' needs. These "User Journeys" helped us visualize the entire process from the perspective of the end user and ensure that the platform is intuitive and user-friendly.

After we had defined a suitable "user journey", we conducted a competitive analysis. This helped us determine how our solution differs from others and what our unique selling proposition is. It also provided us with the opportunity to gather inspiration for the design phase and understand which features or approaches work best in the industry.

Another important step in this phase was the creation of rough "wireframes". These wireframes allowed us to identify potential issues with the concept early on and ensure that the user interface is both functional and aesthetically appealing.

SEO optimization was also a central part of this phase. We have extensively studied which choice of words is best suited and which technology works best to ensure that the platform is optimized for both users and search engines.

Miro
Miro

Visual implementation with Figma

For the design phase, we used Figma, an advanced tool that allowed us to turn our ideas into realistic prototypes. The right design is crucial, as users on the internet decide within fractions of a second whether a website is appealing or unattractive.

Corporate Identity (CI) and Design Systems

A central element of our design work was to ensure that the Corporate Identity (CI) of Berlin Recycling GmbH was integrated into the solution. This ensures that the platform is not only functional but also consistent with the company's brand identity. We firmly believe in the principle of "Form follows function" and always strive to make the software as user-friendly as possible. In doing so, we strictly adhere to modern design systems such as Material Design, which served as our guide and was inspired by the Airbnb platform design. Such design systems help make our websites recognizable and easy to use.

Mobile Design and Responsiveness In der heutigen digitalen Welt werden 70% der Websites von mobilen Benutzern besucht. Daher war es für uns von größter Bedeutung, zuerst an unser Mobile Design und die Responsiveness zu denken. Mit Figma konnten wir sicherstellen, dass unsere Designs nicht nur auf Desktops, sondern auch auf Tablets und Smartphones einwandfrei funktionieren. Dies garantiert ein nahtloses Benutzererlebnis, unabhängig vom verwendeten Gerät.

Target audience-oriented design

Another crucial aspect was the consideration of the target audience. Through the "User Journeys" created in the concept phase, we had a clear understanding of who our main users would be. This allowed us to create a design that is tailored specifically to the predefined individuals, whether it's the average citizen of Berlin who wants to live sustainably or the staff of Berlin Recycling GmbH who will use the platform for location management and user information approval.

Conclusion

The design phase was a critical step in our collaboration with Berlin Recycling GmbH. By combining user-centered design principles and the use of Figma, we were able to create a platform that is not only aesthetically appealing but also functional and user-friendly. With such a well-thought-out design, we are confident that the platform will successfully contribute to making life in Berlin more sustainable.

Figma
Figma

Used technologies and their application

Django: Django is a powerful web framework based on Python. For this project, we used Django as the backend technology to create a robust and scalable platform. In particular, we integrated a customized geolocation database to provide users with accurate location information.

React: React ist eine führende Frontend-Bibliothek, die es uns ermöglichte, eine reaktive und benutzerfreundliche Oberfläche zu erstellen. Mit React konnten wir die von Berlin Recycling GmbH bereitgestellten Daten nahtlos integrieren und den Benutzern eine flüssige Interaktion mit der Plattform bieten.

TailwindCSS: Dieses Utility-first CSS-Framework half uns, das Design, das eng an die Material UI-Prinzipien angelehnt war, schnell und effizient umzusetzen. Es ermöglichte uns, ein responsives Design zu erstellen, das auf verschiedenen Geräten gleichermaßen gut aussieht und funktioniert.

MapboxGL: Um den Benutzern eine visuelle Darstellung der Standorte und Veranstaltungen im Bereich der Kreislaufwirtschaft zu bieten, haben wir MapboxGL verwendet. Dieses Tool ermöglichte es uns, interaktive Karten in die Plattform zu integrieren, die den Benutzern helfen, die gewünschten Orte leicht zu finden.

Our approach and guiding principles

A central principle in this project was simplicity. We have found that unnecessary complexity not only prolongs development times but also increases costs. Therefore, we focused on prioritizing the user experience and aligning our technology selection accordingly.

By using advanced tools like Github's Copilot, we were able to continuously optimize our development process. Copilot helped us write code more efficiently and avoid common development issues, highlighting our commitment to efficiency and innovation.

Project result

The project was delivered on time and within budget. The combination of careful planning, the right technology stack, and a dedicated team led to a successful implementation. The platform we developed for Berlin Recycling GmbH will not only help reduce waste in Berlin but also raise awareness of the circular economy and make city life more sustainable.

Finally, we can proudly say that our work will make a real difference for the citizens of Berlin and the environment as a whole.

Django
Django
ReactJS
ReactJS
TailwindCSS
TailwindCSS
MapboxGL
MapboxGL