Wie eine Webseite entsteht (1): Idee und Konzept

03.12.2014 | Idee

Wie eine Webseite entsteht: Im ersten Teil der Serie geht es um ein Ziel und ein Konzept für das Redesign der Trendschau.

Es gibt tausend falsche Wege, wie man ein Web-Projekt angehen kann. Genauso gibt es mehr als einen richtigen Weg, der zum gewünschten Ziel führt. Doch egal welchen Weg man am Ende einschlägt: Er beginnt (im besten Fall) immer mit einer Idee oder einer Vision. Und diese Idee muss erst einmal treffend ausformuliert werden, bevor man sie umsetzen, testen und anpassen kann.

Im ersten Teil der Serie über die Erstellung und Konzeption von Webseiten soll es genau darum gehen: Eine Vision und ein Konzept für das Redesign der Trendschau zu finden (also für die Webseite, auf der du gerade bist).

Mannshoher Schriftzug #idea in einer Landschaft bei Dämmerung Foto von misspixels

Eine Vision für die Trendschau

So wie sie jetzt ist, hat die Trendschau keine Idee und keine Vision. Sie ist eine Mischung aus persönlicher Profil-Seite, sporadischen Projekt-Darstellungen und thematisch konfusen Blogposts. Das hat historische Gründe, denn bei der Erstellung vor einem Jahr ging es mir vor allem um die Einarbeitung in das CMS Statamic. Eine sinnvolle und zielgerichtete Webseite war eher Nebensache.

Eine Vision zu finden ist nicht ganz einfach, sie zu formulieren und daraus ein Konzept zu entwickeln noch viel schwieriger. Bei der Trendschau hat sich die Idee erst im Jahresverlauf durch diverse Gespräche ergeben. In den Gesprächen ist mir aufgefallen, dass die meisten Menschen nicht so recht verstehen, womit ich mich beruflich und privat den ganzen Tag beschäftige. Das liegt auch daran, dass ich einen recht abwechslungsreichen Werdegang vom Verlagsmenschen über den PR-Texter und Blogger bis hin zum Online-Projektmanager, Hobby-Coder und Online-Verantwortlichen durchlaufen habe. Zum Glück gibt es für eierlegende Wollmilchsäue inzwischen eine recht griffige Bezeichnung: Der Product Owner oder Produkt-Manager. Kurz gesagt ist der Produkt Owner dafür zuständig, den Wert des Produktes (einer Webseite, App oder was auch immer) bzw. der Arbeit des Teams zu erhöhen. Das trifft sehr gut den Kern von dem, was ich seit einigen Jahren mache, sodass ich mich in diesem Jahr auch formal zum Product Owner weitergebildet habe. Die Vision für die Trendschau könnte also lauten:

"Mit der Trendschau will ich den Besuchern erklären, wer ich bin und was ich mache."

Diese Formulierung geht nur leider völlig an der Realität vorbei: Kein Mensch geht auf eine Webseite und lässt sich dort über irgendeinen Beruf belehren, den er nicht kennt und der ihn nicht interessiert. Doch genau das ist die Falle, in die man intuitiv bei der Formulierung tappt.

Die Perspektive des Nutzers

Bei der Formulierung von Produkt-Visionen, Vision Statements, Business Objectives und Co. geht man daher einen anderen Weg: Man schlüpft in die Rolle des Nutzers und geht von dessen Bedürfnissen aus. Ein schönes Beispiel findet man in den Lehrmaterialien der Google Analytics Academy. Dort lautet das Business Objective eines fiktiven Outdoor Händlers so:

"Help people enjoy the outdoors through innovative products and cultivate their love of the outdoors".

Das klingt schon etwas anders, denn hier ist der Verkauf nicht als Selbstzweck formuliert, sondern das Bedürfnis des Menschen steht im Vordergrund und das Produkt ist nur ein Mittel, um dieses Bedürfnis zu befriedigen. Man dreht also die Perspektive um und versucht erst einmal zu verstehen, was der Nutzer eigentlich will und wie man seine Wünsche bedienen kann.

Um diesen Perspektivwechsel bei der Formulierung einer Produkt-Vision zu erleichtern, kann man eine einfache Lückentext-Technik anwenden. In diesem Lückentext werden fünf Fragen beantwortet:

"For … [ customer ] …. who … [ need ] … the … [ product ] … that … [ product-benefit ]. Unlike … [ competitors ] … our product … [differentiation ]. "

Das Modell kenne ich von Roman Pichler, es geht aber offenbar auf Jim Highsmith zurück und wurde unter anderem von Joel Spolsky promoted. Das ist auch deshalb symphathisch, weil Spolsky der Gründer von Trello ist, das sich in den letzten Jahren zu meiner Lieblings-Software für die Projektorganisation gemausert hat.

Eine Produkt-Vision für die Trendschau

Nach dem Perspektiv-Wechsel kann die Vision für die Trendschau neu formuliert werden. Und mit der Nutzer-Brille auf der Nase würde ich gleich auch noch die Zielgruppe und die Ausrichtung modifizieren: Eine Zielgruppe, die wissen möchte, was ich mache, gibt es schlicht nicht. Es gibt aber viele Menschen, die Ideen für Web-Projekte haben und wissen möchten, wie man diese realisiert. Oder Menschen, die für Webprojekte zuständig sind und diese noch besser managen wollen. Davon gibt es mehr, als man denkt, zumindest trägt immer mal wieder jemand eine Idee an mich heran oder fragt irgendwas zum Thema Webprojekte oder Webseiten. Die Produkt-Vision könnte also lauten:

"For people, who want to know about creating and managing web-projects, the Trendschau is a website, that provides usefull information and guidance. Unlike scrum-, usability- or startup-blogs, Trendschau will focus on tutorial-like information for newcomers, solopreneurs and small businesses."

So eine Produkt-Vision ist reichlich lang und man würde sie natürlich niemals auf der Webseite veröffentlichen. Sie dient einfach nur dazu, sich auf ein klares Ziel zu fokussieren. Mit diesem Statement vor Augen ist es zum Beispiel deutlich einfacher, Anforderungen und Ideen zu priorisieren. Man schaut einfach, wie viel Strecke man mit einer Idee auf dem Weg zum Ziel zurücklegen kann und priorisiert sie entsprechend hoch oder streicht sie komplett weg.

In einem zweiten Schritt könnte man die Produkt-Vision noch ausbauen: Mit Hilfe eines Vision Boards kann man die Vision in Kategorien wie "Vision-Statement", "Zielgruppe", "Bedarf", "Produkt" und "Wert" aufdröseln (Beispiel bei Roman Pichler). Noch ausführlicher geht es mit dem Business Modell Canvas von Alexander Osterwalder.

Um anschließend eine erste genauere Vorstellung von dem Produkt zu entwicklen, kann man sich weiterer Techniken bedienen: Es gibt die Vision-Box, bei der man eine Verpackung für das Produkt entwirft. Die sollte natürlich den größtmöglichen Anreiz zum beliebten Un-Boxing liefern. Es gibt die "trade journal review", bei der man eine fiktive Kritik über das Produkt schreibt. Oder es gibt Techniken wie "personas" und "scenarios", in denen man Nutzer und Nutzungsarten beschreibt. In einem nächsten Schritt könnte man Sketches bzw. Wireframes erstellen (Skizzen aus Papier oder Bits) oder ein Mockup bauen (Design-Prototypen). In Zeiten von Frontend-Frameworks wie Bootstrap und Co. könnte man auch direkt eine Landingpage coden, die dann eine ähnliche Funktion wie die Vision-Box erfüllt. Ich hätte dabei allerdings Sorge, dass man sich vom Design bereits zu sehr an dem übersättigten Standard orientiert.

Erstes Grob-Konzept für die Trendschau

Ausufernde Techniken sind nicht unbedingt meine Welt. Ich bin eher ein handwerklicher Typ und will möglichst schnell texten, coden und gestalten. Daher übergehe ich mal das Vision Board und fange direkt mit einem konkreten Konzept für die Webseite an.

Und die sieht im Moment so aus: Ich will auf jeder Seite ein Profilbild mit einem Zitat platzieren, das die Vision in irgend einer Weise aufgreift. Auf der Startseite irgendwo zentral, auf Unterseiten dezenter in der Sidebar. Die erste Version des Zitates verfasse ich mal auf englisch, weil mir im Augenblick keine griffige Formulierung auf deutsch einfällt:

"I am a Product Owner. I help online-products come to life and grow up. Here is how it works … "

Vielleicht steht bei dem Zitat meine Person immer noch zu stark im Vordergrund. Aber im Vergleich zur ursprünglichen Formulierung darf der Leser jetzt Informationen erwarten, die ihm auch bei seinen eigenen Projekten und Projekt-Ideen helfen.

Und genau das ist auch das Konzept: Das Zitat soll auf eine Seite verlinken, die die Entstehungsstufen eines Web-Projekts schematisch visualisiert. Um das ganze mit den Inhalten zu verweben, sollen die einzelnen Entwicklungsstufen als Tags definiert sein (z.B. Visioning, Prototyping, Developing, Testing, Feedback, Optimization, Promotion). Dadurch könnte man sich vom Zitat über das Schema direkt zu den Inhalten klicken. Nebenbei würde man die Seite damit thematisch streng fokussieren. Die Vision, eine schwer vermittelbare Tätigkeit zu erklären, wäre dann nicht nur im Text, sondern auch auf konzeptioneller Ebene über die Organisation der Inhalte erfüllt.

Ob das Endprodukt tatsächlich so aussehen wird, weiß ich zu diesem Zeitpunkt noch nicht. Man sollte aber - gerade bei so einem kleinen Projekt - nicht allzu wissenschaftlich herumdoktorn, weil es eher darum geht, schnell einen ersten Prototypen zu entwickeln, mit dem man sein eigenes Verständnis von dem Produkt erhöhen und ein erstes Feedback einholen kann.

Das beste Feedback sind natürlich Leser-Kommentare. Ihr könnt hier also frühzeitig eine Fehlentwicklung korrigieren. Andernfalls sehen wir uns beim zweiten Teil wieder. Entweder mache ich dann ein Wireframe, oder wir steigen direkt ins Coden und Designen ein. Mal sehen …

Dieser Beitrag gehört zu der Serie "Webseite". Das sind alle Artikel der Serie:

Wenn du ein Web-Projekt von A-Z erstellen willst, findest du im Themenüberblick viele Artikel zu jedem Schritt.

blog comments powered by Disqus