Zurück
Dimitri Wittwer

Gridonic Prototyping

Die Entwicklung einer Webseite ist ein komplexer Prozess, der weit über das blosse Design hinausgeht. Bei Gridonic legen wir besonderen Wert darauf, dass jede neue Webseite nicht nur ästhetisch ansprechend, sondern auch strukturell durchdacht und nutzerzentriert ist. Ein entscheidender Schritt in unseren Projekten ist daher die Erstellung eines browserbasierten Prototyps, der die Struktur und Funktionalität der neuen Webseite greifbar macht.

#UX/UI Design#UX / UI Ideation

Der Prototype mit dem Gridonic Boilerplate

Oft werden Prototypen in spezifischen Applikationen wie Figma, Miro oder Axure erstellt. Die echten Interaktionen sind dabei – wenn überhaupt – nur mit viel Aufwand konfigurierbar. Wir erstellen den Prototyp deiner neuen Webseite direkt mit der Software, die wir auch für deine Webseite nutzen – DatoCMS. Mit dem Gridonic Boilerplate legen wir den Grundstein für deine neue Webseite. Es umfasst folgende Aspekte:

  1. Strukturvisualisierung: Der Prototyp bildet die gesamte Seitenstruktur ab und zeigt, wie die verschiedenen Inhalte miteinander verknüpft sind.

  2. Interaktives Feedback: Statt abstrakter Diagramme oder Wireframes erhalten unsere Kunden mit dem Gridonic Boilerplate ein interaktives Modell, das sich im Browser testen lässt.

  3. Logik der Inhalte: Das Gridonic Boilerplate ermöglicht uns die Logik der Inhalte frühzeitig zu definieren, damit das Content Management möglichst effizient und fehlerfrei erfolgen können.

  4. Effizienz: Mögliche Informationsarchitekturen und User Flows können frühzeitig getestet werden. Potenzielle Schwächen oder Unklarheiten in der Navigation oder Struktur können so frühzeitig erkannt und behoben werden.

  5. Kollaboration: Der Prototyp erleichtert die Zusammenarbeit zwischen Kunden, Designern und Entwicklern.

  6. Content Creation: Dank des evolutionären Prototypen wissen wir bereits früh im Relaunch Prozess, welche Inhalte erstellt werden müssen und können die Produktion mit ausreichend Zeit planen.

    Lernkurve: Deine neue Webseite startet als Gridonic Boilerplate und wird über die Projektdauer Schritt für Schritt zu deiner neuen Webseite. So lernst du schon zu Projektbeginn mit dem System zu arbeiten.


Das Vorgehen

1. Diskussion der Informationsarchitektur

In einem ersten Schritt definieren wir in Workshops zu Persona und User Flows gemeinsam mit dem Kunden die Grundstruktur der Informationen der neuen Webseite. Welche Hauptseiten soll es geben? Welche Inhalte sollen auf welcher Seite untergebracht werden?

2. Aufsetzen des Kunden Boilerplate

Nun setzen wir auf Basis der jeweils aktuellsten Version das Boilerplate für den Kunden auf. Es wird unter der URL kunde.gridonic.io im Browser zugänglich gemacht. Darin bilden wir die Informationen strukturiert als Seiten, Unterseiten und Inhalte ab. Wir nutzen hier vereinfachte Textblöcke, Standardbildmaterial und Platzhalter. Es geht um die Struktur noch nicht um die konkreten Inhalte. Wichtig ist hier, dass verschiedene Architekturen ausprobiert werden, um die beste zu finden.

3. Verknüpfung der Seiten

Nun versuchen wir die User Flows abzubilden. Dazu setzen wir die Verknüpfungen zwischen den einzelnen Seiten auf. Hier können mehrere Varianten durchgespielt werden. Ziel ist es, eine intuitive On-Page-Navigation zu schaffen, die es den Besuchern erleichtert, die gewünschten Inhalte schnell und unkompliziert zu finden.

4. Abbildung des Menüs

Sobald die Informationsarchitektur steht und wir wissen wie die einzelnen Seiten verknüpft sind, können wir das Menü konzipieren. Welche seiten zeigen wir im Menü? Wie viele Hierarchien bilden wir im Menü ab? Im Boilerplate lassen sich unterschiedliche Menüs konfigurieren und durchspielen. Gemeinsam mit unseren UX Spezialisten definieren wir dann das geeignetste Menü für grosse und kleine Bildschirme.

5. Test, Test, Test

Nun sollen Projektteam Mitglieder, übrigen Mitarbeiter und Kunden den Prototypen durchklicken und ausgiebig testen. Finden die Besucher wonach sie gesucht haben? Wir sammeln das Feedback und optimieren den Prototype.

Hier geht's zum Boilerplate https://boilerplate.gridonic.io/

Vorteile für den Kunden

Die Erstellung eines browserbasierten Prototyps ist nicht nur ein technischer Schritt, sondern auch ein strategisches Werkzeug, um den Erfolg eines Projekts zu sichern. Kunden profitieren von:

  • Keine Überraschungen: Wir müssen nicht auf die Endphase warten, bis wir sehen wie die neue Webesite wird. Der Kunde kann sich früh im Prozess genau vorstellen, wie die neue Webseite daherkommen wird.

  • Transparenz: Durch den evolutionären Prototyp ist der Kunde im Entwicklungsprozess nah mit dabei und sieht jeden Fortschritt auf Tages- oder Wochenbasis.

  • Bessere Entscheidungsfindung: Mit einem interaktiven Modell können Entscheidungen fundierter getroffen werden und Stakeholder können frühzeitig abgeholt werden.

  • Kosten- und Zeitersparnis: Probleme werden frühzeitig erkannt und behoben, bevor sie in späteren Phasen kostenintensiv werden.

Fazit

Mit dem Gridonic Boilerplate haben wir ein leistungsstarkes Werkzeug an der Hand, das uns ermöglicht, schnell und effizient Prototypen zu erstellen, die sowohl funktional als auch optisch überzeugen. Dieser Ansatz macht den gesamten Relaunch Prozess agiler und liefert unseren Kunden ein Produkt, das von Anfang an begeistert.