A Rutgers Egyetem honlapjának modernizálása

A kihívás

Bár a Rutgers főoldala elfogadható látványt nyújtott és valamennyire közvetítette az egyetem szellemiségét már az újratervezés előtt is, de mégis: volt még tér a látogatók hatékonyabb megszólítására. A hero szekció kitöltötte a teljes képernyőt, és egy hangulatos háttérvideót tartalmazott, amely megragadta a campuson zajló diákélet energiáját, de nem tartalmazott egyértelmű következő lépéseket a felhasználók számára. A látogatókat gyakran magával ragadta a vizuális megjelenés, de görgetniük kellett, hogy megtalálják az őket érdeklő linkeket vagy információkat. A fontos tartalmak, mint például a felvételi részletek, az akadémiai kiemelések és a campus hírek, az oldal alsóbb részein kaptak helyet, ami csökkentette ezeknek a szakaszoknak a megtekintési és kattintási arányait.

Bár a dizájn híven tükrözte a Rutgers büszkeségét és hagyományait, nem támogatta teljes mértékben azt a növekvő igényt, hogy a főoldal közvetlenebbül irányítsa a felhasználókat. A videó-központú elrendezés a teljesítményt is befolyásolta, különösen mobil eszközökön, és a struktúra megnehezítette az akadálymentesítési fejlesztések megvalósítását.

Az egyetem olyan főoldal megvalósítását tűzte ki célul, amely megőrzi erős vizuális identitását, miközben dinamikusabb és cselekvésorientáltabb élményt nyújt. Az új dizájnnak egyértelműen „rutgerses"-nek kellett lennie, de jobb teljesítménnyel, fejlettebb akadálymentesítéssel és olyan elrendezéssel, amely a látogatás első pillanatától kezdve interakcióra késztet.

A megközelítés

Mivel már több mint 70 Rutgers webhely használt közös komponenskönyvtárat, csapatunk azt javasolta, hogy a főoldal újratervezését Single Directory Components (SDC) segítségével valósítsuk meg. Ez a módszer az egyes komponensek sablonjait, stílusait, szkriptjeit és konfigurációját egy helyen tárolja, ami átláthatóbb fejlesztést és egységesebb megjelenést biztosít a Rutgers összes webhelyén. A megközelítés emellett rugalmasságot biztosított a főoldal jövőbeli frissítéséhez vagy bővítéséhez anélkül, hogy a rendszer más részeit megzavarná.

A folyamat során szorosan együttműködtünk a Rutgers-szel, kommunikációs és webfejlesztő csapataikkal dolgoztunk együtt a dizájncélok, a technikai prioritások és az akadálymentesítési szabványok összehangolásának érdekében. A dizájn tervezési munkálatai Figmában történtek, ahol folyamatos volt az együttműködés és a visszajelzések beépítése. Közösen vizsgáltuk az elrendezéseket, finomítottuk a tartalmi hierarchiát, és teszteltük azokat az interakciós mintákat, amelyek a főoldal kezelhetőségét minden látogató számára megkönnyítik. A tervezés minden szakaszát megbeszélések, felülvizsgálatok és iterációk alakították. Összességében ez biztosította, hogy a végleges koncepció híven tükrözze mind a Rutgers márkáját, mind a használhatóság iránti elkötelezettségét.

E célok elérése érdekében az új főoldal elrendezését egy új hero terület bevezetésével frissítettük fel. Ezzel javítottuk az egyensúlyt a vizuális benyomás és a mihamarabbi felhasználói cselekvésre késztetés között. A Rutgers így megőrizte a lehetőséget, hogy ambient videókat használjon a történetmeséléshez, ugyanakkor megjelent egy új statikus hero formátum is a „Picture Yourself at Rutgers" (magyarul körülbelül „Képzeld el magad a Rutgers-nél”-ként fordítható) kezdeményezéshez kapcsolódóan – ez a funkció hetente cserélődő fotókon keresztül mutatja be a hallgatói életet. Ez a megközelítés javítja az akadálymentesítést és a betöltési teljesítményt, miközben az oldal vizuálisan is vonzó marad. Ami a legfontosabb: egyértelmű cselekvésre ösztönző (angolul „Call to Action” vagy CTA) elemek kerültek közvetlenül a hero területre, így a látogatók görgetés nélkül juthatnak el a kulcsfontosságú céloldalakhoz, és megerősödik a főoldal navigációs kapuként betöltött szerepe.

Megoldásunk

A dizájn újratervezésének lezárását követően csapatunk a megvalósításra váltott, és a Single Directory Components keretrendszer segítségével életre keltette az új főoldalt. A tervezési szakaszban kialakult együttműködési alapokra építve minden jóváhagyott koncepciót teljesen működőképes komponenssé alakítottunk, amelyeknek fejlesztése során szem előtt tartottuk a bővíthetőséget és a hosszú távú karbantarthatóságot. Az oldal minden elemét önálló egységként építettük fel, amely összefogja a sablonokat, stílusokat és szkripteket, teret adva a főoldal fokozatos fejlődésének, miközben szerkezete továbbra is tiszta és egységes maradt. Ez a megközelítés hosszú távú értéket nyújt, mivel ugyanazokat a komponenseket használja több mint 70 Rutgers webhely, így a fejlesztéseket elegendő csupán egyszer elvégezni, majd azok mindenhol alkalmazhatóak – erősítve a márkakonzisztenciát, csökkentve a folyamatos karbantartási ráfordítást, és fenntartható alapot biztosítva a jövőbeli frissítésekhez.

A munka részeként számos meglévő főoldal-komponenst finomítottunk és bővítettünk. A rugalmasabb elrendezések érdekében újraépítettük a mozaik komponenst, míg a hírek, események és közösségi média komponenseket új funkciókkal és akadálymentesítési fejlesztésekkel gazdagítottuk. A linkek komponensét is bővítettük, hogy a navigáció érthetőbb és intuitívabb legyen, segítve a látogatókat annak megértésében, hová vezetnek az egyes műveletek.

A fejlesztés során végig a sebességen, az akadálymentesítésen és a vizuális összhatáson volt a hangsúly. A médiatartalmakat optimalizáltuk, a kódot a jobb teljesítmény érdekében finomítottuk, az elrendezéseket pedig gondosan teszteltük többféle eszközön és képernyőméreten. A kész főoldal zökkenőmentesen és megbízhatóan működik, minden eleme akadálymentes, hatékony és készen áll a Rutgers jövőbeli igényeinek kiszolgálására.

Az eredmény

A Rutgers University főoldalának újratervezése egy statikus, videó-központú nyitóoldalt alakított át egy aktívabb, célorientáltabb élménnyé, amely most már jobban tükrözi az egyetem szellemiségét és küldetését. A Single Directory Components (SDC) gondos tervezéssel karöltve olyan struktúrát hozott létre, amely ötvözi a vizuális történetmesélést a mérhető interakcióval.

Az egyértelmű cselekvési lehetőségek középpontba állításával a főoldal immár az érkezés pillanatától felfedezésre ösztönöz – a látogatók viselkedési mintázatai jelentősen javultak.

Mivel a látogatóknak görgetniük kellett az elérésükhöz, a hero terület alatti CTA elemek korábban csupán néhány száz kattintást generáltak időszakos összehasonlításban. Az újratervezésnek köszönhetően azonban ezek most közvetlenül a hajtás fölé („above the fold”) kerültek, így a látogatók interakciós aránya jelentősen javult. Az új CTA banner többszörös interakciót generál a korábbihoz képest: olyan kulcsfontosságú útvonalak, mint az „Undergraduate Majors", a „Graduate & Professional Programs" és a „Visits & Tours" négy-ötszörös kattintásnövekedést mutatnak a frissítés előtti összehasonlítható időszakokhoz képest. A „Picture Yourself at Rutgers" galéria bevezetése szintén sikeresnek bizonyult: a felhasználók jelentős része böngészte a hetente cserélődő képeket és a galériát röviddel az indulás után.

Az eredmény egy olyan főoldal, amely a Rutgers University gazdag történelmét és modern lendületét egyaránt tükrözi. Gyorsabb, könnyebben karbantartható és készen áll a folyamatos növekedésre. Az átgondolt dizájn és a technikai innováció hatékony együttműködése által elért korszerű online jelenlét mintapéldája.

Ha webhelyed felhasználói élményét akadálymentesítenéd, vagy fokoznád teljesítményét, esetleg finomítanád a dizájnját, vedd fel velünk a kapcsolatot, és nézzük meg együtt, hogyan segíthetünk céljaid mérhető eredményekké alakításában.