Shadowmap im Hero Check – Licht & Schattenvisualisierung in Echtzeit

Im ersten Teil unserer Artikelserie Better Heroes, nehmen wir den Hero Bereich der Marketing Website des Wiener Startups Shadowmap ins Visier.

Mit Hero Bereich ist der prominenteste obere Abschnitt einer Website gemeint. Ein weiterer häufig verwendeter Begriff ist: "Above the fold". Der bezieht sich auf den sichtbaren Bereich einer Website, den Nutzer sehen können, ohne zu scrollen, wenn die Seite geladen wird.

Better Heroes? Schadowmap? Better Heroes ist unser Micro Design service bei dem wir Website Hero Bereiche unter die Lupe nehmen und dann redesignen. Mehr dazu hier: www.betterheroes.at.

Und Shadowmap ist eine Webapp zur Visualisierung von Licht und Schatten in Echtzeit. Soviel dazu.

Kontext

Die meisten Website Hero-Bereiche, die uns außerhalb der Design-Bubble begegnen, sind weder besonders klar noch besonders überzeugend gestaltet. Generische Headlines, austauschbare Bilder, uninspirierte Texte – das sind mitunter die wichtigsten Gründe, warum Webseiten nicht konvertieren.

Kurz gesagt: der durchschnittliche, österreichische Unternehmensauftritt. Das können wir jetzt so schnell nicht ändern. Was wir aber machen können ist einen Blick auf einen der wichtigsten Teile einer Website zu werfen und versuchen diesen zu verbessern. Warum das Sinn macht und mitunter sehr aufschlußreich sein kann liest du am besten hier nach: Held oder Hindernis? Warum dein Website Hero-Bereich nicht konvertiert.

Shadowmap allerdings, haben wir uns für diesen Artikel aus einem anderen Grund ausgesucht. Deren Website Hero Bereich ist nämlich richtig gut. Warum sollen wir's uns auch leicht machen oder? Los gehts :-)

Was ist Shadowmap?

Shadowmap zeigt in Echtzeit, wie Sonnenlicht und Schatten an jedem Ort der Welt zu jeder Tages- und Jahreszeit verlaufen. Die App hilft dabei, Bauprojekte zu planen, Solarpotenziale zu analysieren oder Standorte mit optimaler Sonneneinstrahlung zu identifizieren. Für Wohnungssuchende oder Architekten zum Beispiel. Sie können mit Shadowmap prüfen, wie viel Tageslicht eine Immobilie zu verschiedenen Jahreszeiten erhält, während Stadtplaner und Architekten die Verschattung neuer Gebäude simulieren, um Lichtverhältnisse zu optimieren.

Auch Fotografen und Filmemacher nutzen die App, um perfekte Lichtstimmungen für ihre Aufnahmen zu finden. Tolle Sache, wie ich finde. Aber genug erklärt, probiers am besten selbst aus unter https://app.shadowmap.org/.

Die Anatomie eines guten Hero Bereichs

Sehen wir uns jetzt den Hero Bereich von Shadowmap an. Darum geht's ja heute :-) Ein Hero Bereich besteht typischerweise aus:

• Navigation

• Wertversprechen Block (Headline, Subheadline, Call to Action & Social Proof)

• Product oder Dienstleistungs- Visual

Das gibts alles auch bei Shadowmap. Sehen wirs uns im Detail durch. Die wichtigsten Punkte sind nummeriert. Erklärung dazu weiter unten.

Navigation

Ok, selbsterklärend. Jede Website braucht eine Navigation. Im Fall von Shadowmap sieht das so aus. Das ist eine sogenannte "Navbar". Sie enthält das Company Logo, die Hauptmenüpunkte (samt Dropdown), einen Language Switcher und einen CTA (Die Handlungsaufforderung) namens "Launch free App".

Die primäre gewünschte Handlungsaufforderung ist also, dass der User die App öffnet. Die ist, zumindest in der Basisversion gratis. Das wird gleich mitkommuniziert. Super. Soweit alles klar.

Wertversprechen & Co.

Ein weiterer wichtiger Bestandteil eines Hero Bereichs ist das sogenannte Wertversprechen bzw. die Kernaussage. Auch das gibts hier.

1. Headline (H1)

"Global Interactive 3D Sunlight Simulation".

Anstatt von Marketing Copy oder einem Wertversprechen verwendet Shadowmap hier etwas das ich gerne Kernaussage nenne. Salopp gesagt: Was bin ich & was mache ich? Je nach Phase in dem sich ein Brand befindet kann das eine oder andere mehr Sinn machen. Ich gehe mal davon aus Shadowmap textet hier für allgemeine Awareness.

2. Die Subheadline (Der Ergänzungstext)

"Shadowmap helps you to visualize and analyze sunlight, shadows and solar potential. Our 3D digital twin provides solar intelligence at your fingertips. In realtime. Anywhere on Earth."

Ok, alles klar soweit. Jetzt hab ich ein ganz gutes Verständnis von dem was mich erwartet.

3. Call to Action

Eine Handlungsaufforderung haben wir ja schon in der Navigation. Hier jetzt, gibts nochmals 2. Die primäre Aktion ist auch hier "Launch free app", also die gleiche wie in der Navbar. Die Sekundäraktion lautet "Solutions" und führt auf die Unterseite, die die unterschiedlichen Lösungen je nach Target Group and Anwendungsfall beschreibt. Auch hier folgt Shadowmap einem bewährten Muster.

3. Social Proof

Zum Beispiel Kundenstimmen, ein Logo-Slider mit Unternehmen, mit oder für die man arbeitet, oder Awards – all das sind Formen von Social Proof. Shadowmap went all in – alle 3 Arten sind vertreten :-)

• Awards

• Kundeninfos

• Logo-Slider

4. Product Visual

Shadowmap verwendet hier Screenshots unterschiedlicher Anwendungsbereiche der App – in iPhone und iPad mockups. Dieser Bereich erfüllt also gleich mehrere Zwecke. Eventuell zu viele. Mehr dazu gleich.

Das Positive

Wie schon im Intro erwähnt – das hat jemand gemacht der sich a. auskennt und b. etwas dabei gedacht hat. Ich bin mir sicher Shadowmap mißt User Zugriffe, Verhalten und Conversions und passt Bereiche der Website wenn nötig an. Das Corporate Design ist sowieso Klasse. Alles in allem super, gibts nichts daran auszusetzen. Aber was heißt das jetzt für unseren Better Hero? Gibts den in dem Fall nicht? Sehen wir uns an wo ich persönlich noch Potential sehe. Jetzt kommt der spannenden Teil.

Verbesserungspotential

Es ist mega viel Content above the fold zu sehen. Die Entscheidung auch noch die Solutions zu zeigen (wenn auch angeschnitten) macht das ganze ziemlich busy. Hier nochmals der gesamte Hero Bereich:

Mir persönlich zu busy, aber vielleicht hat Shadowmap ja Daten die die Entscheidung untermauern. Wir werden, wenn möglich nachfragen :-)

Im nächsten Schritt sehen wir uns nochmals folgende Bereiche an und versuchen Alternativen auszuarbeiten.

• Product Visual

• Wertversprechen & Co.

• Navigation

• Social Proof

Product Visual

Ok. Im jetzigen Product Visual sehen wir unterschiedliche Anwendungsbeispiele und dass die App auch auf iPhone und iPad funktioniert. Nochmals zur Erinnerung, das sieht so aus:

Frage ist jetzt a. erkennt man in den Visuals wirklich genug? Welche Anwendugsfälle werden hier gezeigt? und b. wie wichtig ist hier iPhone und iPad? Mir persönlich sieht man zu wenig von der Hauptansicht der App. Eventuell kann man auf die Mockups verzichten und mehr davon zeigen was einen erwartet.

Was ich damit meine? Einen Screenshot des wunderschönen Sankt Gilden zb. (oder sogar "Live"?) So in der Art:

Wertversprechen & Co.

Wie oben erwähnt gehen wir davon aus, dass Shadowmap für Awareness textet und mit einer Kernaussage arbeitet (Was bin ich?) Wie sieht das aber aus wenn man mehr in die Richtung Wertversprechen denkt und sich direkt an den User wendet? So zum Beispiel:

Mir persönlich gefällt die Direktheit dieser Version. Es sagt eindeutig was man tut, wenn man die App bedient und (im Zusatztext) wird der Benefit davon erwähnt: "Gather real-time insights into sunlight and shadows worldwide. Know exactly where the

light falls, every minute of every day."

Navigation

Der derzeitige transparent Blur Effekt des Heros gefällt mir super – Auf den Unterseiten. Da man ihn erst wirklich sieht wenn man scrolled und sich die Navbar über einem z.B. Bild befindet, sieht es auf dem Startseiten Hero auf den ersten Blick nur aus wie ein weiterer Farbton. Frage ist ob das hier zwingend nötig ist. Meine Variante ist demnach schwarz. Aja und die Elemente sind etwas anders gruppiert. So steht das Logo etwas mehr für sich und kann "atmen". Je nach Breakpoint zumindest :-)

Social Proof

Eine schnelle Recherge mit Chat GPT's Deep Research zeigt folgendes im (Bereich B2B SaaS): Stelle echte Nutzer-Erfolge in den Vordergrund, untermauert von harten Fakten zur Popularität der Plattform. Kundenlogos und Awards können zusätzlich platziert werden. Für Shadowmap.org dürfte vor allem der persönliche Erfahrungsbericht eines User die Conversion zum zahlenden Kunden am stärksten fördern, wie die Daten nahelegen. Je mehr man in die Richtung B2B geht desto wichtiger ist die Präsenz anderer Unternehmen. Awards sieht Chat Gpt eher als Bonus und im Footer, nicht im Hero. Gesamt genauer gesagt so:

Ranking nach Effektivität (durchschnittliche Conversion-Steigerungen)

1. Testimonials (Nutzerstimmen):

→ ca. 35 % Conversion-Steigerung (durchschnittlich 30–35 %, vereinzelt deutlich höher)

2. Company Logo Slider (Kundenlogos):

→ 20–30 % Conversion-Steigerung (typischer Wert ~21–30 %).

3. Nutzerzahlen (z.B. „Trusted by over 150k users/month“):

→ ca. 15–25 % Steigerung durch Popularitätsbeweis.

4. Awards/Auszeichnungen:

→ ca. 10–20 % Conversion-Lift als unterstützendes Element.

Was heißt das jetzt für unserer "Better Hero?". Kurz gesagt: wir brauchen Platz, deshalb kommen die Awards in den Footer. Was noch? Wir wollen Testimonial und Nutzerzahlen pushen. Und? Shadowmap ist kein reines B2C SaaS. Die unterschiedlichen Zielgruppen an die es sich mit unterschiedlichen Lösungen richtet sind aber nicht "direkt" im Hero. Man sieht sie im Dropdown Menü von Solutions und im angeschnitteten Bereich direkt unterm Kundenlogoslider.

Also hier:

Und hier:

Die Quintessenz

Ich halte es für wichtig, sofort zu verstehen, an wen sich die App richtet. Idealerweise sollte ich auf einen Blick erkennen, ob ich hier dazugehöre. Was bedeutet das für unseren neuen Hero? Da wir die Awards in den Footer "verbannen", haben wir oben etwas mehr Platz – also rücken die Zielgruppen in den Fokus. Ach ja, und die Nutzerzahlen peppen wir auch etwas auf. Im Original gehen sie zu sehr unter. Let’s do this!

Wir haben das Element zur Anzeige der Nutzerzahlen um 3 Profilbilder erweitert, so geht es nicht unter. Der wichtigste Part allerdings sind die Zielgruppen. Die werden nun direkt im Hero Bereich erwähnt. Nette Icons von Nucleo runden diesen Teil ab. Wunderbar soweit. Auch nicht wenig Info auf einem Platz, geht sich aber noch aus wie ich finde 😜

Alternativen

Eine andere Idee, ist ein Kundenzitat direkt in die "Kachel" zu integrieren. Die "Zierelemente" lassen wir in der Kachelversion weg, das zwickt hier zu sehr.

Better Heroes

Wir sind nun alle Elemente durchgegangen, in denen wir Potenzial zur Verbesserung sehen. Im nächsten Schritt fügen wir alles zu einem neuen Hero – oder besser gesagt, mehreren möglichen Varianten – zusammen.

Dabei wird schnell klar: Wenn wir erneut alles einbauen, wird es schnell überladen. Genau das wollen wir vermeiden. Wir müssen also priorisieren und gut überlegen welchen Elemente wir wieviel Platz schenken.

1.

Zuerst die Mega-Bold-Variante – zugleich die low-hanging fruit. Hier steht der Screenshot der App im Vordergrund. Das Wording sitzt, typisch für SaaS, zentriert. Das großflächige, knallige Gelb unterstreicht, worum es geht – die Sonne.

2.

Die zweite Variante setzt ebenfalls auf viel Gelb – und knallt auch. Allerdings ist das Layout hier zweispaltig. Diese Variante zeigt drei der vier möglichen Social-Proof-Elemente in einem Hero: Nutzerzahlen, Logoslider und ein Kundenzitat.

3.

Eine Adaption von Variante 2. Kurzum: noch mehr Gelb und ein leicht angepasstes Layout.

4.

Mein persönlicher Favorit. Wir verzichten zwar sowohl auf die Awards als auch auf die Kundenlogos – allerdings heben wir die Zielgruppen und Nutzerzahlen stark hervor. Die wohl größte Änderung und zugleich der erhoffte Conversion-Treiber: Wir zeigen einen Live-Ausschnitt der App direkt im Hero. See below – inklusive Farbmutation.

Fazit

Shadowmap macht bereits vieles richtig und überzeugt mit einem klaren Aufbau und starken Inhalten im Hero-Bereich. Eine Alternative zu bieten, die darauf aufbaut und gleichzeitig Verbesserungen bringt, ist daher keine einfache Aufgabe. Dennoch bin ich überzeugt, dass vor allem das gezielte Hervorheben der App in Kombination mit einer direkten Ansprache der Zielgruppen echten Mehrwert bietet.

Der Schlüssel liegt meiner Meinung nach nicht darin, so viel wie möglich zu zeigen, sondern abzuwägen, was wo mehr Sinn macht. Nur so kann das, was man schlussendlich sieht, auch wirklich wirken.

Wenn du generell mehr zum Thema Hero-Bereiche wissen willst, lies doch folgenden Artikel: Held oder Hindernis? Warum dein Website Hero-Bereich nicht konvertiert.

Wie sieht es mit deiner Unternehmenswebsite aus? Denkst du, dass du das Beste aus deinem Hero-Bereich herausgeholt hast? Wenn du auch deinen Hero-Bereich optimieren willst, schau doch mal auf www.betterheroes.at vorbei. Dort kannst du eine Überarbeitung gleich direkt online buchen. Das Beste daran: Alles läuft komplett asynchron – keine Meetings, keine Calls. Innerhalb von 72 Stunden erhältst du ein Design-File mit deinem neuen Hero direkt per E-Mail.

Lass uns gemeinsam das Beste aus deinem Hero herausholen!

Wir freuen uns auf dich.

Bis bald :-)