Der Designprozess Teil 1: Von der Idee zum Konzept

Um individuelle Projektziele erfolgreich zu erreichen, hat sich ein umfassender Designprozess etabliert, der uns von der ersten Idee bis zum fertigen Produkt begleitet. Längst ist die digitale Welt kein Neuland mehr, wir können auf jahrelange Erfahrungen zurückblicken. Es wurden Best Practices entwickelt, auf die Designer und Nutzer heute nicht mehr verzichten möchten.

Ein gut durchdachtes Produkt mit hoher Usability bietet nicht nur die Möglichkeit, Nutzer von unserem Angebot zu überzeugen, sondern kann ihr Leben auch durch ein positives Nutzererlebnis nachhaltig erleichtern. Design hat das Potenzial, Nutzer langfristig zu begeistern, die Markenidentität zu stärken und erfolgreiche Produkte auf den Markt zu bringen. Der Designprozess umfasst im Wesentlichen vier Phasen: Ideenfindung, Konzeption, Visualisierung und Umsetzung. In diesem Artikel werde ich alle vier Schritte genauer beleuchten.

In der Konzeptionsphase werde ich aufzeigen, wie wir Personas entwickeln, deren Pfad durch die Anwendung begleiten und unsere Resultate in erste Skizzen einfließen lassen. In der Visualisierung werden wir untersuchen, wie wir aus ersten Inspirationen das finale Design erhalten und wie wir unsere Entscheidungen in einem Style Guide festhalten. Neben einer kurzen Einführung in die verschiedenen Möglichkeiten, unser Projekt technisch umzusetzen, werde ich auch auf die langfristige Betreuung unseres Projekts eingehen und betrachten, wie wir unsere Kunden nachhaltig unterstützen können.

Ideenfindung

Die Perspektive unseres Kunden: Beginnen wir unser Projekt, gilt es die Beweggründe des Kunden zu verstehen. Eine gute Lösung zu finden, setzt voraus, dass wir das Unternehmen hinter dem Projekt verstehen. Manchmal ist dem Kunden bewusst, was er möchte – sei es ein neues Produkt, eine neue Funktion oder eine Überarbeitung einer bestehenden Website. Bei anderen Projekten ist mehr Fingerspitzengefühl erforderlich. Dies kann der Fall sein, wenn ein neues Produkt eingeführt werden soll oder wenn die aktuelle Version nicht zufriedenstellend ist, aber die Fehler noch nicht identifiziert wurden.

Jeder Kunde bringt bestimmte Erwartungen in Bezug auf Funktionalität und Ästhetik mit. Diese müssen wir kennen, um eine Richtung für unser Projekt zu finden. Diese Phase bietet auch die Gelegenheit, beratend tätig zu werden, gemeinsam zu besprechen, was realistisch ist, und Best Practices vorzustellen.

Ein schriftliches Projektbriefing, das der Designer erstellt und das der Kunde mit seinen Vorstellungen füllt, bietet eine klare Übersicht. Insbesondere sollten wir verstehen, wer die Nutzer sind, welche Parameter verbessert werden sollen und weshalb die Anwendung neugestaltet werden soll.

In nachfolgenden Gesprächen mit Stakeholdern können Vorstellungen im Detail besprochen und ggf. angepasst werden. Auch der Arbeitsumfang, Meilensteine und Fälligkeitstermine werden festgelegt. Es kann auch abgeklärt werden, welche Dokumentation für unser Projekt erwünscht ist. Dazu gehören Branding- und Marketingmaterialien, Wireframes, Moodboards, Style Guides und andere Dokumente, auf die wir später genauer eingehen werden.

Marktanalyse: Da das Produkt nicht im leeren Raum existiert, müssen wir auch das Umfeld in unsere Überlegungen einbeziehen. Der Zielmarkt und die vertretenen Mitbewerber sollten gründlich analysiert werden. Wir sollten auch verstehen, wie das Produkt unserer Kunden aktuell wahrgenommen wird und wie es auf dem Markt platziert ist.

Marktforschung bietet Einblick in Branchentrends, aktuelle Herausforderungen und Chancen. Ein grundsätzliches Verständnis von Markt und Wettbewerbern erlaubt uns, eine Stufe tiefer zu gehen und die Angebote der Mitbewerber zu analysieren. Der Fokus sollte nicht nur auf visuellen Unterschieden, sondern auch auf der Usability liegen. Aus der Perspektive des Nutzers sollten wir begutachten, wie die Anwendung genutzt wird und wie der Nutzer die Interaktion bewertet.

Dabei decken wir nicht nur branchenübliche Konventionen auf, von denen wir uns nicht zu weit entfernen sollten, um den Nutzer nicht zu verwirren, sondern wir identifizieren auch Schwachstellen, für die der Markt derzeit keine gute Lösung bietet. So finden wir nicht nur die Normen und Erwartungen des Marktes heraus, sondern denken auch über bessere Lösungen für bestehende Probleme nach.

Normen und Erwartungen beziehen sich nicht nur auf technische Lösungen, sondern auch auf den gesamten Umgang mit Nutzern. Welche visuelle Sprache ist verbreitet? In welchem Ton wird mit Nutzern kommuniziert? Welche anvisierte Zielgruppe ergibt sich daraus?

Es ist sinnvoll, mindestens zwei bis drei direkte und ein bis drei indirekte Wettbewerber zu betrachten und deren User Journey zu analysieren.

User Research: Aus UX-Perspektive ist die User Research ein entscheidender Bestandteil des Designprozesses, da der Nutzer im Mittelpunkt steht. In diesem Schritt versetzen wir uns in die Perspektive des Nutzers und untersuchen, wo aktuelle Lösungen den Nutzer noch ratlos zurücklassen und wo Verbesserungsbedarf besteht. Häufig betrifft dies Aspekte, die aus unserer internen Perspektive logisch erscheinen.

Es besteht eine allgemeine Tendenz, eigene Bewertungen auf andere zu übertragen und anzunehmen, dass jeder das Gleiche mögen und verstehen würde wie man selbst. Verstehen wir unsere Nutzer, ihre Situation, Ziele und möglichen Hindernisse, können wir ein bedarfsgerechtes Produkt mit einer individuell zugeschnittenen Designsprache erschaffen.

Wir sollten verstehen, wer unsere Nutzer sind und weshalb sie das Produkt nutzen. Wie bewegen sie sich durch das Programm? Auf welche Hindernisse stoßen sie? Wie ist ihr Eindruck vom Produkt und welche Erwartungen haben sie für die Zukunft?

Es gibt jedoch nicht den einen durchschnittlichen Nutzer. Daher können wir uns nicht auf vermeintliche Musterlösungen oder verallgemeinerte Regeln verlassen. Sinnvoll ist, was funktioniert. Und was für den Nutzer funktioniert, erfahren wir, wenn wir seine Interaktion mit dem Produkt beobachten und seine Bedürfnisse verstehen.

Den Nutzer tatsächlich mit dem Produkt interagieren zu lassen, ist entscheidend: Das wahre Verhalten des Nutzers entspricht meist nicht seiner geäußerten Meinung. Eine derart detaillierte Introspektive, um wirklich zu verstehen, was uns antreibt und wo wir auf Hindernisse stoßen, haben die wenigsten von uns.

Konzeption

Auf Basis der gesammelten Erkenntnisse können wir beginnen, die Anwendung zu konzipieren. Unser höchstes Gut ist das Vertrauen unserer Nutzer. Daher sollten wir ein Produkt erschaffen, das die Bedürfnisse unserer Kunden erfüllt und nutzerfreundlich ist. Es sollte durch ansprechendes Design Emotionen hervorrufen und Begehrlichkeiten wecken.

Personas: Ein breites Spektrum von Nutzern wird auf unsere App oder Website zugreifen. Wie verstehen wir, wer sie sind und welche Ziele sie verfolgen? Die Lösung sind Personas, die Nutzer archetypisch abbilden und uns helfen, ihren spezifischen Bedürfnissen gerecht zu werden.

Es ist wichtig, diese hypothetischen Nutzer mit einer möglichst aussagekräftigen Persönlichkeit auszustatten. Wir ermitteln nicht nur das Nutzungsverhalten unserer Zielgruppensegmente, sondern auch persönliche Informationen wie Alter, Bildungsabschluss, beruflicher Hintergrund, Motivation, verwendete Geräte und Software oder Internetnutzung.

Jede Persona sollte ein realistisches Bild einer hypothetischen Person zeichnen. Diese helfen uns im weiteren Prozess, ein klares Bild der Erwartungen unserer Nutzer und ihres Nutzungsverhaltens zu erhalten. Je nach Projekt sind drei bis fünf detaillierte Personas ausreichend.

User Journey: Haben wir ein Bild unserer Nutzer, gilt es deren User Journey zu betrachten. Diese umfasst alle Berührungspunkte des Nutzers mit dem Produkt, beginnend bei seinem ersten Kontakt und einschließend den gesamten Kauf- und Zustellungsprozess. Oder anders ausgedrückt: Die User Journey beginnt bei der Wahrnehmung eines Bedürfnisses und endet mit der Erfüllung dieses Bedürfnisses.

Um ein aussagekräftiges Bild zu erhalten, sollte jede erstellte Persona mit einer eigenen User Journey ausgestattet werden. Während die User Journey den gesamten Kontext verdeutlicht, konzentrieren sich Use Cases auf die detaillierten Schritte, die zur Erfüllung einer spezifischen Interaktion zwischen Nutzer und Produkt notwendig sind. Eine User Journey kann mehrere Use Cases umfassen, die detaillierte Szenarien während der Interaktionen betrachten.

Es ist wichtig, auf jeden Einzelschritt eines Vorgangs einzugehen. Es reicht nicht aus, zu vermerken, dass gedruckt werden kann; jeder Schritt bis zum fertigen Druckvorgang muss dargestellt werden. Dies hilft, die Anforderungen auf technischer, detaillierter Ebene zu definieren, indem aufgezeigt wird, was unsere Anwendung in einer bestimmten Situation leisten soll und welche Schritte dabei zu beachten sind.

In diesem Kontext treffen wir auch auf die User Story, die einen spezifischen Ausschnitt des Use Cases darstellt. Typischerweise formuliert als „Als Rolle möchte ich Ziel, damit Nutzer …“.

User Flows: Da wir uns aus Sicht des UX Designers insbesondere für die Nutzererfahrung interessieren, ist das Konzept des User Flows von großer Bedeutung. Während Use Cases in Form einer textbasierten Beschreibung dem technischen Verständnis der Funktionalität eines Systems dienen, helfen visuell als Diagramme oder Flowcharts aufbereitete User Flows, die sich auf den Weg des Benutzers konzentrieren, beim Design von intuitiven Benutzererfahrungen.

Der User Flow zeigt die Interaktionen und die spezifischen Schritte, die der Benutzer unternimmt, um sein Ziel zu erreichen. Unser User Flow basiert auf der zuvor ausgearbeiteten Information Architecture, die nicht nur die Schritte zu einem bestimmten Ziel beschreibt, sondern die gesamte Anwendung definiert.

Im Kern der Information Architecture steht die Frage, was unser Nutzer erwartet und wie wir den Weg dorthin und die benötigten Informationen darstellen wollen. Der Nutzer sollte eine nahtlose Erfahrung vorfinden, die es ihm ermöglicht, reibungslos seine Aufgaben zu erledigen. Elementar ist dabei eine nachvollziehbare Hierarchie, die den Informationen eine sinnvolle Struktur verleiht und ihre hierarchische Bedeutung veranschaulicht.

Wireframes: In Form von Wireframes sehen wir unser Produkt zum ersten Mal. Sie sind eine vereinfachte Darstellung des Produkts, die uns einen frühen Eindruck von Struktur und Bedienbarkeit geben soll. Wireframes enthalten keine Farben, Grafiken oder sonstiges Styling. Ihr Zweck ist es, den zukünftigen Aufbau der Benutzeroberfläche darzustellen. Es geht also um die Platzierung und Priorisierung von Inhalten und Navigationselementen, verfügbare Funktionen und deren beabsichtigte Verhaltensweise.

Durch Wireframes erwecken wir die Informationsarchitektur zum Leben und geben ihr eine erste visuelle Form. Durch Größe und Platzierung der Elemente wird eine Hierarchie geschaffen. Die visuelle Darstellung unterstützt die Entwicklung einer einheitlichen Präsentation für bestimmte Arten von Informationen. Auch erhalten wir ein frühes Gefühl für die Usability unseres Produkts und können rechtzeitig ohne größeren Aufwand wichtige Änderungen vornehmen.

Nachdem wir uns für ein funktionierendes Design entschieden haben, können wir den Wireframe über mehrere Schritte mit Leben füllen. Der erste low-fidelity Wireframe besteht lediglich aus schwarzen Strichen auf weißem Grund und gibt uns Auskunft über die Positionierung und Größe der Elemente.

Der darauffolgende mid-fidelity Wireframe bietet einen ersten Blick auf das finale Design. In dieser Phase werden korrekte Abstände und Schriftgrößen verwendet. Es dürfen bereits Farben aus dem Farbschema unseres Projekts verwendet werden, alternativ können aber auch noch Graustufen eingesetzt werden, um dem Wireframe mehr Tiefe zu geben. Einzelne Komponenten können detaillierter ausgearbeitet werden. Dazu gehört die Gestaltung von Buttons, Texten und Links.

Im letzten Schritt, dem high-fidelity Wireframe, erhält das Design sein endgültiges Aussehen: Bilder, Icons und Farben werden ergänzt, Blindtext wird durch unsere echten Texte ersetzt. Das Design wird an verschiedene gängige Bildschirmgrößen angepasst. Auf dieser Grundlage kann ein erster interaktiver Prototyp erstellt werden.

Teil 2

Woher wir die visuellen Elemente erhalten, die unsere Wireframes mit Leben füllen und damit das finale Design unserer Anwendung bestimmen, behandeln wir im zweiten Teil dieses Artikels. Dieser wird seinen Schwerpunkt auf UI-Design setzen, also die visuelle Gestaltung einer App oder Website.

Da der Design Prozess mit der visuellen Ausarbeitung noch nicht beendet ist, wird der Artikel auch Testing, Coding und die langfristige Betreuung unseres Projekts umfassen.