“Hol együnk ma este?”
Az irigylésre méltó lehetőséget kaptuk, hogy az Észak-Karolinai Egyetem Dining Services csapatával együttműködve újragondoljuk a modern étkezési helyek weboldalát, hogy a diákok végre tudják, mit, mikor és hol szolgálnak fel. Az Aramarkkal és az UNC IT Services részlegével együttműködve nem egy, hanem két egyedi webalkalmazáson alapuló weboldalt építettünk. Mostantól a hallgatók, oktatók és dolgozók egy pillantással böngészhetnek az egyetem összes étkezdéjében, és láthatják, hogy mely ételállomások vannak nyitva. Ezután egyetlen kattintással (vagy koppintással!) elérhető az étlap és az egyes tételek összetevői. Egyszerű!
Ez egy nagy, összetett projekt volt, amelyhez gyakorlatias vezetőkre, eredeti tervezésre, ügyes front-end kódolásra és néhány lenyűgöző back-end programozásra volt szükség, amelyek mind jól működtek együtt a sikeres megvalósításhoz. Röviden, egy ideális New Media Campaigns projekt. Már jó néhány egyedi alkalmazást és weboldalt készítettünk főiskolák és egyetemek számára – köztük számosat az UNC számára, mint például az Energiaszolgáltatások, a Geológia Tanszék és a Vállalkozói Minor -, így ez a projekt jól illett hozzánk.
All the Sudden We’re Hungry Students Again
A projektcsapatnak szerencséje volt ezzel: mindannyian jól emlékeztünk a fájdalomra, amikor kijövünk az óráról, elsétálunk az étkezőbe, és zárva találjuk azt. Vagy ami még rosszabb, fizetni egy étkezésért, csak hogy rájöjjünk, hogy nem áll rendelkezésre semmilyen opció a speciális étrendi korlátozásokra. Tehát jól tudtuk, hogy az UNC Dining milyen problémát akart megoldani. A megoldás három részből állt: a weboldal, egy egyedi menü & óra webes alkalmazás, és egy második egyedi alkalmazás az élő menüképernyőkhöz.
A weboldalnak szuper modernnek kellett kinéznie a fiatalabb közönség számára, valamint könnyen karbantarthatónak és gyorsan betölthetőnek kellett lennie. A HiFi, a villámgyors és végtelenül konfigurálható tartalomkezelő rendszer segítségével készült. A menü & Órák alkalmazása esetében gyorsan megállapítottuk, hogy a vezető célja az volt, hogy választ adjon az UNC Chapel Hill diákjai, dolgozói és oktatói számára erre a három kérdésre:
- Mi van most (vagy később) nyitva?
- Mi van az étlapon?
- Láthatom az összetevőket?
Végezetül a felhasználói élményt végig akartuk látni, ami a tényleges helyszíni étlap bekötését jelentette. Az UNC étkezdéiben nagy, LCD képernyőkön látható az aktuális menü. A mi megoldásunk az volt, hogy ezeket a képernyőket egyéni megjelenítésű, privát weboldalakra irányítottuk, így a helyszíni adminisztrátorok ugyanolyan egyszerűen frissíthetik az egyes állomások tartalmát, mintha az egy weboldal lenne. Ezt nagyon egyszerűvé tettük, és minden egyes képernyő megfelel az egyes állomások, étkezdék és a nagyobb UNC Dining márka stílusának. A menüképernyős alkalmazás a Scala programozási nyelven készült, és úgy működik, mint a karikacsapás.
Azzal, hogy mindhárom komponenst összekötöttük, képesek voltunk az UNC Dining Services csapatának olyan megoldást adni, amire szükségük volt a “Mi a vacsora?” kérdés megválaszolásához. Az eredmény: egy szupergyors, egyszerűen használható, könnyen érthető weboldal, amely egyszerűen működik. Említettük már, hogy reszponzív?
1. rész: A webhely
A tartalom kezelése
Elsőként a régi webhely meglévő tartalmát vizsgáltuk át. Mi marad, mi megy el, és mit lehet javítani? Az eredeti információs architektúra nem volt jól megtervezve, és az ügyfélnek számos különböző típusú tartalmat kellett kezelnie. A webhely tartalmi sablonjai a következők voltak:
- Egyszerű információs oldalak, mint a Rólunk, a Táplálkozási adatok vagy a Catering
- Információs feed több elemmel, mint a Hírblog vagy az Eseménynaptár
- Speciális oldalak, mint az Étkezési tervek
- Interaktív űrlapok, mint például Kapcsolatfelvétel
- És persze a menü & órák alkalmazás
Az új oldal információs tervezési részében az egyik kihívás az volt, hogyan kezeljük a mélyen egymásba ágyazott tartalmakat. Néha az információk csoportonként csoportonként csoportonként csoportonként csoportosulnak, és ez gyorsan zavarossá és nehezen használhatóvá teheti a navigációs menüket. Vegyük például a menüt és az órák alkalmazást, ahol a képernyőfelületet úgy kellett megterveznünk, hogy öt egymást követő, szemcsés információdarabot tudjunk kezelni: A helytől (mondjuk “Ram’s Head Dining Hall”) az étkezésig (“Lunch”) az egyes állomásokig (“Pizza Bar”) az ételig (“Buffalo Chicken”) és végül az összetevőig (“Wheat flour”). Ha ez bonyolultnak hangzik, az is. De a mi csapatunk elegánsan megoldotta.
A mi HiFi megoldásunk
A mi megoldásunknak egyszerűvé kellett tennie a menüalkalmazás fájának teljes fúrását, valamint a megfelelő helyen lévő konens oldalak frissítését és létrehozását. És mivel a weboldalt a HiFi segítségével építettük fel, ez könnyű, mivel minden ilyen tartalmi sablon alapértelmezés szerint benne van. A hírblog, az eseménynaptár, a kapcsolatfelvételi űrlapok és az alapvető információtípusok mind benne vannak. A vezérlőpanelen belül a navigációs hierarchia egyértelmű, és a különböző tartalomtípusok mindegyike egyszerűen, egy gombnyomással hozzáadható.
Az ügyfél a HiFi-t használja a menüinformációk frissítésére, a közelgő események közzétételére, a személyzet profiljainak frissítésére, valamint speciális útmutatók készítésére a diákok számára, például az étkezés megtervezéséhez és bizonyos allergének elkerülésére. Az UNC Dining legalább annyira foglalkozik a diákok étkeztetésével, mint az oktatással: egy bejegyzett dietetikust alkalmaznak, aki koordinálja az UNC Campus Egészségügyi Szolgálattal, hogy az ételek egészségesek legyenek, és tanácsot adjon a speciális étrendi igényű diákoknak. A tanulmányi siker szorosan összefügg a helyes táplálkozással és az egészséges életmóddal, ezért fontos, hogy az oldal adminisztrátorai pontos, időszerű, & gyakorlatias táplálkozási információk közzétételére használhassák az oldalt.
Design-megközelítés
A régi design szenvedett a tipikus hibáktól, amelyeket az újratervezés céljából hozzánk forduló weboldalakon látunk:
- Nincs elrendezési rács: az oldalelemek véletlenszerűen vannak elrendezve és méretezve
- Gyenge vizuális hierarchia: nem világos, hogy a szemnek hová kell mennie, és a címek megkülönböztethetetlenek a főszövegtől
- Nincs nyilvánvaló cselekvésre való felhívás: A látogató nem csak azt nem tudja, hogy mit olvasson, de azt sem, hogy mit tegyen vagy kattintson
- Hiányos fehér tér: a szövegnek és a tartalmi dobozoknak “lélegző térre” van szükségük, hogy a szem meg tudja különböztetni őket a látómezőben
- Drab színpaletta: visszafogott kékek és szürkék uralják azt, aminek egyébként színesnek, élénknek kellene lennie (finom ételek!)
- Hanyag tipográfia: az egyszerű, alapértelmezett betűtípusok használatán túl az átlagos sortávolság és a bekezdések közötti távolság megnehezíti az olvasást
Előtte & Utána: A régi oldal nem használta ki jól a helyet, és nem fókuszált a látogatókat leginkább érdeklő feladatokra vagy tartalomra
Mindezek tetejébe a régi oldal nagyon lassan töltődött be, és nem volt mobil eszközökre optimalizálva. A mi feladatunk nemcsak az volt, hogy mindezen tervezési szempontokat kezeljük, hanem az is, hogy mindezt a fő célközönségnek megfelelő módon tegyük: modern és fiatalos módon. Az így kialakított dizájnmotívum a következő jellemzőkkel rendelkezik:
- Nagy, merész főcímek
- Egyértelmű felhívás a cselekvésre
- Egyszerű, modern formák (négyzetek és téglalapok)
- Nincs felesleges árnyékolás vagy textúra
- Liberális fehér tér
Túl ezeken, csapatunk úgy tervezte a kezelőfelületet, hogy úgy érezze magát a képernyőn, ahogyan egy program vagy alkalmazás a számítógépen a teljes valós területet használja. Ez azt jelenti, hogy ahelyett, hogy az “oldal” szélességéhez kötődne, a design teljes képernyős és a különböző eszközkörnyezetekre reagáló: az új UNC Dining webhely ugyanolyan természetesen otthonosan mozog egy szélesvásznú asztali monitoron, mint egy laptopon, táblagépen vagy telefonon.
A linkek nyilvánvalóak és könnyen megérinthetők. A szakaszok és a szövegek világos, jól meghatározott hierarchiával rendelkeznek. Az egyes híreket és cikkeket kellemes hosszan olvasni. A dizájn a teljes szélességében kitölti a képernyő teljes szélességét, bármilyen képernyőn is nézzük. Ugyanazokat a (Carolina) kék és szürke színeket alkalmazza, mint az eredeti paletta, de ezeket nagyméretű, nagy felbontású, színes fényképekkel egyensúlyozza ki. A navigáció jól szervezett, interaktív és rejtett, kivéve akkor, amikor szeretné. A finom animációk érzékenységet és szeszélyességet közvetítenek. Az általános hatás az, hogy a hangsúlyt egyenesen a tartalom gazdagságára helyezi.
Driven by Action
A New Media Campaigns az úgynevezett “Action Driven Design” filozófiát alkalmazza. Ez azt jelenti, hogy minden webes projektet úgy közelítünk meg, hogy a tipikus “Hogyan nézzen ki?” kérdést megfordítjuk a “Mit tegyen?” kérdéssel. Ez arra kényszerít bennünket, hogy alaposan átgondoljuk, milyen műveleteket akarnak elvégezni az oldalra érkező emberek. Ez gyakran olyan egyszerű, mint a webhely egy-három legfontosabb céljának meghatározása. Az UNC Dining esetében ez kristálytiszta volt:
- Mi van nyitva, és mit lehet ott enni?
- Mi történik mostanában?
- Mit fedez az étkezési tervem?
Ha innen visszafelé haladunk, láthatjuk, hogy mindhárom művelet a legfontosabb vizuális elem a kezdőlapon, és ez érdekli a legtöbb látogatót. Ezen túl azonban rengeteg webhelyinformáció található: részletek az étkezési tervekről, az étkeztetésről és még az UNC Dining fenntarthatóság iránti elkötelezettségéről is, amelyek mind könnyen elérhetők egy interaktív menüből. Kattintson vagy koppintson a gombra, és egy pillantással azonnal hozzáférhet az oldal összes tartalmához.
Social Media
Az UNC Dining komolyan veszi a kommunikációs csatornáit. Nemcsak gyakran posztol a Twitterre, a Facebookra és az Instragramra, hanem mindhárom platformon összehangolja az üzeneteket. Ez azt jelenti, hogy a követők egységes szerkesztői élményt kapnak, függetlenül attól, hogy melyik médiumot választják.
A főoldalon mindháromból élő közvetítést húztunk be. A legfrissebb Facebook- és Twitter-frissítéseket szöveges formában, az Instagram-frissítéseket pedig nagyméretű, jó minőségű fotók formájában húzzuk be. Ez egy remek módja annak, hogy egyrészt megerősítsük a médiacsapat erőfeszítéseit, másrészt friss, eredeti és vonzó tartalommal lássuk el a kezdőlapot. Nem árt, ha vannak ínycsiklandó képek az ételekről!
Kézzel készített kód
Mint minden NMC webes projektben, a kódot is kézzel írjuk. Ez biztosítja, hogy karcsú és tömör legyen (nincs felesleges jelölés az oldal súlyának növelésére), amelyek optimalizálják a webhely oldalát a keresőmotorok indexelésére. Ez azt is jelenti, hogy előre tudjuk tömöríteni és gyorsítótárba helyezni, hogy drámaian felgyorsítsuk az oldal megjelenítési idejét, és megkerüljük a böngészőspecifikus megjelenítési hibákat (az Internet Explorer köztudottan problémás). Végül, az UNC Dining ugyanolyan jól működik az óriási asztali monitoron, mint a laptopon, táblagépen vagy telefonon — még a menü & óra alkalmazáson is, amely azonnal pontos információkkal reagál, amint megérinti és áthúzza.
2. rész: Menü & Órák webes alkalmazás
Az UNC Dining egy olyan webes alkalmazással rendelkezik, amelyet egyetlen kérdés megválaszolására terveztek: “Éhes vagyok. Mit lehet enni az egyetemen?” Egyedi szoftvert terveztünk és építettünk Ruby on Rails használatával, amely egy maroknyi dolgot csinál, azonnal és automatikusan:
- Kérdezi az aktuális időt
- Az időt összeveti az UNC campus összes étkezési helyének adatbázisával
- Visszaad egy listát arról, hogy mi van most nyitva
- Kijelzi az aktuális, pontos listát az étlap minden tételéről
- Minden menüpont teljes tápértékadatokat & allergén információkat tartalmaz egy pillantásra
Ha csak ezt a funkciót kínálná önmagában, akkor is diadalmas lenne. De egy gyors egér- (vagy hüvelykujj-) húzással az idővonalon végighúzva a változó órák és lehetőségek valós időben, csúsztatás közben, késleltetés nélkül jelennek meg. Mert lehet, hogy kíváncsi vagy, mi lesz ma később vacsorára. Az azonnali naptárválasztóval pedig megtudhatod, mi lesz a jövő heti reggeli. Több étkezési időpontot is kiválaszthat egy legördülő menüből magában a helyszínen.
Speciális étrendi igényei vannak? Ezen a téren is tudunk segíteni. A menüalkalmazás rendelkezik egy allergénszűrővel, amely felsorolja az olyan gyakori gyanús ételeket, mint a búza, a tej, a hal és a mogyoró, és amelynek segítségével kizárhatod a listáról az ezeket tartalmazó tételeket. Az ilyen allergén összetevőket tartalmazó tételek szürke színnel és kihúzva jelennek meg. A legjobb az allergiások számára, hogy az alkalmazás minden látogatáskor megjegyzi a választást, így nem kell minden alkalommal újra és újra kiválasztania.
Használati adatok
Még csak néhány hete vagyunk tanúi annak, hogy a diákok gyorsan elfogadják az új alkalmazást. Az alkalmazás használata minden egyes héten nőtt, mióta az új weboldal és alkalmazás elindult. Továbbra is figyelemmel kísérjük, hogyan teljesít az új design, ami csak része az UNC Dininggel való folyamatos kapcsolatunknak.
3. rész: Menüképernyők
A teljes új felhasználói élmény teljessé tételére az NMC digitális menüket tervezett és valósított meg a helyszínen. Ezeket nagy felbontású LCD televíziós képernyők működtetik a kiválasztott étkezdék minden egyes állomásán. Szorosan együttműködtünk az UNC informatikai személyzetével, hogy élő webes közvetítést húzzunk be, és biztosítsuk, hogy minden jól illeszkedjen egymáshoz. Célunk az volt, hogy a képernyők ugyanolyan könnyen karbantarthatóak legyenek, mint a weboldal többi része, de egyedi megjelenítéssel, hogy az olyan dolgok, mint például az egér kurzorai ne jelenjenek meg, és ne rontsák el az illúziót.
Kris Jordan, a technikai zsenink kezelte az egyedi programozást (Scala nyelven), és integrálta azt az UNC meglévő képernyőkezelő rendszerébe. Ennek a beállításnak az egyik nagy előrelépése a tanszék korábbi rendszeréhez képest az volt, hogy megszüntette a régi képernyőkkel kapcsolatos rengeteg tervezési korlátozást, amelyeknek a Scala által megengedett rugalmatlan sablonokon belül kellett működniük. Megváltoztattuk azonban az alapbeállítást, és ahelyett, hogy a Scala sablonjait használtuk volna, egyszerűen minden egyes képernyőre egy egyedi URL-címre mutattunk, és ennek eredményeképpen ki tudtuk használni a modern böngészők rugalmasságát, és valóban kreatívak lehettünk a képernyőtervezéssel. Most minden képernyő egyedi URL-címre van beállítva, ami lehetővé teszi az UNC számára, hogy a legújabb webes technikákat és a tervezési rugalmasságot használja ki az új elrendezésekben
Csak az NMC
Nem sok webes cég képes egy ilyen projektet megvalósítani. Az UNC Dining új weboldalának és egyedi alkalmazásának sikere tökéletes példája a New Media Campaigns egyedi erősségeinek, amelyeket minden webes projektben egyesít.
A felsőoktatási intézmények sajátos igényeinek széles körű ismerete mellett ez a projekt megkövetelte képzett ügyfélkapcsolati csapatunk gyakorlati koordinációját; átgondolt, jól strukturált tartalmi stratégia & információs architektúra; merész, eredeti és hatékony akcióvezérelt vizuális tervezés; reagáló, karcsú, szakértő HTML & CSS kézi kódolás; és komplex, egyedi, back-end programozás. Mindezt határidőre és a költségvetésen belül, rendkívül gyors betöltési idővel, és lelkes kritikák közepette indítottuk el.
Örömünkre szolgált, hogy lehetőséget kaptunk arra, hogy megmutassuk digitális képességeinket az UNC Dining webhelyével, és az ügyfél nem is lehetett volna izgatottabb. Hogyan tud az NMC izgalomba hozni téged? Lépjen kapcsolatba még ma.