Ambience, Website für eine Innenarchitektin

Wir haben die Website von Ambience optimiert, damit das breite Spektrum an Projekten besser präsentiert wird. Wir haben die Nutzerpfade vereinfacht und den Zugang zu den wichtigsten Informationen verbessert, was die Zahl der Kooperationsanfragen und das Engagement der Kunden gesteigert hat.

Ziele und Annahmen des Projekts

Im Projekt Ambience konzentrierte sich unsere Analyse auf Personen und Unternehmen, die nach unterschiedlichen Projekten zur Raumgestaltung suchen, von luxuriösen Innenräumen bis hin zu modernen kommerziellen Lösungen. Die Kunden von Ambience sind Menschen, die einen individuellen Ansatz, ein breites Leistungsspektrum sowie die Qualität von Projekten schätzen, die ideal auf die Bedürfnisse des Lifestyle-Markts eingehen.

Persona 1: Privatkunde

• Profil: Privatpersonen, die einzigartige Interieurprojekte suchen, die ihren persönlichen Stil und ihre ästhetischen Erwartungen widerspiegeln.
• Motivation: Suche nach kreativen, personalisierten Lösungen sowie die Zusammenarbeit mit einer vertrauenswürdigen Marke, die ihre Bedürfnisse versteht.
• Probleme: Schwierigkeiten, schnell Beispiele für vielfältige Projekte zu finden, die sie inspirieren könnten.
• Erwartungen: Eine übersichtliche Präsentation unterschiedlicher Projekte, einfacher Zugang zu Informationen über die Leistungen sowie eine schnelle Kommunikation mit dem Projektteam.

Persona 2: Gewerblicher Investor

• Profil: Unternehmen und Bauträger, die einen vertrauenswürdigen Partner suchen, der hochwertige, moderne Gestaltungslösungen für Büros, Hotels, Restaurants oder andere gewerbliche Räume liefert.
• Motivation: Umfassende, auf die gewerblichen Anforderungen zugeschnittene Projekte, die die Attraktivität und Funktionalität der Räume steigern.
• Probleme: Schwierigkeiten beim Durchsehen verschiedener Projekttypen, das Fehlen einer intuitiven Präsentation von Beispielen und Referenzen.
• Erwartungen: Eine klar dargestellte Vielfalt der Projekte sowie die Möglichkeit, schnell Kontakt aufzunehmen, um die Details der Zusammenarbeit zu besprechen.

Schritt 1: UX-Workshops und Zielgruppenanalyse

Wir haben das Projekt mit UX-Workshops begonnen, die es uns ermöglichten, die Bedürfnisse der Kunden von Ambience zu verstehen. Gemeinsam mit dem Team des Kunden haben wir die wichtigsten Zielgruppen definiert, Personas erarbeitet sowie die Bereiche identifiziert, in denen die Präsentation des Angebots und der Projekte optimiert werden musste. Die zentrale Erkenntnis war, dass die Website das breite Spektrum an Projekten übersichtlich und ansprechend darstellen muss, denn genau das ist der einzigartige Wert der Marke.

Schritt 2: Erarbeitung der Struktur und der Wireframes

Auf Grundlage der Workshop-Ergebnisse haben wir eine neue Seitenstruktur entworfen, die die Vielfalt der Projekte hervorhebt und die Nutzerpfade vereinfacht. Wir haben Wireframes erstellt, die eine neue Art der Inhaltsorganisation zeigten und es den Nutzern ermöglichten, schnell die für sie interessanten Projekte zu finden, von luxuriösen Inneneinrichtungen bis hin zu modernen Lösungen für gewerbliche Räume.

Schritt 3: UI-Design

In der Phase des Interface-Designs konzentrierten wir uns auf visuelle Konsistenz und Klarheit der Botschaft. Jedes Element der Seite wurde so gestaltet, dass es die Qualität und Vielfalt der Projekte von Ambience betont. Große, hochwertige Projektfotos, eine übersichtliche Typografie sowie eine intuitive Navigation erzeugen gemeinsam einen Eindruck von Eleganz und Professionalität, der den Bedürfnissen anspruchsvoller Kunden entspricht.

Schritt 4: Optimierung der Nutzerpfade

Auf Grundlage der Analyse des Nutzerverhaltens haben wir die wichtigsten Pfade optimiert, die zu den zentralen Bereichen der Seite führen, etwa Portfolio, Case Studies und Kontaktformulare. Die vereinfachte Struktur ermöglichte einen schnelleren Zugang zu Projekten und Leistungen, was wiederum die Zahl der Anfragen erhöhte und das Engagement potenzieller Kunden verbesserte.

Ergebnis

Dank der eingeführten neuen Lösungen präsentiert die Website von Ambience die Vielfalt der umgesetzten Projekte besser, was dazu beigetragen hat

Development

Der abschließende Schritt war die Umsetzung des Codings in HTML, CSS, JS, also der Aufbau eines HTML-Templates mit kurzer Ladezeit und semantisch korrekter Struktur.

Die Umsetzung der Website auf der Backend-Ebene bedeutet die Implementierung der Plattform WordPress.

Bei der Verwirklichung des Hauptziels einer blitzschnellen Ladezeit haben wir uns intensiv mit ihrer maximalen Beschleunigung befasst, denn es ist die Ladegeschwindigkeit der Seite, die ihre Usability und die Bereitschaft beeinflusst, tiefer in das Angebot einzutauchen.

Damit die Seite wirklich schnell funktioniert, haben wir ein komplettes Paket technischer Optimierungen umgesetzt, mit Analysen durch die Programme: GTmetrix, Lighthouse. Unter anderem wurde durchgeführt:

• Anpassung der Bilder an die Bildschirmgröße im Hinblick auf die Dateigröße für die grundlegenden responsiven Größen, damit nicht zu große Bilder in die Seite geladen werden,
• verlustfreie Komprimierung der Bilder mit Programmen wie iocompressor,
• Einsatz der Funktion Lazy Loading, bei der Bilder beim Scrollen der Seite nachgeladen werden und nicht alle gleich zu Beginn, was den Ladevorgang der Seite deutlich verlangsamt,
• Einstellung des Seitenaufbaus auf Systemschriften, mit anschließendem Nachladen der Zielschriften,
• Optimierung und Reduzierung der Anzahl der Datenbankabfragen von WordPress,
• Minifizierung des CSS- und JS-Codes, also die Umsetzung eines Prozesses zur Verkleinerung des Quellcodes (Entfernung überflüssiger Codezeilen),
• Aktivierung des Seiten-Cachings, das auf der Einrichtung einer statischen Version der Seite beruht,