UX Konzept und UX Design für mobile App
Ein Anbieter von Kundenbindungsprogrammen kam auf mich zu, um für einen Großkunden eine neue App zu erstellen. Das Team hatte bereits Anforderungen seines Kunden gesammmelt, einige Konkurrenz-Apps analysiert und suchte nach einem UX Designer, der die Abläufe in der App konzipiert und mit dem Branddesign des Kunden als klickbaren Prototyp erstellt. Ooookay.
Wire Flows
Projekt Einordnung & UX Rollen
Wir befinden uns im Bereich der Software-Entwicklung mobiler Apps. Oft werden in solchen Projekten UX Designer erst spät dazugeholt – um "alles schick zu machen". Erst in der Zusammenarbeit mit mir merkt das Projektteam, dass es um die Benutzung und nicht um die Optik geht und welche Fragen es sich zu ihrem Digitalen Produkt noch nicht gestellt hat. Immer wieder spannend.
DIe AUFGABE
Ausgangslage & Herausforderungen in diesem UX Design Projekt
Das Team um den Kunden herum hatte bereits einige Anforderungen in Form von Use Cases (also Nutzungsszenarien wie "Der Nutzer möchte sich darüber informieren, welche Rabatte es zur Zeit gibt") vorbereitet und auch einige Persona Profile skizziert, die mit dem Kunden besprochen wurden. Nun ging es darum, aus diesen Use Cases klickbare Benutzungsstränge innerhalb der App zu konzipieren.
Bei sehr komplexen Apps, deren Funktionalitäten sich überschneiden, nutze ich gern UML (Unified Modelling Language), um Abläufe und Datenflüsse zu konzipieren. Auch, um mit der technischen Entwicklung zu sprechen, sind die Diagramme sehr sinnvoll – schließlich soll die nutzerzentrierte Benutzbarkeit mit den technischen Gegebenheiten Hand in Hand gehen.
Bild: Die erste Ordnung. Nutzer-Anforderungen (User Requirements) und User Stories, Feature-Ideen und andere Vorstellungen des Kunden auf einem Board dargestellt. Nun braucht's noch eine echte Strukturierung, damit daraus klickbare Screens entstehen können.
Der prozess
Vorgehensweise
Einarbeitung ins Projekt
Das Team um den Kunden herum hatte bereits einige Anforderungen in Form von Use Cases (also Nutzungsszenarien wie "Der Nutzer möchte sich darüber informieren, welche Rabatte es zur Zeit gibt") vorbereitet und auch einige Persona Profile skizziert, die mit dem Kunden besprochen wurden. Nun ging es darum, aus diesen Use Cases klickbare Benutzungsstränge innerhalb der App zu konzipieren.
Information Clustering
Bevor ich damit beginne, Screens zu visualisieren, erstelle ich ein großes Board und ordne mir die Informationen, die aus Videocalls, Dokumenten, Präsentationen zu mir kommen, nach Themenbereichen an. Daraus entsteht das Big Picture des Projekts. In diesem Big Picture kommen viele Fragen zum Projekt auf, die ich dem Team stelle.
User Stories ordnen
Als nächstes sortierte ich die vom Team in Text gelieferten User Stories. Es ging darum, Dopplungen zu entfernen, Überschneidungen zu finden und manche User Stories auch zu Ende zu denken. Es macht einen ungeheuren Unterschied, ob User Stories nur als Text festgehalten werden oder ob sie bereits als User Journeys skizziert sind.
Aus User Flows werden Wire Flows
User Flows zeigen grob wie die NutzerInnen sich durch eine Anwendung oder Website navigieren, um ihre Aufgabe zu erfüllen oder bestimmte Informationen abzurufen.
Wire Flows zeigen bereits, welche Elemente es auf einzelnen Screens geben wird. Beispielsweise ein Text, Bild, Inputs oder Optionen, Buttons oder Listen usw. Dadurch wird schon in die erste Richtung des visualisierten digitalen Produkts gegangen.
UI Design, UX Writing, Prototyping und Test
Aus den designten Screens habe ich in Sketch und InVision einen klickbaren Prototyp gebaut, der von einem Marktforschungsunternehmen mit über 30 Menschen remote getestet wurde.
Die Testergebnisse wurden sortiert und dann wieder von mir überarbeitet. Ein iterativer Prozess aus Nutzertests und Vorstellen des Projekts bei den entscheidenden Stakeholdern hatte begonnen.
Bild: Da ich eine Geheimhaltungsvereinbarung unterschrieben habe, darf ich UX Konzeption und UX Design aus dem Projekt nicht näher zeigen. Hier also ein Eindruck aus der Ferne. Insgesamt habe ich 64 Screens erstellt und daraus einen Mobile App Prototyp in InVision und Sketch erstellt.
Verwendete UX Tools
miro
miro ist ein sehr mächtiges und umfangreiches Online Tool für Kollaboration und Visualisierung.
Sketch
Sketch ist ein niederländisches Vektor-Programm optimiert für die Entwicklung digitaler Produkte wie Apps und Webseiten.
InVision
InVision (Studio) ist eine Design-Entwicklungsplattform, die es Teams ermöglicht, Prototypen von Apps und Webseiten zu bauen und zu teilen.
Zeplin
Zeplin ist ein kleines, feines Tool zur Auslieferung von Assets und deren Spezifikationen an die Entwickler von mobilen Apps, Web-Anwendungen und Webseiten.
Keine Kapazität, um alle Fälle einer mobilen App zu durchdenken?
Kein Problem – Als UX Architect kümmere ich mich um die Produktvision und die Ausrichtung der Projektbeteiligten auf ein Ziel. Um die Anforderungen, den Content und die Absprache mit den Entwicklern. Wie all das gehen soll?
Meet your next UX Architect
Hi, ich bin Karolina
Als UX Architect fokussiere ich mich auf das Zusammenspiel aus Business Modell und Nutzererfahrung. Beide gehen Hand in Hand. Damit digitale Anwendungen oder Produkte ihren Platz in der Welt finden, braucht es ein Team, das gemeinsam in eine Richtung blickt.
Mit ehrlichen Workshops, effizienten OnBoardings und runden Prototypen helfe ich Projektteams dabei, Neues in die Welt zu bringen.
