Isoces

Erstellung einer ganzheitlichen digitalen Präsenz. Planung, Design und Umsetzung einer intuitiven Website für die einzelnen Geschäftsbereiche.

Einführung

Hinter Isoces steckt eine neu gegründete Firma, welche in der Türkei sitzend global agiert. Neben Isolierschutzprodukten bietet diese auch noch Immobilien und Architekturdienstleistungen an. Zunächst soll die Seite für die Isolierschutzprodukte nur als Informationsplattform dienen, aber in Zukunft ist ein Webshop geplant.

Vorgehensweise

Nach der Aufnahme der Anforderungen und Wünsche des Kunden, wurden zunächst verschiedene Website auf deren Elemente, Inhalte und Designentscheidungen untersucht. Im nächsten Schritt wurden User Personas erstellt, um potenziellen Kunden eine bestmögliche User Experience zu ermöglichen. Anschließend wurde mit einem Konzept für das Design der Website mittels Figma begonnen. Aufgrund der Hauptzielgruppe wurde mit einem Desktop First-Ansatz gearbeitet. Bevor mit der Entwicklung begonnen wurde, wurde das Konzept in mehreren Iterationen mit dem Kunden abgestimmt. Während der Entwicklung wurde regelmäßig die Kommunikation mit dem Kunden gesucht, um so frühzeitig Feedback zu sammeln und ggf. Anpassungen durch zu führen. Die Umsetzung des Projekts fand hierbei in React inklusive Next.js und Tailwindcss statt.

Herausforderungen

  • Keine Basis
  • Multilingual (De, Eng, TR)
  • Keine Corporate Identity
  • Kein/kaum Kontent
  • Fehlende Mediadateien

Design

Aufgrund der Hauptzielgruppe und auf Wunsch des Kunden wurde mit einem hellen Design gearbeitet. Um eine gute Lesbarkeit zu gewährleisten wurde mit einem hohen Kontrast gearbeitet, in dem ein weißer Hintergrund und eine schwarze Schrift verwendet wurde. Der Kunde hat sich für die Schriftart Montserrat entschieden. Hierbei wurde sowohl mit der Regular als auch der Light Variante der Schrift verwendet.

Regular 400

Montserrat

Light 400

MontserratLight

Da kein Logo existierte, wurde dieses angefertigt. Bei der finalen Version wurde sich für ein Wortmarken-Logo entschieden. Hierfür wurde die Schriftart Limelight verwendet. Diese ist eine geometrische Artdeko Schriftart welche thematisch gut zum Namen passt, welcher aus dem mathematischen Isosceles Triangle (dt. Gleichschenkliges Dreieck) und dem Namen des Gründers besteht.

Isoces

Für die einzelnen Geschäftsbereiche wurde jeweils der Hintergrund des Logos verändert.

Isoces

Isoces

Isoces

User Journey

Die Webseite soll die einzelnen Geschäftsbereiche beinhalten, welche jeweils einzelne voneinander isolierte Webseiten darstellen. Die Landingpage agiert somit als Startpunkt und besteht aus drei großen Elementen, mit denen zu den einzelnen Geschäftsbereichen navigiert werden kann. Aufgrund dessen wurde verschiedene Journeys für die jeweiligen Seiten erstellt. Auf der Immobilien-Seite soll dem Kunden sofort verschiedene Inserate angezeigt werden. Die Planungsbüro-Seite wurde als One-Pager aufgebaut, bei der der Kunde beim Erreichen des Endes der Seite einen guten Überblick über die Dienste, das Vorgehen, vorherige Projekte und das Team erhält. Bei der Isolierschutz-Seite soll der Kunde möglichst schnell zu den einzelnen Produktgruppen und Produkten geführt werden. Das vorrangige Ziel der Webseite ist es, dass Kunden Isoces kontaktieren.

Picture of the author

Planungsbüro

Die Landingpage des Planungsbüros beginnt mit einem fullscreen Hero. Dort sind ebenfalls zwei Quicklink Buttons um zu den Projekten oder direkt dem Kontakt zuspringen. Das nächste Element beschreibt die einzelnen Dienstleistungen von Isoces. Darauf aufbauend werden Referenzen in Form von vorherigen Projekten dargestellt. Anschließend wird das Team rund um das Planungsbüro vorgestellt und ein paar Fakten präsentiert. Das letzte Element des Planungsbüros beinhaltet Links zu den sozialen Medien.

Picture of the author
Picture of the author
Picture of the author
Picture of the author

Isolierschutz

Die Landingpage für den Isolierschutz beginnt wie die Planungsbüro-Seite mit einem fullscreen Hero. Dort sind ebenfalls zwei Quicklink Buttons um zu den Produkten oder Produktgruppen zu gelangen. Das nächste Element ist eine Kategorisierung nach Anwendungsart (Dach-, Wand-, Bodenisolierung). Anschließend wird das Nachhaltigkeitsversprechen von Isoces beschrieben. Das letzte Element der Landingpage ist ein Grid in dem die Produkte aufgelistet sind. Die Produktgruppen Seiten beinhalten immer eine Abbildung, eine Beschreibung und die dazugehörigen Produkte. Die Produktseiten beinhalten neben einer Abbildung, einer Beschreibung noch eine Broschüre zum Produkt. Das Design dabei soll an eine Broschüre/Prospekt erinnern und Interesse wecken.

Picture of the author
Picture of the author
Picture of the author
Picture of the author

Sitemap

Neben der Startseite existieren verschiedene Pages für die einzelnen Geschäftsbereiche, ein Kontaktformular und ein Impressum. Für die Immobilien-Seite existiert wiederum eine Landingpage, eine Übersichtspage für die einzelnen Inserate und jeweils eine Detailseite pro Inserat. Für den Geschäftsbereich des Planungsbüros ist eine Page verzeichnet. Der letzte Geschäftsbereich, Isolierschutz, besteht aus einer Landingpage, einer Übersichtsseite für die verschiedenen Produktgruppen (5), separate Seiten für die einzelnen Produkte (≈35) und einer Downloadseite für die einzelnen Zertifikate.

Picture of the author

Ausblick

Das Projekt befindet sich aktuell noch in Revision. Voraussichtlich wird der Geschäftsbereich der Isolierschutzprodukte komplett isoliert und auf einer anderen Domain gehostet. Ebenfalls sollen zukünftig Projekte des Partners in der Immobilien-Seite implementiert werden.

Info

Timeline

SEP - DEZ

Stack

Figma

React

HTML

TAILWINDCSS

Next.js

Inkscape