Summary

About the company

GotPhoto.com is a service that helps photographers sell photos to their clients. School and nursery photographers are especially using the service to automate and digitize their processes.

GotPhoto.com is the international brand of the German fotograf.de, that I co-founded in 2012. I was responsible for the product strategy, created many concepts and features in close collaboration with our customers and also acted as interim product manager.

Approach

Before 2018, we did not have any design guidelines. Most of our marketing materials and the website(s) looked quite inconsistent. So we decided to develop a comprehensive style guide to establish a unified brand.

Project

Overall goal: Creating a consistent user experience across all touchpoints of the customer journey

Creation of an extensive style guide with a team of designers and a clear description of the brand archetype – together with the brand manager.

Redesign of the marketing websites according to the style guide’s specifications.

Establish the style guide in all relevant teams.

Warum wir 2018 mit einem Rebranding gestartet haben

Bis 2018 bestand der gemeinsame Nenner der Marke fotograf.de (international GotPhoto.com) hauptsächlich aus dem Logo. Anzeigen, Print-Materialien, Messen, Social Media Auftritte oder Webseiten waren inhaltlich gut durchdacht und separiert betrachtet auch gut gestaltet. Aber es gab kein einheitliches, visuelles Konzept. Eine Werbeanzeige wurde das eine Mal mit Fotos designed, ein anderes Mal mit Illustrationen. Farben und Formen wechselten ebenso häufig wie die Schriftarten. Mitarbeiter benannten den Zustand als “Kraut und Rüben” und der Wiedererkennungswert war gering. In Folge dessen waren die Marketing-Ausgaben hoch und auch das Sales Team hatte zu kämpfen.

Den Zustand wollten wir ändern. Unabhängig vom Touchpoint beziehungsweise Marketing Kanal, sollen uns potenzielle Kunden auf einem Blick erkennen und unsere Botschaft klar verstehen. So einigten wir uns auf zwei initiale Projekte. Ein Leitfaden, in dem unsere Marke mit einer starken Persönlichkeit definiert wird. Zweitens sollte die Webseite entsprechend neu aufgesetzt werden. Bestandteil war auch eine Roadmap für die Implementierung der weiteren Touch Points der Customer Journey, auf dieses Thema werde ich in diesem Artikel jedoch nicht weiter eingehen.

Die Motivation ein solches Rebranding durchzuführen stieß auf geteilt Freude. Auf der einen Seite gab es schon lange den Wunsch nach expliziten Vorgaben. Denn so könnte das Mikro-Management im Team reduziert werden. Auf der anderen Seite war da aber noch das Lager mit Printmaterialien, Messeständen, Visitenkarten und so weiter. Alles müsste neu gestaltet und gedruckt werden. Es kostete uns daher einige Überzeugungsarbeit, diese Projekte anzustoßen. Wir waren jedoch fest davon überzeugt und sind es immer noch, dass ein Rebranding der richtige Schritt war.

Das Brand Manual

Zusammen mit dem Marketing Team bestimmten wir die Marken Persönlichkeit mit Hilfe archetypischer Figuren. Hauptcharakter der Marke fotograf.de / GotPhoto.com sollte der Magician sein, unterstützend der Caregiver. Zusammen repräsentieren sie alle Qualitäten, Werte und Erfahrungen, die Menschen mit uns verbinden sollen. Der Magician steht zum Beispiel für Inspirierend und Transformativ wohingegen der Caregiver Komponenten wie Persönlichkeit und Verlässlichkeit mitbringt.

Vorteil solcher Archetypen ist, dass sie einen allgemeinen, vertrauten Charakter darstellen, den jeder intuitiv versteht. Die Merkmale können auf alle Bereiche der Kundenerfahrung “Customer Experience” angewandt werden, z.B. neue Produkt-Features, das User Interface, die Typografie, Sprache, Tonalität oder Inhalte.

Mittlerweile gibt es ein Brand Manual, dass die Marke und Unternehmensstrategie beschreibt und außerdem die Elemente der Identität definiert. Enthalten sind unter anderem die Tonalität “fotograf.de ist per Du”, Farben, Logoverwendung, Typografie und Design Elemente, jeweils angereichert mit viele Beispielen und vorgefertigter Materialien. Auch negativ-Beispiele sind enthalten, also “Don’ts”. Das erleichtert Mitarbeiter die tägliche Arbeit und reduziert das Mikromanagement.

Redesign der Webseite

Nachdem wir uns auf die Archetypen Magician und Caregiver geeinigt hatten, starteten wir mit dem Redesign der Webseite. Das Webdesign sollte die zentrale Grundlage für alle weiteren Designs sein, bei denen es Berührungspunkte mit unseren Kunden gibt, also Broschüren, Messestände, Anzeigen und so weiter.

Das Redesign nahmen wir auch zum Anlass, die Seite inhaltlich zu erneuern. Denn über die Jahre hat sich unser Service und Funktionsumfang stark weiterentwickelt und unsere Zielgruppe war stärker eingegrenzt – auf die Kindergarten und Schulfotografie. Wir stellten also den bisherigen Stand der Webseite komplett auf den Prüfstand.

Folgende Ziele definierten wir:

• Die Webseite soll den Kern der Marke repräsentieren
• Potenzielle Kunden sollen unseren (komplexen) Service verstehen
• Sie sollen das Gefühl haben, mit uns auf den richtigen Partner zu setzen
• Die verwendeten Design-Elemente sollen die Grundlage für alle weiteren Touchpoints bilden
• Erfolgs Metriken sind unter anderem die Anmeldungen zur Testphase und “Download-Leads” – also potenzielle Kunden die sich kostenloses Material downloaden und dabei ihre Telefonnummer angeben

Wir definierten auch eine Reihe technischer Verbesserungen wie zum Beispiel Performance, Seo Optimierung, Einfachheit der Verwaltung etc. auf die ich in einem anderen Blog Post eingehen werde.

Konzeptionsphase

Meine Empfehlung bei großen Redesigns ist es, zunächst Inhalte und Struktur festzulegen und erst im Anschluss das Design zu entwickeln. Ich liebe gutes Design – dennoch sollte es sich dem Inhalt anpassen und nicht umgekehrt. Wenn ich die Wahl habe zwischen “fancy” Design und einfacher Bedienung, entscheide ich mich für letzteres. Vermutlich weil ich schon viele verzweifelte Probanden in meinen Usability-Tests gesehen habe. In den meisten Fällen ist es jedoch möglich beide Welten zu vereinen.

Die Trennung von Inhalten, Struktur und Design teilt die Komplexität des Projekts auf – und reduziert den Aufwand des Designers. Mit sogenannten Wireframes entwickelten wir erste Ansätze die wir in Workshops zusammen mit den weiteren Stakeholdern verfeinert haben. Mit den richtigen Werkzeugen können Ideen sogar gemeinsam schnell ausprobiert werden.

Wir haben Adobe XD verwendet. Ein intuitives Tool mit dem Seiten schnell aufgesetzt und einfach angepasst werden können. Selbst klickbare Prototypen (Click Dummies) sind schnell erstellt. Obwohl XD Teil der Creative Cloud ist, kann es kostenlos genutzt werden.

Für die Konzeption und Textgestaltung haben wir außerdem Freelancer hinzugezogen. Denn Externe hinterfragen Dinge, die als Gegeben erscheinen, betrachten Ansätze aus einer anderen Perspektive und bringen neue Ideen mit ein.

Screendesign

Nach Fertigstellung der Wireframes, haben wir mit ausgewählten Designern ein visuelles Grundgerüst für die zukünftige Webseite entwickelt. In mehreren Workshops legten wir Typografie, Farben, Anordnung etc. fest und entwickelten anschließend weitere Elemente wie Illustrationen und Produkt-Mockups. Immer abgeleitet von der zuvor entwickelten Persönlichkeit der Marke.

Sowohl während der Konzeptionsphase und auch beim Design behielten wir die spätere Umsetzung im Blick. Es macht schließlich wenig Sinn, Designs zu entwickeln, die später nur mit unverhältnismäßig hohem Aufwand umgesetzt werden können. Die Seiten haben wir zum Beispiel in logische Abschnitte eingeteilt, die wir dann später in Form von Blöcken umsetzen konnten. Wir entwickelten die Screendesigns bzw. Abschnitte parallel für unterschiedliche Seitenbreiten – also Smartphone, Tablet oder Desktop.

In diesem Schritt wechselten wir zu Sketch – auf Wunsch unseres Designteams. Der Funktionsumfang ist etwas größer als bei Adobe XD – dementsprechend nicht ganz so intuitiv im Handling. Grundsätzlich sind aber beide Tools absolut zu empfehlen.

Fazit

Mittlerweile sind die Seiten umgesetzt und unter www.fotograf.de, www.gotphoto.com oder www.gotphoto.co.uk erreichbar. Dank des Brand Manuals wurden mittlerweile viele weitere Materialien anderer Abteilungen im selben Stil konsistent umgesetzt. Mehr und mehr entsteht eine einheitliche Markenpersönlichkeit und bei gleichem Marketing Budget steigt die Zahl der Registrierungen und Download-Leads.