Fallstudie B-works

Start von 

b-works.io

 

Frontend-Entwicklung, Backend-Entwicklung, SEO, Analytics

Fallstudie

Kunde: B-works, eine agile Digital-Agentur mit Büros in Zürich und Bozen, fokussiert auf Strategie & Konzeption, agile Web & Softwareentwicklung, sowie on- & offline Marketing für anspruchsvolle, massgeschneiderte digitale Projekte
Industrie: Digitale Dienstleistungen, Web- und Softwareentwicklung, Digitale Strategieberatung, Digitale Transformation, Marketing
Ziele: Erstellung der Corporate Website als Single Page Application (SPA), um B-works Fähigkeiten und Talente auf dem Markt einzuführen
B-Works Rolle: Frontend-Entwicklung, Backend-Entwicklung, SEO, Analytics
Technologie: Frontend mit JavaScript/ VueJS, Backend und CMS mit Drupal 8
Projektgrösse: 100+ Personentage mit 4 B-works Teammitgliedern 
 

Zusammenfassung: 

Um B-works auf den Markt zu bringen und einzuführen, wollten wir eine hochgradig massgeschneiderte Einzelseitenanwendung entwickeln, die anders aussehen und sich anders anfühlen würde, als eine herkömmliche Firmenwebsite. Wir haben zunächst unsere Grundprinzipien formuliert, zu denen Agile, Zuverlässigkeit, Innovation und Offenheit bei der Lösung komplexer Probleme gehören.

Mit diesen Grundprinzipien und der Entwicklung von 6 Kundenpersönlichkeiten (customer persona) haben wir ein Design entwickelt, welches sich, nach der Implementierung, wie eine App anfühlt und das Ziel hat, die Kosten pro Conversion auf unter 100 Chf zu senken. Die Herausforderung bestand darin, die gesamte Ladezeit der Seite auf weniger als 5 Sekunden zu beschränken, sodass der Website-Besucher nicht auf das Laden der einzelnen Unterseiten warten musste. Gleichzeitig wollten wir die technischen Grenzen mit einem neuen Ansatz verschieben, indem wir die besten unserer Signaturtechnologien kombinieren: Drupal 8 als starkes CMS im Backend und VueJS (JavaScript) mit den vielfältigen Animations- und Gestaltungsmöglichkeiten im Frontend.

Schliesslich mussten wir für das Top-5 SEO-Ranking eine schnelle Ladegeschwindigkeit (Performance) der Website sicherstellen, sowie die optimale Crawlability für Suchmaschinen, wie Google, um die Website richtig zu indizieren.


Über den Kunden:

B-works ist eine agile Full-Service-Digitalagentur, die sich von Konzeption & Strategieentwicklung, über agile Web & Softwareentwicklung bis hin zum Marketing individuell auf anspruchsvolle digitale Projekte fokussiert. 

Im Rahmen unserer digitalen Strategie definieren wir die Geschäftsziele unserer Kunden mit messbaren Indikatoren (KPIs), fügen proaktiv Ideen hinzu und entwerfen eine strategische digitale Roadmap, welche UX-Designs als Grundlage für die Schätzung und Umsetzung eines Projekts mit Web- und Softwareentwicklung beinhalten kann. 

Wir implementieren Web-Plattformen und Software-Anwendungen mit agiler Software und Web-Entwicklung unter dem Vorgehensmodell von Scrum und unter Nutzung unserer Erfahrungen aus verschiedenen Branchen. Dazu gehören die JavaScript Frontend-Entwicklung (VueJS und AngularJS), die Backend-Entwicklung mit PHP und Laravel, sowie die CMS-Entwicklung mit Drupal 8.

Die dritte Säule unseres Unternehmens konzentriert sich auf datengetriebenes Marketing, das die Verfolgung von KPIs mit Analytics, die kontinuierliche Verbesserung von Online-Marketingmassnahmen (einschliesslich SEO und SEM), sowie die Verbesserung der Benutzererfahrung (UX & UI) umfasst. So können die Kundenakquisitionskosten und die Kosten pro Bestellung durch Konversionsoptimierung (conversion optimization) gesenkt und das Anwendererlebnis gesteigert werden.

 

Ziele:

Eine neue und innovative, schnell ladende, einseitige Anwendungs-Website sollte gestartet werden, die sich wie eine App anfühlt und gleichzeitig optimal in Suchmaschinen indiziert ist. 

Die verfügbare Zeit für dieses Projekt betrug 4 Monate und beinhaltete die folgenden Ziele:

  • Einrichten eines mehrsprachigen Content Management Systems (CMS)
  • Ladegeschwindigkeit der Website unter 5 Sekunden (ohne Videos)
  • Anbindung externer Datenerfassungs-Tools und Google Analytics, sowie die Nachverfolgung von Konvertierungen durch Analytics Goals und Events
  • Top 5 Suchmaschinen-Ranking für definierte Suchbegriffe (Short- & Longtail-Keywords)
  • Go-Live der Website innerhalb von 4 Monaten
  • AdWords und Social Media Marketing (auf Facebook und Linkedin)
  • Kosten pro Konversion unter 100 Chf

 

Mock Up B-works CMS Digital Solutions IT-experts Drupal Development Agency

Die Rolle von B-works: 

    Prozesse und Werkzeuge:

    Ausschlaggebend für die erfolgreiche und termingerechte Umsetzung dieses Projekts waren die folgenden Faktoren:

    • Aufbau eines 5-köpfigen Teams, bestehend aus zwei Senior Designern, zwei Senior Entwicklern und einem Product Owner
    • Entwicklung von 6 Kundenpersönlichkeiten (customer personas) für jede unserer Zielkundentypen. Ihre Charakteristiken und das Nutzungsverhalten (customer journey) führte uns zu UX-Anforderungen an Inhalt, Design und Funktionalität unserer Seiten-Anwendung 
    • Entwicklung eines benutzerorientierten Designs in Sketch unter Verwendung von UX-Praktiken
    • Recherche nach Google-Indexierung für abgetrennte (detached) JavaScript-Frontends, verbunden mit Drupal 8 Backends
    • Priorisierung der technischen Anforderungen und Funktionen auf der Grundlage des Geschäftswerts und der Machbarkeit in der technischen Umsetzung
    • Wöchentliche Sprints mit Sprint-Review, Retrospektive und Planung mit Jira
    • Frontend-Entwicklung mit JavaScript/ VueJS
    • Backend-Entwicklung mit Drupal 8
    • Verbindung von Frontend und Backend mit einer RESTful API 
    • Monatliche Zeiterfassung mit Jira
    • Agile Tests und parallele Fehlerbehebung durch Entwickler
    • Einrichten von Zielen und Ereignissen in Google Analytics zur Verfolgung von Conversions 
       


    Eingesetzte Technologien:

    • JavaScript/ VueJS Frontend-Entwicklung
    • Drupal 8 Content Management System (CMS)
    • Drupal 8 Backend-Entwicklung / PHP

     

    Nutzen für B-works:

    Herausforderungen:

    Die grösste Herausforderung in diesem Projekt bestand darin, eine neue Single-Page-Anwendung zu entwickeln, die eine eigene Frontend-Technologie (VueJS/ JavaScript) mit einer separaten Backend-Technologie und CMS (Drupal 8/ PHP) verbindet. Eine weitere Herausforderung war es, eine hohe Performance zu erreichen, indem die gesamte Website auf einmal und in weniger als 5 Sekunden geladen wurde, um eine hohe Benutzerfreundlichkeit, kurze Latenzzeiten und ein gutes Google-Ranking zu gewährleisten. Auch war die korrekte Indexierung der Website bei Google über die beiden Technologien hinweg eine Herausforderung, die Forschung und Tests erforderte während gleichzeitig das Google-Ranking im Laufe der Zeit überwacht wurde.

    Wichtige Erkenntnisse:

    Ein Schlüsselerlebnis bei der Entwicklung dieser einseitigen Anwendung war die Benutzerfreundlichkeit bei der Entwicklung des CMS zur nahtlosen Erstellung und Einrichtung von Seiten, die auf dem Frontend angezeigt werden, nachdem sie vom Backend in die Frontend-Technologie "übersetzt" wurden.

    Wichtigste Vorteile für den Kunden:

    • Lieferung innerhalb von Budget und Termin, 4 Monate nach Projektstart
    • Vielseitige Einzelseitenanwendung, die es ermöglicht, neue Seiten mit reaktionsschnellen Modulen zu erstellen, die für verschiedene Inhaltsarten geeignet sind (z.B. Blog, Karriere, Dienstleistungen, Erfahrungsberichte).
    • App-ähnliches Gefühl ohne Ladezeit beim Betreten von Unterseiten


    Weiterbildungs- & Entwicklungspotenzial:

    Die Erfahrungen aus der Entwicklung dieser dynamischen Einzelseitenanwendung mit VueJS und Drupal 8 waren hilfreich, um den Relaunch von www.pistor.ch zeitnah und unter Vermeidung von Fallstricken zu entwickeln. Zukünftige Projekte werden von der Expertise bei der Entwicklung und Integration eines hochgradig benutzerfreundlichen CMS (Drupal 8) mit einem hochmodernen Frontend-Framework (VueJS) für moderne, dynamische, App-ähnliche Webanwendungen und Unternehmensanwendungen profitieren.

    Weiterführende Informationen:

    Kontakt:


    Alex_Beninca.jpeg


    Alex Benincà
    B-works Product Owner

    Für weitere Informationen:

    E-Mail: alex.beninca@b-works.io
    Phone: +41 (0)44 500 2615
    Linkedin Profil

     

    Unsere Dienstleistungen: