Hypercode Blog

awork × Raycast – Unsere Lieblings-Projekt­management­software trifft auf unseren Lieblings-Launcher

Als Digital Product Studio, das überwiegend im Kunden­auftrag agiert, sind für uns eine effiziente Ressourcen­planung, präzise Projekt­kommunikation und eine unter­brechungs­freie Zeiter­fassung das A und O einer funktionierenden Organisation.

Nach einer – wie wir dachten – endlosen Suche nach dem idealen Projekt­management-Tool sind wir im Sommer 2023 auf awork gestoßen. Schnell wurde klar: Die Lösung aus Hamburg vereint endlich all jene Anforderungen, die für uns zentral sind – Kommunikation, Planung und Zeiterfassung – in einer Plattform. Einer Plattform, die nicht nur ansprechend gestaltet ist und kontinuierlich weiter­entwickelt wird, sondern dank offener APIs und guter Dokumentation auch Spielraum für individuelle Erweiterungen lässt.

Und da wir im Team zudem große Fans des erweiter­baren Application-Launchers Raycast sind, war für uns schnell klar: Wir brauchen eine Raycast-Extension, mit der wir direkt in awork suchen, Projekte & Aufgaben öffnen oder Zeiten mit wenigen Tasten­kombinationen erfassen können (wir empfehlen Hyperkey+A). Um somit direkt von überall aus mit awork inter­agieren zu können – ob nun zur Referenz einer Aufgabe, während wir in Figma designen; zur Zeitbuchung nach einem erfolgreichen Pull Request oder weil wir die Mailadresse eines Projekts brauchen (Tipp: ⌃E), um eine E-Mail dorthin weiterzuleiten.

Seit einigen Monaten setzen wir unsere awork-Extension für Raycast nun schon intern ein – und sie ist aus unserem Arbeits­alltag nicht mehr wegzudenken. Nach einem sehr positiven Austausch mit dem awork-Team stand fest: Wir veröffentlichen die Extension kostenlos im Raycast Store, damit auch andere Teams und Nutzer­*innen von awork und Raycast ihre Arbeits­prozesse damit verein­fachen und beschleunigen können. Alles was dazu nötig ist, ist die Einrichtung eines API-Clients in awork, was komfortabel über das User Interface erledigt werden kann und in diesem awork-Support­dokument nochmal genau beschrieben wird.

👉 Jetzt mehr erfahren:
Alle Infos zur Extension, Einrichtung & Features findest du auf unserer Projektseite:
hypercode.de/projekte/awork-raycast

🚀 Feedback erwünscht!
Wir freuen uns über Feedback, Feature-Wünsche oder einfach ein kurzes „Gefällt mir“ – am liebsten via LinkedIn, Instagram oder direkt per Mail. ☺️

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).

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, das Design und die Entwicklung einer Website. Schließlich wollen all diese Funktionen gezeigt und zielgruppen­spezifisch aufbereitet werden. Was das für den Website-Relaunch bedeutet, war schnell klar: Die App-Funktionen sollten den Nutzern interaktiv und audiovisuell vermittelt werden können. Das Page-Building musste möglichst flexibel gestaltet werden können, um alle Use Cases optimal und abwechslungsreich darstellen zu können.

In unserer neuen Case Study zum Website-Relaunch von Quiply beschreiben wir den Weg, den wir zusammen mit den Kollegen von Quiply zur Realisierung eben dieser Anforderungen eingeschlagen haben und welche Technologie-Entscheidungen wir währenddessen getroffen haben. Das Ergebnis können Sie sich derweil bereits auf quiply.com ansehen.

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.