Gestaltung & Design

5 Min. Lesezeit

Von der richtigen Lösung zum Prototypen – in nur 5 Tagen

Es steht außer Frage, dass das selbsterklärte Ziel eines jeden Designers und Entwicklers ist, ein herausragendes Produkt bzw. einen außergewöhnlichen Service zu entwickeln.

Aber was lässt ein Produkt oder einen Service aus der Masse hervorstechen? Wir sind uns sicher: Es ist ein Mix aus Problemlösung, Funktionalität und Optik bzw. Ästhetik.

Wie wir das bereits in einem 5-Tagessprint schaffen, erfahren Sie in den nächsten Minuten.

Was bisher geschah

Wir haben das zu lösende Problem skizziert,
die grundlegenden Charakteristika unserer Zielgruppe identifiziert und
erarbeitete Lösungsansätze mit Hilfe des Sweet Spots priorisiert und in eine Digital-Strategie überführt.

…

Jetzt ist es an der Zeit, den Ideen Leben einzuhauchen.

Während die Themen in der ersten Phase gemeinsam erarbeitet wurden, liegt der Großteil der Arbeit dieser Phase bei unseren Designern. Das Projektteam wird durch agile Iteration-Loops eingebunden und wirkt bei der Entstehung des übergeordneten Ziels der Phase tatkräftig mit: Die Entwicklung des bedienbaren Prototypens.

1 Probleme und Lösungsansätze übersetzen

Übliche Design Sprints starten mit dem Schritt „Understand“. Da unsere Designer jedoch seit der ersten Phase „Problemeingrenzung & Strategiekonzeption“ im Team integriert sind, setzen wir auf dem vorhandenen Output auf, überspringen diesen Schritt jedoch nicht in Gänze.

Die kreative Grundlage für unsere Design-Journey bilden wir, indem wir die in Businesssprache formulierten Probleme und Lösungsansätze aus der Digital-Strategie in die „Designersprache“ übersetzen.

Dazu greifen wir auf ein abgespecktes Fragen-Set der Phase „Problemeingrenzung & Strategiekonzeption“ zurück:

„How might we ... ?“
„I like, I wish, what if …?“

Erfolgskritisch für eine gute Übersetzung ist in diesem Fall der notwendige Perspektivenwechsel. Wir blenden wirtschaftliche Parameter aus, finden mit den richtigen Fragen und Antworten eine Reihe von möglichen visuellen Lösungen und erstellen eine ~~Experience Map.~~

×
Exkurs
Experience Map
Experience Maps zeigen, wie der Nutzer mit einem neuen Produkt oder Service interagiert und bilden den idealtypischen Gesamtprozess ab.

Positiver Side Effect:

Die Lösungsansätze werden nochmal auf den Prüfstand gestellt, bevor die aufwendige Ausarbeitung startet:

Halten die Lösungen der Diskussion „nach ein paar Nächten drüber schlafen“ Stand?
Müssen wir an bestimmten Punkten nachschärfen?
Haben wir wirklich an alles gedacht oder gibt es doch weitere Ansätze?

Insbesondere das Fragespiel „I like, I wish, what if …?“ eignet sich hierfür perfekt.

2 Wireframes & Mockups kreieren

Im Mittelpunkt des nächsten Schrittes steht die Content-Strategie. Dies beinhaltet die Verteilung von Rollen und Verantwortlichkeiten, die Recherche und Erstellung von Texten und Bildern sowie die Strukturierung der Ergebnisse in einer Sitemap.

An dieser Stelle werden erste handgezeichnete Skizzen verwendet, die für die Erstellung von ~~Wireframes~~ und deren iterative Anpassung notwendig sind.

Skizzen helfen nicht nur, die platzierten Informationen zu visualisieren, sondern ermöglichen es, sich eine das Interaktionskonzept vorzustellen.

×
Exkurs
Wireframe (Level 1)
Das Visual Design tritt beim Wireframe völlig in den Hintergrund. Im Vordergrund stehen die inhaltliche Struktur und der Aufbau. Stark ausgestaltete Elemente oder Farben lenken zu sehr ab.

Um trotzdem ein erstes Erscheinungsbild der Anwendung veranschaulichen zu können, erstellen wir parallel verschiedene Moodboards.

Im Projekt-Team diskutieren wir und passen die erarbeiteten Inhalte gemeinsam an:

Sitemap
Interaktionskonzept
User Experience Tonalität
Moodboard

Typografie
Farben
Formen
Icons

Im Anschluss führen wir unsere Ergebnisse in ~~Mockups~~ zusammen.

Durch diese Verdichtung ist die anstehende Feedback-Session viel detaillierter und tiefgreifender.

×
Exkurs
Mockup (Level 2)
Ein Mockup ist die Weiterentwicklung des Wireframes und kombiniert verschiedene Strukturelemente und Inhalte mit Farben, Bildern und typografischen Eigenschaften. Es ähnelt dem eigentlichen Prototypen, ist aber in vielen Punkten noch deutlich reduzierter und für gewöhnlich statisch und nicht responsiv.

3 Prototypen entwickeln

Ausgestattet mit neuen Erkenntnissen starten wir auf Grundlage der erstellten Screens und des konsolidierten Feedbacks mit der Entwicklung des ~~Prototypens.~~

Für unsere Ausführungen ist es enorm wichtig, dass unser Design-Team als Fürsprecher der Nutzer agiert und Designs entwickelt, die dazu beitragen, das Problem des Kunden bestmöglich zu lösen.

×
Exkurs
Prototyp (Level 3)
Ein Prototyp ist mit einem hohen Detailgrad an Funktionalität und Design ausgestattet und gibt eine erste realistische Antwort darauf, wie das Produkt bzw. der Service das identifizierte Problem lösen wird.

Wirklich großartiges Design – also solches, das Herzen schneller schlagen lässt und Nutzer vorbehaltlos für sich einnimmt – ist immer eine perfekte Kombination aus funktionaler und optischer Gestaltung der Benutzeroberfläche ~~(UI – User Interface)~~ und reibungsloser Nutzerführung ~~(UX – User Experience).~~

So etwas entwickeln wir allerdings nicht über Nacht. Daher stellen wir uns im Verlauf der Ausarbeitung immer wieder neuen Fragestellungen:

Unterscheiden wir uns mit dem gewählten Farbschema der Marke von der Konkurrenz?
Verwirren wir mit dem Design unseren Zielkunden?
Beeinträchtigen wir mit der Gestaltung die Leistung (Conversion rate, Retention rate, NPS, …)?

Eins können wir versprechen: Betrachtet man das Endprodukt, hebt dieses sich – wie versprochen – von der Masse ab.

×
Exkurs
User Experience und User Interface
Die User Experience (UX) umfasst alle Erwartungen, Wahrnehmungen und Reaktionen einer Person, die sich vor, während und nach der Nutzung eines Produkts bzw. eines Service ergeben.

Das User Interface (UI) ist ein Teil des UX-Designs und bezeichnet die Benutzeroberfläche der Applikation, auf der die direkte Interaktion zwischen Mensch und Maschine stattfindet. Das UI-Design beschäftigt sich mit der visuellen Darstellung: Dem Layout, den Farben, Buttons, Bildern etc. Ziel ist es, das UI nutzbar und sinnvoll zu gestalten, damit der Nutzer während der Verwendung des Produkts bzw. des Service geführt wird und leicht Entscheidungen treffen kann.

Je nach Produkt bzw. Service kann der Prototyp bereits mit der Hilfe unserer Tools im Internet genutzt und bewundert werden, auch wenn er noch nicht programmiert ist.

4 Prototyp validieren

Aufgrund der realitätsnahen Abbildung des Endproduktes werden jetzt die Aspekte Benutzeroberfläche (UI - User Interface) und Benutzerfreundlichkeit (UX - User Experience) in finalen Iteration-Loops getestet und bewertet.

Hierzu involvieren wir Personen über das Kern-Projektteam hinaus (bspw. Endkunden, Usability-Experten und weitere Mitarbeiter unserer Kunden).

Durch einen ausgetüftelten digitalen Fragebogen können wir das qualitative und quantitative Feedback schnell auswerten, analysieren, unseren Prototypen anpassen und in den nächsten Iteration-Loop starten.

Hier ist es wichtig, Ausdauer zu beweisen, denn der Prototyp ist erst final und wird in unsere nächste Phase "Umsetzung und Entwicklung" entlassen, wenn er mindestens ein 4,5 von 5 Sterne-Rating erzielt.

Vertrauen Sie uns: Design-Screens sind leichter anzupassen als technisch programmierte Funktionen. Wir benötigen zwar etwas mehr Zeit bis wir in die technische Umsetzung gehen, holen uns diese jedoch hinten heraus doppelt und dreifach wieder raus.

Im nächsten Beitrag erfahren Sie, wie aus dem Design-Prototypen ein technisches Minimum-Viable-Product (MVP) wird.