Irix Lens: Website eines Objektivherstellers

Also darüber, wie wir die Website des Herstellers einer Premium-Marke gebaut haben

Ziele und Annahmen der Umsetzung

IrixLens ist ein Unternehmen, das Produkte einer Premium-Marke anbietet. Das Unternehmen ist weltweit in der Fotografiebranche bekannt und hat zahlreiche Markenbotschafter. Darüber hinaus bietet es viele technologische Lösungen für Fotografen.

Zu den Hauptaufgaben gehörte die Ausarbeitung eines intuitiven und effektiven Pfades der Nutzerreise über die Website.

Notwendig war es, das Angebot und das Unternehmen auf der Website so anzupassen und darzustellen, dass sie auf klare und verständliche Weise über das Unternehmen erzählen und das Angebot, den Umfang und die Möglichkeiten präsentieren konnten.

Unsere Rolle

Analyse der vorherigen Version der Website sowie Vorbereitung der Eingangsdaten für den Aufbau ihrer neuen Version. Mit den uns zur Verfügung stehenden Werkzeugen: Google Analytics, Heatmaps: hotjar.com, mouseflow.com haben wir ein Audit und einen Bericht erstellt über die Wahrnehmung der Website durch die Nutzer sowie über den Stand der Sichtbarkeit in der Google-Suche.

Phasen der Umsetzung

Warum, was und wie?

Mit dem Wunsch, ein Premium-Angebot zu präsentieren, galt es, eine Website zu erstellen, die Prestige vermittelt und gleichzeitig klar und funktional ist. Einfache Navigation, die Möglichkeit, zu den Produktunterseiten zu gelangen, sowie die Präsentation der Objektive in Form interaktiver Animationen waren die zentrale Annahme der Umsetzung.

UX-/UI-Design

Während der gemeinsamen Treffen und Gespräche mit dem Kunden war es am wichtigsten, die Bedürfnisse des Zielkunden zu ermitteln und die Erwartungen an die zu erstellende Website gemeinsam zu planen.

Auf Seiten des Kunden und seines Teams wurde vorab festgelegt: 

• die Anzahl der Unterseiten, die für den Aufbau von Angebot und Leistungen benötigt werden,
• die Vorbereitung des Inhalts für jede einzelne von ihnen,

Im Verlauf der Arbeiten und Treffen haben wir die Struktur der Website erarbeitet sowie eine zufriedenstellende Aufteilung des Angebots von IrixLens und der Objektive in Gruppen.

Mit dem so vorbereiteten Material waren wir in der Lage, Prototypen zu erstellen und Folgendes festzulegen:

• die Bestimmung der gewünschten Sektionen und Inhalte, die auf den einzelnen Unterseiten erscheinen sollten,
• die Sektionen vorab auf eine bestimmte Inhaltsmenge in den Sektionen vorzubereiten,
• die am häufigsten genutzten Funktionalitäten der Website zu definieren, um in der Phase der Umsetzung ihre Funktionalitäten an das eigenständige Erstellen von Sektionen und Unterseiten durch den Administrator anpassen zu können.
  

Die so erstellten Mockups waren nach der vollständigen Besprechung bereit, um mit der Arbeit an der Vorbereitung der Moodboards und am UI-Design zu beginnen.

Beim Zusammenstellen des Moodboards wurden Stile für die Schriften, Farben sowie die Planung von Raum und Content in den Sektionen ausgewählt. Im Ergebnis wurde ein Stil gewählt, der den Bedürfnissen der Marke entspricht.

Die Farbgebung der Marke IrixLens, schwarz / weiß / blau, ermöglichte es, das Design mit der Marke zu korrelieren, und das umgesetzte UI-Design spiegelt Zuverlässigkeit, Professionalität und Modernität wider und baut ein stabiles Markenimage auf.

Development

Animationen und das Kennenlernen des Produkts durch den Nutzer

Ein Bild ist zwar mehr als 1000 Worte wert, dennoch haben wir beschlossen, diese Behauptung zu verbessern.

Bei der Umsetzung der Website haben wir auf Interaktion gesetzt. Der Grund für diese Entscheidung war die ideale Wiedergabe der funktionalen und ästhetischen Vorzüge des Unternehmensprodukts.

Auf den Angebots-Unterseiten kann der Nutzer die Vorzüge eigenständig erleben und die Funktionen der Objektive entdecken, indem er in Interaktion mit dem Produkt selbst tritt, durch Drehen, Verdrehen oder das Kennenlernen zusätzlicher Informationen, die in animierten Icons platziert sind. Zusätzlich wurde für eine Produktgruppe eine enthüllende Maske erstellt, die Fragmente des Produkts aus dem Hintergrund freilegt.

WordPress-Umsetzung: dedizierte CMS-Integration

Die umgesetzte Website wurde mit einem Minibuilder ausgestattet, der das eigenständige Erstellen von Sektionen und Blöcken aus bereits zuvor definierten Einstellungen und Möglichkeiten erlaubt. Das verschafft einen großen Vorteil bei der späteren Verwaltung der Website.

Der Administrator hat vordefinierte Layouts bereitstehen, die er beim Aufbau neuer Inhalte der Website nutzen kann, ohne dass ein Kontakt zu den Entwicklern nötig ist. Der Aufbau erfolgt über einen Drag-and-Drop-Mechanismus, der die Möglichkeit bietet, ein konkretes Element aus einer Liste auszuwählen und es an einer bestimmten Stelle zu platzieren.

Die Website lädt trotz Animationen und der Umsetzung von Video-Sektionen schnell und ist gut optimiert. Umgesetzt wurde ein vollständig editierbares Panel der Produkte sowie der übrigen Inhalte durch eine dedizierte Integration mit dem CMS WordPress.