“Dove mangiamo stasera?”
Abbiamo avuto l’invidiabile opportunità di lavorare con il team Dining Services dell’Università del North Carolina per reimmaginare un moderno sito web per i punti di ristoro in modo che, finalmente, gli studenti sapessero cosa viene servito, quando e dove. In collaborazione con Aramark e il dipartimento dei servizi IT dell’UNC, abbiamo costruito un sito web alimentato da non una ma due applicazioni web personalizzate. Ora, gli studenti, i docenti e il personale possono sfogliare tutte le sale da pranzo del campus e vedere quali stazioni alimentari sono aperte a colpo d’occhio. Poi basta un clic (o un tocco!) per trovare il menu e gli ingredienti di ogni voce. Semplice!
È stato un progetto grande e complesso che ha richiesto manager esperti, un design originale, un’abile codifica front-end e un’impressionante programmazione back-end che hanno lavorato bene insieme per avere successo. In breve, un progetto ideale per le campagne New Media. Abbiamo fatto un bel po’ di applicazioni personalizzate e siti web per college e università – tra cui un certo numero per la UNC, come i Servizi Energetici, il Dipartimento di Geologia, e l’Entrepreneurship Minor – quindi questo era ben all’interno delle nostre capacità.
Tutti all’improvviso siamo di nuovo studenti affamati
Il team del progetto ha avuto fortuna in questo caso: tutti noi ricordiamo distintamente il dolore di uscire dalla classe, camminare verso una sala da pranzo, e trovarla chiusa. O peggio, pagare per un pasto solo per rendersi conto che non c’erano opzioni disponibili per specifiche limitazioni dietetiche. Quindi conoscevamo bene il problema che UNC Dining voleva risolvere. La soluzione è arrivata in tre parti: il sito web, un’applicazione web personalizzata per il menu &ore, e una seconda applicazione personalizzata per le schermate del menu dal vivo.
Il sito web doveva avere un aspetto super moderno per un pubblico giovane ed essere facile da mantenere e veloce da caricare. È stato costruito usando HiFi, il sistema di gestione dei contenuti veloce e infinitamente configurabile. Per il menu &applicazione ore, abbiamo rapidamente determinato che il suo scopo principale era quello di rispondere a queste tre domande per gli studenti, il personale e la facoltà della UNC Chapel Hill:
- Cosa è aperto ora (o più tardi)?
- Cosa c’è nel menu?
- Posso vedere gli ingredienti?
Infine, volevamo vedere l’esperienza dell’utente fino in fondo, il che significava collegare il menu reale sul posto. Le sale da pranzo dell’UNC hanno grandi schermi LCD che mostrano il menu corrente. La nostra soluzione è stata quella di puntare questi schermi a pagine web private con una visualizzazione personalizzata, in modo che gli amministratori del sito possano aggiornare il contenuto di ogni stazione con la stessa facilità di un sito web. Abbiamo reso tutto molto semplice e ogni schermata corrisponde allo stile della singola stazione, della sala da pranzo e del più grande marchio UNC Dining. L’app delle schermate del menu è costruita nel linguaggio di programmazione Scala e funziona come un incanto.
Collegando tutti e tre i componenti, siamo stati in grado di dare al team di UNC Dining Services la soluzione di cui avevano bisogno per rispondere alla domanda “Cosa c’è per cena? Il risultato: un sito web super veloce, semplice da usare, facile da capire e che funziona. Abbiamo detto che è reattivo?
Parte 1: Il sito web
Gestione del contenuto
La nostra prima priorità è stata la verifica del contenuto esistente del vecchio sito. Cosa rimarrà, cosa andrà via e cosa può essere migliorato? L’architettura informativa originale non era ben progettata e c’erano diversi tipi di contenuto che il cliente doveva gestire. I modelli di contenuto del sito includevano:
- Pagine informative semplici, come Chi siamo, Fatti nutrizionali, o Catering
- Feed con più elementi, come News Blog o Calendario eventi
- Pagine specializzate, come Piani pasti
- Forme interattive, come Contattaci
- E naturalmente, il menu &applicazione ore
Una sfida nella parte di design delle informazioni del nuovo sito era come gestire contenuti profondamente annidati. A volte le informazioni sono raggruppate in un gruppo in un gruppo in un gruppo e questo può rendere i menu di navigazione disordinati e difficili da usare, velocemente. Per esempio, prendiamo il menu e l’applicazione degli orari, dove abbiamo dovuto progettare l’interfaccia dello schermo per gestire cinque bit di informazioni successivamente granulari: Dalla posizione (diciamo, “Ram’s Head Dining Hall”) fino al pasto (“Lunch”) alla singola stazione (“Pizza Bar”) al piatto (“Buffalo Chicken”) e infine all’ingrediente (“Wheat flour”). Se sembra complicato, lo è. Ma il nostro team l’ha risolto elegantemente.
La nostra soluzione HiFi
La nostra soluzione doveva rendere facile il drill fino in fondo all’albero dell’applicazione menu, così come l’aggiornamento e la creazione di pagine conenti nel punto giusto. E poiché abbiamo costruito il sito web usando HiFi, è facile, dato che ognuno di questi modelli di contenuto è incluso di default. Blog di notizie, calendario degli eventi, moduli di contatto e tipi di informazioni di base sono tutti inclusi. Dall’interno del pannello di controllo, la gerarchia di navigazione è chiara e ciascuno dei diversi tipi di contenuto è semplice da aggiungere con un clic di un pulsante.
Il cliente usa HiFi per aggiornare le informazioni sui menu, pubblicare i prossimi eventi, aggiornare i profili del personale e preparare guide speciali per gli studenti, come la pianificazione dei pasti e come evitare certi allergeni. UNC Dining è tanto nel servire cibo agli studenti quanto nell’istruzione: un dietista registrato è impiegato per coordinarsi con i servizi sanitari del campus UNC per assicurarsi che i pasti siano sani e per consigliare gli studenti con esigenze dietetiche speciali. Il successo accademico è strettamente legato a una buona alimentazione e a uno stile di vita sano, quindi è importante che gli amministratori del sito possano usare il sito per pubblicare informazioni accurate, tempestive e & pratiche sulla nutrizione.
Approccio al design
Il vecchio design soffriva dei tipici difetti che vediamo nei siti web che vengono da noi per una riprogettazione:
- Nessuna griglia di layout: gli elementi della pagina sono disposti e dimensionati alla rinfusa
- Povera gerarchia visiva: non è chiaro dove l’occhio debba andare e i titoli sono indistinguibili dal corpo del testo
- Nessun richiamo ovvio all’azione: non solo un visitatore non sa cosa leggere, ma non sa nemmeno cosa fare o cliccare
- Mancanza di spazi bianchi: il testo e le caselle di contenuto hanno bisogno di “respiro” in modo che l’occhio possa distinguerli nel campo visivo
- Palette di colori scialba: blu e grigi sommessi dominano quello che altrimenti dovrebbe essere un soggetto colorato e vibrante (cibo delizioso!)
- Tipografia sciatta: oltre all’uso di font semplici e predefiniti, la lunghezza media delle linee e la spaziatura dei paragrafi rendono difficile la lettura
Prima & Dopo: Il vecchio sito non usava molto bene lo spazio e non si concentrava sui compiti o sui contenuti a cui i visitatori sono più interessati
In cima a tutto questo, il vecchio sito si caricava molto lentamente e non era ottimizzato per i dispositivi mobili. Il nostro compito non era solo quello di affrontare ognuna di queste considerazioni di design, ma anche di farlo in un modo che fosse appropriato al pubblico principale: moderno e giovanile. Il motivo di design risultante ha queste caratteristiche:
- Grandi titoli in grassetto
- Chiari richiami all’azione
- Forme semplici e moderne (quadrati e rettangoli)
- Nessuna ombreggiatura o texture non necessaria
- Spazi bianchi liberali
Oltre a questi, il nostro team ha progettato l’interfaccia per sentirsi a casa su uno schermo, nel modo in cui un programma o un’applicazione sul vostro computer utilizza l’intero spazio reale. Cioè, piuttosto che essere vincolato da una larghezza di “pagina” arbirtray, il design è sia a schermo intero che reattivo a diversi contesti di dispositivi: il nuovo sito UNC Dining è naturalmente a casa su un monitor desktop widescreen come lo è su un computer portatile, tablet o telefono.
I link sono evidenti e facilmente toccabili. Le sezioni e il testo hanno una gerarchia chiara e ben definita. Le singole notizie e gli articoli sono piacevoli da leggere a lungo. Il design si estende per tutta la larghezza dello schermo che state usando per vederlo. Impiega gli stessi blu e grigi (Carolina) della tavolozza originale, ma li bilancia con grandi fotografie colorate ad alta definizione. La navigazione è ben organizzata, interattiva e nascosta, tranne quando la si vuole. Animazioni sottili trasmettono un senso di reattività e capriccio. L’effetto complessivo è quello di mettere l’accento sulla ricchezza del contenuto.
Driven by Action
New Media Campaigns impiega una filosofia chiamata “Action Driven Design”. Questo significa che ci avviciniamo a ogni progetto web invertendo la tipica domanda “Come dovrebbe apparire?” con “Cosa dovrebbe fare? Ci costringe a pensare attentamente a quali azioni le persone arrivano al sito cercando di fare. Spesso è facile come azzerare da uno a tre obiettivi più importanti del sito. Nel caso di UNC Dining, era chiarissimo:
- Cosa è aperto e cosa c’è da mangiare?
- Cosa succede in questi giorni?
- Cosa copre il mio piano pasti?
Lavorando all’indietro da lì, vedrete che tutte e tre le azioni sono gli elementi visivi più importanti sulla home page e ciò che interessa alla maggior parte dei visitatori. Ma oltre a questo c’è una ricchezza di informazioni sul sito: dettagli sui piani pasto, sul catering e anche sull’impegno di UNC Dining per la sostenibilità, tutti facilmente accessibili da un menu interattivo. Clicca o tocca per un accesso immediato a tutti i contenuti del sito a colpo d’occhio.
Social Media
UNC Dining prende sul serio i suoi canali di comunicazione. Non solo pubblica frequentemente su Twitter, Facebook e Instragram, ma coordina la messaggistica su tutte e tre le piattaforme. Questo significa che i seguaci ottengono un’esperienza editoriale coerente qualunque sia il loro mezzo preferito.
Sulla home page, abbiamo tirato dentro un live feed da tutti e tre. Gli ultimi aggiornamenti di Facebook e Twitter sono inseriti come testo e gli aggiornamenti di Instagram come grandi foto di alta qualità. Questo è un modo fantastico per rafforzare gli sforzi del team dei media e per fornire contenuti freschi, originali e attraenti alla home page. Non fa male avere foto di cibo da acquolina in bocca!
Codice fatto a mano
Come tutti i progetti web di NMC, scriviamo il codice a mano. Questo assicura che sia snello e conciso (nessun markup inutile per aumentare il peso della pagina) che ottimizza la pagina del sito per l’indicizzazione dei motori di ricerca. Significa anche che possiamo comprimere e mettere in cache il codice prima del tempo per accelerare drasticamente il tempo di rendering della pagina e lavorare intorno a qualsiasi bug di visualizzazione specifico del browser (Internet Explorer è notoriamente problematico). Infine, UNC Dining funziona altrettanto bene sul tuo monitor desktop gigante quanto sul tuo laptop, tablet o telefono — anche il menu & ore app, che risponde istantaneamente con informazioni accurate quando tocchi e scorri.
UNC Dining presenta una web app progettata per rispondere a una domanda: “Ho fame. Cosa c’è da mangiare nel campus?”. Abbiamo progettato e costruito un software personalizzato utilizzando Ruby on Rails che fa una manciata di cose, istantaneamente e automaticamente:
- Preleva l’ora corrente
- Controlla l’ora con un database di tutti i punti di ristoro del campus UNC
- Ritorna una lista di ciò che è aperto in questo momento
- Visualizza una lista corrente e accurata di ogni voce del menu, accurata di ogni voce del menu
- Ogni voce del menu presenta dettagli nutrizionali completi & informazioni sugli allergeni a colpo d’occhio
Se offrisse solo questa funzionalità, sarebbe un trionfo. Ma un rapido trascinamento del mouse (o del pollice) lungo la linea del tempo rivela le ore e le opzioni che cambiano in tempo reale mentre la fate scorrere, senza alcun ritardo. Perché forse sei curioso di sapere cosa sarà disponibile per la cena più tardi, oggi. E con il selezionatore istantaneo del calendario, puoi scoprire cosa c’è per colazione la prossima settimana. È anche possibile selezionare più orari dei pasti da un menu a discesa all’interno della posizione stessa.
Hai esigenze dietetiche speciali? Ti abbiamo coperto anche lì. L’applicazione del menu ha un filtro per gli allergeni che elenca i sospetti più comuni come grano, latte, pesce e arachidi che puoi usare per escludere dalla lista tutti gli articoli che li contengono. Gli articoli con quegli ingredienti allergenici sono in grigio e vengono cancellati. La cosa migliore per chi soffre di allergie è che l’applicazione ricorda la tua selezione ogni volta che la visiti, così non devi continuare a selezionarla ogni volta.
Dati di utilizzo
Solo poche settimane e stiamo assistendo a una rapida adozione da parte degli studenti che scoprono la nuova applicazione. L’utilizzo dell’applicazione è aumentato ogni singola settimana da quando il nuovo sito web e l’app sono stati lanciati. Continueremo a tenere d’occhio l’andamento del nuovo design, che fa parte del nostro rapporto continuo con UNC Dining.
Per completare la nuova esperienza utente, NMC ha progettato e implementato menu digitali in loco. Questi sono alimentati da schermi televisivi LCD ad alta definizione in ogni stazione in sale da pranzo selezionate. Abbiamo lavorato a stretto contatto con lo staff IT della UNC per inserire un feed web dal vivo e assicurarci che tutto fosse ben integrato. Il nostro obiettivo era che gli schermi fossero facili da mantenere come il resto del sito web, ma con una visualizzazione personalizzata in modo che cose come i cursori del mouse non apparissero per rovinare l’illusione.
Il nostro genio tecnico residente, Kris Jordan, ha gestito la programmazione personalizzata (in Scala) e l’ha integrata nel sistema di gestione degli schermi esistente della UNC. Uno dei grandi miglioramenti di questa configurazione rispetto a quella precedente che il dipartimento aveva è stato quello di eliminare un sacco di limitazioni di progettazione con le vecchie schermate, che dovevano lavorare all’interno dei modelli poco flessibili consentiti in Scala. Abbiamo cambiato l’impostazione di base, tuttavia, e invece di usare i modelli di Scala, abbiamo semplicemente puntato ogni schermata a un URL unico e, come risultato, siamo stati in grado di sfruttare la flessibilità dei browser moderni e diventare davvero creativi con il design delle schermate. Ora, ogni schermata è impostata su un URL unico, permettendo a UNC di utilizzare le ultime tecniche web e la flessibilità del design nei nuovi layout
Solo NMC
Non molte aziende web possono realizzare un progetto come questo. Il successo del nuovo sito web e dell’applicazione personalizzata di UNC Dining è un perfetto esempio dei punti di forza unici che New Media Campaigns riunisce in ogni progetto web.
In aggiunta alla nostra vasta familiarità con le particolari esigenze delle istituzioni di istruzione superiore, questo progetto ha richiesto un coordinamento pratico da parte del nostro team di relazioni con il cliente; una strategia di contenuto ponderata e ben strutturata & architettura dell’informazione; un design visivo audace, originale ed efficace guidato dall’azione; una codifica HTML & CSS reattiva, snella e competente; e una programmazione back-end complessa e personalizzata. Tutto consegnato in tempo e nel rispetto del budget, con tempi di caricamento velocissimi e lanciato con recensioni entusiastiche.
Siamo stati lieti di avere l’opportunità di mostrare le nostre capacità digitali con il sito UNC Dining e il cliente non potrebbe essere più entusiasta. Come può NMC entusiasmarvi? Contattateci oggi stesso.