Free Press

„Unde să mâncăm diseară?”

Am avut ocazia de invidiat să lucrăm cu echipa Dining Services a Universității din Carolina de Nord pentru a reimagina un site web modern pentru locațiile de servire a mesei, astfel încât, în sfârșit, studenții să știe ce se servește, când și unde. În parteneriat cu Aramark și cu departamentul de servicii IT al UNC, am construit un site web alimentat nu de una, ci de două aplicații web personalizate. Acum, studenții, cadrele didactice și personalul pot naviga prin toate sălile de mese din campus și pot vedea dintr-o singură privire ce stații de mâncare sunt deschise. Apoi, este la un click (sau o atingere!) distanță de meniu și de ingredientele fiecărui articol. Simplu!

A fost un proiect mare și complex, care a necesitat manageri practici, un design original, o codificare front-end ingenioasă și o programare impresionantă a back-end-ului, toate lucrând bine împreună pentru a reuși cu succes. Pe scurt, un proiect ideal pentru New Media Campaigns. Am realizat destul de multe aplicații personalizate și site-uri web pentru colegii și universități – inclusiv un număr pentru UNC, cum ar fi Energy Services, Departamentul de Geologie și Entrepreneurship Minor – așa că acesta a fost foarte potrivit pentru noi.

All the Sudden We’re Hungry Students Again

Echipa de proiect a fost norocoasă în acest caz: cu toții ne amintim clar durerea de a ieși din clasă, de a merge la o sală de mese și de a o găsi închisă. Sau, mai rău, de a plăti pentru o masă doar pentru a realiza că nu existau opțiuni disponibile pentru anumite limitări dietetice. Așa că știam bine problema pe care UNC Dining dorea să o rezolve. Soluția a venit în trei părți: site-ul web, o aplicație web personalizată pentru & ore de meniu și o a doua aplicație personalizată pentru ecranele de meniu live.

Site-ul web trebuia să arate super modern pentru un public tânăr și să fie ușor de întreținut și rapid de încărcat. Este construit cu ajutorul HiFi, sistemul de gestionare a conținutului foarte rapid și infinit configurabil. Pentru aplicația de meniu & ore, am stabilit rapid că scopul său principal era de a răspunde la aceste trei întrebări pentru studenții, personalul și cadrele didactice de la UNC Chapel Hill:

• Ce este deschis acum (sau mai târziu)?
• Ce este în meniu?
• Pot vedea ingredientele?

În cele din urmă, am vrut să vedem experiența utilizatorului până la capăt, ceea ce a însemnat să legăm meniul propriu-zis la fața locului. Sălile de mese ale UNC au ecrane LCD mari, care arată meniul curent. Soluția noastră a fost să direcționăm aceste ecrane către pagini web private cu afișaj personalizat, astfel încât administratorii site-ului să poată actualiza conținutul pentru fiecare stație la fel de ușor ca și cum ar fi fost un site web. Am făcut ca acest lucru să fie foarte simplu de realizat, iar fiecare ecran se potrivește cu stilul stației individuale, al sălii de mese și cu brandul mai larg al UNC Dining. Aplicația ecranului de meniu este construită în limbajul de programare Scala și funcționează de minune.

Prin legarea tuturor celor trei componente, am reușit să oferim echipei UNC Dining Services soluția de care avea nevoie pentru a răspunde la întrebarea „Ce avem la cină?”. Rezultatul: un site web foarte rapid, simplu de utilizat, ușor de înțeles și care pur și simplu funcționează. Am menționat că este receptiv?

Partea 1: Site-ul web

Gestionarea conținutului

Prima noastră prioritate a fost auditarea conținutului existent al vechiului site. Ce va rămâne, ce va dispărea și ce poate fi îmbunătățit? Arhitectura informațională originală nu era bine concepută și existau mai multe tipuri diferite de conținut pe care clientul trebuia să le gestioneze. Șabloanele de conținut ale site-ului includeau:

Pagini de informații simple, cum ar fi Despre noi, Date nutriționale sau Catering
• Furnizor de informații cu mai multe elemente, cum ar fi Blog de știri sau Calendar de evenimente
• Pagini de specialitate, cum ar fi Planuri de masă
• Formulare interactive, cum ar fi Contactați-ne

Și, bineînțeles, aplicația de meniu & ore

O provocare în partea de design informațional a noului site a fost cum să se gestioneze conținutul adânc aninat. Uneori, informațiile sunt grupate într-un grup într-un grup într-un grup într-un grup într-un grup, iar acest lucru poate face ca meniurile de navigare să fie aglomerate și greu de utilizat, rapid. De exemplu, să luăm meniul și aplicația pentru ore, unde a trebuit să proiectăm interfața ecranului pentru a gestiona cinci fragmente de informații succesiv granulare: De la locație (să zicem, „Ram’s Head Dining Hall”) până la masă („Lunch”), la stație individuală („Pizza Bar”), la fel de mâncare („Buffalo Chicken”) și, în final, la ingredient („Făină de grâu”). Dacă pare complicat, așa este. Dar echipa noastră a rezolvat-o în mod elegant.

Soluția noastră HiFi

Soluția noastră trebuia să faciliteze parcurgerea întregului arbore al aplicației de meniuri, precum și actualizarea și crearea de pagini de conent în locul potrivit. Și pentru că am construit site-ul web folosind HiFi, este ușor, deoarece fiecare dintre aceste șabloane de conținut sunt incluse în mod implicit. Blogul de știri, calendarul evenimentelor, formularele de contact și tipurile de informații de bază sunt toate incluse. Din interiorul panoului de control, ierarhia de navigare este clară și fiecare dintre diferitele tipuri de conținut este simplu de adăugat cu un simplu clic pe un buton.

Clientul folosește HiFi pentru a actualiza informațiile despre meniuri, pentru a posta evenimentele viitoare, pentru a actualiza profilurile personalului și pentru a pregăti ghiduri speciale pentru elevi, cum ar fi cum să planifice mesele și cum să evite anumiți alergeni. UNC Dining se ocupă atât de servirea mâncării pentru studenți, cât și de educație: un dietetician autorizat este angajat pentru a se coordona cu UNC Campus Health Services pentru a se asigura că mesele sunt sănătoase și pentru a consilia studenții cu nevoi dietetice speciale. Succesul academic este strâns legat de o alimentație bună și de un stil de viață sănătos, așa că este important ca administratorii site-ului să poată folosi site-ul pentru a publica informații exacte, oportune și & practice despre nutriție.

Abordare de proiectare

Vechiul design suferea de defectele tipice pe care le vedem la site-urile web care vin la noi pentru o reproiectare:

• Nu există o grilă de dispunere: elementele paginii sunt aranjate și dimensionate la întâmplare
• Hierarhie vizuală slabă: nu este clar unde ar trebui să se îndrepte ochiul, iar titlurile nu se pot distinge de corpul textului
• Nu există apeluri evidente la acțiune: nu numai că un vizitator nu știe ce să citească, dar nu știe nici ce să facă sau să dea click
• Lipsă de spațiu alb: textul și casetele de conținut au nevoie de „spațiu de respirație” pentru ca ochiul să le poată distinge în câmpul vizual
• Paleta de culori terne: albastrul și griurile discrete domină ceea ce ar trebui să fie altfel un subiect colorat și vibrant (mâncare delicioasă!)
• Tipografie neglijentă: dincolo de utilizarea unor fonturi simple, implicite, lungimea medie a rândurilor și spațierea paragrafelor îngreunează lectura

Până la & După: Vechiul site nu folosea foarte bine spațiul și nu se concentra pe sarcinile sau conținutul care îi interesează cel mai mult pe vizitatori

Pe lângă toate acestea, vechiul site se încărca foarte încet și nu era optimizat pentru dispozitivele mobile. Sarcina noastră a fost nu numai să abordăm fiecare dintre aceste considerente de design, ci și să facem acest lucru într-un mod adecvat publicului principal: modern și tineresc. Motivul de design rezultat are aceste caracteristici:

Titluri mari și îndrăznețe
• Apeluri clare la acțiune
• Forme simple și moderne (pătrate și dreptunghiuri)
• Fără umbriri sau texturi inutile
• Spațiu alb liberal

În afară de acestea, echipa noastră a proiectat interfața pentru a se simți ca acasă pe un ecran, la fel cum un program sau o aplicație de pe computerul dvs. utilizează întreaga suprafață imobiliară. Adică, mai degrabă decât să fie legat de o lățime de „pagină” aritmetică, designul este atât pe tot ecranul, cât și receptiv la diferite contexte de dispozitive: noul site UNC Dining se simte la fel de natural acasă pe un monitor de desktop cu ecran lat ca și pe un laptop, o tabletă sau un telefon.

Legăturile sunt evidente și ușor de apăsat. Secțiunile și textul au o ierarhie clară și bine definită. Știrile și articolele individuale sunt plăcute pentru a fi citite îndelung. Designul se întinde pe întreaga lățime a oricărui ecran pe care îl folosiți pentru a-l vizualiza. Folosește aceleași albastre și griuri (Carolina) din paleta originală, dar le echilibrează cu fotografii mari, de înaltă definiție și colorate. Navigarea este bine organizată, interactivă și ascunsă, cu excepția cazului în care o doriți. Animațiile subtile transmit un sentiment de receptivitate și fantezie. Efectul general este de a pune accentul direct pe bogăția conținutului.

Driven by Action

New Media Campaigns folosește o filozofie numită „Action Driven Design”. Aceasta înseamnă că abordăm fiecare proiect web inversând întrebarea tipică: „Cum ar trebui să arate?” cu „Ce ar trebui să facă?”. Acest lucru ne obligă să ne gândim cu atenție la acțiunile pe care oamenii care ajung pe site caută să le facă. Adesea este la fel de simplu ca și cum ne-am concentra asupra unuia până la trei dintre cele mai importante obiective ale site-ului. În cazul UNC Dining, a fost foarte clar:

1. Ce este deschis și ce se poate mânca?
2. Ce se întâmplă în aceste zile?
3. Ce acoperă planul meu de masă?

Lucrând în sens invers de aici, veți vedea că toate cele trei acțiuni sunt cele mai importante elemente vizuale de pe pagina principală și ceea ce îi interesează pe majoritatea vizitatorilor. Dar dincolo de acestea se află o multitudine de informații despre site: detalii despre planurile de masă, catering și chiar angajamentul UNC Dining față de sustenabilitate, toate ușor accesibile dintr-un meniu interactiv. Faceți clic sau atingeți pentru a avea acces instantaneu la tot conținutul site-ului dintr-o privire.

Social Media

UNC Dining își ia în serios canalele de comunicare. Nu numai că postează frecvent pe Twitter, Facebook și Instragram, dar coordonează mesajele pe toate cele trei platforme. Acest lucru înseamnă că adepții au parte de o experiență editorială consistentă, indiferent de mediul lor preferat.

Pe pagina principală, am tras un flux live de la toate cele trei. Cele mai recente actualizări de pe Facebook și Twitter sunt trase ca text, iar cele de pe Instagram ca fotografii mari, de înaltă calitate. Aceasta este o modalitate extraordinară atât de a consolida eforturile echipei media, cât și de a oferi un conținut proaspăt, original și atractiv pe pagina principală. Nu strică să ai poze apetisante cu mâncare!”

Cod realizat manual

Ca toate proiectele web ale NMC, scriem codul manual. Astfel, ne asigurăm că acesta este suplu și concis (fără marcaje inutile care să crească greutatea paginii) care optimizează pagina site-ului pentru indexarea în motoarele de căutare. Aceasta înseamnă, de asemenea, că îl putem comprima și stoca în memoria cache din timp pentru a accelera dramatic timpul de redare a paginii și pentru a lucra în jurul oricăror erori de afișare specifice browserului (Internet Explorer este în mod notoriu problematic). În cele din urmă, UNC Dining funcționează la fel de bine pe monitorul dvs. uriaș de birou ca și pe laptop, tabletă sau telefon – chiar și pe aplicația de meniu & ore, care răspunde instantaneu cu informații precise pe măsură ce atingeți și glisați.

Partea 2: Aplicația web pentru meniul & orelor

UNC Dining dispune de o aplicație web concepută pentru a răspunde la o singură întrebare: „Mi-e foame. Ce se poate mânca în campus?”. Am proiectat și construit un software personalizat folosind Ruby on Rails care face o mână de lucruri, instantaneu și automat:

• Cuperează ora curentă
• Verifică ora într-o bază de date cu toate locațiile unde se mănâncă în campusul UNC
• Întoarce o listă cu ceea ce este deschis chiar acum
• Afișează o listă curentă, exactă a fiecărui articol din meniu

Care articol din meniu prezintă dintr-o privire detalii nutriționale complete & informații despre alergeni

Dacă ar oferi doar această funcționalitate, ar fi un triumf. Dar o tragere rapidă a mouse-ului (sau a degetului mare) de-a lungul cronologiei dezvăluie orele și opțiunile în schimbare în timp real, pe măsură ce o glisați, fără întârziere. Pentru că poate sunteți curios ce va fi disponibil pentru cină mai târziu astăzi. Iar cu ajutorul selectorului instantaneu din calendar, puteți afla ce este pentru micul dejun săptămâna viitoare. De asemenea, puteți selecta mai multe ore de masă dintr-un meniu derulant din cadrul locației în sine.

Aveți nevoi dietetice speciale? Vă acoperim și acolo. Aplicația pentru meniuri are un filtru pentru alergeni care enumeră suspecții obișnuiți precum grâul, laptele, peștele și arahidele, pe care îl puteți folosi pentru a exclude din listă orice produs care le conține. Articolele cu aceste ingrediente alergene sunt gri și tăiate. Cel mai bun lucru pentru cei care suferă de alergii, aplicația își amintește selecția dvs. la fiecare vizită, astfel încât nu trebuie să o selectați de fiecare dată.

Date de utilizare

În doar câteva săptămâni și suntem martorii adoptării rapide de către studenți, pe măsură ce aceștia descoperă noua aplicație. Utilizarea aplicației a crescut în fiecare săptămână de când a fost lansat noul site și noua aplicație. Vom continua să urmărim îndeaproape modul în care se comportă noul design, care este doar o parte a relației noastre continue cu UNC Dining.

Partea 3: Ecranele meniului

Pentru a completa întreaga nouă experiență a utilizatorului, NMC a proiectat și implementat meniuri digitale în locație. Acestea sunt alimentate de ecrane de televiziune LCD de înaltă definiție la fiecare stație din sălile de mese selectate. Am lucrat îndeaproape cu personalul IT al UNC pentru a atrage un flux web în direct și a ne asigura că totul se îmbină bine. Scopul nostru a fost ca ecranele să fie la fel de ușor de întreținut ca și restul site-ului web, dar cu un afișaj personalizat, astfel încât lucruri precum cursorii mouse-ului să nu apară pentru a strica iluzia.

Geniul nostru tehnic rezident, Kris Jordan, s-a ocupat de programarea personalizată (în Scala) și a integrat-o în sistemul de gestionare a ecranelor existent al UNC. Una dintre marile îmbunătățiri ale acestei configurații față de cea anterioară pe care o avea departamentul a fost eliminarea unei tone de limitări de design cu vechile ecrane, care trebuiau să funcționeze în cadrul șabloanelor inflexibile permise în Scala. Cu toate acestea, am schimbat configurația de bază și, în loc să folosim șabloanele din Scala, am îndreptat pur și simplu fiecare ecran către o adresă URL unică și, ca urmare, am putut să profităm de flexibilitatea browserelor moderne și să fim cu adevărat creativi în ceea ce privește designul ecranelor. Acum, fiecare ecran este setat la un URL unic, permițând UNC să utilizeze cele mai recente tehnici web și flexibilitatea designului în noile machete

Doar NMC

Nu multe firme de web pot realiza un proiect ca acesta. Succesul noului site web și al aplicației personalizate a UNC Dining este un exemplu perfect al punctelor forte unice pe care New Media Campaigns le reunește în fiecare proiect web.

În plus față de familiaritatea noastră extinsă cu nevoile particulare ale instituțiilor de învățământ superior, acest proiect a necesitat o coordonare practică din partea echipei noastre calificate de relații cu clienții; o strategie de conținut gândită și bine structurată &, o arhitectură a informației; un design vizual îndrăzneț, original și eficient, orientat spre acțiune; o codare manuală HTML & CSS receptivă, simplă și expertă; și o programare complexă, personalizată, de tip back-end. Totul a fost livrat la timp și în limitele bugetului, cu timpi de încărcare extrem de rapizi și a fost lansat cu recenzii entuziaste.

Ne-am bucurat să avem ocazia de a ne arăta abilitățile digitale cu site-ul UNC Dining și clientul nu putea fi mai încântat. Cum vă poate încânta NMC? Luați legătura astăzi.