„Kde se dnes najíme?“
Měli jsme záviděníhodnou příležitost spolupracovat s týmem stravovacích služeb Univerzity Severní Karolíny na novém pojetí moderního webu stravovacích míst, aby studenti konečně věděli, co, kdy a kde se podává. Ve spolupráci se společností Aramark a oddělením IT služeb UNC jsme vytvořili webové stránky poháněné ne jednou, ale dvěma vlastními webovými aplikacemi. Nyní mohou studenti, vyučující a zaměstnanci procházet všechny jídelny v kampusu a na první pohled zjistit, které stravovací stanice jsou otevřené. Pak už je jen jedno kliknutí (nebo klepnutí!) dělí od jídelního lístku a složení jednotlivých položek. Jednoduché!“
Jednalo se o rozsáhlý a komplexní projekt, který vyžadoval praktické manažery, originální design, svižné kódování front-endu a působivé programování back-endu – vše dohromady, aby bylo možné jej úspěšně dokončit. Zkrátka ideální projekt pro kampaně v nových médiích. Pro vysoké školy a univerzity jsme už udělali poměrně dost aplikací a webových stránek na zakázku – včetně několika pro UNC, například pro Energetické služby, katedru geologie a Minor Entrepreneurship – takže tento projekt byl pro nás jako stvořený.
Zase jsme najednou hladoví studenti
Projektový tým měl v tomto případě štěstí: všichni jsme si jasně pamatovali tu bolest, když jsme vyšli ze třídy, šli do jídelny a našli ji zavřenou. Nebo ještě hůř, zaplatit za jídlo jen proto, abychom zjistili, že nejsou k dispozici žádné možnosti pro specifická dietní omezení. Takže jsme dobře věděli, jaký problém chce UNC Dining vyřešit. Řešení se skládalo ze tří částí: webové stránky, vlastní webové aplikace pro jídelní lístek &hodin a druhé vlastní aplikace pro obrazovky živého menu.
Webové stránky musely vypadat super moderně pro mladší publikum a musely se snadno udržovat a rychle načítat. Je vytvořen pomocí HiFi, bleskurychlého a nekonečně konfigurovatelného systému pro správu obsahu. Pro aplikaci menu &hodin jsme rychle určili, že jejím hlavním účelem je odpovědět studentům, zaměstnancům a vyučujícím UNC Chapel Hill na tyto tři otázky:
- Co je teď (nebo později) otevřeno?
- Co je na jídelním lístku?
- Můžu si prohlédnout složení?
Nakonec jsme chtěli dotáhnout uživatelský zážitek až do konce, což znamenalo propojení se skutečným jídelním lístkem na místě. Jídelny UNC mají velké obrazovky LCD, na kterých se zobrazuje aktuální jídelní lístek. Naším řešením bylo nasměrovat tyto obrazovky na soukromé webové stránky s vlastním zobrazením, aby správci stránek mohli aktualizovat obsah každé stanice stejně snadno, jako by se jednalo o webové stránky. Udělali jsme to opravdu jednoduše a každá obrazovka odpovídá stylu jednotlivých stanic, jídelen a větší značky UNC Dining. Aplikace obrazovky s menu je vytvořena v programovacím jazyce Scala a funguje jako kouzlo.
Spojením všech tří komponent se nám podařilo poskytnout týmu UNC Dining Services řešení, které potřeboval k zodpovězení otázky „Co je k večeři?“. Výsledek: superrychlý, snadno použitelný a srozumitelný web, který prostě funguje. Zmínili jsme se, že je responzivní?
Část 1: Webové stránky
Správa obsahu
Naší první prioritou byl audit stávajícího obsahu starých stránek. Co zůstane, co zmizí a co lze vylepšit? Původní informační architektura nebyla dobře navržena a existovala řada různých druhů obsahu, které klient potřeboval spravovat. Mezi šablony obsahu webu patřily např:
- Jednoduché informační stránky, jako například O nás, Výživové údaje nebo Stravování
- Informační kanál s více položkami, jako například Blog o novinkách nebo Kalendář akcí
- Specializované stránky, jako například Plány jídel
- Interaktivní formuláře, jako Kontakt
- A samozřejmě aplikace Menu &hodiny
Jedním z problémů v části informačního designu nového webu bylo, jak si poradit s hluboce vnořeným obsahem. Někdy jsou informace seskupeny do skupiny ve skupině ve skupině ve skupině a to může způsobit, že navigační nabídky jsou nepřehledné a špatně a rychle se používají. Vezměme si například menu a aplikaci s hodinami, kde jsme museli navrhnout rozhraní obrazovky tak, aby zvládlo pět postupně členěných informací: Od místa (řekněme „Jídelna Ram’s Head“) přes jídlo („Oběd“) až po jednotlivé stanice („Pizza bar“), pokrm („Kuře Buffalo“) a nakonec složku („Pšeničná mouka“). Pokud to zní složitě, je to tak. Náš tým to však vyřešil elegantně.
Naše HiFi řešení
Naše řešení muselo umožnit snadné pronikání až do stromu aplikace menu a také aktualizaci a vytváření konentových stránek na správném místě. A protože jsme web vytvořili pomocí systému HiFi, je to snadné, protože každá z těchto šablon obsahu je součástí výchozího nastavení. Součástí jsou blog se zprávami, kalendář událostí, kontaktní formuláře a základní typy informací. Z ovládacího panelu je přehledná navigační hierarchie a každý z různých typů obsahu lze jednoduše přidat kliknutím na tlačítko.
Klient používá systém HiFi k aktualizaci informací o jídelníčku, zveřejňování nadcházejících akcí, aktualizaci profilů zaměstnanců a přípravě speciálních návodů pro studenty, například jak plánovat stravování a jak se vyhnout některým alergenům. UNC Dining je stejně tak o podávání jídla studentům jako o vzdělávání: je zde zaměstnán registrovaný dietolog, který koordinuje činnost se zdravotnickými službami kampusu UNC, aby se ujistil, že jídla jsou zdravá, a radí studentům se speciálními dietními potřebami. Studijní úspěch úzce souvisí se správnou výživou a zdravým životním stylem, proto je důležité, aby správci stránek mohli využívat stránky ke zveřejňování přesných, včasných a & praktických informací o výživě.
Přístup k designu
Starý design trpěl typickými nedostatky, se kterými se setkáváme u webových stránek, které k nám přicházejí na redesign:
- Není mřížka rozvržení: prvky stránky jsou nahodile uspořádány a rozměrově odlišeny
- Slabá vizuální hierarchie: není jasné, kam má oko směřovat, a nadpisy jsou neodlišitelné od hlavního textu
- Není zřejmé výzvy k akci: Nejenže návštěvník neví, co má číst, ale neví ani, co má udělat nebo na co má kliknout
- Nedostatek bílého místa: text a obsahová pole potřebují „prostor“, aby je oko mohlo v zorném poli rozlišit
- Slabá barevná paleta: tlumená modrá a šedá dominují tomu, co by jinak mělo být barevným, živým tématem (chutné jídlo!)
- Slabá typografie: kromě použití obyčejného výchozího písma ztěžuje čtení průměrná délka řádků a mezery mezi odstavci
Před &Po: Starý web nevyužíval příliš dobře prostor ani se nezaměřoval na úkoly nebo obsah, který návštěvníky nejvíce zajímá
K tomu všemu se starý web načítal velmi pomalu a nebyl optimalizován pro mobilní zařízení. Naším úkolem bylo nejen vyřešit každý z těchto designových aspektů, ale také to udělat způsobem, který je vhodný pro hlavní publikum: moderní a mladé. Výsledný designový motiv má tyto vlastnosti:
- Velké, tučné nadpisy
- Jasné výzvy k akci
- Jednoduché, moderní tvary (čtverce a obdélníky)
- Žádné zbytečné stínování nebo textury
- Liberální bílý prostor
Kromě nich, náš tým navrhl rozhraní tak, aby se na obrazovce cítilo jako doma, tedy tak, jak program nebo aplikace na počítači využívá celou plochu. To znamená, že místo aby byl design svázán šířkou „stránky“, je přes celou obrazovku a reaguje na různé kontexty zařízení: nový web UNC Dining je stejně přirozeně doma na širokoúhlém monitoru stolního počítače jako na notebooku, tabletu nebo telefonu.
Odkazy jsou zřejmé a lze na ně snadno klepnout. Sekce a texty mají jasnou a dobře definovanou hierarchii. Jednotlivé zprávy a články jsou příjemné na dlouhé čtení. Design se rozprostírá na celou šířku jakékoli obrazovky, kterou používáte k prohlížení. Využívá stejné (karolinské) modré a šedé barvy původní palety, ale vyvažuje je velkými barevnými fotografiemi s vysokým rozlišením. Navigace je přehledná, interaktivní a skrytá, kromě případů, kdy ji chcete. Jemné animace navozují pocit pohotovosti a rozmarnosti. Celkový efekt spočívá v tom, že důraz je kladen přímo na bohatost obsahu.
Driven by Action
New Media Campaigns využívá filozofii zvanou „Action Driven Design“. To znamená, že ke každému webovému projektu přistupujeme tak, že typickou otázku „Jak to má vypadat?“ převracíme otázkou „Co to má dělat?“. Nutí nás to pečlivě přemýšlet o tom, jaké činnosti chtějí lidé, kteří na web přicházejí, dělat. Často je to tak jednoduché, jako vynulovat jeden až tři nejdůležitější cíle webu. V případě UNC Dining to bylo naprosto jasné:
- Co je otevřeno a co se tam dá jíst?“
- Co se v těchto dnech děje?“
- Co zahrnuje můj stravovací plán?“
Pokud budete pracovat zpětně, zjistíte, že všechny tři akce jsou nejdůležitějšími vizuálními prvky na domovské stránce a že většinu návštěvníků zajímají. Kromě toho je však na stránkách k dispozici velké množství informací: podrobnosti o stravovacích plánech, stravování a dokonce i o závazku UNC Dining k udržitelnosti, které jsou snadno dostupné z interaktivního menu. Kliknutím nebo klepnutím získáte okamžitý přístup k veškerému obsahu stránek na první pohled.
Sociální média
Stravování UNC bere své komunikační kanály vážně. Nejenže často zveřejňuje příspěvky na Twitteru, Facebooku a Instragramu, ale koordinuje zasílání zpráv na všech třech platformách. To znamená, že sledující dostanou konzistentní redakční zážitek bez ohledu na to, jaké médium preferují.
Na domovské stránce jsme stáhli živý kanál ze všech tří. Nejnovější aktualizace z Facebooku a Twitteru jsou staženy jako text a aktualizace z Instagramu jako velké, vysoce kvalitní fotografie. Je to skvělý způsob, jak posílit úsilí mediálního týmu a zároveň poskytnout domovské stránce čerstvý, originální a atraktivní obsah. Není na škodu mít k dispozici lákavé obrázky jídla!
Ručně vytvořený kód
Stejně jako všechny webové projekty NMC píšeme kód ručně. Díky tomu je štíhlý a stručný (žádné zbytečné značky zvyšující váhu stránky), které optimalizují stránku webu pro indexaci vyhledávači. Znamená to také, že jej můžeme dopředu komprimovat a ukládat do mezipaměti, čímž výrazně zrychlíme dobu vykreslování stránky a obejdeme případné chyby při zobrazování v konkrétním prohlížeči (Internet Explorer je notoricky známý jako problematický). A konečně, UNC Dining funguje stejně dobře na obřím monitoru stolního počítače jako na notebooku, tabletu nebo telefonu – dokonce i v aplikaci Menu & hodin, která při dotyku a přejetí prstem okamžitě reaguje přesnými informacemi.
Část 2: Webová aplikace Menu & Hours
UNC Dining obsahuje webovou aplikaci navrženou tak, aby odpovídala na jednu otázku: „Mám hlad. Co se dá v areálu univerzity jíst?“ Navrhli jsme a vytvořili vlastní software pomocí Ruby on Rails, který dělá několik věcí, a to okamžitě a automaticky:
- Zjistí aktuální čas
- Prověří čas s databází všech stravovacích zařízení v kampusu UNC
- Vrátí seznam toho, co je právě otevřeno
- Zobrazí aktuální, přesný seznam všech položek jídelního lístku
- Každá položka jídelního lístku obsahuje na první pohled úplné nutriční údaje & informace o alergenech
Kdyby nabízela jen tuto samotnou funkci, byl by to triumf. Ale rychlým tažením myši (nebo palce) po časové ose se zobrazují měnící se hodiny a možnosti v reálném čase, jak je posouváte, bez zpoždění. Protože vás třeba zajímá, co bude dnes později k dispozici k večeři. A díky okamžitému výběru z kalendáře můžete zjistit, co bude příští týden k snídani. Z rozbalovací nabídky v samotném místě můžete také vybrat více časů jídla.
Máte speciální dietní potřeby? I tady pro vás máme řešení. Aplikace jídelního lístku obsahuje filtr alergenů se seznamem běžných podezřelých látek, jako je pšenice, mléko, ryby a arašídy, pomocí kterého můžete ze seznamu vyloučit všechny položky, které je obsahují. Položky s těmito alergenními složkami jsou šedé a přeškrtnuté. Pro alergiky je nejlepší, že si aplikace pamatuje vaši volbu při každé návštěvě, takže ji nemusíte pokaždé znovu vybírat.
Údaje o používání
Je to jen pár týdnů a jsme svědky rychlého přijetí nové aplikace studenty, kteří ji objevují. Využívání aplikace se od spuštění nových webových stránek a aplikace zvyšuje každý týden. Budeme i nadále bedlivě sledovat, jak se nový design osvědčuje, což je jen součástí našeho trvalého vztahu s UNC Dining.
Část 3: Obrazovky jídelních lístků
Pro doplnění celého nového uživatelského zážitku společnost NMC navrhla a implementovala digitální jídelní lístky na místě. Ty jsou napájeny televizními obrazovkami LCD s vysokým rozlišením na každé stanici ve vybraných jídelnách. Úzce jsme spolupracovali s IT personálem UNC, abychom natáhli živý webový přenos a zajistili, že vše bude dobře propojeno. Naším cílem bylo, aby obrazovky byly stejně snadno udržovatelné jako zbytek webu, ale s přizpůsobeným zobrazením, aby se na nich neobjevovaly věci jako kurzory myši, které by kazily iluzi.
Náš technický génius Kris Jordan se postaral o vlastní programování (v jazyce Scala) a integroval ho do stávajícího systému správy obrazovek UNC. Jedním z velkých vylepšení tohoto nastavení oproti předchozímu, které katedra měla, bylo odstranění spousty designových omezení u starých obrazovek, které musely fungovat v rámci nepružných šablon povolených ve Scale. Změnili jsme však základní nastavení a namísto používání šablon systému Scala jsme každou obrazovku jednoduše nasměrovali na jedinečnou adresu URL, díky čemuž jsme mohli využít flexibilitu moderních prohlížečů a být při navrhování obrazovek opravdu kreativní. Nyní je každá obrazovka nastavena na jedinečnou adresu URL, což společnosti UNC umožňuje využívat nejnovější webové techniky a flexibilitu designu v nových rozvrženích
Jen NMC
Málo webových firem dokáže realizovat takový projekt. Úspěch nového webu a vlastní aplikace UNC Dining je dokonalým příkladem jedinečných silných stránek, které New Media Campaigns spojuje při každém webovém projektu.
Kromě naší rozsáhlé znalosti specifických potřeb vysokoškolských institucí vyžadoval tento projekt praktickou koordinaci ze strany našeho zkušeného týmu pro vztahy s klienty; promyšlenou, dobře strukturovanou obsahovou strategii & informační architekturu; odvážný, originální a efektivní akční vizuální design; citlivé, štíhlé, odborné ruční kódování HTML & CSS; a komplexní, vlastní, back-end programování. Vše bylo dodáno včas a v rámci rozpočtu, se strašně rychlým načítáním a spuštěno s nadšenými recenzemi.
Byli jsme potěšeni, že jsme mohli předvést své digitální schopnosti na stránkách UNC Dining a klient nemohl být nadšenější. Čím vás může NMC nadchnout? Kontaktujte nás ještě dnes.