UX/UI-Designer

28.04. – 09.05.25

Case Study

Tanukin

Motivieren, gutes zu tun.

UX/UI-Designer

28.04. – 09.05.25

Case Study

Tanukin

Motivieren, gutes zu tun.

UX/UI-Designer

28.04. – 09.05.25

Case Study

Tanukin

Motivieren, gutes zu tun.

MVP & USP

Unsere App verbindet lokales, soziales Miteinander mit einem Belohnungssystem, das Menschen motiviert, durch gute Taten und nachhaltiges Verhalten ihre Nachbarschaft aktiv mitzugestalten.

Kernfeature der App ist ein Belohnungssystem, das mithilfe von Visualisierung die Nutzenden motiviert, nachhaltige lokale Angebote zu nutzen.

Nutzergruppen & Methodik

Nutzergruppen

LOHAS

Lokale Unternehmen

Veranstaltende

Methodik

Design Thinking

Scrum

Prototyping

Problem

Die bestehende Website der Stadt Frankfurt ist inhaltlich überfrachtet und unübersichtlich. Die tiefe Verschachtelung der Inhalte und eine unklare Navigation führen dazu, dass sich Nutzer nur schwer orientieren können.

Visuell wirkt das Design veraltet und wenig ansprechend. Es spiegelt weder den modernen, vielfältigen Charakter der Stadt wider, noch vermittelt es ein klares Markenbild.

Nutzergruppen & Ziele

Nutzergruppen

Bürger*innen

Wirtschaft

Tourist*innen

Ziele

Nutzerfreundlichkeit

Barrierefreiheit

Design / Branding

Problem

Die bestehende Website der Stadt Frankfurt ist inhaltlich überfrachtet und unübersichtlich. Die tiefe Verschachtelung der Inhalte und eine unklare Navigation führen dazu, dass sich Nutzer nur schwer orientieren können.

Visuell wirkt das Design veraltet und wenig ansprechend. Es spiegelt weder den modernen, vielfältigen Charakter der Stadt wider, noch vermittelt es ein klares Markenbild.

Nutzergruppen & Ziele

Nutzergruppen

Bürger*innen

Wirtschaft

Tourist*innen

Ziele

Nutzerfreundlichkeit

Barrierefreiheit

Design / Branding

Geschäftsmodell

Eine App für Nachhaltigkeit klingt erstmal gut, aber wie finanziert sich das Ganze in der Realität?

Nutzende

Nutzung der App und Angebote wird für die User kostenfrei sein

01

Werbepartner:innen

Zahlen für klassische Bannerwerbung und native Werbung zwschen den Angeboten.

02

Angebotspartner:innen

Zahlen für die Angebote für das Belohnungssystem, sobald die App Traktion bekommen hat.

04

Research

Zahlreiche Stadtportale wurden analysiert und daraus zentrale Anforderungen für den digitalen Auftritt einer Großstadt abgeleitet.

Intelligente Suche

Gute Suchfunktion mit datenbasierten Suchvorschlägen hilft ungemein um sich in der Fülle an Informationen zurechtzufinden.

01

Barrierefreiheit

Menü zur Barrierefreiheit sollte prominent angeboten werden.

02

Navigation

Menünavigation darf nicht zu verschachtelt sein, damit User einen guten Überblick behalten.

04

Mobile First

Da ein Großteil der Nutzer Stadtwebsites über mobile Endgeräte aufruft, muss das Design von Anfang an für das Mobilformat optimiert sein.

04

Research

Zahlreiche Stadtportale wurden analysiert und daraus zentrale Anforderungen für den digitalen Auftritt einer Großstadt abgeleitet.

Intelligente Suche

Gute Suchfunktion mit datenbasierten Suchvorschlägen hilft ungemein um sich in der Fülle an Informationen zurechtzufinden.

01

Barrierefreiheit

Menü zur Barrierefreiheit sollte prominent angeboten werden.

02

Navigation

Menünavigation darf nicht zu verschachtelt sein, damit User einen guten Überblick behalten.

04

Mobile First

Da ein Großteil der Nutzer Stadtwebsites über mobile Endgeräte aufruft, muss das Design von Anfang an für das Mobilformat optimiert sein.

04

Design

Design

Design

Durch warme Farbwelten, organische Formen und ein freundliches Maskottchen entsteht ein einladender Look, der Nachhaltigkeit nahbar macht und die Zielgruppe emotional anspricht.

Beim Design von Tanukin lag der Fokus auf einer harmonischen Verbindung aus Funktionalität und Emotionalität.


Tanukin Logo. Grün auf beigem Hintergrund mit orangener geschwungener Fläche am unteren Rand.
Tanukin Logo. Grün auf beigem Hintergrund mit orangener geschwungener Fläche am unteren Rand.
Tanukin Logo. Grün auf beigem Hintergrund mit orangener geschwungener Fläche am unteren Rand.

Farben

Warme und natürliche Farben unterstreichen den Nachhaltigkeitsaspekt der App.

Individuelle Illustrationen mit verschiedenen Szenen des Tanukin-Maskottchens runden das Design ab.

Typografie

Futura

Satoshi, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Illustration: Tanukin gießt Blumen.
Illustration: Tanukin am Stand mit regionalem Essen.

Farben

Warme und natürliche Farben unterstreichen den Nachhaltigkeitsaspekt der App.

Individuelle Illustrationen mit verschiedenen Szenen des Tanukin-Maskottchens runden das Design ab.

Typografie

Futura

Satoshi, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Illustration: Tanukin gießt Blumen.
Illustration: Tanukin am Stand mit regionalem Essen.

Farben

Warme und natürliche Farben unterstreichen den Nachhaltigkeitsaspekt der App.

Individuelle Illustrationen mit verschiedenen Szenen des Tanukin-Maskottchens runden das Design ab.

Typografie

Futura

Satoshi, Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.

Illustration: Tanukin gießt Blumen.
Illustration: Tanukin am Stand mit regionalem Essen.

Mobile Screens

Map

Alles auf einer Karte

Die Karte bietet einen Überblick über alle Partnerangebote und fungiert zugleich als Startscreen.

Map

Immer den Überblick behalten

Die Listenansicht zum Ausziehen bietet die Möglichkeit, durch alle Angebote in der Nähe zu scrollen. Optional können auch Filter aktiviert werden.

Events

Zusammen nachhaltig

Der Events-Bereich bietet eine Übersicht über Events in der Nähe, rund um das Thema Nachhaltigkeit.

Punktesystem

Code scannen…

Sobald ein Angebot (z.B. Einkauf, Event, Kleidertausch, etc.) wahrgenommen wurde, kann bei den Anbietenden Personen oder Unternehmen ein QR-Code gescannt werden.

Punktesystem

…und Punkte sammeln

Diese können im Anschluss gegen Belohnungen wie Gutscheine, Rabatte und andere Vorteile bei Partnern eingelöst werden können.

Punktesystem

Noch mehr Motivation

Punkte-Booster und Medallien motivieren zusätzlich, Ziele zu verfolgen.

Weitere Screens

Weitere Screens

Verschiedene Mobile-Screens der App Tanukin auf einer Fläche
Verschiedene Mobile-Screens der App Tanukin auf einer Fläche
Verschiedene Mobile-Screens der App Tanukin auf einer Fläche