in wupper­tal

Nachaltigkeit in Wuppertal is a platform with various services related to sustainability in the city of Wuppertal.

  • Creative Direction
  • Conception
  • UX Research
  • UI Design
  • Webdevelopment
UI Case Study by Björn Wieland



Nachaltigkeit in Wuppertal primarily offers the user a variety of ways to live sustainably via a digital map. Starting from your own location, organic shops, e-filling stations and charging stations, shops with sustainably produced clothing, and community meeting points are displayed in the area. These POI are provided with short descriptions and links.

How it all started…

Many good ideas arise from a need or problem. Thinking about what people still need seemed to be less effective than illuminating an existing problem and creating a solution.

Through social and public media, my partner and I have been confronted with the issue of sustainability more and more over the past two years, not least due to the committed and impressive appearance of Greta Thunberg. Terms like 'zero waste' were used more and more and sustainability was felt to be a trend for us.

Since we had often considered how to avoid more plastic waste and generally saving resources, we were fasting the decision to change our lifestyle. At the beginning it was only my partner who got informed and researched for weeks, with the conclusion that we were completely overwhelmed. With every new podcast we heard and every other guide we read, we felt more pressured to change everything as soon as possible.

The first idea...

After a good three weeks, our first conclusion was that there are too few local offers and information to help you live sustainably. And our idea was born. Like many of our generation, in the first instance we tried to find local offers via the internet and Google. Unfortunately we found very little. Regardless of whether on the topic of food or the other topics that require a sustainable life. There was sparse information about e-filling stations and climate fonts from the city, and just as little information about sustainability in Wuppertal from the Wuppertal Institute itself.

I wrote down the title: Sustainability in Wuppertal and immediately registered all the matching domains, which, which surprised me very much, had not yet been taken. From that point on, everything developed naturally.

First preview design scribble of the web application

I worked out my first rudimentary design draft into a presentable click dummy. Within two weeks I created a corporate logo and decided on the first house colors and the primary house font.



I developed a logo within two days. I chose gradients and pastel warm colors. The center of the logo is the suspension railway, the symbol of Wuppertal. The valley as such is abstracted by a leaf from whose origin the suspension railway emerges.

Overview of the logo development process


Definition of web components…

After defining general styles, company colors and fonts as well as the first graphics, I started creating the first web components. According to my design language system definition, these should also be usable across clients and devices.

Each component had to be used in a modular way to keep maintenance as simple as possible. For this I used a tile grid system, which enables me to arrange the content modules according to the desired viewport orientation.

In a desktop view, content can be arranged side by side and in a smartphone view one above the other.

Collection of four user interface components

Buttons & CTA elements

Another part of the web components are the button & CTA (call-to-action) elements. I defined buttons for each possible theme-related primary color in triplicate: a default state, a ghost state and a fill state with a color gradient. The ghost buttons stand for secondary CTA elements and the fill buttons for primary CTA elements.

Collection of buttons and button states from the design language system

The app views…

After completing a first set of components and design elements, I developed my app prototype based on the existing homepage. From a conceptual point of view, I tried to map the primary user flow, from the point of view of a person with the intention of locating the location, to get options shown on the map. Independently of the use case, I developed a navigation view for the sake of completeness.

Landing page mockup
Toggled navigation mockup
Topics Mockup
Maps and location app interface
Mobile POI filter
Maps and location app interface

Outlook webapp

In addition to the native app, which hopefully will be available for download at some point in the app & play store, I started parallel with the development of the web app, which should be accessible via the browser and can be saved as a progressive web app on the respective device. After the completion of the design components and the tile grid system, the prototyping of the first desktop views went quickly. Our first four areas for which data has been collected and sorted in the past weeks & months.

Next docunite