Produktpräsentation

Triotop

Das TRIOTOP ist ein Gewerbe- & Landschaftspark mit einem einzig­artigen Konzept aus hoch­wer­tiger Archi­tek­tur, viel Natur und außer­ge­wöhn­licher Kunst, in dem Arbeit, Krea­ti­vität und Erholung zusammenfinden.

PROBLEM

Das außerge­wöhn­liche Konzept und die Wertig­keit des Parks waren für Intere­ssen­ten und in der Öffen­tlich­keit nicht bekannt.

ZIELE

Umsetzung einer neue Website, welche die Qualität und Ein­zig­artig­keit des Park­konzepts erleb- und sicht­bar macht.

Meine verwendete Tools:

Figma Miro Illustrator Photoshop VS Code

Meine Aufgabenbereiche:

Beratung Branding Research Konzeption Design Prototyping Technische Umsetzung

RESEARCH

Angewendete Research-Methoden:
  • Interviews mit Stakeholdern und Mietern
  • Card Sorting
  • Wettbewerbsanalyse
  • Bestandswebsite-Analyse
  • Besichtigung und Begehung vor Ort mit fotografischer Dokumentation
  • Bestehende Corporate Design Anwendung prüfen
  • Personas
  • Informationsarchitektur

Interviews

Card Sorting

Die bisherigen und neuen Inhalte wurden gesammelt, sortiert und klassi­fiziert, damit im folgen­den, den Nutzer­an­for­de­run­gen entsprechend, eine neue, klare und flache Navigations­struktur ent­wickelt werden konnte.

Bestandswebsite-Analyse

Bisherige Website des Triotop Köln

Moodboard & Corporate Design Anwendung

INSIGHTS

Research und Analyse zeigten, dass nicht nur ein Website-Relaunch erfor­der­lich war. Die Erge­bnisse machten deutlich, dass die Posi­tio­nie­rung geschärft und klarer kommu­ni­ziert werden musste.

Für die Auftraggeber bot der Prozess wertvolle Ein­blicke in Kom­mu­ni­ka­tion und Verhalten der Ziel­gruppen. Während der itera­tiven Zusam­men­ar­beit mit den Stake­holdern entwick­elten sich Priori­täten und Anfor­der­ungen dynamisch weiter, was folglich zur Erwei­terung des Projekts führte.

01_Positionierung

Nutzer*innen beschrieben den Park als hochwertig, ruhig und naturnah, fanden diese Qualitäten jedoch in der bisherigen Website nicht wieder. Es fehlte eine digitale Darstellung, die Orientierung ermöglicht, übersichtlich Informationen bereitstellt und den Ort als ganzheitlichen Lebensraum vermittelt.

02_Branding

Die Analyse zeigte eine inkonsistente Anwendung der Markenelemente sowie ein uneinheitliches sprachliches Auftreten. Begriffe wie „Mieter“ oder „Mietflächen“ wurden als technisch und distanziert wahrgenommen. Nutzer*innen reagierten positiv auf eine wärmere, zugänglichere Sprache, die Nähe und Identität schafft.

03_Visuell

Die visuelle Untersuchung ergab, dass die alte Seite als über­laden, unruhig und schwer erfass­bar empfunden wurde. Nutzer*innen wünschten sich eine ruhigere, klarere Darstellung mit aus­sage­kräftigen, groß­for­ma­tigen Bildern, die ein realis­tisch­eres Gefühl für Archi­tektur, Natur und Kunst vermitteln.

04_Navigation

Die bisherige Navigationsstruktur war verschach­telt und erschwerte das Auf­finden rele­vanter Infor­ma­tionen. Nutzer*innen beschrie­ben Orien­tie­rungs­pro­bleme und Umwege. Eine flachere Struktur und ein­deu­tige Seiten­be­zeich­nungen wurden als not­wendig erkannt, um den Zugang zu zentralen Inhalten zu erleichtern.

05_Inhalte

Inhaltliche Informationen waren unsys­te­ma­tisch verteilt und folgten keiner intui­tiven Logik. Nutzer*innen wünschten sich eine klare Gliederung und eine Führung entlang typischer Infor­ma­tions­be­dür­fnisse. Eine Park­über­sicht wurde vermisst. Insbe­sondere lag der Wunsch nach sicht­baren Lage- und ÖPNV-Infor­ma­tio­nen vor.

06_Technik

Technische Tests zeigten deutliche Nutzungsbarrieren auf mobilen Geräten. Die vorherige Website war nicht responsiv und schwer lesbar. Nutzer*innen brachen mobile Sitzungen häufiger ab. Eine moderne, skalierbare und mobil optimierte technische Basis wurde als zwingend erforderlich identifiziert.

Personas

Informationsarchitektur

LÖSUNGEN

Branding-Lösungen:

  • neues Wording
  • neuer Claim
  • charmante Sprache mit Witz
  • vorhandenes riesiges Bildarchiv sichten und einsetzen
  • neue Bildideen generieren und Fotografenpool briefen
  • Beratungsworkshop zu Marke & Kommunikation
  • Styleguide erstellen um Branding-Chaos zu beenden
das neue wording mit Bewohner und lebensräumen, der neue slogan Lebenräume mit Wohlfühlatmosphäre und die Logovarianten und Keyvisuals
Auflistung der männlichen Bewohner des Triotop
Auflistung der weiblichen Bewohner des Triotop
Das Gebäude alpha im Triotop Köln.
Kirschblüten-Saison im Triotop Köln

Website-Lösungen

Angewendete Methoden & Tools:

  • Wireframes Lo-Fi in Figma
  • Mockups Hi-Fi in Figma
  • Prototype Hi-Fi in Figma

Wireframes

Design

Das Webdesign setzt auf Wertigkeit und Klarheit, die mit großfor­ma­tigen, hoch­wer­tigen Visuals und groß­zü­gi­gen Weiß­flächen auf die Bedürf­nis­se der Ziel­gruppen abge­stimmt ist. Es greift bewusst deren Sehn­süchte auf und ver­bindet diese mit einer prä­gnan­ten, char­man­ten Tonalität. Inhalte mit sprach­lichem Eigen­ständig­keit und einem dezenten Augen­zwinkern unter­streichen die Origi­na­li­tät des Gesamtauftritts.

Die Konzeptseite der neuen Website des Triotop auf einem Mac
Ausschnitt der Homeseite der neuen Website des Triotop auf einem Mac
Die Homeseite der neuen Website des Triotop auf einem Mac

Components

Navigation

Die Navigation nutzt konsequent das neue Wording und macht hier bereits das beson­dere Park­kon­zept für die Nutzer:innen sicht­bar. Durch die zugleich redu­zierte Seiten­an­zahl entstand eine kompak­tere, flache Struktur, die den Zugang zu rele­van­ten Inhalten deutlich verein­facht und die Gesamt­na­vi­gation effizienter macht.

Responsive Table

Bei der Tabelle für freie Mietflächen wurde besonders auf eine klare, schnell erfass­bare Dar­stel­lung auf allen Devices geachtet. Deshalb kam insbesondere für mobile Endgeräte ein responsives Tabellen­design zum Einsatz, sodass die Inhalte auch auf kleinen Displays über­sicht­lich, zugäng­lich und gut nutzbar bleiben. Ein Hover-Status hebt einzelne Zeilen klar hervor und erleich­tert die Orien­tie­rung. Die Gebäude­be­zeich­nun­gen sind zudem deutlich als Links zu den jeweiligen Detail­seiten erkenn­bar.

ImageMap

Den Interessent:innen und Nutzer:innen ist eine präzise Parkübersicht besonders wichtig. Durch die Kombination einer interaktiven ImageMap mit einem Slider ließ sich die Orientierung deutlich verbessern: Die Karte zeigt die Lage des Parks sowie die Nähe zum Kölner Dom und veranschaulicht gleichzeitig die Anbindung an das ÖPNV-Netz. Beide Elemente greifen ineinander und bieten eine benutzerfreundliche, leicht verständliche Darstellung.

Figma Lo-Fi Wireframe
Figma Mi-Fi Wireframe
Figma Hi-Fi Mockup

Iconset

Für das Projekt entstand ein auf den Gesamtstil abgestimmtes Set, dass die Übersichtlichkeit und Orientierung unterstützt.

WEBENTWICKLUNG

Die fertigen Figma-Layouts habe ich in SCSS über VS Code umgesetzt und anschließend in das Contao-CMS auf einem Testserver integriert. Nach erfolgreicher Implementierung wurde das gesamte System einschließlich der MySQL-Datenbanken auf den Liveserver übertragen. Den Abschluss bildeten letzte Optimierungen sowie der kontrollierte Go-Live.

Figma Mockups

Figma Prototyping

ERGEBNISSE & IMPACT

Unmittelbar nach dem Go-Live ging positives Feedback von Partner­unter­nehmen, Mieter:innen, Inte­res­sen­t:innen, Wett­be­wer­bern und Inves­tor:innen ein. Der Bekannt­heits­grad des Projekts stieg spürbar. Gleich­zeitig konnten die durch­schnitt­lichen Leer­stands­zeiten reduziert und die Zahl neuer Be­woh­ner:innen erhöht werden.

Triotop Website
zurück zur Projekte-Übersicht