Webseiten modernisieren | Von Desktop zu Mobile First

Als Berufsskilehrer mit einer «Desktop First»-Website stand ich vor einer Herausforderung: Wie kann ich meinen mobilen Besuchern einen ansprechenden und funktionalen Zugang zu meiner Website bieten? Schliesslich haben die meisten Gäste im Skigebiet keinen PC zur Hand.

Die Lösung: Vilu Wrapped

Drei kurze «Mobile» Video-Slides, inspiriert vom Stil gängiger sozialer Medien, die die wichtigsten Informationen prägnant und ansprechend vermitteln.

Ausgangslage

Während meines Studiums habe ich meine Portfolio-Webseite erstellt, die für Desktop-Benutzer optimiert ist. Da die meisten Besucher «E-Mail-Jöbler» sind und nach meiner Prognose vom Schreibtisch aus auf meine Seite kommen. Aber im Skigebiet, wo die Kontakte hauptsächlich über mobile Geräte gepflegt werden, wurde schnell klar, dass ich eine Lösung für mobile User finden musste.

Ideen Prozess

Webseite vs Soziale Medien

Während meiner Arbeit als Schneesportlehrer hatte ich schon häufiger individuelle Webseiten für Gäste erstellt, die mehrere Tage bei mir gebucht hatten. Diese Mini-Projekte, die Fotos, persönliche Tipps und Highlights enthielten, kamen immer sehr gut an.

Die nächste Frage war, wie ich mobile Besucher*innen aktiv auf meine Webseite lenken kann. Hier kamen «QR-Code Stickers» ins Spiel. Sie schienen mir als perfekte Lösung, um Personen von der Skipiste direkt auf meine Webseite zu führen. Zusätzlich wollte ich eine prägnante, leicht zu merkende Domain schaffen, die meine Marke transportiert und gleichzeitig persönliche Authentizität ausstrahlt. So entstand die Idee zur Domain vilu.ch, die mein Spitzname als Schneesportlehrer widerspiegelt.

Experimentieren mit interaktiven Elementen

Ein Meilenstein im Ideenprozess war die Entdeckung von stornaway.io, einem Tool zur Erstellung interaktiver Videos.

An dieser Stelle möchte ich auf die hervorragende Bachelorarbeit «starrk.» von Rosa Zimmermann & Jannis Pfister verweisen, in der ich das Tool gefunden und für meine Zwecke verwendet habe.

Inspiriert von der „Spotify Wrapped“-Kampagne hatte ich die Vision, eine dynamische Darstellung meiner Inhalte zu schaffen. Mit einfachen Entscheidungsoptionen möchte ich die Besucher*innen meiner Webseite informieren, unterhalten und binden.

Bitte akzeptiere die statistik, Marketing Cookies um diesen Inhalt zu sehen.

Umsetzung

Webseite

Der Prozess begann damit, dass ich den Look and Feel meiner bestehenden Webseite aufgegriffen habe, um ein konsistentes Erlebnis zu schaffen. Als erstes habe ich Skizzen angefertigt, um die Hauptobjekte für den ersten Slide zu definieren. Parallel dazu machte ich mich auf die Suche nach passenden Bildern und Videos, indem ich verschiedene Archive durchforstete.

Die gesammelten Inhalte habe ich in Figma, Photoshop, Canva und After Effects weiterbearbeitet.

Mit stornaway.io habe ich eine Map erstellt, die eine einfache Verlinkungsstruktur aufbaut, ähnlich dem bekannten Swipen auf sozialen Medien. Nutzer*innen können durch die Videos navigieren, indem sie entweder zum nächsten Clip springen oder zurückgehen. Die weiteren zwei Slides habe ich ebenfalls mit Skizzen vorbereitet, um die Ideen visuell festzuhalten.

Sticker

Bitte akzeptiere die statistik, Marketing Cookies um diesen Inhalt zu sehen.

Ein wichtiger Bestandteil meines Projekts war die Gestaltung eines Stickers, der als Eintrittspunkt für mobile Nutzer*innen dient. Auf Pinterest habe ich mich für QR-Stickers inspirieren lassen. Dabei fiel mir auf, dass überraschend wenige Sticker mit QR-Codes existieren – und wenn, dann wirken sie oft unpersönlich und technisch. Meine Herausforderung lag somit darin, den QR-Code in den skizzierten Stil meines Projekts einzubinden, ohne dass er wie ein Fremdkörper wirkt.

Fazit

Schlussendlich habe ich einen Meilenstein gelegt, um Vilu als «Marke» im Skigebiet zu etablieren. Das tolle dabei ist, dass ich sehen kann wie gut die Massnahmen funktionieren, da ich im Backend auf sämtliche Analytics zugriff habe. ;D

Cheers 🥂

(eli)

Einschränkungen des Tools

Canva erwies sich bei der Erstellung komplexerer Inhalte als begrenzt. In Zukunft werde ich alle Slides mit After Effects erstellen.

Integration des QR-Codes

Die Integration des QR-Codes in das Design erwies sich als schwierig. Der Code wirkte zunächst unpersönlich und technisch, was nicht zum skizzierten Look passte. Wurde er zu stark verändert, konnte er nicht mehr gescannt werden.

 

Ansonsten bin ich zufrieden 🙂