Design und Technologie

  • Anina Angehrn

Design und die Technologie sind optimal auf die Zielgruppe der auf Jugendliche auf der Lehrstellensuche ausgelegt. Den anspruchsvollen Digital Natives wird dank einem Headless CMS und durchdachten Algorithmen höchste Usability gewÀhrt.

Mehr zu den Services UX Design und CMS die wir dir als Digital Agentur bieten.

Die Berufsbildungsplattform der Migros-Gruppe wird höchsten AnsprĂŒchen gerecht. Die neue Plattform ist vollstĂ€ndig in der Karriereplattform integriert und meistert anspruchsvolle technologische Herausforderungen. Die Lösung dafĂŒr ist die Nutzung von Drupal 8 als Headless CMS. Die höchst moderne FunktionalitĂ€t der neuen Drupal-Version wird voll ausgeschöpft und eine hohe FlexibilitĂ€t im Frontend bleibt bestehen. Dadurch entsteht gegen Aussen ein konsistenter Gesamtauftritt, wobei die Seite technologisch komplett unabhĂ€ngig von der Hauptseite der Karriereplattform der Migros-Gruppe ist.

Mit neuester Technologie zum Erfolg

Die Anbindung passierte an das bestehende CMS der Karriereplattform der Migros-Gruppe. Der moderne Technologie-Stack basiert auf Nuxt (vue.js fĂŒr SSR apps), Node.js Express Server, Node.js Proxy API um die Daten aus dem CMS zu exportieren, aggregieren und zu cachen. Das Bulma wurde als CSS Framework eingesetzt und TWGL.js wurde mit custom GLSL Shader fĂŒr die dynamischen Visuals eingesetzt. Site Cache und Server Side Rendering stellen die VerfĂŒgbarkeit und StabilitĂ€t sicher. Durch das Pre-rendering der Seite auf dem Server bleibt sie stabil und verfĂŒgbar.Bei der Wahl der Technologie wurde FlexibilitĂ€t hoch priorisiert, um die BedĂŒrfnisse der Kund*innen stets zu erfĂŒllen.

AusgeklĂŒgelte Algorithmen im Talent Matcher

Wer weiss im Teenager-Alter schon, welcher Job der richtige ist? Der Talent Matcher der Migros-Gruppe hilft mit einem ausgeklĂŒgelten Algorithmus den passenden Job zu finden. Das Beantworten von einfachen Fragen zeigt nicht nur den eigenen Traum-Job, sondern auch das persönliche Profil: Wie verhalte ich mich? Arbeite ich gerne mit Menschen? Welchen Umgang pflege ich?

Tiefe NutzungshĂŒrde dank durchdachtem Backend

Herausforderung des Talent Matchers war die Persistenz beim Neuladen oder unterbrochenem Besuch der Seite. Die Beantwortung der Fragen sollte unterwegs mit dem Handy begonnen werden können und dann - wenn der Akku leer ist - bei einer spĂ€teren Nutzung des Talent Makers auf Basis des aktuellen Stands fortgesetzt werden, ganz ohne Login. Mit JavaScript wurde eine Server Side Rendered Single Page APP (SPA) realisiert. Dank Cookies konnte ein Session-ĂŒbergreifender State realisiert werden, der die bisherigen Eingaben wieder verfĂŒgbar macht. Die Resultate werden ĂŒber die eindeutige ID gespeichert und können immer wieder aufgerufen werden, wodurch auch die Sicherheit und der Datenschutz gewĂ€hrleistet sind. Eine Kombination aus Innovation und Pragmatismus fĂŒhrte zu dieser sehr benutzerfreundlichen Lösung. Die Digital Natives als Zielgruppe sind sich einen hohen digitalen Komfort gewöhnt, weshalb diese FunktionalitĂ€t erfolgsentscheidend war.

Chatbot

Die neue Plattform kann nicht jede Frage beantworten - aber fast alle. Der Mino Chat bietet eine Unterhaltung mit Mino, dem Maskottchen des Lehrstellen Hubs der Migros-Gruppe. Der Content ist - entsprechend der Zielgruppe Digital Natives - stark mit Emoticons und Humor angereichert. Der Mino Chat ist ein Chatbot, der die Lehrstellensuchenden durch Fragen leitet. Zudem bietet er Infos zu Events in der NÀhe sowie die Möglichkeit, einen Bewerbungstermin zu hinterlegen.

Performance trotz hoher Visualisierung

Die Digital Natives nutzen primĂ€r mobile Devices. Deshalb verfolgte das Projekt auch einen Mobile-first-Ansatz: Moderne zielgruppengerechte Umsetzung fĂŒrs Handy. 3D-Renderings und -Animationen sind Hauptelemente der Seite. Zudem wurden verschiedenste Videos eingebunden. Trotzdem sind die Inhalte responsive, also EndgerĂ€t-unabhĂ€ngig, und die grafischen Elemente optimiert fĂŒr die Performance auf mobilen GerĂ€ten. Die Video- und Bildformate reagieren gemĂ€ss unterschiedlichen Device-Grössen. Somit funktioniert die Plattform in allen gĂ€ngigen Browsern - auch wenn diese kein WebGL unterstĂŒtzen. Zudem ist die Auffindbarkeit ĂŒber Suchmaschinen ist gewĂ€hrleistet: Dank des Server Side Renderings der SPA sind alle Inhalte durch Suchmaschinen indexierbar. Trotz umfangreicher FunktionalitĂ€t und visuellem Content ist die Accessibility gewĂ€hrleistet. Valider Client code ist eine SelbstverstĂ€ndlichkeit.

Höhere Content-QualitÀt durch CMS-FunktionalitÀt

Besuchenden der Plattform stehen neben interaktiven Dienste - eine Unterhaltung mit einem Chatbot oder eine geeignete Berufsempfehlung vom Talent ­Matcher - auch umfangreicher Content zur VerfĂŒgung: Kurze Videoclips begeistern und machen Lust auf bestimmte Berufe. Da dieser Inhalt wie auch die gesamte Struktur im CMS definiert sind und das Frontend ausschliesslich auf diese Inhalte und Struktur zurĂŒck greift, können keine toten Links entstehen. Auch wurden sĂ€mtliche Seiten mehrmals von der Zielgruppe getestet.

Technische Innovation weiterhin im Fokus

Weitere Services - abgestimmt auf die BedĂŒrfnisse der digital anspruchsvollen Zielgruppe - sind in Planung, schreibt die ­Migros-Gruppe. So soll zukĂŒnftig ein Schnupperlehre-Finder sowie ein Bewerbungs-Coach zur VerfĂŒgung stehen.


Sag uns was du denkst