How To „Double Kite“: Beispiel einer Website-Erstellung


Willkommen!

Kurz vorweg, um die Erwartungen abzustecken und eine positive Experience zu fördern: Dieser Beitrag wird A) den „Double Kite“ Prozess am Beispiel der Entstehung einer Website beschreiben, B) Learnings für Design-getriebene Kundenprojekte enthüllen und C) zeigen, wie wir bei e.GO Digital arbeiten, denken und an Challenges herangehen.

Umgesetzt wurde das Website-Projekt durch unsere UI Designerin Sabrina Huppertz und mich, Juliana Brell, UX Lead bei e.GO Digital. Wer nur 1 statt 5 Minuten hat, skipped einfach den Teil, wie aus dem „Double Diamond“ der „Double Kite“ wurde, springt zu den Learnings und nimmt davon hoffentlich ein paar für die eigene Arbeit mit :)

Auf geht’s!

 „Könnt ihr auch für externe Unternehmen eine Website umsetzen? Äh – na klar!“

Ein Anruf Ende März, die Ziellinie Mitte Mai. Unser Auftrag: Eine Website für ein Aachener Beratungsunternehmen. Das Design soll möglichst nah am Mutterschiff orientiert sein, aber moderner und clean. Es soll gleichermaßen jahrelange Erfahrung sowie kreativen Drive verkörpern, bestenfalls ein eigenes Wiedererkennungsmerkmal verwenden und den Entscheidern (Achtung: Aachener Ingenieure) gefallen. Natürlich dem Marktstandard für Beratungen entsprechen. Zusätzlich ein Facelift des aktuellen Logos. Und das Ganze in wenigen Wochen, ohne Vorhandensein eines Corporate Designs, neben Bestandsprojekten, in einem Corona-bedingten remote Setting und abseits des e.GO Digital Kern-Business. Uff.

Klar, für die eigenen Produkte wie e.Base, die Plattform für Quartiersmobilität, oder das Enterprise Cockpit, das KPI-Transparenz-Tool für produzierende Unternehmen, haben wir Websites umgesetzt. Auch unsere eigene Homepage existiert seit 2,5 Jahren. Dennoch – unsere Kernkompetenz ist die Konzeption und Umsetzung digitaler Produkte rund um das Thema Mobilität sowie die Prozessoptimierung bei der e.GO Mobile AG. Für unsere Kunden gibt‘s statt Websites bisher neue Software oder App Features. Aber wie wir bei e.GO Digital sind, lautet unsere Antwort: Challenge accepted!

Und nun zum „Wie“.

„Sorry, wir haben bisher nur Powerpoints, wie gehen wir nun vor?“

Uns ist bewusst, dass wir in einem Remote Setting klare Absprachen bzgl. der Anforderungen, regelmäßige Reviews bzgl. der Arbeitsweise sowie iterative Feedbackschleifen bzgl. des entstehenden Produkts benötigen, um Ineffizienzen zu vermeiden und ein erfolgreiches Ergebnis zu erhalten. Wir entscheiden uns daher in dieser „Phase 0“, den Double Diamond Prozess für unsere Zwecke anzupassen und entwickeln kurzerhand den „Double Kite“:

Double Kite Design Process

Dieser neue Prozess passt die ursprünglichen vier Phasen des Double Diamond Prozess („Discover“, „Define“, „Design“, „Deliver“) auf sechs Phasen und eine Retrospektive an. Was den Prozess visuell vom Diamond zum Kite macht, ist A) die Betonung der ersten Phase „Discover“ und B) die Erweiterung der „Deliver“-Phase um die iterativen Steps „Feedback“ und „Optimize“, da es mit der Auslieferung nach dem Design nicht getan ist. Zusätzlich ergänzen wir unseren Prozess durch eine Art „Retrospektive“, um uns kontinuierlich zu verbessern.

Hier kommt unser Website-Prozess in nun 6+1 Phasen.

Phase 1: Discover.
Hier kümmern wir uns ausschließlich um die Anforderungen der Kund:in. Wir erfragen, entdecken, hinterfragen und verstehen. Konkret: Analyse und Diskussion der bereits vorhandenen Daten und Vorlagen, der Unternehmensinformationen, des bisherigen Logos und der Kritik daran, der Projekt-Fokussierung, der auftretenden Widersprüche, der zukünftigen Inhalte, der visuellen Präferenzen und natürlich auch der Wettbewerber.

Phase 2: Define.
Beim Definieren transferieren wir Phase 1 in konkrete Ziele und setzen der Kund:in und uns selbst einen Rahmen. Der Rahmen besteht hier aus dem Abgleich des Verständnisses und der Zielvereinbarung sowie der Auswahl eines Wordpress Themes. Ein solches Theme bietet in Kombination mit z.B. dem Plugin Elementor (und ein paar weiteren) große Freiheit bezüglich Anpassungsmöglichkeiten. Hieraus entwickeln wir ein eigenes Template, das den Grundstein für das Design und den Content festlegen.

Phase 3: Visual Design.
Next Step: Grafik-Design! einer anhand der Präferenzen und Einschränkungen getroffenen Optionsauswahl durch uns, geht es dann in mehreren Sessions gemeinsam mit der Kund:in um Visuelles, z.B. Form- und Bildsprache, Typographie und Farbwahl. Wir schlagen sinnvolle Kombinationen vor, nehmen Feedback an, überarbeiten, präsentieren neue Ideen. Auch die Entwicklung eines Elements, das als Widererkennungswert dient, ist Teil dieser Phase. Zudem befassen wir uns parallel mit den Concept Scribbles für die Modernisierung des Logos. Hier entwickeln wir alles von händischen Scribbles über digitale Tablet-Varianten hin zum fertigen bzw. reingezeichneten Design in Figma und Illustrator – dieser Prozess verdient jedoch einen eigenen Artikel ;)

Phase 4: Content Design.
Erst nach der visuellen Arbeit an der Website befassen wir uns mit dem konkreten Inhalt. Zunächst verwenden wir Platzhalter für Visualisierungen und Texte, um den Design-Fit zu prüfen. Anschließend lassen wir die Kund:in auf ihr neues Produkt los – indem sie den gewünschten Inhalt, also Überschriften, Texte und Bilder, selbst einfügt. So lernt sie in einer geschützten Umgebung den Umgang mit dem System (falls sie sich nicht damit auskennt). Die technische Übergabe erfolgt in einem Remote-Workshop zum Thema Wordpress. Natürlich unterstützen wir bei Bedarf auch bei der Bildwahl und melden uns bei Verständnisschwierigkeiten der Texte.

Phase 5: Feedback
Ganz wichtig ist uns das iterative Arbeiten nah an den Kund:innen und Entscheider:innen, weshalb wir diesen Schritt hier explizit nennen. Auch im Falle einer „simplen“ Website gibt es mehrere Feedback-Schleifen. Zudem halten wir ein internes Review für wichtig und machen einen Design- und Usability-Check mit ein paar Personen, die mit dem Projekt bisher nichts zu tun haben. Was fällt positiv auf, was wird kritisiert bzw. nicht verstanden?

Phase 6: Optimierung & Deliver
Mit dem Feedback und unserer Präzision werden im nächsten Schritt alle gefundenen Aspekte optimiert. Im vorliegenden Projekt sind dies u.a. Designspezifizierung (z.B. geringerer Schatten, abgerundete Kacheln mit Hover Effekt, outlined Icons, monochrome Bildwahl, …), SEO Anpassungen in Wordpress, sowie Usability & UX Optimierungen.

Phase 7 (bzw. unser „+1“): Retrospektive.
Und wie man das in der Softwareentwicklung und Scrum und Agile sinnvollerweise macht, gibt’s zur Prozess- und Teamoptimierung bei uns eine Art angepasste „Retro“ mit den Aspekten „Keep“ und „Improve“. Das heißt, wir fragen uns: Was wollen wir beibehalten, was lief gut? Was wollen wir anders machen, was werden wir beim nächsten Projekt optimieren?

 

„Und was sind eure Learnings aus der Retro?“

  1. Remote? Läuft.
    Aufgrund von Corona waren wir z.B. weder für Kick-Off noch für den „How to Wordpress“ Workshop vor Ort. Wir waren nicht 100% sicher, ob die Zusammenarbeit im Remote Setting genauso gut funktioniert, wie in Face to Face Projekten. Ja, es klappt! Was hierbei wirklich wichtig ist: Das „How To Work“ festzulegen, also Absprachen bzgl. regelmäßiger Termine, Feedback-Regeln, Zeitplan und Aufgabenteilung. Meine Tipps: 1) Eine Person leitet Termine inhaltlich, eine weitere ist für Protokoll und ToDos verantwortlich und sendet dies direkt im Anschluss per Mail an alle Beteiligten. 2) Workshops / Erklärungen zum verwendeten System bestenfalls parallel aufzeichnen als eine Art digitales Lernvideo. 3) Schonungslose Ehrlichkeit von Kund:innen verlangen, dann wird das Ergebnis kein Puffreis.
  2. UX & UI = Dreamteam
    Mein Tipp: Die Kombi aus einer UX-Person, die sich im beruflichen Alltag mit UX Konzept, Research und Strategie befasst, und einer UI-Person, die ursprünglich aus dem Grafikdesign kommt, bewährt sich nun bereits in vielen Projekten. Klar, links und rechts cheaten wir und greifen nach Kolleg:innen mit Analytics-Erfahrung, Server-Fähigkeiten und Code-Manie. Sonst wären wir ja auch keine gute Software-Bude ;)
  3. Entscheider:innen einbeziehen!
    Ganz. Ganz. Wichtig. Häufig hat man in Projekten mit Kund:innen zu tun, die im Endeffekt nicht für die Abnahme des Produkts verantwortlich sind. Besonders dann, wenn Kund:in und Entscheider:in unterschiedliches Alter und/oder unterschiedliche disziplinäre Hintergründe haben, driften Vorstellungen von „modern“ oder „nah am alten Logo“ auseinander. Das ist natürlich und völlig ok – mein Tipp wäre hier: Frühestmöglich erfassen, wer über Projekterfolg entscheidet, diese Person/en direkt einbinden und die Anforderungen schriftlich festhalten.
  4. Double Kite statt Double Diamond ;)
    Immer wieder merken wir, dass sich der zeitliche und inhaltliche Invest in die Themen „Discovery“ und „Feedback“ lohnt. Meine Tipps für die Zukunft: 1) Durchführung einer ausführlichen Discovery-Phase ist Gold wert; 2) Ehrliches Feedback & flexible Optimierung sind das Herzstück von Agilität und positiver User Experience.
    Der „Doube Kite“ Prozess bewahrt uns vor unnützer Arbeit und Enttäuschung, er führt alle Beteiligten zu einer positiven Experience mit a) dem zukünftigen Produkt, b) dem Prozess dort hin und c) mit uns als Partner. Win Win Win ;)

 

Danke für die Aufmerksamkeit – bei Anmerkungen, Ideen und Rückfragen freue ich mich sehr über Mails!



Back