PV-Konfigurator
Cousin
Cousin ist ein familiengeführtes Unternehmen, das hochwertige Photovoltaik-, Speicher- und E-Mobilitätslösungen anbietet. Mit eigenen Fachkräften, langjähriger Erfahrung und starkem Qualitätsanspruch begleitet es Kund*innen von Beratung und Planung bis Montage, Inbetriebnahme und Wartung.
PROBLEM
Ein hoher Wettbewerbsdruck und große Unsicherheit bei Interessent*innen durch ein komplexes Themenfeld.
ZIELE
Expandieren und mehr Interessent*innen erreichen und neue Kund*innen gewinnen – mit einer zeitgemäßen, sympatischen Website, die Kompetenz und Qualitätsanspruch transparent macht und Orientierung und Vertrauen bietet.
Meine verwendete Tools:
Figma Miro Illustrator Photoshop VS Code
Meine Aufgabenbereiche:
Beratung Branding Research Konzeption Design Prototyping Technische Umsetzung
RESEARCH
Angewendete Research-Methoden:
- Interviews
- Bestandswebsite-Analyse
- Wettbewerbsanalyse
- Bestehende Corporate Design Anwendung prüfen
- Card Sorting
- Personas
- Informationsarchitektur
Interviews
Im ersten Schritt wurden die Anforderungen der Geschäftsführung in mehrere Interviews ergründet. Es zeigte sich früh, dass in der Branche ein hoher Wettbewerbsdruck herrscht und die potenzielle Kundschaft ein hohes Maß an Beratung und Vertrauen benötigen. Die Kunden zu überzeugen und eine einfache Kontaktaufnahme zu ermöglichen ist das oberste Ziel. Eine neue Website soll dies initiieren. Die alte Website konnte dies nicht leisten und war zudem noch technisch fehlerhaft.
Die Zielgruppen der Hausbesitzer und Unternehmen wird auch in der Expansion beibehalten. Hier hat man jahrelange Expertise in der Zusammenarbeit. Das Einzugsgebiet wurde nun stark erweitert von Euskirchen als Zentrum mit einem Radius von 80 km. Damit werden einwohnerstärkere Ortschaft und auch die Millionenstadt Köln addressiert.
Card Sorting
INSIGHTS
Die Research zeigte, dass Hausbesitzer und Unternehmen ähnliche Bedürfnisse nach Klarheit, Orientierung und Vertrauen haben – jedoch mit unterschiedlichen Entscheidungslogiken. Während Privatkunden nach Sicherheit suchen, erwarten Unternehmen vor allem Effizienz und professionelle, unkomplizierte Prozesse.
Für beide von entscheidender Bedeutung: Die Kosten und Wirtschaftlichkeit.
Personas
Informationsarchitektur
LÖSUNGEN
Branding-Lösungen:
- neue Bildwelt kreieren
- Key Visual entwickeln
Bildwelt
Um das von den Zielgruppen verlangte Gefühl von Sicherheit und Vertrauen zu vermitteln, wurde eine neue Bildwelt entwickelt, die die bodenständige und nahbare Arbeitsweise von Cousin authentisch widerspiegelt. Sie zeigt Menschen aus dem realen Umfeld und unterstreicht damit die menschliche, zugängliche Haltung des Unternehmens. Gleichzeitig transportiert die Bildwelt den Anspruch an nachhaltiges Handeln und positioniert Cousin als verantwortungsbewussten, verlässlichen Dienstleister, ohne Fachchinesisch.
Key Visual
Die „Energiewolke“ visualisiert Energie in den Corporate-Farben und macht sie als dynamisches Gestaltungselement klar erkennbar. Gleichzeitig fungiert sie als prägnanter visueller Akzent, der dem Webdesign Struktur und Charakter verleiht.
Darüber hinaus lockert die Energiewolke das Gesamtbild gezielt auf, indem sie als farblicher Impuls auf die Nutzer wirkt, der Inhalte rhythmisiert und Blickpunkte schafft. So trägt sie maßgeblich dazu bei, die digitale Markenwirkung zu stärken und eine moderne, zugängliche Ästhetik zu erzeugen.
Website-Lösungen:
- PV-Konfigurator
- FAQ Akkordion
- Grafiken & Icons
PV-Konfigurator
User Flow
Kunden wünschten sich eine schnelle und unkomplizierte Möglichkeit, einen verlässlichen Eindruck über die Kosten zu erhalten. Genau hier setzt der PV-Konfigurator an und bietet einen direkten Zugang zu einer transparenten Einschätzung. Gleichzeitig schafft er einen unkomplizierten Kontaktpunkt, über den Cousin-Elektrotechnik leicht mit Interessenten in Austausch treten kann.
Da für eine passende Kalkulation viele Angaben nötig sind und einige Faktoren voneinander abhängen, wurde ein dynamisches, mehrstufiges Formular entwickelt, das Nutzer Schritt für Schritt durch den Prozess führt und eine hohe Bedienfreundlichkeit sicherstellt.
Wireframes
Aufgrund der hohen Anzahl an Informationsabfragen, der daraus resultierenden mehrseitigen Struktur des Konfigurator-Formulars sowie der zugrunde liegenden Logiken und Abhängigkeiten war es entscheidend, die Wireframes von Beginn an für Desktop, Tablet und Smartphone zu konzipieren. Diese konsequente Vorgehensweise stellte sicher, dass das responsive Verhalten frühzeitig validiert wurde und zentrale UX-Kennzahlen wie Task Completion Rate (TCR) und Time on Task (ToT) optimiert werden konnten.
FAQ Akkordion
Da die erklärungsbedürftige Thematik bereits im Vorfeld viele Fragen aufwirft, wurde eine FAQ-Seite integriert, die wiederkehrende Unsicherheiten frühzeitig aufgreift und Interessent*innen bereits vor der Kontaktaufnahme Orientierung bietet.
Usability-Tests auf mobilen Endgeräten zeigten zudem, dass Nutzer*innen bei einer größeren Anzahl an Fragen Inhalte im unteren Seitenbereich nur schwer auffinden konnten. Um die Orientierung zu verbessern, wurden im Hero-Bereich gezielt Anchor-Links integriert, die direkt zu den drei thematischen Hauptbereichen der FAQ führen.
Illustrationen & Icons
Für die Bereiche PV+Batteriespeicher, E-Ladesäulen sowie Elektroinstallationen wurde ein dreiteiliges Iconset entwickelt, welche die Themik auf den ersten Blick klar und intuitiv vermitteln. Der reduzierte schwarzweiß Stil bildet einen starken Kontrast zu den Corporate Colors.
Durch konsistente Zeichen, reduzierte Formen und eindeutige Bedeutungszuweisungen unterstützen die Icons und Illustrationen eine schnelle Orientierung und eine verständliche Nutzerführung.
WEBENTWICKLUNG
Nach der Präsentation beim Auftraggeber und dessen Freigabe war auch die finale Phase der Webentwicklung meien Aufgabe. Die zuvor erstellten Figma-Layouts wurden in Visual Studio Code in strukturierten, modularen SCSS-Code überführt. Parallel wurde das CMS Contao inklusive MySQL-Datenbank auf einem Testserver installiert und eingerichtet. Darauf aufbauend erfolgte die Integration der Stylesheets sowie die Umsetzung der Templates. Nach einer ausführlichen Testphase wurde das System auf den Liveserver migriert und kontrolliert live geschaltet.
- Umsetzung der Figma-Layouts in strukturierten, wartbaren SCSS-Code mit Visual Studio Code
- Installation und Konfiguration des CMS Contao inklusive MySQL-Datenbank auf einem Testserver
- Technische Umsetzung und Integration der Templates in das CMS
- Einbindung der Stylesheets und Abstimmung von Layout und Responsivität
- Durchführung funktionaler und visueller Tests auf verschiedenen Endgeräten
- Migration des vollständigen Systems einschließlich Datenbank auf den Liveserver
- Abschließende Optimierungen und kontrollierter Go-Live
ERGEBNISSE & IMPACT
Bereits wenige Wochen nach Go-Live stiegen die Besucherzahlen der Website um bis zu 43% an. Der PV-Konfigurator war ein voller Erfolg, da sich durch die Nachfrage nach Angebot die Kundenkontakte um 35% erhöhten. Die erhöhte Anzahl qualifizierter Kontakte führte in der Folge zu mehr Projektabschlüssen und einem messbaren Umsatzwachstum. Das Cousin-Team konnte erweitert werden. Die Expansion ist geglückt und im vollen Gange.