Hypercode Blog, Projekte, Seite 2

Walzwerk-App – Ein interaktiver Lageplan mit Mietersuche und GPS-Wegfindung

Ein Smartphone zeigt die interaktive Karte des Walzwerks auf einer App. Die Karte ist farblich in verschiedene Bereiche unterteilt, die mit Labels wie „Hof 1“, „Hof 2“, „Spaltband“ und „Rohrglühe“ versehen sind. Oben befindet sich eine Suchleiste mit dem Text „Mieter durchsuchen“. Am unteren Rand ist eine Willkommensnachricht zu lesen, die erklärt, dass es sich um einen interaktiven Lageplan handelt, der Mietern und Besuchern Orientierung bietet. Ein Button mit „Mehr erfahren“ ist in der Nachricht enthalten.

Das Walzwerk ist nicht nur Unternehmens­standort für Firmen aus den Bereichen Digitali­sierung, Online-Handel und Bildung, sondern auch ein beliebter Kultur- und Freizeitort im Großraum Köln. Das 35.000 Quadratmeter große Areal im Westen von Pulheim zieht täglich zahlreiche Besucher­*innen an - darunter Geschäftsleute und Privatpersonen. Neben Ateliers und Unternehmen finden sich auf dem Gelände ein Theater, ein Schwimmbad, Gastronomie, eine Kirche sowie zahlreiche Künstler­werk­stätten. Angesichts der Größe und Vielfalt kann die Orientierung jedoch herausfordernd sein.

Seit Dezember wird den Besucher­*innen mit der Walzwerk-App unter app.walzwerk.de digitale Unterstützung geboten:

  • Interaktiver Lageplan und Mietersuche – Mit der App lassen sich Mieter­*innen und Ateliers schnell suchen und auffinden. Ausgewählte Mieter­*innen/Ateliers werden direkt im Lageplan verortet. Der Weg dorthin wird ausgehend von der GPS-Position des Besuchers direkt & live auf der Karte eingezeichnet.
  • GPS-Wegfindung in Echtzeit – Besucher­*innen können sich live zur gewünschten Location navigieren lassen. Die Route wird basierend auf der aktuellen GPS-Position direkt auf der Karte einge­zeichnet. Falls GPS nicht verfügbar ist, wird die Haupt­zufahrts­straße oder der Standort der genutzten QR-Code-Hinweis­tafeln als Startpunkt verwendet.
  • Browser-basiert ohne Installation – Die App funktioniert direkt im Internet-Browser, ohne dass eine Installation aus den App Stores erforderlich ist. Auf dem Gelände machen Hinweis­tafeln mit QR-Code auf die App aufmerksam.
  • Für Mobile und Desktop – Die Anwendung funktioniert nicht nur auf Smartphones und Tablets, sondern auch auf Desktop-Rechnern, so dass Weg­beschrei­bungen überall eingesehen und geteilt werden können (z.B. in einer E-Mail-Signatur).
Desktop-Ansicht der Walzwerk-App mit interaktivem Lageplan, Suchfunktion und markierten Gebäudebereichen.

Der Schutz der Besucher­daten war ein besonders großes Anliegen: Die GPS-Position wird ausschließ­lich zur Routen­führung genutzt und verbleibt auf dem Gerät der Besucher­*innen. Es erfolgt keine Speicherung oder Weiter­verar­beitung der Daten.

Für die Mieter­\*innen des Walzwerks gibt es zudem die Option individuelle Links an ihre Gäste zu verschicken (z.B. per Messenger, in der eigenen E-Mail-Signatur, usw.), durch die das jeweilige Atelier dann bereits vorausgewählt ist:

Die URLs/Links werden direkt bei der Nutzung der App erzeugt und lassen sich einfach aus dem Browser heraus kopieren/teilen. Zu einem späteren Zeitpunkt wird es für Mieter­*innen zudem die Option geben, den Lageplan direkt auf ihrer eigenen Website einzubetten.

Die Walzwerk-App ist direkt an das digitale Mieter­verzeichnis des Walzwerks angebunden. Dadurch sind alle Informationen stets auf dem neuesten Stand und Änderungen werden automatisch übernommen.

Eine neue, flexible Website für Quiply, die #1 Mitarbeiter-App

Quiply Website Mobile

Die Mitarbeiter-App Quiply zeichnet sich durch viele, hilfreiche Funktionen – von Channels und Chats bis hin zu Umfragen und Mitarbeiter­verzeichnis – aus, die die Vernetzung und den Informations­austausch in Unternehmen aus verschie­densten Branchen fördern und verbessern. Über individuelle Anpassun­gen können dabei die jeweiligen Branchen-Anforderungen berück­sich­tigt werden – egal ob für Industrie, Healthcare, Handel, Gastronomie oder kommunale Unternehmen.

Die große Stärke von Quiply ist damit zugleich die größte Heraus­forderung an die Konzeption und das Design sowie die Entwicklung einer Website. Schließlich wollen all diese Funktionen gezeigt und ziel­gruppen­spezifisch aufbereitet werden. Was das für den Website-Relaunch bedeutet, war schnell klar: Die App-Funktionen sollten den Nutzern inter­aktiv und audio­visuell ver­mittelt werden können. Das Page-Building musste möglichst flexibel gestaltet werden können, um alle Use Cases optimal und abwechslungs­reich darstellen zu können.

Quiply hatte dazu bereits eine neue Corporate Identity, ein Corporate Design und ein passendes Webdesign zugeliefert. Hypercode übernahm die Ausarbeitung für verschiedene Geräte­größen, Inhalts­elemente und Unterseiten, dokumentierte Seitentypen und Komponenten in einem Modul­handbuch und überführte die grafische Komponenten­bibliothek in eine interaktive Pattern Library. Auf dieser Basis entstand ein Craft-CMS-Setup, das flexible Seiten­layouts, wieder­verwendbare Frontend-Komponenten und HubSpot-Inhalte sauber zusammen­bringt. Ähnliche Beispiele für flexible, marken­starke und technisch anspruchs­volle Unternehmens­websites finden Sie in unserem Bereich Corporate Websites.

Entdecken Sie unsere Arbeit für Quiply und erfahren Sie mehr über die Mitarbeiter-App auf der Quiply-Website.

Eine hoch-modulare und hoch-dynamische Website für KMS TEAM

KMS TEAM Website Mobile

KMS TEAM hat dazu ein Konzept und Design erarbeitet, das ein hoch-modulares Redaktionssystem mit hoher Dynamik und bester Performance im Frontend voraussetzt, um so die eigenen Unternehmens­seiten genau so individuell gestalten zu können, wie die Cases, in denen ihre Kunden und Arbeiten vorgestellt werden. Eine Anforderung, die auch Markus Sauer, Digital Design Director von KMS TEAM, genau so benennt:

Die Performance der umfangreichen Inhalte sowie die Dynamik des Gesamt­eindrucks waren uns besonders wichtig. Hierbei ist eine präzise Umsetzung essentiell.

Wir haben uns daher in enger Zusammen­arbeit mit KMS TEAM dazu entschieden, ein Craft CMS-basiertes Redaktions­system zu entwickeln, dass eine Vielzahl von frei konfigurier­baren Inhalts­elementen mit­ein­ander kombinier­bar macht, um KMS TEAM so ein Höchst­maß an Flexiblität bei der Inhalts­erstellung zu ermöglichen.

Im Frontend wird dies durch eine Vue.js/Nuxt.js-basierte, server­seitig vorge­renderte Single-Page-Application ergänzt, die per GraphQL-Schnittstelle mit dem CMS kommuniziert. Hinzu kommen Schnittstellen­anbindungen an Video- und Recruiting-Dienstleister. Die Kombination der Inhalte, sowie zahlreiche Animationen und Interaktionen für unterschiedliche Medientypen, laden so zur Exploration im spannenden Portfolio von KMS TEAM ein. Etwas, das auch wir während und nach der Entwicklung immer gerne getan haben. Markus Sauer:

Wir freuen uns, mit Hypercode einen Partner zu haben, der unsere konzeptionellen sowie technisch-gestalterischen Rahmen­bedingungen sofort verstanden und optimal realisiert hat. Die Zusammen­arbeit und der gegenseitige Austausch auf dem Projekt haben sehr viel Spaß gemacht.

Wir bedanken uns und können das so nur zurückgeben!

Und laden Sie herzlich dazu ein, sich einen Eindruck vom Projekt in unserer neuen Case Study für KMS TEAM zu verschaffen. Oder direkt auf kms-team.com.

Eine digitale Show-Plattform gegen die Auswirkungen der Corona-Pandemie

Während vielerorts nur theoretisch darüber diskutiert wird, wie man die negativen Auswirkungen der Corona-Pandemie auf Gesellschaft und Wirtschaft bewältigen kann, zeigt die SANOSTRA GmbH für Show­inszenierungen wie die so notwendige Digitali­sierung einer Branche in Zeiten von Corona aussehen kann:

Mit einer video­zentrierten Plattform, auf der darstellende Künstler­*innen Ihre Darbietungen in den Kategorien Akrobatik, Tanz und Kreativsport einem breiten Publikum präsentieren können, geht man die durch Lockdown und Ver­anstaltungs­verbot bedingten Erschwer­nisse direkt an.

Über den Crowdfunding-finanzierten Community Award bietet man den Zuschauern zudem gleich die Möglich­keit für die unter­schied­lichen Artist­*innen zu voten und seine Favoriten somit direkt zu unter­stützen. Zur Award-Verleihung ist weiter ein Live-Stream-Event mit Auftritten der Finalisten und anschließ­ender Preis­vergabe geplant.

#SHAREYOURSHOW zeigt eindrucks­voll, wie man auch in einer Krisen­situation innovativ bleiben kann. Die Platt­form erfreut sich bereits großen Zuspruchs durch Künstler­*innen und Publikum, die einer­seits bereits knapp einhundert hochwertige Performances gepostet und anderseits bereits tausendfach abgestimmt und gespendet haben. Klar ist: Auch nach der hoffent­lich bald über­standenen Pandemie bleibt #SHAREYOURSHOW bestehen und bringt die Kunst fortan & weiterhin direkt in die Wohnzimmer.

Hypercode hat das innovative und wichtige Projekt bei der technischen Konzeption und anschließenden Backend- und Frontend-Umsetzung unter­stützt. Dazu haben wir von Beginn an eng mit dem Team von SANOSTRA und dem Designer Oliver Schmidt zusammen­gearbeitet.

Collage mit Eindrücken der digitalen Plattform #SHAREYOURSHOW

Gemeinsam konkretisierten wir das Konzept in Workshops, Wireframes und User Flows, bevor die Plattform als mobile-first Web-Anwendung umgesetzt wurde. Technisch bündelte #SHAREYOURSHOW Registrierung, Video-Upload, Video­streaming, Voting und Crowdfunding für den Community Award in einem Craft-CMS-basierten System; im Frontend sorgte Alpine.js für schlanke Interaktionen und eine gut bedienbare Oberfläche.

Ähnliche Plattformen und individuelle Software­lösungen stellen wir in unseren Bereichen Web-Apps & Produkt­konfiguratoren und Individual-Software vor.