Konzeption und Umsetzung einer interaktiven Webseite zum Thema „Nachhaltigkeit“
DIE IDEE Nachhaltigkeit für alle erlebbar machen! Der informative Mehrwert soll dank abwechslungsreicher Interaktionsmöglichkeiten ansprechend dargeboten werden und Interessierte dazu animieren, sich mit Freude ganz neue Denk- und Lebensweisen aneignen zu wollen.
Durch die wachsende Bedeutung des Themas Nachhaltigkeit steigt die Informationsdichte auf digitalen Plattformen. Das Überangebot an Informationsquellen erschwert dabei vielen Interessierten den Einstieg in die Thematik. Die im Rahmen des Designprojeks konzipierte Webseite soll Nutzenden ebendiesen Einstieg erleichtern und ihnen die Möglichkeit geben, verschiedene Aspekte der Nachhaltigkeit interaktiv zu erforschen.
• Gestaltung/Programmierung & Realisation
• Projektorganisation als Team
• Arbeit mit der Zielgruppe vertiefen
• Planung von Szenarien mit Interaktion
• Kognitiv-Ergonomische Aspekte durch Design-Research anwenden
• Projektteam: 3 Personen
• Programme: Adobe XD, Fresco & Illustrator, LamaPoll
• Eigene Schwerpunkte: Mitbewerberanalyse, Personas, SWOT-Analyse, Beispielhafte Szenarien, Umfrage, Wireframes, Prototyp Landingpage & Kursseite
Einige der im Zuge des Projekts erstellten Wireframes. Darstellung der Landingpage mit Infotext- und Bildbereich (oben links) sowie einer Übersicht von Shopvorschlägen (unten links). Kursseite mit einer unterteilten Übersicht an angebotenen Kursen (oben rechts) und Shopfinder mit umfangreicher Filterfunktion (unten rechts).
LOGO & ILLUSTRATIONEN
Das Logo und einige der Illustrationen wurden für dieses Projekt digital per Hand gezeichnet, um die dynamische und
lebensfrohe Gesamtwirkung der Website widerzuspiegeln.
• Hauptfarben des Styleguides
• Einfacher Stil mit wenigen Details
• Nicht zu aufdringlich & ablenkend
• Logo minimalistisch & farbkompatibel
Die Startseite bietet einen Überblick über alle wesentlichen Elemente der Webseite. Der Fokus liegt hierbei darauf, die Besucherinnen und Besuchern über das Angebot zu informieren und ein Interesse an den Themen rund um Nachhaltigkeit zu erzeugen. Die Informationen sind in einzelne Abschnitte unterteilt, die Bereiche sind aber auch über den Header erreichbar.
ACCOUNT
Um die Kurse zu absolvieren, müssen Nutzende einen Account erstellen. Anschließend können sie einen freiwilligen Selbsttest
machen und damit die eigenen Präferenzen festlegen. Eine Auswertung gibt das Schwierigkeitslevel an, das am besten zu der
nutzenden Person passt.
Level 1 Wachsende Weide
Level 2 Aufstrebender Ahorn
Level 3 Erfahrene Eiche
KURSSEITE
Die Kursseite bietet eine Übersicht der angebotenen Kurse (links). Sobald Nutzende eingeloggt
sind, ändert sich das Erscheinungsbild und der angezeigte Content ist auf die Interessen angepasst. Zusätzliche
Reiter (rechts) ermöglichen eine Übersicht der eigenen Leistungen und ein weiterer Bereich zeigt noch nicht beendete Kursen.
Über ein Filtermenü kann das Angebot nach mehreren Kategorien durchsucht werden. Alle Kurse beinhalten die Informationen zur Kategorie und dem Kursinhalt, zur Bearbeitungsdauer sowie zu den Punkten, die gesammelt werden können.
KURS: DER WEG DER KLEIDUNG
Dieser Kurs ist in sieben Lektionen unterteilt, die in einer Übersicht grafisch dargestellt werden. Nutzende können
anhand des Beispiels eines T-Shirts lernen, welchen Weg die Kleidung im Zuge der Produktion zurücklegt.
• Einzelne Abschnitte in mehreren Lektionen
• Navigation und Fortschrittsbalken als Übersicht
• Icons & Grafiken zur visuellen Darstellung
• Quiz zum Kursende, um das Erlernte zu vertiefen
SHOPSUCHE
Auf dieser Seite kann nach nachhaltigen und fair produzierenden Shops gesucht werden. Per default werden zunächst
einige Vorschläge und beliebte Marken angezeigt. Eingeloggte Nutzerinnen und Nutzer erhalten eine ihren Interessen
entsprechende Auswahl an Shops.
Über ein Filter-Menü kann aber auch nach bestimmten Kategorien und Interessen gefiltert werden. Alternativ besteht mithilfe der Suchleiste eine Suche nach Schlagwörtern erfolgen. Eine weitere Einstellmöglichkeit bietet die Option, nach Onlineshops oder Shops vor Ort zu filtern.