Designentwürfe
Für den Prototyp aus Projekt 1 wurde während der Testphase Feedback vonseiten der Probanden aufgezeichnet und im Nachgang kritisch reflektiert. Daraus ergaben sich unter anderem Anforderungen, welche es bei der Entwicklung des MVPs zu berücksichtigen gab. Für diese Anforderungen war das ursprüngliche Design nicht ausgelegt. Also wurde die Entscheidung getroffen, für den MVP neue Screens, vor allem für den Desktop, zu gestalten.
Alle ausklappbaren Bereiche beinhalten Bilder zu den jeweils behandelten Screens.
Für ein stimmiges Gesamtbild wurde sich für eine möglichst begrenzte Auswahl an Farben gehalten. Die Farbpalette selbst soll einen nachhaltigen/grünen Gesamteindruck erwecken. Die Farben sind so gewählt, dass es bei jeglicher Kombination, keine Komplementärkontrast vorliegen, um eine Flimmerwirkung an niedrigauflösenden Bildschirmen zu vermeiden.
Farbpalette
Es wurden zwei Schriftfamilien gewählt. Für eine Hervorhebung, zB von Überschriften, kommt Roboto Slab zum Einsatz. Diese ist eine Serifenbetonte Schrift, die für den Einsatz in digitalen Medien optimiert wurde. Durch die prägnanten bockigen Serifen kommt es, auch bei Displays mit niedriger Auflösung, an diesen nicht zu einer Treppenbildung. Die Roboto Slab Font unterstützt Ligatur, was eine gute Lesbarkeit begünstigen kann.
Für den Text wird die Schriftfamilie Roboto verwendet. Diese ist eine Sans Serifen Schrift, die ebenfalls für den Einsatz in digitalen Medien optimiert wurde. Sie ist leicht und modern und wird für Fließtexte verwendet. Die Roboto Font unterstützt Ligatur, was eine bessere Lesbarkeit begünstigen kann.
Typography
Alle folgenden Screens wurden für die Desktopansicht entworfen und sind auf eine Breite von 1200px ausgelegt. Fließtexte wurden so gesetzt, dass pro Zeile nicht mehr als 80 Zeichen Platz finden, um eine gute Lesbarkeit zu gewährleisten.
Auf jedem Screen finden sich Navigation und Footer. In der Navigation gibt es schlicht das Batta Logo, welche die Benutzer zur Startseite bringt, Verknüpfungen zu den Hauptpunkten und die Login (bzw. Abmelden) Schaltfläche. An der rechten Seite findet sich außerdem Platz für einen möglichen Language Toggle. Der Footer beinhaltet eine Sitemap, eine Newsletter-Registrierung und die Social-Media-Kanäle der Plattform.
Für die Startseite gibt es zwei Ausgangspunkte, welche sich dadurch unterscheiden, ob Nutzer:innen angemeldet (Dashboard) sind oder nicht (Home).
Besucht man die Seite zum ersten Mal oder ist nicht angemeldet, liegt der Fokus der Startseite darauf, das Konzept von Batta zu vermittelt und Nutzer:innen direkt über den CTA im Header auf Shops aufmerksam zu machen. Ansonsten werden aktuelle Blogbeiträge, zB zum Thema Nachhaltigkeit, angezeigt, eine einfache textuelle und/oder audiovisuelle Vorstellung des Batta Konzepts präsentiert und über die Partner von Batta aufgeklärt.
Besuchen registrierte Benutzer:innen die Startseite erhalten diese ein Dashboard, mit einer direkten Suche für Shops in der Nähe und eine Übersicht von neuen Artikeln und den bereits erworbenen Gutscheinen.
Home
Dashboard
Eine einfache Seite mit Möglichkeit zum Anmelden oder Registrieren.
Login
Auf dieser Seite ist es möglich, Shops zu suchen. Das könnte mittels Standort, PLZ oder Adresse funktionieren. Alle passenden Treffer werden beim Scrollen so lange nachgeladen, bis er keine mehr in Reichweite gibt.
Durch Klicken auf das Filter Icon rechts in der Suchleiste lassen sich spezifischere Suchfilter einstellen. Diese werden dann unterhalb der Suchleiste angezeigt.
Die Ergebnisse einer Suche zeigen ein Vorschaubild des Shops, einige Informationen zum Shop und die durchschnittliche Bewertung.
Stores
Suchfilter
Auf einer Store Seite werden im Header Informationen zum Shop selbst präsentiert. Außerdem soll es Shopbetreiber:innen möglich, sein ein Bild von sich hinzuzufügen, um eine Nahbarkeit zu erzeugen.
Unter dem Header finden sich Bewertungen und die neusten Kommentare. Die angezeigten Kommentare in der Vorschau lassen sich über die Pfeile rechts (und links) weiter navigieren. Außerdem ist es möglich über die Schaltflächen auf der rechten Seite, eine eigene Bewertung inklusive Kommentar zu verfassen, oder in einer Listenansicht alle Kommentare zu sehen.
In dem Abschnitt mit den beliebtesten Produkten sollen Shopbetreiber:innen selbst etwas aus ihrem Sortiment wählen können, um dies zu bewerben. Diese Produktbilder sind mit den Pfeilen links und rechts navigierbar. Auf der rechten Seite ist die Möglichkeit, einen ersten CTA für den Gutscheinkauf anzuzeigen.
In dem Videoabschnitt ist Raum zur Kommunikation für zB das eigene Nachhaltigkeitskonzept, verbunden mit einem CTA.
Mit dem Kauf eines Gutscheins sollen bestimmte Nachhaltigkeits-Boni verbunden sein. Dabei könnte es möglich sein, dass die Shops sich selbst mit darum kümmern. Dafür können Sie zusätzlich ihre Partner referenzieren, um für Nutzer:innen Transparenz zu erzeugen.
Im Galerieabschnitt wird den Shopbetreiber:innen die Möglichkeit geboten Bilder entweder des eigenen Shops oder zB aus der Herstellung ihrer Produkte mit Kunden zu teilen.
Im letzten Abschnitt können Shopbetreiber:innen Blogbeiträge referenzieren, die zu ihrer Nachhaltigkeitsphilosophie passen.
Store
Im Header wird weiterhin der Shop angezeigt, bei dem der Gutschein gekauft werden soll (mit weniger umfangreichen Informationen).
Auf der linken Seite ist ein hervorgehobener Bereich, dort wird visuell dargestellt, bei welchen Beträgen welche Nachhaltigkeits-Boni in Kraft treten.
Auf der rechten Seite ist ein typisches Formular, um den Kaufvorgang abzuwickeln. Bei der Auswahl eines Betrages verändert sich die Anzeige auf der linken Seite.
Gutscheinkauf
Im Header können Benutzer:innen eine kurze Information über sich selbst hinterlegen. Außerdem ist es dort für andere möglich mittels Klick auf das Herz, sich mit diesen auf der Plattform zu befreunden (vereinfacht das Verschenken eines Gutscheins).
Unterhalb des Header werden die Auszeichnungen angezeigt, die bereits erzielt wurden.
Es ist zudem möglich, favorisierte Shops und Artikel auf einem Profil einzusehen.
User-Public
