DaoMed

Rouven und ich durften gemeinsam ein Lehrlingsprojekt von A bis Z erstellen. Dabei handelt es sich um eine neu geöffnete Traditionell Chinesische Medizin, kurz TCM, Praxis. Bei diesem Projekt gab es keine Vorgaben. Das Zielmedium war eine Website.

Also fingen wir an, uns über das Thema genauer zu informieren. Dabei führten wir eine schweizweite und ortsspezifische Konkurrenzanalyse durch. Zudem suchten wir bereits ein paar Inspirationsseiten und bereiteten einige Interviewfragen vor, die wir zum Kick-off dem Kunden gestellt haben. Unsere ersten gezeigten Ideen, wie es später aussehen könnte, hat ihnen sehr viel Freude bereitet. Dank den beantworteten Fragen sind wir nun besser informiert und konnten mit dem Konzept starten. Am Anfang erstellten wir ein Timing, da die Website bis zur Eröffnung anfangs November zwingend fertig sein musste. Im nächsten Schritt schufen wir drei Personas. Eine Persona ist eine fiktive Person, die für eine Zielgruppe steht. Mit den definierten Personas und deren Bedürfnissen entwickelten wir für jede Persona mit kleinen quadratischen Zetteln eine Art von User Journey. Dank diesen Informationen konnten wir weiter zur Informationsarchitektur gehen. Dabei entschieden wir uns auf eine Startseite. Die wird jeweils die vier Unterseiten anteasern. Ausserdem befindet sich auf jeder Unterseite am Schluss der Teaser für das Online-Buchungstool, welches wir ganz stolz noch integriert haben und immer noch prima funktioniert. Danach zeichneten wir mit Farben die User Journey auf der Informationsarchitektur ein. Aufgrund dieser IA starteten wir mit den Wireframes. Angesichts des eher knappen Timing reichte die Zeit nur, die Startseite als Wireframe zu erstellen. Dies ist aber überhaupt kein Problem, da ich weiss, wie man Wireframes macht.

Im nächsten Schritt setzten wir uns mit der Grafik zusammen und definierten Farben und Schriften. Dabei entstand ein sehr passendes Konzept. Bei einer Recherche stiessen wir auf die «Fünf-Elemente-Lehre». In der chinesischen Philosophie ist eine Theorie zur Naturbeschreibung. Die fünf Elemente Holz, Feuer, Metall, Wasser und Erde sind unmittelbar aus der Natur abgeleitet. Diese Elemente werden stets in einem Kreis abgebildete und somit ist jedes Element mit jedem anderen Element verknüpft. Diese Kreise haben wir in unser Konzept aufgenommen und für jedes Element haben wir eine eigene Farbe definiert. Daraus entsteht zwischen zwei Farben jeweils einen Verlauf. Da wir genau fünf Seiten hatten, konnten wir auf jeder Seite einen unterschiedlichen Verlauf im Header und Footer verwenden. Zudem definierten wir mit der Grafik die Schrift. Da «DaoMed» zuerst «iging» hiess, haben wir eine Schrift mit einem charakterstarken «G» gewählt. Die Wahl fiel auf die «Gloucester» von Monotype. Diese Schrift widerspiegelt ausserdem mit den Serifen leicht die chinesischen Zeichen. Ebenso weisst sie östliche Eigenschaften auf. Ich finde, die Schrift wirkt sehr eigenständig.

Mit diesen Designvorgaben haben wir anschliessend mit dem Screendesign gestartet. Wir wollten eine ausgewogene Balance zwischen den grossen und schweren Bildern und dem Weissraum erzeugen. Auf der Startseite hat jeder Button den Verlauf von der Detailseite. Auf diesen Seiten haben wir das Video aus Platzgründen mit dem  Headerbereich überlappt. Dieses Konzept konnten wir auch auf den Seiten ohne Video gut übernehmen. Es sind nämlich nur für die ersten zwei Unterseiten ein Headervideo geplant. Die Hauptfarbe auf jeder Seite ist die im Verlauf auftretende Farbe von der unteren linken Ecke. Wir haben uns entschieden, die Bildmarke und die Wortmarke nie zusammen zu zeigen. Deshalb ist die Wortmarke im Header und die Bildmarke im Footer anzutreffen. Dieses Konzept haben wir auch auf die später gestalteten Visitenkarten übernommen.

Im nächsten und zweit letzten Schritt startete vor allem ich mit der Umsetzung. Wir haben uns für das WordPress-Theme «Divi» entschieden. Es hat bereits ein paar kleine Animationen eingebaut und wir können auch noch mehrere benutzerdefinierte Animationen einbauen. Ebenso ist es direkt möglich Verläufe einzufügen. Der wichtigste Grund ist aber, dass der Kunde später mit einem «Frontend Editor» die Website anpassen kann. Die Umsetzung hat viel mehr Zeit beansprucht, als zuerst geplant war. Es war kein Problem die Website auf Desktop zu erstellen. Jedoch kamen die ersten Komplikationen auf, als ich später alles auf die verschiedenen Grössen von den Geräten manuell anpassen musste. Es hat mir sehr viel Spass bereitet, eine Website ganz selber zu erstellen. Mit der Zeit wurde es aber eher mühsam, da mir das technische Wissen gefehlt hatte.

Kurz vor dem Going-Live der Website durften Rouven und ich einen Morgen lang in die Praxis und die verschiedenen Massagearten filmisch und fotografisch für die Website festhalten. Dieser Morgen hat mir enorm viel Spass zubereitet, weil ich leider erst das zweite Mal in meiner Lehre bei einem Videodreh dabei war. Ich habe den Morgen hauptsächlich fotografisch festgehalten. Zwischendurch durfte ich aber die Kamera von Rouven übernehmen und auch noch ein paar Bewegtbilder erstellen. Die anschliessende Bearbeitung übernahm Rouven, weil ich noch die letzten kleinen Anpassungen auf der Website erledigen musste.

Mir hat das Projekt enorm viel Spass gemacht, weil wir von A bis Z alles selber erledigen durften. Vor allem das Filmen am Schluss war ein Highlight für mich. Ich fand es aber auch eine super Übung für meine Abschlussarbeit. Für ein nächstes Lehrlingsprojekt wäre es sicherlich nützlich, wenn uns jemand in der Umsetzung unterstützen würde. Allen Schnupperstiften zeige ich nun das Projekt, weil ich mit diesem Beispiel den Prozess am besten erklären kann.
Ich bin mit dem Endprodukt sehr zufrieden und finde, dass uns das Projekt sehr gut gelungen ist.