Präsentationsvideo
Plakate
Styleguide
Screencast
User Journey1: Neuer Benutzer
User Journey2: Produkt anpassen
Finaler Prototyp
Zwischenpräsentation
Abschlusspräsentation
------------------------
Nachhaltige Unternehmen
Unsere Präsentation untersucht drei Unternehmen auf die Nachhaltigkeit ihrer Produkte bzw. Services und stellt UX Chancen dar
UX-Chancen
In dieser Präsentation stellte ich UX-Chancen/ Verbesserungen für die Firma Biobiene vor. Dieses Unternehmen gab mir leider keine Antwort auf die Anfrage für ein Interview, deshalb entschied ich mich schlussendlich für die Stanzlösung von Yamaton Paper. Ihre Leistung ist es, passgenaue Stanzlösung(Passgenaues Inlay für z.B. Pakete) anzubieten.
Interview
Aufschlüsse:
Ich habe einige Aufschlüsse durch die Antworten von der Person bekommen.
Zum einen, dass es bei der Firma bisher noch keine Automation oder Designmodul zum Anpassen von Stanzlösungen gibt. Das heißt, wenn man eine Lösung für das Stanz-System benötigt, braucht man einen Termin und muss sich darüber Austauschen, um zusammen mit der Firma eine Lösung zu finden. Das ist ein sehr großer Zeitaufwand und viel extra Aufwand für den Betreiber
Mein Endprodukt wird ein Verpackungs - Konfigurator. Der Nutzen der Anwendung ist es, Verpackung zu minimieren, indem ein Passgenaues Inlay wie auch Paket hergestellt wird. Gleichzeitig wird dadurch die Sicherheit und das Design verbessert, was beim Endkunden einen besseren Eindruck hinterlässt und hochwertiger wirkt.
Es gibt schon ähnliche Gestalter wie
https://www.pacdora.com/de, was mich eher dazu Motiviert, etwas Besonderes zu machen, was es bisher noch nicht in dieser Art gibt. Das Interview brachte mich aber in die Richtung, das ein solcher Konfigurator im Unternehmen einen großen Nutzen hätte.
Brainstorming:
Idee, um die Nachhaltigkeit in den Vordergrund zu rücken und anschaulicher zu machen:
Die App zeigt, wie viel CO₂ oder Material durch optimiertes Design eingespart wird.
Produkt scannt man per Smartphone,
(LiDAR Scan) erstellt passende Verpackung.Die konfigurierte Verpackung lässt dich mittels AR auf den Schreibtisch oder Boden Projizieren und somit kann nachgesehen werden, ob das Produkt in die Verpackung passt.
Why How What
Why:
Ich möchte es kleinen Händlern (Freelancern) ermöglichen nachhaltig zu versenden. Gleichzeitig möchte ich das Problem, das Produkte in zu großen Verpackungen verschickt werden verhindern und die mit Plastikmaterial verschickten Pakete durch nachhaltige Materialien ersetzen um den Plastikverbrauch einzudämmen.
How:
Mit einem Verpackung Konfigurator werden Verpackungen individuell an ihre Produkte angepasst. Die Verpackungen werden aus Graspapier und anderen nachhaltigen Materialien hergestellt. Gleichzeitig wird sich um die Bestellung von Paketen gekümmert, welche genau auf das Produkt abgestimmt ist. Über eine einfache, übersichtliche digitale Plattform behalten Freelancer oder kleine Unternehmen den Überblick über Ihre Produkte.
What:
Ein Verpackungs-Konfigurator für Freelancer und kleine Unternehmen.
Personas
Thomas
Thomas Klein ist für meine Anwendung der Neueinsteiger.
Nutzungsszenarien für Thomas:
- Thomas erhält regelmäßig Online-Bestellungen von Privatkunden und Firmen für ein selbst produziertes, 3D gedrucktes Produkt. Bisher hat Thomas seine Produkte nur mit eigenen Verpackungen verschickt, welche ihm jetzt aber aus gehen. Thomas überlegt schon länger, auf eine hochwertigere und professionellere Lösung umzusteigen mit dem Konfigurator fällt es Thomas leicht, eine Verpackung zu konfigurieren.
- Thomas möchte es einfach haben, die Stanzung an das Produkt anzupassen. Dafür verwendet er die Funktion „3D Scann“. Damit ist es möglich, die Form des Produktes als Stanzung zu verwenden. Da Thomas bereits ein 3D Objekt von seinem Produkt hat, kann er dieses einfach hochladen.
Simon Fischer
Simon Fischer benötigt meine App, um eine Stanzlösung anzupassen
Nutzungsszenarien für Simon:
- Statt auf herkömmliche A3- oder A4-Rahmen zurückzugreifen, bestellt Simon nun maßgefertigte Rahmen für seine Bilder. Er konfiguriert die neue Größe online und gibt direkt eine Großbestellung auf.
- Da Simon bemerkt, dass sein Bestand an Verpackungen zur Neige geht, bestellt er die zuvor konfigurierte Variante einfach nach.
User Journeys
Thomas Klein
Szenario
Thomas sein Nebenjob als Verkäufer seiner 3D Lösungen vergrößert sich schlagartig. Bisher verwendete er handelsübliche Verpackungsfüllung, die ihm aber schon öfters Rücksendungen bescherte, da das Objekt beschädigt beim Kunden ankam. Deshalb überlegt Thomas in eine bessere Lösung zu investieren, die seine Produkte besser schützt und dazu noch hochwertig aussieht. Der Aspekt nachhaltig zu verschicken bringt ihn auf die Website von Yamaton Paper.
Simon
Szenario
Simon möchte seine neue Kollektion von Bildern verkaufen.
Die Bilder mit Bilderrahmen brauchen einen guten Schutz auf dem Transportweg zum Kunden. Deswegen kommt er auf sein altbewährtes Tool zurück. Simon ist zufriedener Kunde von Yamaton Paper. Die Stanzlösungen sind genau das Richtige, was er zum Schutz seiner Produkte braucht.
Nach getaner Arbeit macht sich Simon an die Arbeit und öffnet die App
Paper Prototyps
Meine Paper Prototyps ergaben ein erstes Konzept der Konfigurator App. Bisher waren noch viele Funktionen unklar und man konnte sich nicht richtig vorstellen, wie man später Konfigurieren kann.
High-Fidelity-Prototyp
Mein High-Fidelity-Prototyp war mit den UI-Kits von Google, Apple und Figma gebaut. Außerdem baute ich fehlende Icons selber nach. Dafür verwendete ich Affinity
Auf dem Screenshot sind die Unterseiten zum Konfigurieren der Stanzlösungen gezeigt.
Das ist mein Finaler High-Fidelity-Prototyp ohne Styling.
Moodboards
Das erste Moodboard ist ein Stil mit Schatteneffekten. Es gibt einige Unterschiede zum Glaseffekt bei z.B. Apples neuster UI.
Die Elemente sind nicht durchsichtig und die Tiefe ist nur durch Schatten bewältigt.
Mein zweiter Stil ist ein Flatdesign. Dieses ist derzeit sehr beliebt und wirkt ausgewogen. Auch kann man komplexe Apps mit diesem Stile verständlich machen.
Ich entschied mich aber letztendlich für den „NEUMORPHISM“ Stile, da ich etwas neue ausprobieren wollte und es zum technischen Aspekt passt.
Sections & Finalisierung
Ich arbeitete mit beiden Stilen unterschiedliche Seiteninhalte aus. Mit dem ersten Stile war ich letztendlich mehr zufrieden, weshalb ich mich für ihn entschied.
Ausarbeitung des Stils und Vervollständigung der Funktionen
Für die Startseite entschied ich mich Cards einzubauen, welche neue Funktionen, letzte Projekte und die Grundfunktionen anbieten. Des Weiteren ist die Navigation durch eine andere Farbe als der Hintergrund markanter.
Um Elemente vom Hintergrund abzuheben und dadurch übersichtlicher zu machen, verwendete ich einen Elevation Effekt. Eingabeleisten sind entgegengesetzt mit einem Inset Effekt „eingesetzt“. Dadurch entsteht eine Klare Hierarchie der Funktionstypen.
Der Nutzer muss Aktionen mit schweren Folgen mit einem Overlay zuerst bestätigen, bevor diese in Kraft tritt.
Außerdem machen Overlays auf Aktionen aufmerksam.
Nachdem der Nutzer „Neues Projekt“ auswählt, erscheint ein Onboarding mit den wichtigsten Funktionen, um eine einfache und reibungslose Bedienung vorauszusetzen.
Außerdem wird der Nutzer aufmerksam gemacht, dass er mit dem Button „Kundenservice“ mehr Funktionen bekommen kann.
Wenn auf ein ? geklickt wird, erscheint immer ein Overlay, dass diese Funktion näher beschreibt.
Die Funktion des Lidar-Scannens müsste Softwaretechnisch gelöst werden. Es gibt bereits einige Anwendungen, die ein genaues 3D Modell mithilfe von Lidar-Scan erzeugen.
Es besteht auch die Möglichkeit, eine STL-Datei aus den Smartphone Dateien auszuwählen. Wenn also schon ein 3D Modell des Produktes besteht, muss kein 3D-Scan durchgeführt werden.
Die Eingabe der Maße ist durch den neuen Aufbau jetzt einfacher.
Mit der Eingabe der Länge, Breite und Höhe wird das 3D-Modell in der Skalierung angepasst.
Danach folgen die 5 Schritte zum Anpassen der Stanzlösung.
Der erste Schritt: Zuerst muss man festlegen, wie sehr die Papierwabenplatten gedrückt werden sollen. Durch dieses Verfahren erreicht man eine höhere Belastbarkeit des Kartons.
Der zweite Schritt: Danach muss man entscheiden, an welchen Seiten des Objektes die Verpackung verwendet wird. Falls Unklarheiten bestehen, kann man direkt beim Service nachfragen.
Der dritte Schritt: Im Anschluss muss man die Überlappung der Verpackung am Objekt anpassen. Man sollte sich hier an den stabilen Grenzen des Produktes orientieren. Die Verpackung wird dann entsprechend gestanzt (bis maximal 60 mm Höhe), um einen sicheren Halt zu gewährleisten.
Der vierte Schritt: Nun müssen die Druckaufnahmepunkte definiert werden. Dabei handelt es sich um Stellen, an denen Kräfte sicher abgeleitet werden können. Man muss sicherstellen, dass Druck nur dort ausgeübt wird, damit keine Schäden oder Verformungen entstehen.
Der fünfte Schritt: Zuletzt muss man beachten, dass die Maschine die Kante beim Pressen nicht in die Pappe schneidet. Auf diese Weise erzeugt man einen sauberen Übergang an der Materialkante.
Außerdem ist die Projektübersicht wichtig für den Konfigurator.
Nachdem man auf das Projekt klickt, kommt man zur Detailseite des Projektes. Dort kann man das Projekt noch einmal anpassen, also die Maße und Stanzung ändern.
Zudem steht einem die Möglichkeit Pakete zur Bestellung hinzuzufügen, die Umweltfreundlichkeit und Siegel anzusehen und das Projekt zu löschen.
Die Angebotsübersicht fasst die Maße und andere Werte zusammen und man kann die gewünschte Menge angeben.
Nachdem die Angaben geprüft wurden, wird das Angebot bearbeitet und erstellt. Der Nutzer bekommt eine E-Mail und kann seine Angaben Prüfen und Bestellen.
Zuletzt folgt der Bezahlvorgang, welcher von einem „Gesendet“ Overlay abgeschlossen wird.
Der Profilbereich bietet die Möglichkeit, Einstellungen vorzunehmen sowie das Profil anzupassen oder das Aussehen zu ändern.
Das helle Design sieht dabei gut aus, aber die anderen beiden benötigen noch eine größere Anpassung von z.B. Schatteneffekten.
Die Funktion „Bestellung“ ist noch nicht benutzbar, hier könnte man sich seine letzten Bestellungen ansehen.
Das „Über uns“ führt direkt zur Website von Yamaton Paper
Der Tab auf den Service Button führt direkt zu einem Großen Overlay. Von dort aus kann man einen Chat starten, ein Meeting vereinbaren oder direkt anrufen.
Arbeit mit Variablen
Den Finalen Prototyp der App versuchte ich mit den Figma Variablen umzusetzen. Dabei verwendete ich Text-/ Farb- und Nummer Variablen, welche für unterschiedliche Zwecke sinnvoll sind, z.B. Um die Anmeldedaten zu speichern und beim nächsten Mal wieder anzeigen zu lassen. Oder die Quantität bei der Produktauswahl auf einen anderen wert setzen zu können, ohne immer wieder einen neuen Frame zu erstellen.
Auch konnte ich die After Effects Animationen mit dem Hovern über z.B. den Slider ändern.
Blender Animationen
Um die Darstellung und Bedienung des User Interfaces realistisch Umzusetzen, verwendete ich Blender. Es beanspruchte etwas Zeit, um mit der Animation in Blender zurechtzukommen, aber nach etwas Einarbeitung und einigen YouTube-Tutorials war es auch möglich eine Zeichenanimation zu erstellen.
Icons
Während der Erstellung meines Prototyps benötigte ich immer neue Icons. Dafür suchte ich mir ähnliche Symbole oder Bilder auf Google und erstellte dazu Icons.
Logo
Um den Konfigurator als eigenständiges Tool zu vervollständigen, habe ich für das Präsentationsvideo ein passendes Logo entworfen. Der Markenname Easy Stanzr leitet sich direkt aus der Funktion der App ab: Er steht für eine intuitive Bedienung (Easy) und spezialisierte Stanzlösungen (Stanzr).
UX of the Week
Interface Komponente
