Felhasználói utazás

A Karrier Portál felhasználói utazása (User Journey) egy inspiráló, UX-fókuszú élményt nyújt, amely az Audi Hungaria munkáltatói márkáját mutatja be különböző célcsoportok számára.

Hero & belépő szekció

A belépő videós hero szekció az első benyomás, amely bemutatja az Audi vállalati kultúráját és értékeit.

Csatlakozz az Audi csapatához

Fedezd fel a lehetőségeket és építsd velünk együtt a jövő autóiparát

HeroBlock komponens

A HeroBlock komponens a felhasználói utazás kezdőpontja, amely erős vizuális hatást kelt és egyértelmű call-to-action elemeket tartalmaz.

Háttér videó:
Full-screen háttérvideó, amely bemutatja az Audi munkahelyeit
Headline:
Rövid, hatásos headline, amely megszólítja a célcsoportot
CTA gomb:
Kiemelt, figyelemfelkeltő call-to-action gomb
Scroll hint:
Animált lefelé nyíl, amely jelzi a további tartalmakat

Kód példa

<div class="bg-gray-900 rounded-[4px] overflow-hidden relative h-[400px]">
  <video autoplay muted loop class="absolute inset-0 w-full h-full object-cover">
    <source src="/path/to/video.mp4" type="video/mp4">
  </video>
  <div class="absolute inset-0 bg-black opacity-50"></div>
  <div class="absolute inset-0 flex flex-col items-center justify-center text-white p-6 text-center">
    <h3 class="text-3xl font-bold mb-4">Főcím</h3>
    <p class="mb-6 text-lg">Alcím szöveg</p>
    <button class="bg-[#f50537] hover:bg-[#940826] text-white px-6 py-3 rounded-full font-medium transition-colors">
      CTA szöveg
      <i class="fa-solid fa-arrow-right ml-2"></i>
    </button>
  </div>
</div>

JourneyIntroBlock komponens

1 Fedezd fel karrierutadat

Az Audi Hungaria különböző karrierutakat kínál célcsoportok szerint. Válaszd ki, melyik csoportba tartozol, hogy személyre szabott információkat kaphass.

Diákok

Pályakezdők

Szakemberek

JourneyIntroBlock komponens

A JourneyIntroBlock bevezeti a felhasználót a személyre szabott tartalomba, és segít kiválasztani a megfelelő utat.

Lépésjelzés:
Számozott lépés a folyamat nyomon követéséhez
Útvonalak:
Választható célcsoport kategóriák ikonokkal
Interakció:
Hover és kattintási állapotok a jobb UX érdekében
CTA:
Folytatásra ösztönző nyíl gomb

Kód példa

<div class="border border-[#E0E0E0] rounded-[4px] p-6">
  <h4 class="text-[20px] font-medium mb-4 flex items-center">
    <span class="w-8 h-8 bg-[#f50537] text-white rounded-full flex items-center justify-center mr-3">1</span>
    Cím
  </h4>
  <p class="text-[#666666] mb-6">Leírás</p>
  
  <div class="flex space-x-6 mb-6">
    <div class="flex-1 text-center p-3 border border-[#E0E0E0] rounded-[4px] cursor-pointer hover:border-[#f50537] hover:text-[#f50537] transition-colors">
      <i class="fa-solid fa-icon text-2xl mb-2"></i>
      <p class="text-sm font-medium">Opció 1</p>
    </div>
    <!-- További opciók... -->
  </div>
</div>

Felhasználói journey indítás

A felhasználók célcsoport-specifikus utazási útvonalakon haladhatnak végig, amelyek személyre szabott tartalmakat kínálnak számukra.

PersonaSelector komponens

Válaszd ki célcsoportodat

Diák

Gyakornoki és diákmunka lehetőségek

Pályakezdő

Karrierindító programok

Szakember

Tapasztalt munkatársak részére

PersonaSelector komponens

A PersonaSelector lehetővé teszi a felhasználók számára, hogy azonosítsák magukat az adott célcsoporttal, és személyre szabott tartalmat kapjanak.

Célcsoport kártyák:
Vizualizált választási lehetőségek ikonokkal és rövid leírásokkal
Kiválasztás:
A kiválasztott kártya kiemelése zöld színnel
Továbblépés:
CTA gomb a kiválasztott útvonalra való lépéshez
Adatokátadás:
Parámetérek átadása URL-ben vagy tárolása localStorage-ban

Kód példa

<div class="grid grid-cols-1 sm:grid-cols-3 gap-4">
  <div class="border-2 border-[#f50537] rounded-[4px] overflow-hidden cursor-pointer">
    <div class="h-32 bg-[#f50537] bg-opacity-10 flex items-center justify-center">
      <i class="fa-solid fa-icon text-5xl text-[#1D824C]"></i>
    </div>
    <div class="p-4 text-center">
      <h4 class="text-lg font-medium mb-1">Cím</h4>
      <p class="text-sm text-[#666666]">Leírás</p>
    </div>
  </div>
  <!-- További kártyák... -->
</div>

JourneyPath és JourneyStepCard komponensek

2 Fedezd fel a diák lehetőségeket

1
Információ
2
Lehetőségek
3
Jelentkezés
4
Átekintés

Dualis képzés

Elméleti és gyakorlati tanulmányok kombinalasa, amely során az Audinál szerezheted meg a gyakorlatot.

3-3.5 év
BSc diploma

Kooperációs képzés

Egyetemi tanulmányok mellett részidejű munkalehetőség, rugalmas beosztással.

20 óra/hét
BSc/MSc hallgatók

Journey komponensek

A JourneyPath és JourneyStepCard komponensek strukturált, lépésenkénti megközelítést biztosítanak a felhasználói utazás során.

Lépésjelző:
Vizualizálja az utazás aktuális állapotát és a hátralévő lépéseket
Step kártyák:
Az egyes lehetőségek bemutatása adatokkal és továbi választási lehetőségekkel
Navigáció:
Előre-hátra navigációs gombok a lépések közötti váltáshoz
Metaadatok:
Ikonokkal ellátott plusz információk a jobb áttekinthetőségért

Kód példa - Lépésjelző

<div class="flex items-center justify-between mb-8 relative">
  <div class="absolute left-0 right-0 top-1/2 h-1 bg-[#E0E0E0] -translate-y-1/2 z-0"></div>
  <div class="relative z-10 flex flex-col items-center">
    <div class="w-8 h-8 rounded-full bg-[#f50537] text-white flex items-center justify-center text-sm">1</div>
    <span class="text-xs mt-1 text-[#f50537] font-medium">Aktív lépés</span>
  </div>
  <!-- További lépések... -->
</div>

Márkaérték & bizalomépítés

Az Audi munkáltatói márkaértékének és bizalomtényezőinek bemutatása a kollégák tapasztalatain keresztül.

Az Audi Hungariánál lehetőséget kaptam olyan nemzetközi projektekben való részvételre, amelyek szakmailag és személyesen is fejlesztettek. A vegyesmérnöki gyakornoki program időszakom után teljesállású pozíciót ajánlottak, és most már 3 éve a csapat tagja vagyok.

Munkatárs képe

Kovács Eszter

Fejlesztőmérnök, Győr

QuoteCarousel komponens

Munkatárs képe

Nagy Péter

Villamérnok

Az Audi Hungaria folyamatos fejlődési lehetőségeket biztosít szakmai és személyes területen egyaránt.

Munkatárs képe

Kiss Andrea

HR specialista

A családbarát munkarendnek köszönhetően könnyen összehangolható a magánélet és a szakmai fejlődés.

Munkatárs képe

Szabó Balázs

Log terv. menedzser

Az elmúlt 5 évben három különböző pozícióban dolgozhattam a vállalaton belül, ez valódi karrierutat jelent.

Idézet komponensek

A QuoteBlock és QuoteCarousel komponensek a munkavállalói véleményeket, tapasztalatokat mutatják be hiteles formában.

QuoteBlock:
Kiemelt munkavállalói idézet képpel és nevével ellátva
QuoteCarousel:
Görgethető idézetgyűjtemény több kollégától
Tervezési cél:
Bizalomépítés és a vállalatot vonzóbbá tétele a valódi történeteken keresztül
Használat:
Az journey bármely pontján elhelyezhető meggyőző tényezőként

Kód példa - QuoteBlock

<div class="border border-[#E0E0E0] rounded-[4px] p-6 relative">
  <div class="text-[#1D824C] text-6xl absolute top-4 left-4 opacity-10">“</div>
  <div class="relative">
    <p class="text-lg text-[#333333] italic mb-6">
      Idézet szöveg...
    </p>
    
    <div class="flex items-center">
      <div class="w-12 h-12 rounded-full overflow-hidden mr-4">
        <img src="/path/to/image.jpg" alt="Név" class="w-full h-full object-cover" />
      </div>
      <div>
        <h4 class="font-medium text-[#333333]">Név</h4>
        <p class="text-sm text-[#666666]">Pozíció</p>
      </div>
    </div>
  </div>
</div>

Gazdag média komponensek

A VideoEmbed és GallerySlider komponensek vizuális tartalmat biztosítanak a felhasználói utazás során.

VideoEmbed

Beágyazott videó komponens a YouTube vagy más videómegosztó platformokról. Támogatja a videó automatikus lejátszását, vezérlőszerveit és reszponzivitását.

GallerySlider

Képgaléria slider, amely több képet tud megjelentetni nézetűnyi méretben, touch és egér vezérléssel. Támogatja a lightbox funkciót a képek teljes képernyős megtekintéséhez.

ValuePillars és Márkaérték komponensek

Innováció és technológia

Megszállás az újítások és a legújabb technológiák iránt. Az Audinál minden nap az innováció határozza meg a munkánkat.

További információk

Fejlődés és csapatok

Folyamatos személyes és szakmai fejlődési lehetőségek egy nemzetközi környezetben, inspiráló és támogató csapatokban.

További információk

Fenntarthatóság

Elkötelezettség a környezetbarát járműgyártás és gyártási technológiák mellett, a jövőre gondolva.

További információk

Fedezd fel az Audi álláskeresői utazását

Új, interaktív oldalunkon részletesen bemutatjuk az álláskeresés folyamatát az Audi Hungáriánál. Fedezd fel a lépéseket a jelentkezéstől egészen az onboardingig.