Julia Stübner
UX|UI Design
REPAIR APP
Produkt Entwicklung, UX | UI Design
Abschlussarbeit UX Design Bootcamp
Produkt Entwicklung, Research, Konzeption,
Realisation in FIGMA
Research - Planung, Durchführung und Analyse, Erstellung Personas,
User Journey, Wireflow, Design System, Komponenten, Prototyping
​
Der Grundgedanke
​
Die Entwicklung der Produkt Idee basiert zum einen auf meinem persönlichen Bestreben möglichst bewusst zu konsumieren und rücksichtsvoll mit den mir zu Verfügung stehenden Ressourcen umzugehen.
Diesen Mehrwert soll mein Produkt den Nutzenden liefern.
Die Herausforderung
​
Wie lassen sich Menschen dazu animieren mehr Umweltschutz zu leben?
Der Ansatz zur Lösung
Eine erste Nutzerforschung ergibt, dass das Thema Umweltschutz den meisten Teilnehmenden am Herzen liegt, die Bereitschaft den eigenen Standard und Konsum zu reduzieren aber niedrig ist. Das Thema Hilfe zur Emissions Reduktion, meine erste Idee, schied somit aus.
Weitere Recherche lenkte den Fokus auf das Thema Reparierbarkeit, welches zunehmend an Relevanz gewinnt.
In Brüssel wird 2005 die erste Europäische Ökodesign-Richtline (Anforderungen an die Reparierbarkeit) beschlossen. Sie definiert Mindestanforderungen an das Produktdesign, nimmt so Hersteller in die Pflicht Produkte umweltfreundlich zu gestalten.
In Deutschland findet die Richtline als Energieverbrauchsrelevante-Produkt-Gesetz ihren Platz in der Verfassung.
Desweiteren erkennt das Zukunftsinstitut, die Etablierung eines neuen Werte-Sets im Megatrend Neo-Ökologie und bezeugt somit aus einer anderen Perspektive die Relevanz des Themas.
Research & Analyse
Umfrage
Zur Validierung und Konkretisierung der Idee untersuche ich das Nutzerverhalten mit einer Umfrage ( 60 Teilnehmende), gefolgt von 3 Interviews.
Die drei nebenstehenden Punkte kristallisieren sich heraus:
Personas
Die Umfrage und zusätzliche Interviews bilden die Grundlage für zwei mögliche Nutzergruppen, vertreten durch Boi Bastler und Sonja Sustainable.
Für die weitere Ausarbeitung des Projektes legte ich den Fokus auf ein Scenario, welches Sonja Sustainable während der Nutzung der REPAIR App durchläuft.
Definition des Problems
​
Der Wohlstand von morgen beruht auf neuen Werten und auf einem neuen Begriff von Konsum, welcher auf qualitative statt quantitative Kriterien setzt.
Mit REPAIR etablieren wir eine neue Art des Verbrauchens:
Weg vom Verzicht, hin zu einem intelligent-nachhaltigen Umgang mit den Ressourcen.
​
Die Zeichen stehen auf REPARATUR
Die Produkt Vision
​
Mit der App soll User*innen ein Tool an die Hand geben werden, welches sie einfach mit allen, für eine Reparatur benötigten Informationen versorgt, sie zudem ermutigt, sich an eine Reparatur zu wagen.
​
Handlich und immer griffbereit auf dem Smart Phone. Zur Reparatur in der Garage, der Werkstatt oder beim offline Bauteile Einkauf im Fachgeschäft.
Durch das Mitwirken der Nutzer entsteht eine Plattform, welche Erfahrungen und Wissen sammelt, der Gemeinschaft zur Verfügung stellt, den Austausch fördert und dazu beitragen soll, das Thema aus seiner Nische zu holen.
Wissen kann mit Freunden geteilt, Anleitungen und Profile archiviert werden.
​
Die APP befähigt die Nutzenden Defekte zu beurteilen und auf Machbarkeit zu prüfen, liefert zukunftsfähige und pragmatische Lösungsansätze, bestärkt den Nutzer durch Rückmeldung anderer Nutzer in ihrem Tun, hilft den Wissensschatz zu erweitern, speichert die Erfolge und verschafft so zusätzliche Erfolgserlebnisse.
Wissens-Transfer findet statt.
Die Reparatur in Eigenregie gewinnt an Popularität.
Konzeption der Anwendung
Die Anwendung strebt eine optimale mobile Nutzbarkeit an und basiert auf folgenden Design Prinzipien:
Konzeption
Informations Architektur
Wireframes
Startscreen
-
Suchoption
-
Feature beste Anleitungen
-
Erstellen eigener Anleitungen
-
Suche über Kategorien
-
Liste Kundenhotline
-
Liste Werkstatt
Anleitung
-
Coverbild
-
Hintergrund Infos zum Autor*in
-
Materialliste
-
Werkzeugliste
-
Schritt für Schritt Anleitung
-
Option - Teilen des Erfolgs
-
Option - Bedanken beim Autor*in der Anleitung
-
Option - Anleitung an Freunde schicken
Nutzer Profil
-
Aktiv seit
-
Erfolgreich anderen Useren gehofen
-
Erfolgreich Dinge repariert
-
Liste von Anleitungen, die dem User geholfen haben
-
Liste von Anleitungen, die der User verfasst hat
USER FLOW
Scenario:
Sonja hat einen Display Defekt. Der Screen ist gebrochen, lässt sich aber benutzen.
Sonja ist handwerklich fit und interessiert.
Sie öffnet die App um zu prüfen ob die Reparatur für sie machbar oder ein Fall für einen Fachmenschen wäre.
Sie gibt in der Suchmaske passende Stichpunkte ein, um nach Erfahrungsberichten anderer User bzw. nach Anleitungen zu suchen.
Suche über Suchfeld, zu ungenau.
Durch die Filter lässt sich der Schaden besser definieren.
Sie findet rasch ihr Handymodell mit dem passenden Defekt.
Sie scrollt durch die vorgeschlagenen Anleitungen,
und deren Einschätzung zum Schwierigkeitsgrad.
Die Anleitung von Boi erscheint ihr am besten.
Ein kurzer Blick auf sein REPAIR Profil baut Vertrauen in sein Wissen auf.
Sonja macht sich ein Bild.
Der stets präsente Zugriff auf professionelle Unterstützung, durch Links zu passendene Werkstätten und Kundendienst, bietet der Userin eine gewisse Sicherheit im “Notfall”.
Bestellt die Ersatzteile (Affiliate-Link) und besorgt die benötigten Werkzeuge.
Sie merkt sich die Anleitung in den Favoriten.
Mit Hilfe der Schritt für Schritt Anleitung ist sie erfolgreich.
Der Stolz und die Freude über das bewältigen der Aufgabe ist groß.
Sie schickt, mit einem Click auf den “Danke-schön Button” einen Gruß an Boi, dem Verfasser der Anleitung.
Die Interaktion mit dem Verfasser der Anleitung und das Abschliessen des Projekts hält Sonja weiter in der App, die ihre Mühe in der “Aufwertung” ihres Profils dokumentiert.
Eine weitere “geschafft Faust” erscheint in ihrem Profil.
Sonja ist super happy und teilt ihren Erfolg mit ihren besten Freunden.
WIN, WIN, WIN. App schliessen!
User Interface Design
Foundation
Color Library
Primary / Brand
use primary 500 token for Accents in header & footer/navbar section
Neutral
use neutral 700 token for headlines, subheadings and body textuse neutral 300 token for inactive headlines, subheadings and body text
Accent colors
Set Accents / Call to Action color
Status
Information of action and status
Foundation
Typography
​
Use Font Familiy Roboto in sizes generated in major second steps( *1.125) combined with Line Height *1.3Consider the general look and feel of the product while choosing font color.Make sure to use 500 or 700 token for headlines, typography color with good contrast.
abcdefghijklmnopqrstuvwxyz
ABCDEFGHIJKLMNOPQRSTUVWXYZ
1234567890
Roboto Bold
Headline and Subheadlines
Body Text
Library
Icons
Phosphor ICons 2.0 BOLD
Make sure to use the neutral-700 step token for Icon color with good contrast.
Library
Components
​
Um ein konsistentes und skalierbares Erscheinungsbild zu ermöglichen, erarbeite ich ein Set aus Komponenten.
Screen Design
Hier kommt nun alles zusammen.
Die Informations Architektur, die Wireframes und der User FLow liefern das Gerüst, welches mit Komponenten in Brand Color und Typo befüllt wird.
Prototyping
Die einzelnen Frames in Rubriken geclustert und verknüpft werden mit Mini Interactions versehen - machen aus den Screens einen clickbaren Dummy.
Next steps & Reflection
Next steps
​
-
Durchführung eines Usability-Testings zur Verifizierung der angestrebten Nutzbarkeit des Produkts.
-
Hinzufügen weiterer Details des ”Belohnungs-Flows”.
-
Eine Anleitung verfassen.
Reflection
Ein Produkt zu entwickeln, welches nicht nur einen persönlichen, sondern auch einen gesellschaftlichen Mehrwert bietet, ist ein Herzensprojekt. Ich freue mich sehr darüber, mich mit diesem spannenden Thema beschäftigen zu können. Das Erforschen und der Austausch mit potenziellen Nutzern zu dem Thema hat mir große Freude bereitet. Ebenso die Konzeption der Anwendung und ihrer Funktionen.
Die eigene Meinung aussen vor zu lassen, war ein anspruchsvoller aber auch sehr interessanter Aspekt während der Research und Konzeptions Phase.
Des weiteren bin ich begeistert, welche Möglichkeiten das Arbeiten mit Komponenten bietet und bin gespannt, diese im Austausch mit Entwicklern auszuprobieren und anwenden zu können.
Gefordert hat mich der Umstand, ab einem bestimmten Punkt den Blick vom "Grossen Ganzen" auf einen Teilaufschnitt zu richten.