Designsystem
Das Designsystem ist eine Art Baukastensystem, das alle visuellen Designelemente katalogisiert und beschreibt, wie sie bei der Implementierung der App und ihren möglichen späteren Erweiterungen verwendet werden sollen.
Wie der Name schon sagt, ist es systematisch aufgebaut: Es beginnt mit den Grundbausteinen (Tokens) von z.B. Farben, Schriften/Icons, Abständen und deren Abstufungen in z.B. Größe oder Schattierung. Zusammen mit Formatattributen (Fläche, Kontur, Abrundung, ...) bilden diese Standardkomponenten wie Buttons und Eingabefelder, die wiederum in Modulen wie Menüleisten oder Eingabemasken und später in Vorlagen für ganze Bildschirme dargestellt werden. Darüber hinaus definiert das Gestaltungssystem Regeln für das responsive Verhalten des Layouts und seiner Komponenten für unterschiedliche Bildschirmgrößen sowie Regeln für die Barrierefreiheit.
Für die Synchronisierung in Zusammenarbeit mit den Entwicklern stützen wir uns auf einen grundlegenden Tech-Stack von Figma-Integrationen und sind bereit, diesen zusammen mit Handoff-Lösungen wie Zeplin zu erweitern.
Discovery-Workshop
Ein Workshop mit Ihnen ist für uns ein wertvoller Bestandteil der frühen Analysephase. Gemeinsam mit Ihnen und Ihren Experten entwickeln wir ein gemeinsames Verständnis der Ausgangssituation und der aktuellen Geschäftsidee und Projektziele.
Wir betrachten das/die Problem(e) und sammeln so viele Informationen wie möglich darüber, um sie in Form von Problemstatements zu erfassen. Wir identifizieren wichtige Unbekannte und wie wir das fehlende Wissen generieren können.
Schließlich planen wir die nächsten Schritte, die Aufgabenverteilung und Priorisierung und halten die wichtigsten Punkte fest, im Projekt-Briefing.
Expertenevaluation
Neben dem Nutzerfeedback, dem Projektbriefing und den Unternehmenszielen werden Entscheidungen zum UX/UI-Design auf der Basis unserer Expertise getroffen. Diese Expertise beruht auf unserer langjährigen Erfahrung sowie auf allgemein etablierten gestaltungspsychologischen Richtlinien, auf die wir uns beziehen, wie z.B. die Norm ISO 9241-10 zum Dialogdesign, die UX-Heuristiken nach Jakob Nielsen und Gestaltprinzipien.
Flussdiagramme
Die Wege, die ein Nutzer innerhalb eines digitalen Produkts geht, welche Entscheidungen (Weggabelungen) getroffen werden, werden in Flussdiagrammen dargestellt. Die abstrakte Darstellung hilft zum einen, sich auf das Wesentliche zu konzentrieren, ohne durch Visualisierungsformen abgelenkt zu werden, und zum anderen zu iterieren mit geringem Aufwand.
Wir unterscheiden zwischen Task Flows, die den direkten und effizientesten Weg einer einzelnen Aufgabe beschreiben, und User Flows, die die möglichen Wege eines Features in seiner Gesamtheit zeigen.
Info-Architektur
Die Informationsarchitektur bildet das Grundgerüst der Anwendung. Ähnlich wie bei der Architektur eines Gebäudes wird ein digitales Produkt in verschiedene Bereiche (Eingangsbereich, Fachabteilungen etc.) unterteilt. Die Struktur kann je nach Gewichtung der Bereiche oder der funktionalen Ausgestaltung der App variieren. Das sog. Card Sorting hilft uns, verschiedene Varianten der Struktur zu vergleichen, indem wir die jeweiligen Bereiche bzw. deren Inhalte auf einer Karte notieren und diese dann entsprechend anordnen und gruppieren.
Iterativer Prozess
Der iterative Prozess zielt immer darauf ab, möglichst früh im Projekt und mit möglichst geringem Aufwand möglichst viele verschiedene Lösungen zu präsentieren, um diese dann unter betriebswirtschaftlichen und Usability-Gesichtspunkten zu testen und zu bewerten.
Je nach Problemstellung oder Reifegrad des Projekts können unterschiedliche Darstellungsformen der zu vergleichenden Varianten zum Einsatz kommen, von strukturierten Beschreibungen über Flowcharts und Handskizzen bis hin zu Wireframes und High-Fidelity. Die einzelnen Konzepte werden bewertet unter Berücksichtigung von z.B. Projektzielen, Nutzerfeedback und unserer Expertenevaluation.
Mit dieser Strategie sichert der iterative Prozess die frühzeitige Identifikation geeigneter Lösungen und damit die Brauchbarkeit des später umgesetzten Projekts.
Marktrecherche
Wir wollen verstehen, wer ein ähnliches Produkt anbietet, was seine Nutzer darüber schreiben und welche Merkmale den Unterschied ausmachen. Zu diesem Zweck werden sowohl quantitative Vergleichsdaten als auch qualitative Merkmale gesammelt und dokumentiert. Die interessantesten Erkenntnisse werden dann hervorgehoben und in Absprache mit Ihnen in das Projekt-Briefing eingearbeitet.
Personas
Personas stellen fiktive Personen in Form einer Art Steckbrief dar, deren Eigenschaften, demographische Merkmale und Nutzerverhalten wir ableiten, aus den Erkenntnissen des User Research. Sie dienen als Leitfaden während des Entwicklungsprozesses und repräsentieren die Nutzer, für die wir das Produkt entwickeln.
Priorisierung
Jede Projektplanung erfordert die Priorisierung der einzelnen Arbeitsschritte, die wir je nach Thema mit Ihnen abstimmen. Für einen generellen Überblick über den Projektverlauf nutzen wir ein Kanban-Board, wobei wir nach der Value vs. Effort-Methode priorisieren und ggf. einen Dringlichkeitsfaktor einbeziehen.
Produktanalyse
Wenn wir etwas Neues schaffen und etwas Bestehendes ergänzen oder optimieren wollen, möchten wir verstehen, womit wir es zu tun haben.
Wir untersuchen und dokumentieren Ihr bestehendes digitales Produkt oder Ihre Produktvision in Form von Screenshots und Notizen auf einem digitalen Whiteboard. So erhalten wir einen Überblick und eine Basis für unsere erste gemeinsame Kommunikation, auf die wir im weiteren Verlauf des Projekts jederzeit schnell zurückgreifen können.
Projekt-Briefing
Im Projekt-Briefing halten wir die wichtigsten Punkte des Vorhabens fest. Wir dokumentieren die Ausgangssituation, das Problem, die Ergebnisse der Nutzer- und Marktforschung, unsere Ziele und unsere Pläne, wie wir diese erreichen wollen.
Einzelne Punkte des Briefings ändern sich meist im Laufe des Projekts aufgrund neuer Erkenntnisse. Gleich zu Beginn erstellen wir gemeinsam eine erste Rohfassung, die dann in regelmäßigen Abständen, zum Beispiel nach einem Discovery Workshop und als Meilenstein in der Analysephase sowie in regelmäßigen Abständen überprüft und aktualisiert wird.
Prototypen
Prototypen erwecken unsere Entwürfe zum Leben und bilden so die Grundlage für Nutzungstests. Grafische Schnittstellen werden so animiert, dass die Tester individuelle Interaktionen mit ihnen durchführen können, ähnlich wie bei einer voll funktionsfähigen Schnittstelle.
Nutzungstests
Während des iterativen Prozesses erkennen und bewerten die Designexperten ständig Usability-Probleme. Darüber hinaus werden in geplanten Abständen und so früh wie möglich im Projekt spezifische Usability-Tests durchgeführt.
Eine gängige Methode hierfür sind klickbare Prototypen, die von potenziellen Nutzern am Bildschirm getestet werden. Wir erhalten Feedback von den Testern in Form von Interviews und/oder Fragebögen sowie unseren Beobachtungen während der Tests. Eine andere Methode sind sogenannte A/B-Tests, bei denen zwischen zwei oder mehreren Lösungsvarianten abgestimmt wird.
Die Erkenntnisse aus den Tests werden von uns nochmals ausgewertet und fließen dann in Absprache mit Ihnen in die Projektziele ein oder werden in das Usability-Konzept bzw. Interface-Design übernommen.
Anwendungsfälle
Ein und dasselbe Produkt wird oft für leicht unterschiedliche Zwecke in verschiedenen Kontexten verwendet, die wir in Nutzungsszenarien skizzieren. Diese Fälle müssen sich später im Funktionsumfang des Produkts widerspiegeln und sind daher ein zentraler Bestandteil bei der Definition der App. Sogenannte Edge Cases beschreiben solche Anwendungen, die eher selten vorkommen und daher eine Nische bedienen.
Die Gewichtung der einzelnen Anwendungsszenarien ist entscheidend für das Nutzungskonzept und den späteren Funktionsumfang des Produkts. Sie werden im Projekt-Briefing, ihre Bedeutung und Umsetzung kann jedoch durch Nutzungstests in Frage gestellt, neu definiert und priorisiert werden.
Nutzer-Journey
Die User Journey ist eine Mapping-Methode, bei der - ähnlich wie beim User Flow - wir die einzelnen Schritte skizzieren, die der Nutzer unternehmen muss, um ein bestimmtes Ziel zu erreichen (z. B. den Kauf einer Fahrkarte oder die Beantragung einer Dienstleistung). Der Schwerpunkt liegt dabei weniger auf der detaillierten Grundstruktur als vielmehr auf den oberflächlichen Berührungspunkten und ihrer psychologischen Wirkung auf die Nutzer sowie auf möglichen Hürden und Möglichkeiten, diese zu verbessern oder zu beseitigen.
Die Methode hilft, diese Aspekte zu erkennen, sie allen Beteiligten zu vermitteln und das große Ganze im Projektverlauf und bei der Konzentration auf Details nicht aus den Augen zu verlieren.
Nutzerrecherche
Stehen die „Endnutzer“ am Ende oder am Anfang? Je mehr wir über unsere bestehenden oder potenziellen Nutzer, ihr Nutzungsverhalten und ihren Nutzungskontext wissen, desto gezielter können wir die Gestaltung nach ihren Anforderungen ausrichten.
Zu diesem Zweck suchen wir das Gespräch mit Endnutzern aus möglichst vielen verschiedenen Nutzergruppen in Form von semistrukturierten Interviews, Nutzungskontextanalysen oder sog. Tagebuchstudien. Darüber hinaus ermöglichen uns Online-Fragebögen, ein noch breiteres Spektrum an Daten zu sammeln.
Daraus leiten wir - ähnlich wie bei der Marktforschung - die interessantesten Erkenntnisse ab, um die Lösung optimal an den Einsatzbereich und die Bedürfnisse der Anwender anpassen zu können.
Nutzerrollen
Die meisten Interfaces werden von verschiedenen Nutzertypen bedient. Während beispielsweise eine Benutzergruppe eher oberflächlich mit einem Dienst interagiert, kann es andere geben, die eine tiefere Funktionsebene benötigen, während Administratoren mehr Befugnisse haben oder aus der Backend-Sicht der Schnittstelle arbeiten können. Gleichzeitig ist zu beachten, dass insbesondere die administrativen Nutzer die Möglichkeit haben sollten, die App durch Umschaltfunktionen aus der Perspektive aller Rollen zu betrachten, um entsprechende Hilfestellungen geben und Fehler erkennen zu können.
Diese Rollen werden in der Analysephase ermittelt und z.B. in Form von Personas für den weiteren Verlauf des Projekts.
Wireframes
Ein Wireframe dient als vorläufiges, vereinfachtes Modell des User Interface Designs. Wir erstellen ein rein funktionales Layout mit Hilfe einer standardisierten Wireframe-Bibliothek, die in einem abstrakten, skizzenhaften Stil gehalten ist.
In diesem Wireframe werden die Platzierung, die Größe und der Inhalt der Elemente dargestellt, während spezifische Designdetails absichtlich weggelassen werden. Auf diese Weise stellen wir sicher, dass wir uns während des gesamten Verfeinerungsprozesses auf die Funktionalität konzentrieren und jeden Einfluss persönlicher Designpräferenzen bei der Bewertung vermeiden.