We hadden de benijdenswaardige kans om samen te werken met het University of North Carolina’s Dining Services team om een moderne eetlocaties website opnieuw te bedenken, zodat studenten eindelijk weten wat er geserveerd wordt, wanneer en waar. In samenwerking met Aramark en de UNC IT Services afdeling hebben we een website gebouwd die wordt aangedreven door niet één maar twee aangepaste webapplicaties. Nu kunnen studenten, docenten en medewerkers alle eetzalen op de campus bekijken en in één oogopslag zien welke eetgelegenheden open zijn. Dan is het een klik (of tik!) verwijderd van het menu en de ingrediënten van elk item. Simpel!
Het was een groot, complex project dat hands-on managers, een origineel ontwerp, een vlotte front-end codering en een indrukwekkende back-end programmering vereiste die allemaal goed samenwerkten om het project tot een goed einde te brengen. Kortom, een ideaal project voor New Media Campaigns. We hebben al heel wat apps en websites op maat gemaakt voor hogescholen en universiteiten – waaronder een aantal voor UNC, zoals Energy Services, Geology Department en de Entrepreneurship Minor – dus deze lag goed in ons straatje.
All the Sudden We’re Hungry Students Again
Het projectteam had geluk bij deze: we herinnerden ons allemaal duidelijk de pijn van uit de klas komen, naar een eetzaal lopen, en vinden dat het gesloten is. Of erger nog, betalen voor een maaltijd alleen om te beseffen dat er geen opties beschikbaar waren voor specifieke dieetbeperkingen. We wisten dus heel goed welk probleem UNC Dining wilde oplossen. De oplossing bestond uit drie delen: de website, een aangepaste menu & uur webapplicatie, en een tweede aangepaste app voor de live menuschermen.
De website moest er supermodern uitzien voor een jonger publiek en moest gemakkelijk te onderhouden en snel te laden zijn. Hij is gebouwd met behulp van HiFi, het razendsnelle en oneindig configureerbare content management systeem. Voor de menu & uren app, stelden we al snel vast dat het doel was om deze drie vragen te beantwoorden voor UNC Chapel Hill’s studenten, personeel en faculteit:
- Wat is er nu open (of later)?
- Wat staat er op het menu?
- Kan ik de ingrediënten zien?
Ten slotte wilden we de gebruikerservaring helemaal tot het einde toe bekijken, wat inhield dat we het eigenlijke menu ter plekke moesten koppelen. UNC eetzalen hebben grote, LCD-schermen die het huidige menu laten zien. Onze oplossing was om deze schermen te verwijzen naar privé webpagina’s met aangepaste weergave, zodat beheerders de inhoud voor elk station net zo gemakkelijk kunnen bijwerken als wanneer het een website zou zijn. We hebben het heel eenvoudig gemaakt om te doen en elk scherm past bij de stijl van het individuele station, de eetzaal en het grotere UNC Dining merk. De menuscherm app is gebouwd in de programmeertaal Scala en werkt als een charme.
Door alle drie de componenten aan elkaar te knopen, waren we in staat om het UNC Dining Services team de oplossing te geven die ze nodig hadden om de vraag te beantwoorden, “Wat is er te eten?” Het resultaat: een supersnelle, eenvoudig te gebruiken, gemakkelijk te begrijpen website die gewoon werkt. Hebben we al gezegd dat hij responsive is?
Deel 1: De website
Inhoud beheren
Onze eerste prioriteit was het controleren van de bestaande inhoud van de oude site. Wat blijft, wat gaat weg, en wat kan worden verbeterd? De oorspronkelijke informatiearchitectuur was niet goed ontworpen en er waren een aantal verschillende soorten inhoud die de klant moest beheren. De content templates van de site waren onder andere:
- Eenvoudige informatiepagina’s, zoals Over ons, Voedingswaardefeiten, of Catering
- Informatiefeeds met meerdere items, zoals Nieuws Blog of Evenementen Kalender
- Specialiteitspagina’s, zoals Maaltijdplannen
- Interactieve formulieren, zoals Contact opnemen
- En natuurlijk de menu & uren app
Een uitdaging in het informatie-ontwerp gedeelte van de nieuwe site was hoe om te gaan met diep geneste inhoud. Soms is informatie gegroepeerd in een groep in een groep in een groep en dat kan navigatiemenu’s onoverzichtelijk en moeilijk te gebruiken maken, snel. Neem bijvoorbeeld de menu- en uren-app, waar we de scherminterface moesten ontwerpen om vijf opeenvolgende korrelige stukjes informatie te verwerken: Van locatie (zeg, “Ram’s Head Dining Hall”) naar maaltijd (“Lunch”) naar individueel station (“Pizza Bar”) naar gerecht (“Buffalo Chicken”) en tenslotte naar ingrediënt (“Tarwebloem”). Als dat ingewikkeld klinkt, dan is het dat ook. Maar ons team loste het elegant op.
Onze HiFi oplossing
Onze oplossing moest het eenvoudig maken om de menu-apps helemaal naar beneden in de boomstructuur te boren en om conent-pagina’s op de juiste plaats bij te werken en te maken. En omdat we de website met HiFi hebben gebouwd, is het gemakkelijk, omdat elk van deze content templates standaard zijn inbegrepen. Nieuws blog, evenementen kalender, contact formulieren en basis informatie types zijn allemaal inbegrepen. Vanuit het controle paneel is de navigatie hiërarchie duidelijk en elk van de verschillende content types is eenvoudig toe te voegen met een klik op de knop.
De klant gebruikt HiFi om menu informatie bij te werken, aankomende evenementen te plaatsen, de profielen van het personeel bij te werken en speciale gidsen voor studenten op te stellen, zoals hoe maaltijden te plannen en hoe bepaalde allergenen te vermijden. UNC Dining gaat net zo goed over het serveren van voedsel aan studenten als over onderwijs: een geregistreerde diëtist is in dienst om te coördineren met UNC Campus Health Services om ervoor te zorgen dat de maaltijden gezond zijn en om studenten met speciale dieetwensen te begeleiden. Academisch succes is nauw verbonden met goede voeding en een gezonde levensstijl, dus het is belangrijk dat sitebeheerders de site kunnen gebruiken om nauwkeurige, tijdige, & praktische voedingsinformatie te publiceren.
Ontwerpbenadering
Het oude ontwerp leed aan de typische gebreken die we zien bij websites die bij ons komen voor een redesign:
- Geen lay-out grid: pagina-elementen zijn lukraak gerangschikt en van formaat
- Slechte visuele hiërarchie: het is onduidelijk waar het oog heen moet en koppen zijn niet te onderscheiden van de hoofdtekst
- Geen duidelijke oproepen tot actie: een bezoeker weet niet alleen niet wat hij moet lezen, maar ook niet wat hij moet doen of klikken
- Te weinig witruimte: tekst en inhoudsvakken hebben “ademruimte” nodig, zodat het oog ze in het gezichtsveld kan onderscheiden
- Saai kleurenpalet: ingetogen blauw en grijs overheersen wat anders een kleurrijk, levendig onderwerp zou moeten zijn (heerlijk eten!)
- Slordige typografie: naast het gebruik van gewone, standaard lettertypen, maakt de gemiddelde regellengte en alinea-afstand het lezen moeilijk
Voor &Na: De oude site maakte niet erg goed gebruik van de ruimte of richtte zich niet op de taken of inhoud waarin bezoekers het meest geïnteresseerd zijn
Daar kwam nog bij dat de oude site erg traag laadde en niet geoptimaliseerd was voor mobiele apparaten. Onze taak was niet alleen om elk van deze ontwerpoverwegingen aan te pakken, maar ook om dit te doen op een manier die geschikt is voor het belangrijkste publiek: modern en jeugdig. Het resulterende ontwerpmotief heeft deze kenmerken:
- Grote, vetgedrukte koppen
- Eenduidige oproepen tot actie
- Eenvoudige, moderne vormen (vierkanten en rechthoeken)
- Geen onnodige arceringen of texturen
- Liberale witruimte
Daarnaast, heeft ons team de interface ontworpen om zich thuis te voelen op een scherm, zoals een programma of toepassing op uw computer het volledige onroerend goed gebruikt. Dat wil zeggen, in plaats van gebonden te zijn aan een arbirtray “pagina” breedte, is het ontwerp zowel full-screen en ontvankelijk voor verschillende apparaat contexten: de nieuwe UNC Dining site is net zo natuurlijk thuis op een breedbeeld desktop monitor als op een laptop, tablet of telefoon.
Links zijn duidelijk en gemakkelijk aan te klikken. De rubrieken en tekst hebben een duidelijke, goed gedefinieerde hiërarchie. De afzonderlijke nieuwsberichten en artikelen zijn aangenaam om lang door te lezen. Het ontwerp overspant de gehele breedte van het scherm waarop je het bekijkt. Het gebruikt dezelfde (Carolina) blauw- en grijstinten van het oorspronkelijke palet, maar brengt ze in evenwicht met grote, kleurrijke foto’s in high-definition. De navigatie is overzichtelijk, interactief en verborgen, behalve wanneer u dat wilt. Subtiele animaties geven een gevoel van reactievermogen en eigenzinnigheid. Het totale effect is om de nadruk te leggen op de rijkdom van de inhoud.
Driven by Action
New Media Campaigns hanteert een filosofie die “Action Driven Design” wordt genoemd. Dit betekent dat we elk webproject benaderen door de typische vraag, “Hoe moet het eruit zien?” om te draaien met, “Wat moet het doen?”. Het dwingt ons om goed na te denken over wat mensen willen doen als ze op de site komen. Het is vaak zo eenvoudig als je te concentreren op de een tot drie belangrijkste doelstellingen van de site. In het geval van UNC Dining was het glashelder:
- Wat is er open en wat is er te eten?
- Wat is er deze dagen te doen?
- Wat dekt mijn maaltijdplan?
Werk je van daaruit terug, dan zie je dat alle drie de acties de belangrijkste visuele elementen op de startpagina zijn en waar de meeste bezoekers in geïnteresseerd zijn. Maar daarnaast is er een schat aan informatie: details over maaltijdplannen, catering, en zelfs UNC Dining’s inzet voor duurzaamheid, allemaal gemakkelijk toegankelijk via een interactief menu. Klik of tik voor directe toegang tot alle inhoud van de site in een oogopslag.
Sociale media
UNC Dining neemt zijn communicatiekanalen serieus. De site plaatst niet alleen regelmatig berichten op Twitter, Facebook en Instragram, maar coördineert de berichtgeving op alle drie de platforms. Dat betekent dat volgers een consistente redactionele ervaring krijgen, ongeacht het medium van hun voorkeur.
Op de startpagina hebben we een live feed van alle drie de platforms geplaatst. De laatste Facebook- en Twitter-updates worden als tekst weergegeven en de Instagram-updates als grote foto’s van hoge kwaliteit. Dit is een geweldige manier om zowel de inspanningen van het mediateam te versterken als frisse, originele en aantrekkelijke inhoud aan de homepage te geven. Het kan geen kwaad om verrukkelijke foto’s van eten te hebben!
Handgemaakte code
Zoals alle webprojecten van NMC, schrijven we de code met de hand. Dit zorgt ervoor dat het slank en beknopt (geen onnodige markup om de pagina gewicht te verhogen) die de pagina van de site te optimaliseren voor zoekmachine indexering. Het betekent ook dat we het van tevoren kunnen comprimeren en cachen om de pagina rendering tijd drastisch te versnellen en om eventuele browser-specifieke weergave bugs heen te werken (Internet Explorer is berucht om zijn problemen). Ten slotte werkt UNC Dining net zo goed op uw grote desktop monitor als op uw laptop, tablet of telefoon – zelfs het menu & uur app, die onmiddellijk reageert met nauwkeurige informatie als je aanraakt en veegt.
Deel 2: Menu & Uren Webapplicatie
UNC Dining beschikt over een webapp die is ontworpen om één vraag te beantwoorden: “Ik heb honger. Wat is er te eten op de campus?” We ontwierpen en bouwden aangepaste software met behulp van Ruby on Rails die een handvol dingen doet, direct en automatisch:
- Vangt de huidige tijd
- Vergelijkt de tijd met een database van alle eetlocaties op de hele UNC campus
- Retourneert een lijst van wat er nu open is
- Displays een huidige,
- Elk menu-item bevat volledige voedingsdetails & informatie over allergenen in één oogopslag
Als het alleen die functionaliteit zou bieden, zou het een triomf zijn. Maar met een snelle sleepbeweging van de muis (of duim) langs de tijdlijn ziet u de veranderende uren en opties in real time terwijl u ze verschuift, zonder vertraging. Want misschien ben je wel benieuwd wat er later vandaag voor het avondeten beschikbaar is. En met de kalenderkiezer kunt u meteen zien wat er volgende week voor ontbijt is. U kunt ook meerdere etenstijden selecteren in een vervolgkeuzemenu op de locatie zelf.
Heeft u speciale dieetwensen? Ook daar hebben we voor gezorgd. De menu-app heeft een allergeenfilter waarmee u veelvoorkomende ingrediënten als tarwe, melk, vis en pinda’s van de lijst kunt uitsluiten. Items met deze allergene ingrediënten worden grijs weergegeven en doorgestreept. Het beste van alles voor mensen met een allergie, de app onthoudt uw selectie bij elk bezoek, zodat u niet hoeft te blijven selecteren elke keer.
Gebruiksgegevens
Nauwelijks een paar weken verder en we zijn getuige van een snelle adoptie door studenten als ze de nieuwe app ontdekken. Het gebruik van de applicatie is elke week gestegen sinds de lancering van de nieuwe website en app. We blijven nauwlettend in de gaten houden hoe het nieuwe ontwerp presteert, wat gewoon deel uitmaakt van onze voortdurende relatie met de UNC Dining.
Deel 3: Menuschermen
Om de hele nieuwe gebruikerservaring af te ronden, ontwierp en implementeerde NMC digitale menu’s op locatie. Deze worden gevoed door high-definition LCD-televisieschermen op elk station in geselecteerde eetzalen. We werkten nauw samen met de IT-medewerkers van UNC om een live webfeed binnen te halen en ervoor te zorgen dat alles goed op elkaar aansloot. Ons doel was dat de schermen net zo gemakkelijk te onderhouden zouden zijn als de rest van de website, maar met een aangepaste weergave zodat dingen zoals muiscursors de illusie niet verpesten.
Onze technische genie, Kris Jordan, zorgde voor de aangepaste programmering (in Scala) en integreerde het in het bestaande schermbeheersysteem van UNC. Een van de grote verbeteringen van deze opzet ten opzichte van de vorige die de afdeling had, was het wegwerken van een heleboel ontwerpbeperkingen met de oude schermen, die moesten werken binnen de inflexibele sjablonen die in Scala waren toegestaan. We veranderden echter de basisopzet en in plaats van de sjablonen van Scala te gebruiken, wezen we gewoon elk scherm naar een unieke URL en als gevolg daarvan waren we in staat om te profiteren van de flexibiliteit van moderne browsers en echt creatief te zijn met de schermontwerpen. Nu wordt elk scherm op een unieke URL gezet, waardoor UNC gebruik kan maken van de nieuwste webtechnieken en ontwerpflexibiliteit in de nieuwe lay-outs
Alleen NMC
Niet veel webbedrijven kunnen een project als dit voor elkaar krijgen. Het succes van de nieuwe website en aangepaste toepassing van UNC Dining is een perfect voorbeeld van de unieke sterke punten die New Media Campaigns bij elk webproject samenbrengt.
Naast onze uitgebreide bekendheid met de specifieke behoeften van instellingen voor hoger onderwijs, vereiste dit project hands-on coördinatie van ons bekwame klantrelatieteam; doordachte, goed gestructureerde contentstrategie & informatiearchitectuur; gedurfd, origineel en effectief actiegedreven visueel ontwerp; responsieve, slanke, deskundige HTML & CSS hand-coding; en complexe, aangepaste, back-end programmering. Alles op tijd geleverd en binnen budget, met razendsnelle laadtijden en gelanceerd met lovende kritieken.
We waren blij dat we de kans kregen om onze digitale vaardigheden te tonen met de UNC Dining site en de klant kon niet blijer zijn. Hoe kan NMC u in vervoering brengen? Neem vandaag nog contact met ons op.