“Hvor skal vi spise i aften?”
Vi har haft den misundelsesværdige mulighed for at arbejde sammen med University of North Carolinas Dining Services-team om at gentænke et moderne websted for spisesteder, så de studerende endelig kan vide, hvad der serveres, hvornår og hvor. I samarbejde med Aramark og UNC’s IT-afdeling byggede vi et websted, der blev drevet af ikke bare én, men to specialudviklede webapplikationer. Nu kan studerende, fakultetet og personalet gennemse alle spisestederne på campus og se, hvilke madstationer der er åbne, med et enkelt blik. Derefter er der kun ét klik (eller tryk!) væk til menuen og ingredienserne i hver enkelt vare. Simpelt!
Det var et stort, komplekst projekt, som krævede praktiske ledere, originalt design, smart front-end kodning og imponerende back-end programmering, der alle arbejdede godt sammen for at lykkes. Kort sagt, et ideelt projekt for New Media Campaigns. Vi har lavet en hel del brugerdefinerede apps og websteder for gymnasier og universiteter – herunder en række for UNC, såsom Energy Services, Geology Department og Entrepreneurship Minor – så dette var godt inden for vores hjulkasse.
All the Sudden We’re Hungry Students Again
Projektgruppen var heldig med dette projekt: vi huskede alle tydeligt smerten ved at komme ud af klassen, gå hen til en spisesal og finde den lukket. Eller endnu værre, at betale for et måltid for at indse, at der ikke var nogen muligheder for specifikke diætetiske begrænsninger. Så vi kendte godt det problem, som UNC Dining ønskede at løse. Løsningen kom i tre dele: webstedet, en brugerdefineret menu & timers webapplikation og en anden brugerdefineret app til live-menuskærmene.
Webstedet skulle se super moderne ud for et yngre publikum og være let at vedligeholde og hurtigt at indlæse. Det er bygget ved hjælp af HiFi, det lynhurtige og uendeligt konfigurerbare indholdsstyringssystem. For menuen & timer-appen fandt vi hurtigt ud af, at dens drivende formål var at besvare disse tre spørgsmål for UNC Chapel Hills studerende, ansatte og fakultetet:
- Hvad er åbent nu (eller senere)?
- Hvad er der på menuen?
- Kan jeg se ingredienserne?
Endeligt ønskede vi at se brugeroplevelsen helt til ende, hvilket betød at binde den faktiske menu på stedet sammen. UNC’s spisesale har store LCD-skærme, der viser den aktuelle menu. Vores løsning var at pege disse skærme til private websider med tilpasset visning, så stedets administratorer kan opdatere indholdet for hver station lige så nemt, som hvis det var et websted. Vi gjorde det virkelig nemt at gøre, og hver skærm passer til stilen på den enkelte station, spisestue og det større UNC Dining-mærke. App’en til menuskærmen er bygget i programmeringssproget Scala og fungerer som en leg.
Ved at binde alle tre komponenter sammen kunne vi give UNC Dining Services-teamet den løsning, de havde brug for til at besvare spørgsmålet: “Hvad er der til middag?”. Resultatet: et superhurtigt, brugervenligt og letforståeligt websted, der bare fungerer. Fik vi nævnt, at det er responsivt?
Del 1: Webstedet
Håndtering af indhold
Vores første prioritet var at gennemgå det eksisterende indhold på det gamle websted. Hvad skal blive, hvad skal væk, og hvad kan forbedres? Den oprindelige informationsarkitektur var ikke godt designet, og der var en række forskellige former for indhold, som kunden havde brug for at administrere. Sitet havde bl.a. følgende indholdsskabeloner:
- Enkle informationssider, som f.eks. om os, næringsindhold eller catering
- Informationsfeed med flere elementer, som f.eks. nyhedsblog eller begivenhedskalender
- Specialsider, som f.eks. madplaner
- Interaktive formularer, som Kontakt os
- Og selvfølgelig menuen & timer app
En udfordring i informationsdesigndelen af det nye websted var, hvordan man skulle håndtere dybt indlejret indhold. Nogle gange er information grupperet i en gruppe i en gruppe i en gruppe i en gruppe, og det kan hurtigt gøre navigationsmenuerne uoverskuelige og svære at bruge. Tag f.eks. menuen og timers-appen, hvor vi var nødt til at designe skærmgrænsefladen til at håndtere fem successivt granulære stykker information: Fra placering (f.eks. “Ram’s Head Dining Hall”) ned til måltid (“Lunch”) til individuel station (“Pizza Bar”) til ret (“Buffalo Chicken”) og til sidst til ingrediens (“Wheat flour”). Hvis det lyder kompliceret, er det det også. Men vores team løste det elegant.
Vores HiFi-løsning
Vores løsning skulle gøre det nemt at bore hele vejen ned i menu-appens træ samt opdatere og oprette conent-sider på det rigtige sted. Og da vi byggede webstedet ved hjælp af HiFi, er det nemt, da hver af disse indholdsskabeloner er inkluderet som standard. Nyhedsblog, begivenhedskalender, kontaktformularer og grundlæggende informationstyper er alle inkluderet. Fra kontrolpanelet er navigationshierarkiet tydeligt, og hver af de forskellige indholdstyper er nemme at tilføje med et klik på en knap.
Klienten bruger HiFi til at opdatere menuoplysninger, offentliggøre kommende begivenheder, opdatere personaleprofilerne og udarbejde særlige vejledninger til eleverne, f.eks. om, hvordan man planlægger måltider og hvordan man undgår visse allergener. UNC Dining handler lige så meget om at servere mad til de studerende som om uddannelse: en registreret diætist er ansat til at koordinere med UNC Campus Health Services for at sikre, at måltiderne er sunde, og til at rådgive studerende med særlige diætbehov. Akademisk succes er tæt forbundet med god ernæring og en sund livsstil, så det er vigtigt, at webstedets administratorer kan bruge webstedet til at offentliggøre nøjagtige, rettidige og & praktiske ernæringsoplysninger.
Designtilgang
Det gamle design led af de typiske fejl, som vi ser på websteder, der kommer til os med henblik på et redesign:
- Ingen layoutgitter: sideelementer er tilfældigt arrangeret og dimensioneret
- Dårligt visuelt hierarki: Det er uklart, hvor øjet skal gå hen, og overskrifter kan ikke skelnes fra brødtekst
- Ingen tydelige opfordringer til handling: Ikke alene ved den besøgende ikke, hvad han/hun skal læse, han/hun ved heller ikke, hvad han/hun skal gøre eller klikke
- Mangel på whitespace: Tekst og indholdsbokse har brug for “luftrum”, så øjet kan skelne dem i synsfeltet
- Mangelfuld farvepalet: Dæmpede blå og gråtoner dominerer det, der ellers burde være et farverigt og levende emne (lækker mad!)
- Sløsset typografi: Ud over brugen af almindelige standardskrifttyper gør den gennemsnitlige linjelængde og den gennemsnitlige afstand mellem paragrafferne det svært at læse
For & Efter: Det gamle websted udnyttede ikke pladsen særlig godt og fokuserede ikke på de opgaver eller det indhold, som de besøgende er mest interesserede i
Oven i alt dette blev det gamle websted indlæst meget langsomt og var ikke optimeret til mobile enheder. Vores opgave var ikke blot at tage fat på hver af disse designovervejelser, men også at gøre det på en måde, der passer til hovedpublikummet: moderne og ungdommeligt. Det resulterende designmotiv har disse karakteristika:
- store, fede overskrifter
- klare opfordringer til handling
- simple, moderne former (firkanter og rektangler)
- ingen unødvendige skygger eller teksturer
- liberalt whitespace
Og ud over disse, har vores team designet grænsefladen, så den føles hjemme på en skærm, på samme måde som et program eller en applikation på din computer bruger hele området. Det vil sige, at i stedet for at være bundet af en “side”-bredde, er designet både fuldskærms- og responsivt over for forskellige enhedskontekster: Det nye UNC Dining-websted er lige så naturligt hjemme på en bredskærms-skrivebordskærm som på en bærbar computer, tablet eller telefon.
Links er tydelige og let at trykke på. Afsnittene og teksten har et klart og veldefineret hierarki. De enkelte nyheder og artikler er behagelige at læse i længere tid. Designet spænder over hele bredden af den skærm, du bruger til at se den. Det anvender de samme (Carolina) blå og gråtoner som den oprindelige palet, men afbalancerer dem med store, farverige fotografier i høj opløsning. Navigationen er velorganiseret, interaktiv og skjult, undtagen når man ønsker det. Subtile animationer giver en følelse af lydhørhed og lune. Den overordnede effekt er at lægge vægten direkte på indholdets rigdom.
Drevet af handling
New Media Campaigns anvender en filosofi kaldet “Action Driven Design”. Det betyder, at vi nærmer os ethvert webprojekt ved at vende det typiske spørgsmål “Hvordan skal det se ud?” om med “Hvad skal det gøre?”. Det tvinger os til at tænke nøje over, hvilke handlinger folk ankommer til webstedet for at gøre. Det er ofte lige så nemt som at sætte fokus på de et til tre vigtigste mål for webstedet. I UNC Dining’s tilfælde var det krystalklart:
- Hvad er åbent, og hvad er der at spise?
- Hvad sker der i disse dage?
- Hvad dækker min madplan?
Arbejder man baglæns derfra, kan man se, at alle tre handlinger er de vigtigste visuelle elementer på forsiden, og at det er det, som de fleste besøgende er interesserede i. Men derudover er der et væld af oplysninger om webstedet: detaljer om madplaner, catering og endda UNC Dining’s engagement i bæredygtighed, som alle er let tilgængelige fra en interaktiv menu. Klik eller tryk på for at få øjeblikkelig adgang til hele webstedets indhold med et enkelt blik.
Sociale medier
UNC Dining tager sine kommunikationskanaler alvorligt. De skriver ikke kun ofte på twitter, Facebook og Instragram, men koordinerer også budskaberne på tværs af alle tre platforme. Det betyder, at følgere får en ensartet redaktionel oplevelse, uanset hvilket medie de foretrækker.
På forsiden har vi trukket et live-feed fra alle tre. De seneste Facebook- og twitter-opdateringer er trukket ind som tekst og Instagram-opdateringerne som store billeder i høj kvalitet. Det er en fantastisk måde at både styrke medieholdets indsats og give nyt, originalt og attraktivt indhold til hjemmesiden. Det skader ikke at have mundvandsdrivende billeder af mad!
Håndlavet kode
Som alle NMC-webprojekter skriver vi koden i hånden. Dette sikrer, at den er slank og kortfattet (ingen unødvendig markup for at øge sidens vægt), hvilket optimerer webstedets side til indeksering i søgemaskinerne. Det betyder også, at vi kan komprimere og cache den på forhånd for at fremskynde sidens renderingstid dramatisk og arbejde uden om eventuelle browser-specifikke visningsfejl (Internet Explorer er notorisk problematisk). Endelig fungerer UNC Dining lige så godt på din gigantiske desktopskærm som på din bærbare computer, tablet eller telefon – selv menuen & timers app, som reagerer øjeblikkeligt med nøjagtige oplysninger, når du rører og stryger.
Del 2: Menu & Hours webapplikation
UNC Dining har en webapp, der er designet til at besvare ét spørgsmål: “Jeg er sulten. Hvad er der at spise på campus?” Vi designede og byggede brugerdefineret software ved hjælp af Ruby on Rails, der gør en håndfuld ting øjeblikkeligt og automatisk:
- Henter den aktuelle tid
- Kontrollerer tiden med en database over alle spisesteder på hele UNC’s campus
- Giver en liste over, hvad der er åbent lige nu
- Viser en aktuel, nøjagtig liste over alle varer på menukortet
- Hvert menupunkt er udstyret med fuld ernæringsinformation & allergeninformation med et enkelt blik
Hvis den bare tilbød denne funktion alene, ville det være en triumf. Men et hurtigt træk med musen (eller tommelfingeren) langs tidslinjen afslører de skiftende timer og muligheder i realtid, efterhånden som du trækker den, uden forsinkelse. For måske er du nysgerrig efter at vide, hvad der vil være tilgængeligt til aftensmad senere i dag. Og med den øjeblikkelige kalendervælger kan du finde ud af, hvad der er til morgenmad i næste uge. Du kan også vælge flere måltidstider fra en dropdown-menu på selve stedet.
Har du særlige diætbehov? Vi har også dækket dig der. Menu-appen har et allergenfilter med en liste over almindeligt mistænkelige stoffer som hvede, mælk, fisk og jordnødder, som du kan bruge til at udelukke alle varer, der indeholder dem, fra listen. Varer med disse allergene ingredienser er gråtonede og overstreget. Det bedste for allergikere er, at appen husker dit valg hver gang du besøger den, så du ikke behøver at vælge det hver gang.
Brugsdata
Der er kun gået et par uger, og vi oplever, at de studerende hurtigt tager den nye app til sig, efterhånden som de opdager den. Brugen af applikationen er steget hver eneste uge, siden det nye websted og den nye app blev lanceret. Vi vil fortsat holde nøje øje med, hvordan det nye design klarer sig, hvilket blot er en del af vores løbende samarbejde med UNC Dining.
Del 3: Menu-skærme
For at runde den helt nye brugeroplevelse af, har NMC designet og implementeret digitale menuer på stedet. Disse drives af LCD-tv-skærme med høj opløsning på hver station i udvalgte spisesale. Vi arbejdede tæt sammen med UNC’s it-medarbejdere for at trække et live webfeed ind og sikre os, at alting fungerede godt sammen. Vores mål var, at skærmene skulle være lige så nemme at vedligeholde som resten af webstedet, men med en tilpasset visning, så ting som musemarkører ikke kan ses og ødelægge illusionen.
Vores lokale tekniske geni, Kris Jordan, tog sig af den tilpassede programmering (i Scala) og integrerede den i UNC’s eksisterende skærmstyringssystem. En af de store forbedringer af denne opsætning i forhold til den tidligere, som afdelingen havde, var at gøre op med et væld af designbegrænsninger med de gamle skærme, som skulle fungere inden for de ufleksible skabeloner, der var tilladt i Scala. Vi ændrede dog den grundlæggende opsætning, og i stedet for at bruge Scalas skabeloner pegede vi simpelthen hver skærm på en unik URL, og som følge heraf kunne vi udnytte fleksibiliteten i moderne browsere og virkelig være kreative med skærmdesignene. Nu er hver skærm sat op på en unik URL, hvilket gør det muligt for UNC at udnytte de nyeste webteknikker og designfleksibilitet i de nye layouts
Kun NMC
Ikke mange webfirmaer kan klare et projekt som dette. Succesen med UNC Dining’s nye websted og brugerdefinerede applikation er et perfekt eksempel på de unikke styrker, som New Media Campaigns samler på alle webprojekter.
Ud over vores omfattende kendskab til de særlige behov, som højere læreanstalter har, krævede dette projekt praktisk koordinering fra vores dygtige team for kunderelationer; gennemtænkt, velstruktureret indholdsstrategi & informationsarkitektur; dristigt, originalt og effektivt handlingsdrevet visuelt design; responsivt, slankt, ekspert HTML & CSS-håndkodning; og kompleks, brugerdefineret back-end-programmering. Alt blev leveret til tiden og inden for budgettet, med utroligt hurtige indlæsningstider og lanceret med rosende anmeldelser.
Vi var glade for at få mulighed for at vise vores digitale evner med UNC Dining-webstedet, og kunden kunne ikke være mere begejstret. Hvordan kan NMC begejstre dig? Tag kontakt i dag.