Die neue Website für iCITY: Eine Plattform, die verbindet und begeistert
Räume mieten, Events planen oder Labore buchen – alles mit wenigen Klicks. Dank intuitivem Design, leistungsstarkem Headless CMS und interaktiven Grundrissen können Interessierte nun ganz einfach ihren passenden Co-Working Space auf der iCITY Website finden und buchen. Flexibel, modern und genauso dynamisch wie die Räume selbst – die neue digitale Plattform öffnet Türen für Zusammenarbeit.
Digitales Redesign und Transformation
Flexible Büros, moderne Labore und vielseitige Eventlocations – iCITY in der Nähe von Basel bietet massgeschneiderte Lösungen für Unternehmen, Kreative und Veranstalter. Mit ihrem innovativen Ansatz unterstützt iCITY unterschiedliche Branchen bei der Umsetzung ihrer individuellen Raumkonzepte. Doch die digitale Präsenz konnte vor dem Redesign nicht Schritt halten. Die Website war veraltet, schwer zu navigieren und mobil kaum nutzbar. Für ein Unternehmen, das Flexibilität und Modernität lebt, war dies ein ernsthaftes Problem.
iCITY ist ein Co-Working Space mit zwei Standorten in der Nähe von Basel. Berufstätige können dort einzelne Schreibtische, ganze Büros, Veranstaltungsräume und sogar voll ausgestatteten Labore mieten.
Weitere Informationen: icity.swiss
Das Problem: Schlechte User Experience und veraltete Technologie
Wenn Website-Besucher und -Besucherinnen nach flexiblen Arbeitsplatz-Lösungen oder Veranstaltungsräumen suchen, erwarten sie eine schnelle und reibungslose Online-Erfahrung. Die alte iCITY Website stellte hier eine echte Herausforderung dar. Die Informationen waren unübersichtlich, schwer auffindbar und die User Experience liess zu wünschen übrig – Frustration war die Folge.
Das Ziel: Ein modernes, benutzerfreundliches Erlebnis
Um das Problem zu lösen, war ein komplettes Redesign notwendig – mit dem Fokus auf Klarheit, Benutzerfreundlichkeit und technologischer Flexibilität. Die neue Website sollte sein:
Nutzerfreundlich: Ein intuitives Design und eine klare Navigation sollten es den Nutzern erleichtern, schnell zu den relevanten Informationen zu gelangen.
Technologisch integriert: Die neue Plattform sollte sich nahtlos in die bestehenden Systeme von iCITY einfügen und Raum für zukünftige Erweiterungen bieten.
Zukunftssicher: Mit einem flexiblen, skalierbaren CMS sollte iCITY Inhalte unabhängig verwalten und die Website langfristig leicht anpassen können.
Einblicke von Sara Mazzoli
Middle UI DesignerVom Konzept zur Umsetzung: Design, Branding und Nutzerfeedback
Enge Zusammenarbeit im Team
Das Redesign der iCITY Website war das Ergebnis einer engen Zusammenarbeit unseres fachkundigen Teams aus den Bereichen UX Design, Content und Entwicklung. Alle brachten ihr jeweiliges Fachwissen ein, um sicherzustellen, dass Design und Technologie perfekt harmonierten. Auch externe Partner wie Fotografen und Grundrissplaner spielten eine Schlüsselrolle bei der Darstellung der Räumlichkeiten auf der neuen Website.
Interaktive Grundrisse und professionelle Bilder halfen dabei, den Usern eine klare Vorstellung der verfügbaren Räumlichkeiten zu geben. Dies erleichtert die Entscheidung für Büros und Veranstaltungsräume und macht die Website nicht nur informativ, sondern auch visuell ansprechend.
Flexibles Design: Storybook-Setup als Schlüssel zum Erfolg
Unser Design-Team war gefordert, besonders vielseitig zu denken, um das volle Potenzial des Systems auszuschöpfen. Dies bedeutete, dass wir nicht nur in vorgefertigten Layouts denken, sondern auch kreative und vielseitige Elemente entwerfen mussten, die langfristig anpassbar und skalierbar sind.
Kreative Umsetzung: Die Markenidentität von iCITY im digitalen Raum
Als erster Anhaltspunkt des Webdesigns dienten uns die Brand Guidelines von iCITY, die auch in den physischen Räumen des Unternehmens präsent sind. Die prägnante Aufteilung in blaue und pinke Bereiche, wie sie in den Bürogebäuden sichtbar ist, haben wir auch digital umgesetzt. Diese Farbkodierung unterstützt die intuitive Navigation und hilft dabei, sich schnell auf der Website zurechtzufinden.
Zusätzlich haben wir das Post-it-Symbol – ein zentrales Markenzeichen von iCITY – als interaktives und animiertes Element auf der Website platziert. Das Symbol taucht in Hoverstates und bestimmten Sections auf, um visuelle Akzente zu setzen, die nicht nur funktional, sondern auch spielerisch sind. Diese kreativen Markenelemente tragen dazu bei, dass die digitale Identität von iCITY genauso innovativ wirkt wie die physischen Räume.
Iterativer Design-Prozess und User Feedback
Wir haben den Design-Prozess in mehreren Schritten durchgeführt und kontinuierlich verfeinert. Durch den engen Austausch mit dem iCITY stellten wir sicher, dass das Design sowohl visuell ansprechend als auch benutzerfreundlich ist. Besondere Aufmerksamkeit galt der mobilen Optimierung, da viele User die Website auf ihren Handys verwenden.
Um die Benutzerfreundlichkeit weiter zu verbessern, führten wir mehrere Usability-Tests durch. Das direkte Feedback half uns, die Informationsarchitektur und die Navigation weiter zu optimieren. Vor allem die Menüführung und die mobile User Experience wurden aufgrund der Rückmeldungen der User verfeinert. Diese Tests stellten sicher, dass die Website nicht nur ästhetisch ansprechend, sondern auch funktional überzeugend ist.
Einblicke von Sara Mazzoli
Middle UI DesignerEinblicke von Deanna Miceli
Junior Frontend DeveloperEffizienter Technologie-Stack für eine flexible Website
Bei der technischen Umsetzung der iCITY Website legten wir den Fokus auf einen modernen, leistungsstarken Technologie-Stack. Dies ermöglichte nicht nur eine reibungslose Integration mit bestehenden Systemen, sondern auch die Skalierbarkeit und Flexibilität, die iCITY für zukünftige Anforderungen benötigt.
Storyblok als Headless CMS
Wir haben Storyblok als CMS ausgewählt, da es die nötige Flexibilität bietet, Inhalte unabhängig von der Darstellung zu verwalten.
Headless CMS bedeutet eine saubere Trennung von Backend und Frontend und hat den Vorteil, Inhalte schnell ändern zu können, ohne die Stabilität der Website zu beeinträchtigen.
Das ist tatsächlich ein riesen Vorteil von Storyblok: Die Möglichkeit, Sections (grössere inhaltliche Bereiche) und Components (kleinere Bausteine) beliebig zu kombinieren und anzupassen. Doch nur durch eine durchdachte Setup-Phase können die Redakteure und Redakteurinnen später tatsächlich von dieser Flexibilität profitieren und Änderungen eigenständig vornehmen. Sprich: Elemente wie Call-to-Action-Buttons oder Textblöcke nach Belieben hinzufügen, anpassen oder neu kombinieren, ganz ohne auf die Hilfe von zusätzlichem Development angewiesen zu sein.
Je besser wir als Entwickler-Team die Sections und Components planen und implementieren, desto mehr Spielraum hat das Content-Team später, um Inhalte flexibel anzupassen und zu erweitern und die Struktur der Website dynamisch zu gestalten.
Frontend: Next.js für Geschwindigkeit und Effizienz
Für das Frontend der Website setzten wir auf Next.js, ein leistungsstarkes JavaScript-Framework, das sich besonders gut für dynamische und reaktionsschnelle Websites eignet. Next.js erhöht die Flexibilität der Website durch Incremental Static Regeneration (ISR). Diese Technologie ermöglicht es, Seiten in Echtzeit zu aktualisieren, ohne die Website-Performance zu beeinträchtigen. So bleibt die Website immer auf dem neuesten Stand und kann Inhalte problemlos anpassen, ohne dass die Geschwindigkeit darunter leidet.
CRM-Integration für nahtlose Benutzerverwaltung
Neben den Design- und Frontend-Technologien haben wir eine umfassende CRM-Integration durchgeführt. Dadurch können Leads, Anmeldungen für Touren und Events sowie die gesamte Benutzerinteraktion direkt über das CRM verwaltet werden. Dies ermöglicht es iCITY, alle relevanten Benutzerinformationen zentral zu bündeln und effektiv für Kommunikation und Kundenverwaltung zu nutzen.
Durch die Integration konnte die Website auch um wichtige Funktionen wie Anmeldeformulare erweitert werden, die nahtlos mit dem CRM verbunden sind.
Einblicke von Deanna Miceli
Junior Frontend DeveloperNeue iCITY Website: Flexibel, optimiert und bereit für die Zukunft
Mit diesem Projekt hat iCITY nicht nur einen frischen Look bekommen, sondern auch eine Plattform, die genauso dynamisch ist wie das Unternehmen selbst.
Dank der Kombination aus Storyblok und Next.js ist die Website visuell ansprechend, blitzschnell und flexibel. Die Headless-Architektur sorgt für maximale Anpassungsfähigkeit und eine verbesserte User Experience.
Wir haben gezielt Keywords recherchiert, die Webtexte optimiert und alles von Englisch auf Deutsch übersetzt. Durch suchmaschinen-freundlichen Content, Metadaten und eine durchdachte Struktur wird iCITY nun nun besser von Google & Co. gefunden. Mit der CRM-Integration kann das iCITY Team User und Events effizient verwalten, während die Plattform nahtlos mit den internen Prozessen verknüpft ist.
Die neue Website öffnet viele Wege für Innovationen – und iCITY hat den Schlüssel in der Hand, um in Zukunft noch mehr Türen für ihre Co-Working Community zu öffnen.
