Guamayu Website
Überblick
Dieses Projekt ist während meines Praktikums, innerhalb des Studiums an der FH Potsdam, bei Studio nunc entstanden. Der Auftrag bestand darin, eine Storytelling Website für den Kunden Guamayu zu erstellen. Kund*innen sollten durch diese Seite auf verspielte Art und Weise die Vorteile der Marke entdecken und zum Kauf angeregt werden. Ziel war es, dass möglichst viele Kund*innen von der Storytelling Seite zum online Shop kommen. Weil die Website hauptsächlich über einen QR Code erreicht werden sollte, lag der Fokus in erster Linie auf einer guten UX am Smartphone.
Prozess & Ergebnisse
Storytelling Recherche
Wireframing (Miro)
Storytelling Recherche
Storytelling Recherche
Bevor ich mit der Konzeption beginnen konnte, machte ich eine kurze Recherche zu Storytelling Websites. Die Erkenntnisse habe ich anschließend genutzt um erste Entwürfe auf Wireframe Basis in Miro zu erstellen.
Nach einer kurzen Feedbackschleife mit dem Kunden, konnte ich zur Gestaltung in Figma übergehen. Dort erstellte ich erst die Mobile Version und aufbauend drauf die Version für den Desktop. Durch diesen Ansatz, sind die Screens wirklich auf das Nötigste reduziert, was zu einer besseren Nutzer*innen Erfahrung beiträgt.
Damit die Erfahrung noch lebendiger wird, sollte die Story an bestimmten Punkten mit Animationen verstärkt werden. Diese erstellte ich in After Effects und exportierte sie als Lotties, um sie in Webflow einbinden zu können. Mithilfe von Webflow konnte ich dann die in Figma gestaltete Website realisieren.
Recherche
donateresponsibly.org — Die Seite erzählt eine Geschichte mithilfe einer Linie, die sich über die ganze Seite erstreckt.
ikilledacactus.com — Auf dieser Seite wird mit großer Typo und verspielten Scroll Animationen gearbeitet.
kbv-wie-gehts.de — Hier werden die Nutzer*innen in Slides (wie Powerpoint) durch die Story geleitet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero
Wireframes
Einstieg — Mit den ersten Screens soll direkt eine Neugier bei den Nutzer*innen entstehen, damit sie sich die ganze Seite ansehen.
Guatemala — Durch einfach zu verstehende Zahlen und Fakten, untermalt mit Infografiken, wird anschließend die Situation in Guatemala geschildert.
Die Partner*innen — Um die Story mit einer positiven Stimmung zu beenden, wechselt die Hintergrundfarbe von einem dunklen lila zu weiß.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero
Komponenten
Prototyp
Guatemala — Um sich besser in die Lage hineinversetzen zu können, beginnt die Story mit einer Landkarte auf der das Land eingezeichnet ist. Die Nutzer*innen werden also auf eine kurze Reise mitgenommen.
Guatemala — Hier lernen die Nutzer*innen die junge Bevölkerung und ihre Herausforderungen kennen. Um die Story etwas aufzulockern, fliegen die Herausforderungen auf einem Band über den Screen.
Guatemala — In diesem Screen ist das Kernelement ein animiertes Tortendiagramm. So werden die Zahlen noch anschaulicher. Wollen die Nutzer*innen mehr wissen, können sie über ein Modal tiefer eintauschen.
Die Partner*innen — In diesem Abschnitt geht es um die Ziele von MAIA, einem Partner von Guamayu. Auch hier habe ich wieder versucht durch eine interessante Animation die Story etwas aufzulockern.
Website
Die Website habe ich mithilfe von Webflow aufgebaut. Das Video zeigt einen Durchlauf der Storytelling Seite. Möchtest du die Seite einmal selbst erleben, dann klicke hier.
Learnings
Storytelling Recherche
Wireframing (Miro)
Storytelling Recherche
Storytelling Recherche
Bei dem Projekt hatte ich viele Freiheiten in der Gestaltung. Da ich jedoch selbst für das Zeitmanagement zuständig war, musste ich immer abwägen, was machbar ist und was nicht. Dabei habe ich viel über Zeiteinteilung lernen können.
Da ich an dem Projekt alleine gearbeitet habe, war ich ebenfalls für den Kundenkontakt zuständig. Ich musste mir also überlegen wie ich die Zwischenschritte dem Kunden präsentiere und vor allem auch wann. Auch hier konnte ich sehr viel lernen.
Neben meinem ersten Portfolio war das das erste Kunden Projekt was ich mithilfe von Webflow umgesetzt habe. Dadurch konnte ich einige Fehler vermeiden, die ich noch im ersten Projekt gemacht habe und generell auch etwas sauberer arbeiten. Leider haben ich mir mit der gestrichelten Linie, die über die ganze Seite geht, keinen großen Gefallen getan. Aus diesem Grund war das Optimieren für die verschiedenen Screen Größen wieder nicht so einfach.
Mit Webflow zu arbeiten macht mir nach wie vor großen Spaß. Insbesondere das "Tüfteln" um alles so umzusetzen wie es Figma geplant war, ist für mich eine angenehme Herausforderung.
Nächstes Projekt