Free Press

”Var ska vi äta ikväll?”

Vi fick den avundsvärda möjligheten att samarbeta med University of North Carolinas Dining Services-team för att skapa en modern webbplats för matställen, så att studenterna äntligen kan veta vad som serveras, när och var. I samarbete med Aramark och UNC:s avdelning för IT-tjänster byggde vi en webbplats som drivs av inte bara en utan två skräddarsydda webbapplikationer. Nu kan studenter, lärare och personal på en gång bläddra bland alla matsalar på campus och se vilka matstationer som är öppna. Sedan är det bara ett klick (eller ett tryck!) bort till menyn och ingredienserna i varje produkt. Enkelt!

Det var ett stort, komplext projekt som krävde praktiska chefer, originell design, smart kodning av front-end och imponerande back-end-programmering, som alla arbetade bra tillsammans för att lyckas. Kort sagt, ett idealiskt projekt för New Media Campaigns. Vi har gjort en hel del skräddarsydda appar och webbplatser för högskolor och universitet – inklusive ett antal för UNC, t.ex. Energy Services, Geology Department och Entrepreneurship Minor – så det här var väl inom vårt område.

All the Sudden We’re Hungry Students Again

Projektteamet hade tur i det här fallet: vi mindes alla tydligt hur jobbigt det var när vi gick ut från lektionerna, gick till en matsal och fann att den var stängd. Eller ännu värre, att betala för en måltid bara för att inse att det inte fanns några alternativ för specifika kostbegränsningar. Vi visste alltså mycket väl vilket problem UNC Dining ville lösa. Lösningen bestod av tre delar: webbplatsen, en anpassad webbapplikation för meny &timmar och en andra anpassad app för skärmarna med levande menyer.

Webbplatsen behövde se supermodern ut för en yngre publik och vara lätt att underhålla och snabb att ladda. Den är byggd med HiFi, det supersnabba och oändligt konfigurerbara innehållshanteringssystemet. När det gäller appen för menyn & timmar fastställde vi snabbt att dess drivande syfte var att besvara dessa tre frågor för UNC Chapel Hills studenter, personal och lärare:

• Vad är öppet nu (eller senare)?
• Vad finns på menyn?
• Kan jag se ingredienserna?

Slutligt ville vi se användarupplevelsen från början till slut, vilket innebar att vi skulle koppla ihop den faktiska menyn på plats. UNC:s matsalar har stora LCD-skärmar som visar den aktuella menyn. Vår lösning var att peka dessa skärmar till privata webbsidor med anpassad visning så att platsadministratörerna kan uppdatera innehållet för varje station lika enkelt som om det vore en webbplats. Vi gjorde det väldigt enkelt att göra och varje skärm matchar stilen för den enskilda stationen, matsalen och det större varumärket UNC Dining. Appen för menyskärmen är byggd i programmeringsspråket Scala och fungerar som en dröm.

Då vi knöt ihop alla tre komponenterna kunde vi ge UNC Dining Services-teamet den lösning de behövde för att besvara frågan ”Vad finns det att äta?”. Resultatet: en supersnabb, lättanvänd och lättförståelig webbplats som bara fungerar. Nämnde vi att den är responsiv?

Del 1: Webbplatsen

Hantering av innehåll

Vår första prioritet var att granska den gamla webbplatsens befintliga innehåll. Vad kommer att stanna kvar, vad kommer att försvinna och vad kan förbättras? Den ursprungliga informationsarkitekturen var inte väl utformad och det fanns ett antal olika typer av innehåll som kunden behövde hantera. Webbplatsens innehållsmallar omfattade följande:

• Enkla informationssidor, t.ex. om oss, näringsfakta eller catering
• Informationsflöde med flera objekt, t.ex. nyhetsblogg eller evenemangskalender
• Specialsidor, t.ex. måltidsplaner
• Interaktiva formulär, som Kontakta oss
• Och naturligtvis menyn & timmar app

En utmaning i informationsdesigndelen av den nya webbplatsen var hur man skulle hantera djupt inbäddat innehåll. Ibland är informationen grupperad i en grupp i en grupp i en grupp i en grupp och det kan göra navigationsmenyer röriga och svåra att använda, snabbt. Ta till exempel menyn och appen för öppettider, där vi var tvungna att utforma skärmgränssnittet för att hantera fem successivt granulära bitar av information: Från plats (till exempel ”Ram’s Head Dining Hall”) ner till måltid (”Lunch”) till enskild station (”Pizza Bar”) till maträtt (”Buffalo Chicken”) och slutligen till ingrediens (”Vetemjöl”). Om det låter komplicerat är det det också. Men vårt team löste det på ett elegant sätt.

Vår HiFi-lösning

Vår lösning måste göra det enkelt att borra hela vägen ner i menyappens träd samt uppdatera och skapa konentssidor på rätt plats. Och eftersom vi byggde webbplatsen med HiFi är det enkelt, eftersom alla dessa innehållsmallar ingår som standard. Nyhetsblogg, evenemangskalender, kontaktformulär och grundläggande informationstyper ingår alla. Från kontrollpanelen är navigeringshierarkin tydlig och var och en av de olika innehållstyperna är enkel att lägga till med en knapptryckning.

Kunden använder HiFi för att uppdatera menyinformation, lägga upp kommande evenemang, uppdatera personalprofiler och förbereda särskilda guider för eleverna, t.ex. hur man planerar måltider och hur man undviker vissa allergener. UNC Dining handlar lika mycket om att servera mat till studenterna som om utbildning: en registrerad dietist är anställd för att samordna med UNC Campus Health Services för att se till att måltiderna är hälsosamma och för att ge råd till studenter med särskilda kostbehov. Akademisk framgång är nära kopplad till god kost och en hälsosam livsstil, så det är viktigt att webbplatsens administratörer kan använda webbplatsen för att publicera korrekt, aktuell och & praktisk näringsinformation.

Designstrategi

Den gamla designen hade de typiska bristerna som vi ser på webbplatser som kommer till oss för en omarbetning:

• Inget layoutgalleri: sidelementen är slumpmässigt arrangerade och dimensionerade
• Svår visuell hierarki: det är oklart vart ögat ska gå och rubrikerna går inte att skilja från brödtexten
• Ingen tydlig uppmaning till handling: Besökaren vet inte bara vad han eller hon ska läsa, utan också vad han eller hon ska göra eller klicka på
• Mangel på vitrymd: text och innehållsrutor behöver ”andrum” så att ögat kan urskilja dem i synfältet
• Dålig färgpalett: dämpade blått och grått dominerar vad som annars borde vara ett färgglatt, livfullt ämne (utsökt mat!)
• Slöjig typografi: förutom användningen av enkla standardtypsnitt gör den genomsnittliga radlängden och avståndet mellan paragraferna det svårt att läsa

Förut & Efteråt: Den gamla webbplatsen utnyttjade inte utrymmet särskilt bra och fokuserade inte på de uppgifter eller det innehåll som besökarna är mest intresserade av

Ovanpå allt detta laddades den gamla webbplatsen mycket långsamt och var inte optimerad för mobila enheter. Vår uppgift var inte bara att ta itu med var och en av dessa designöverväganden utan också att göra det på ett sätt som är lämpligt för huvudpubliken: modern och ungdomlig. Det resulterande designmotivet har dessa egenskaper:

• Stora, feta rubriker
• Tydliga uppmaningar till handling
• Enkla, moderna former (fyrkanter och rektanglar)
• Ingen onödiga skuggor eller texturer
• Liberala vitrymder

Ovanpå dessa, vårt team utformade gränssnittet för att det ska kännas hemma på en skärm, på samma sätt som ett program eller en applikation på din dator använder hela ytan. Det vill säga, i stället för att vara bunden av en viss ”sidbredd” är designen både fullskärmad och anpassningsbar till olika enhetskontexter: den nya UNC Dining-webbplatsen passar lika bra på en bredbildsskärm som på en bärbar dator, en surfplatta eller en telefon.

Länkar är uppenbara och lätt att tappa på. Avsnitten och texten har en tydlig och väldefinierad hierarki. De enskilda nyheterna och artiklarna är behagliga att läsa länge. Designen spänner över hela bredden på den skärm du använder för att se den. Den använder samma (Carolina) blått och grått som den ursprungliga paletten, men balanserar dem mot stora, färgglada fotografier i hög upplösning. Navigationen är välorganiserad, interaktiv och dold utom när du vill ha den. Subtila animationer förmedlar en känsla av lyhördhet och nyckfullhet. Den övergripande effekten är att tonvikten läggs helt och hållet på innehållets rikedom.

Drivs av handling

New Media Campaigns använder sig av en filosofi som kallas ”Action Driven Design”. Detta innebär att vi närmar oss varje webbprojekt genom att vända på den typiska frågan ”Hur ska det se ut?” till ”Vad ska det göra?”. Det tvingar oss att tänka noga på vad människor som kommer till webbplatsen vill göra. Ofta är det så enkelt som att bestämma sig för de ett till tre viktigaste målen för webbplatsen. I UNC Dining’s fall var det kristallklart:

1. Vad är öppet och vad finns det att äta?
2. Vad är på gång de här dagarna?
3. Vad täcker min måltidsplan?

Om man jobbar baklänges därifrån ser man att alla tre åtgärderna är de viktigaste visuella elementen på hemsidan och det som de flesta besökare är intresserade av. Men därutöver finns en mängd information om webbplatsen: information om måltidsplaner, catering och till och med UNC Dining’s engagemang för hållbarhet, som alla är lättillgängliga från en interaktiv meny. Klicka eller tryck för att få omedelbar tillgång till allt innehåll på webbplatsen i en överblick.

Sociala medier

UNC Dining tar sina kommunikationskanaler på allvar. De publicerar inte bara ofta på Twitter, Facebook och Instragram, utan samordnar även budskapen på alla tre plattformarna. Det innebär att följarna får en konsekvent redaktionell upplevelse oavsett vilket medium de föredrar.

På hemsidan har vi dragit in ett liveflöde från alla tre. De senaste Facebook- och twitteruppdateringarna har dragits in som text och Instagramuppdateringarna som stora foton av hög kvalitet. Detta är ett utmärkt sätt att både förstärka medieteamets insatser och ge nytt, originellt och attraktivt innehåll på hemsidan. Det skadar inte att ha läckra bilder på mat!

Handgjord kod

Som i alla NMC:s webbprojekt skriver vi koden för hand. Detta säkerställer att den är smal och koncis (ingen onödig markup för att öka sidans vikt) vilket optimerar webbplatsens sida för sökmotorindexering. Det innebär också att vi kan komprimera och cacha den i förväg för att påskynda sidans renderingstid dramatiskt och arbeta runt eventuella webbläsarspecifika visningsfel (Internet Explorer är notoriskt problematisk). Slutligen fungerar UNC Dining lika bra på din gigantiska skrivbordsskärm som på din bärbara dator, surfplatta eller telefon – till och med meny & hours-appen, som omedelbart svarar med korrekt information när du rör vid och sveper.

Del 2: Meny & Hours webbapplikation

UNC Dining har en webbapplikation som är utformad för att besvara en fråga: ”Jag är hungrig. Vad finns det att äta på campus?” Vi utformade och byggde en anpassad programvara med hjälp av Ruby on Rails som gör en handfull saker, direkt och automatiskt:

• Hämtar aktuell tid
• Kontrollerar tiden mot en databas med alla matställen på UNC:s campus
• Returnerar en lista över vad som är öppet just nu
• Visar en aktuell, korrekt lista över varje produkt på menyn
• Varje produkt på menyn har fullständiga näringsuppgifter & allergeninformation i en överblick

Om den bara erbjöd enbart den funktionen skulle den vara en triumf. Men ett snabbt drag med musen (eller tummen) längs tidslinjen avslöjar de förändrade timmarna och alternativen i realtid när du drar den, utan fördröjning. För du kanske är nyfiken på vad som kommer att finnas tillgängligt för middag senare i dag. Och med den omedelbara kalenderväljaren kan du ta reda på vad som finns till frukost nästa vecka. Du kan också välja flera måltidstider från en rullgardinsmeny på själva platsen.

Har du särskilda kostbehov? Vi har täckt dig där också. Menyappen har ett allergenfilter som listar vanliga misstänkta ämnen som vete, mjölk, fisk och jordnötter som du kan använda för att utesluta alla produkter som innehåller dem från listan. Varor med dessa allergeningredienser är gråa och överstrukna. Det bästa för allergiker är att appen kommer ihåg ditt val varje gång du besöker den så att du inte behöver välja det varje gång.

Användningsdata

Det har bara gått några veckor och vi ser att eleverna snabbt tar till sig den nya appen när de upptäcker den. Användningen av applikationen har ökat varje vecka sedan den nya webbplatsen och appen lanserades. Vi kommer att fortsätta att hålla ett öga på hur den nya designen fungerar, vilket bara är en del av vårt pågående samarbete med UNC Dining.

Del 3: Menyskärmar

För att avrunda den helt nya användarupplevelsen utformade och implementerade NMC digitala menyer på plats. Dessa drivs av högupplösta LCD-tv-skärmar vid varje station i utvalda matsalar. Vi hade ett nära samarbete med UNC:s IT-personal för att dra in en livewebbmatning och se till att allting fungerade bra. Vårt mål var att skärmarna skulle vara lika lätta att underhålla som resten av webbplatsen, men med en anpassad visning så att saker som muspekare inte syns och förstör illusionen.

Vårt inhemska tekniska geni, Kris Jordan, skötte den anpassade programmeringen (i Scala) och integrerade den i UNC:s befintliga skärmhanteringssystem. En av de stora förbättringarna med denna installation jämfört med den tidigare som institutionen hade var att man kunde göra sig av med en massa designbegränsningar med de gamla skärmarna, som var tvungna att arbeta inom de oflexibla mallar som tillåts i Scala. Vi ändrade dock den grundläggande inställningen och i stället för att använda Scalas mallar pekade vi helt enkelt varje skärm på en unik URL, och som ett resultat av detta kunde vi dra nytta av flexibiliteten hos moderna webbläsare och verkligen vara kreativa med skärmens utformning. Nu är varje skärm inställd på en unik URL, vilket gör det möjligt för UNC att utnyttja den senaste webbtekniken och designflexibiliteten i de nya layouterna

Endast NMC

Inte många webbföretag kan genomföra ett projekt som detta. Framgången för UNC Dining’s nya webbplats och anpassade applikation är ett perfekt exempel på de unika styrkor som New Media Campaigns samlar i varje webbprojekt.

Förutom vår omfattande förtrogenhet med de särskilda behoven hos institutioner för högre utbildning krävde det här projektet praktisk samordning från vårt skickliga kundrelationsteam; genomtänkt, välstrukturerad innehållsstrategi & informationsarkitektur; djärv, originell och effektiv aktionsdriven visuell design; lyhörd, smidig, experthandkodning av HTML & CSS & och komplex, anpassad, back-end programmering. Allt levererades i tid och inom budget, med otroligt snabba laddningstider och lanserades med mycket goda recensioner.

Vi var glada över att få möjlighet att visa upp våra digitala färdigheter med UNC Dining-webbplatsen och kunden kunde inte vara mer nöjd. Hur kan NMC glädja dig? Ta kontakt med oss idag.