Free Press

”Missä meidän pitäisi syödä tänä iltana?”

Meille tarjoutui kadehdittava tilaisuus työskennellä Pohjois-Carolinan yliopiston ruokapalveluiden tiimin kanssa uudenaikaisen ruokapaikkojen verkkosivun uudistamiseksi, jotta opiskelijat tietäisivät vihdoin ja viimein, mitä on tarjolla, milloin ja missä. Yhteistyössä Aramarkin ja UNC:n IT-palveluiden osaston kanssa rakensimme verkkosivuston, joka perustuu kahteen räätälöityyn verkkosovellukseen. Nyt opiskelijat, opettajat ja henkilökunta voivat selata kaikkia kampuksen ruokaloita ja nähdä yhdellä silmäyksellä, mitkä ruokapaikat ovat auki. Sitten on vain yhden klikkauksen (tai napautuksen!) päässä ruokalista ja kunkin ruokalajin ainesosat. Yksinkertaista!

Tämä oli suuri ja monimutkainen projekti, joka vaati käytännönläheisiä johtajia, omaperäistä suunnittelua, näppärää etusivun koodausta ja vaikuttavaa back-end-ohjelmointia, jotka kaikki työskentelivät hyvin yhdessä, jotta se saatiin onnistumaan. Lyhyesti sanottuna ihanteellinen New Media Campaigns -hanke. Olemme tehneet useita räätälöityjä sovelluksia ja verkkosivuja korkeakouluille ja yliopistoille – mukaan lukien useita UNC:lle, kuten energiapalveluille, geologian laitokselle ja yrittäjyyden sivuaineelle – joten tämä sopi meille mainiosti.

All the Sudden We’re Hungry Students Again

Projektiryhmällä kävi tuuri tämän projektin kohdalla: Muistimme kaikki selvästi sen tuskan, joka aiheutui siitä, kun nousimme luokasta, kävelimme ruokalaan ja huomasimme, että se oli kiinni. Tai vielä pahempaa, kun maksoimme ateriasta vain huomataksemme, ettei tarjolla ollut vaihtoehtoja erityisruokavalioon liittyville rajoituksille. Tiesimme siis hyvin ongelman, jonka UNC Dining halusi ratkaista. Ratkaisu koostui kolmesta osasta: verkkosivusto, mukautettu menu & hours -verkkosovellus ja toinen mukautettu sovellus live-menunäyttöjä varten.

Verkkosivuston oli näytettävä supermodernilta nuoremmalle yleisölle, ja sen oli oltava helposti ylläpidettävä ja nopeasti ladattava. Se on rakennettu HiFi:llä, huiman nopealla ja loputtomasti konfiguroitavalla sisällönhallintajärjestelmällä. Menu & hours -sovelluksen osalta totesimme nopeasti, että sen ohjaava tarkoitus oli vastata näihin kolmeen kysymykseen UNC Chapel Hillin opiskelijoille, henkilökunnalle ja tiedekunnalle:

• Mitä on auki nyt (tai myöhemmin)?
• Mitä ruokalistalla on?
• Voinko nähdä ainesosat?

Viimeiseksi halusimme nähdä käyttäjäkokemuksen loppuun asti, mikä tarkoitti varsinaisen paikan päällä olevan ruokalistan sitomista. UNC:n ruokasaleissa on suuret LCD-näytöt, joilla näkyy nykyinen ruokalista. Ratkaisumme oli ohjata nämä näytöt yksityisille verkkosivuille, joilla on mukautettu näyttö, jotta sivuston ylläpitäjät voivat päivittää kunkin aseman sisältöä yhtä helposti kuin jos kyseessä olisi verkkosivusto. Teimme siitä todella yksinkertaista, ja jokainen näyttö vastaa yksittäisen aseman, ruokasalin ja laajemman UNC Dining -brändin tyyliä. Valikkonäyttösovellus on rakennettu Scala-ohjelmointikielellä, ja se toimii kuin rasvattu.

Sitomalla yhteen kaikki kolme komponenttia pystyimme antamaan UNC:n ruokapalveluiden tiimille ratkaisun, jota he tarvitsivat vastatakseen kysymykseen ”Mitä on illalliseksi?”. Tulos: supernopea, helppokäyttöinen ja helposti ymmärrettävä verkkosivusto, joka vain toimii. Mainitsimmeko jo, että se on responsiivinen?

Osa 1: Verkkosivusto

Sisällön hallinta

Ensisijainen tavoitteemme oli vanhan sivuston olemassa olevan sisällön tarkastaminen. Mikä pysyy, mikä poistuu ja mitä voidaan parantaa? Alkuperäinen tietoarkkitehtuuri ei ollut hyvin suunniteltu, ja siellä oli useita erilaisia sisältöjä, joita asiakkaan piti hallita. Sivuston sisältömalleja olivat mm:

• Yksinkertaiset tietosivut, kuten Tietoa meistä, Ravintotiedot tai Ateriapalvelut
• Tietosyötteet, joissa oli useita kohteita, kuten Uutisblogi tai Tapahtumakalenteri
• Erikoissivut, kuten Ateriasuunnitelmat
• Interaktiiviset lomakkeet, kuten Ota yhteyttä
• Ja tietysti ruokalista & tuntisovellus

Yksi haasteeksi uuden sivuston tietosuunnitteluosiossa muodostui se, miten käsitellä syvälle sisäkkäistä sisältöä. Joskus tiedot on ryhmitelty ryhmään ryhmään ryhmään ryhmään ryhmään, ja se voi tehdä navigointivalikoista nopeasti sekavia ja vaikeasti käytettäviä. Otetaan esimerkiksi valikko- ja kellonaikasovellus, jossa meidän oli suunniteltava näytön käyttöliittymä käsittelemään viittä peräkkäistä rakeista tietoryhmää: Sijainnista (vaikkapa ”Ram’s Head Dining Hall”) ateriaan (”Lunch”), yksittäiseen asemaan (”Pizza Bar”), ruokalajiin (”Buffalo Chicken”) ja lopuksi ainesosaan (”Wheat flour”). Jos tämä kuulostaa monimutkaiselta, se on sitä. Mutta tiimimme ratkaisi sen tyylikkäästi.

Hifi-ratkaisumme

Ratkaisumme piti tehdä helpoksi porautua koko menusovelluksen puuhun asti sekä päivittää ja luoda konenttisivuja oikeaan paikkaan. Ja koska rakensimme verkkosivuston HiFi:n avulla, se on helppoa, koska jokainen näistä sisältömalleista sisältyy oletuksena. Uutisblogi, tapahtumakalenteri, yhteydenottolomakkeet ja perustietotyypit ovat kaikki mukana. Ohjauspaneelista käsin navigointihierarkia on selkeä, ja jokainen eri sisältötyyppi on helppo lisätä yhdellä napin painalluksella.

Asiakas käyttää HiFi:tä päivittääkseen ruokalistatietoja, julkaistakseen tulevia tapahtumia, päivittääkseen henkilökunnan profiileja ja laatiakseen opiskelijoille erityisiä oppaita, kuten miten suunnitella aterioita ja miten välttää tiettyjä allergeeneja. UNC Dining on yhtä lailla ruoan tarjoilua opiskelijoille kuin opetusta: palveluksessa on rekisteröity ravitsemusterapeutti, joka koordinoi toimintaa UNC Campus Health Servicesin kanssa varmistaakseen, että ateriat ovat terveellisiä, ja neuvoakseen opiskelijoita, joilla on erityisruokavaliotarpeita. Akateeminen menestys liittyy läheisesti hyvään ravitsemukseen ja terveellisiin elämäntapoihin, joten on tärkeää, että sivuston ylläpitäjät voivat käyttää sivustoa tarkan, ajantasaisen ja & käytännöllisen ravitsemustiedon julkaisemiseen.

Suunnittelun lähestymistapa

Vanha ulkoasu kärsi tyypillisistä puutteista, joita näemme verkkosivuissa, jotka tulevat meille uudelleensuunnittelua varten:

• Ei ulkoasuruudukkoa: Sivun elementit on järjestetty ja mitoitettu sattumanvaraisesti
• Puutteellinen visuaalinen hierarkkisuus: on epäselvää, minne silmän pitäisi mennä, ja otsikoita ei voi erottaa rungon tekstiosasta
• Ei ilmiselviä kehotuksia toimintaan: kävijä ei vain tiedä, mitä lukea, hän ei myöskään tiedä, mitä tehdä tai klikata
• Valkotilan puute: teksti ja sisältölaatikot tarvitsevat ”hengähdystilaa”, jotta silmä voi erottaa ne toisistaan näkökentässä
• Värimaailman värivalikoima on ankea: vaimeat siniset ja harmaat sävyt hallitsevat sitä, minkä pitäisi muutoin olla värikäs ja eläväinen aihe (herkullinen ruoka!)
• Höperö typografia: tavallisten, oletusarvoisten fonttien käytön lisäksi rivien keskimääräinen pituus ja kappaleiden välit vaikeuttavat lukemista

Ennen & Jälkeen: Vanha sivusto ei käyttänyt tilaa kovin hyvin eikä keskittynyt tehtäviin tai sisältöön, joista kävijät ovat eniten kiinnostuneita

Kaiken tämän lisäksi vanha sivusto latautui hyvin hitaasti eikä sitä ollut optimoitu mobiililaitteille. Tehtävämme ei ollut ainoastaan käsitellä kutakin näistä suunnitteluun liittyvistä näkökohdista, vaan myös tehdä se tavalla, joka sopii pääasialliselle yleisölle: modernille ja nuorekkaalle. Tuloksena syntyneellä suunnittelumotiivilla on nämä ominaisuudet:

• Suuret, lihavoidut otsikot
• Yksiselitteiset toimintakutsut
• Yksikertaiset, modernit muodot (neliöt ja suorakulmiot)
• Ei tarpeettomia varjostuksia tai tekstuureja
• Liberaalia valkotilaa

Tämän lisäksi, tiimimme suunnitteli käyttöliittymän niin, että se tuntuisi kotoisalta näytöllä, niin kuin tietokoneen ohjelma tai sovellus käyttää koko kiinteän tilan. Toisin sanoen sen sijaan, että design olisi sidottu arbirtray-”sivun” leveyteen, se on sekä koko näytön kokoinen että reagoi eri laiteympäristöihin: uusi UNC Dining -sivusto on yhtä luontevasti kotonaan laajakuvanäytöllisellä pöytänäytöllä kuin kannettavalla tietokoneella, tabletilla tai puhelimellakin.

Linkit ovat ilmiselviä ja helposti napautettavissa. Osioissa ja tekstissä on selkeä, hyvin määritelty hierarkia. Yksittäisiä uutisia ja artikkeleita on miellyttävä lukea pitkään. Ulkoasu ulottuu koko sen näytön leveyteen, millä tahansa näytöllä sitä katseletkin. Siinä käytetään samoja (Carolinan) sinisiä ja harmaita sävyjä kuin alkuperäisessä paletissa, mutta niitä tasapainotetaan suurten, teräväpiirtoisten ja värikkäiden valokuvien kanssa. Navigointi on hyvin järjestetty, vuorovaikutteinen ja piilotettu paitsi silloin, kun sitä halutaan. Hienovaraiset animaatiot välittävät herkkyyttä ja omituisuutta. Kokonaisvaikutelma on painottaa suoraan sisällön rikkautta.

Driven by Action

New Media Campaigns käyttää filosofiaa nimeltä ”Action Driven Design”. Tämä tarkoittaa, että lähestymme jokaista web-projektia kääntämällä tyypillisen kysymyksen ”Miltä sen pitäisi näyttää?” muotoon ”Mitä sen pitäisi tehdä?”. Se pakottaa meidät miettimään tarkkaan, mitä toimia ihmiset tulevat sivustolle tekemään. Se on usein niinkin helppoa kuin keskittyä sivuston yhdestä kolmeen tärkeimpään tavoitteeseen. UNC Diningin tapauksessa se oli kristallinkirkas:

1. Mitä on avoinna ja mitä siellä voi syödä?
2. Mitä tapahtuu näinä päivinä?
3. Mitä ateriasuunnitelmani kattaa?

Työskennellessäsi tästä taaksepäin huomaat, että kaikki kolme toimintoa ovat etusivun tärkeimpiä visuaalisia elementtejä, ja että ne ovat se, mistä useimmat kävijät ovat kiinnostuneita. Niiden takana on kuitenkin runsaasti sivustotietoa: tietoja ateriasuunnitelmista, ateriapalveluista ja jopa UNC Diningin sitoutumisesta kestävään kehitykseen, jotka kaikki ovat helposti saatavilla interaktiivisesta valikosta. Klikkaamalla tai napauttamalla pääset heti käsiksi kaikkeen sivuston sisältöön yhdellä silmäyksellä.

Sosiaalinen media

UNC Dining ottaa viestintäkanavansa vakavasti. Se ei vain julkaise usein viestejä Twitterissä, Facebookissa ja Instragramissa, vaan koordinoi viestinnän kaikilla kolmella alustalla. Tämä tarkoittaa, että seuraajat saavat johdonmukaisen toimituksellisen kokemuksen riippumatta siitä, mitä mediaa he suosivat.

Etusivulla olemme ottaneet käyttöön suoran syötteen kaikista kolmesta. Uusimmat Facebook- ja Twitter-päivitykset on vedetty sisään tekstinä ja Instagram-päivitykset suurina, laadukkaina valokuvina. Tämä on loistava tapa sekä vahvistaa mediatiimin ponnisteluja että tarjota etusivulle tuoretta, omaperäistä ja houkuttelevaa sisältöä. Suussa sulavia kuvia ruuasta ei ole pahitteeksi!

Käsityönä tehty koodi

Kuten kaikissa NMC:n verkkoprojekteissa, kirjoitamme koodin käsin. Näin varmistetaan, että se on kevyt ja ytimekäs (ei turhaa merkintää sivun painon lisäämiseksi), jotka optimoivat sivuston sivun hakukoneiden indeksointia varten. Se tarkoittaa myös sitä, että voimme pakata ja tallentaa sen välimuistiin etukäteen nopeuttaaksemme sivun esitysaikaa huomattavasti ja kiertää mahdolliset selainkohtaiset näyttövirheet (Internet Explorer on tunnetusti ongelmallinen). Lopuksi, UNC Dining toimii yhtä hyvin jättimäisellä pöytänäytöllä kuin kannettavalla tietokoneella, tabletilla tai puhelimella – jopa menu & hours -sovelluksella, joka reagoi välittömästi tarkoilla tiedoilla, kun kosketat ja pyyhkäiset.

Osa 2: Menu & Hours -verkkosovellus

UNC Diningissä on verkkosovellus, joka on suunniteltu vastaamaan yhteen kysymykseen: ”Minulla on nälkä. Mitä kampuksella on syötävää?” Suunnittelimme ja rakensimme Ruby on Rails -ohjelmistolla mukautetun ohjelmiston, joka tekee kourallisen asioita välittömästi ja automaattisesti:

• Noutaa nykyisen kellonajan
• Tarkistaa kellonajan UNC:n kampuksen kaikkien ruokapaikkojen tietokannasta
• Palauttaa luettelon siitä, mikä on juuri nyt auki
• Näyttää nykyisen, tarkan luettelon jokaisesta ruokalistalla olevasta tuotteesta
• Jokaiseen ruokalistalla olevaan tuotteeseen on merkitty täydelliset ravintoarvotiedot & allergeenitiedot yhdellä silmäyksellä

Jos se tarjoaisi pelkän tuon toiminnallisuuden, se olisi jo voitto. Mutta nopea hiiren (tai peukalon) vetäminen aikajanaa pitkin paljastaa muuttuvat tunnit ja vaihtoehdot reaaliajassa sitä liu’uttaessa, ilman viivettä. Koska ehkä olet utelias, mitä on tarjolla illalliseksi myöhemmin tänään. Ja välittömän kalenterivalitsimen avulla saat selville, mitä on aamiaiseksi ensi viikolla. Voit myös valita useita ateria-aikoja itse sijainnin pudotusvalikosta.

Osaatko erityisruokavaliota? Me huolehdimme sinusta sielläkin. Ruokalistasovelluksessa on allergeenisuodatin, jossa luetellaan yleiset epäilyttävät ruokalajit, kuten vehnä, maito, kala ja maapähkinät, ja jonka avulla voit sulkea pois listalta kaikki niitä sisältävät kohteet. Kohteet, joissa on kyseisiä allergeeneja sisältäviä ainesosia, näkyvät harmaina ja yliviivattuina. Parasta allergikoille on se, että sovellus muistaa valintasi joka kerta, joten sinun ei tarvitse valita sitä joka kerta.

Käyttötiedot

Olemme käyttäneet sovellusta vasta muutaman viikon, ja opiskelijat ovat ottaneet sen nopeasti käyttöön, kun he löytävät uuden sovelluksen. Sovelluksen käyttö on lisääntynyt joka ikinen viikko uuden verkkosivuston ja sovelluksen julkaisun jälkeen. Seuraamme jatkossakin tiiviisti, miten uusi muotoilu toimii, mikä on vain osa jatkuvaa suhdettamme UNC Diningin kanssa.

Osa 3: Menu-näytöt

Kokonaan uuden käyttäjäkokemuksen täydentämiseksi NMC suunnitteli ja toteutti digitaaliset ruokalistat paikan päällä. Ne toimivat valittujen ruokasalien jokaisella asemalla olevilla teräväpiirto-LCD-televisioruuduilla. Teimme tiivistä yhteistyötä UNC:n tietotekniikkahenkilöstön kanssa, jotta saimme suoran verkkosyötteen ja varmistimme, että kaikki toimii hyvin yhteen. Tavoitteenamme oli, että näyttöjä olisi yhtä helppo ylläpitää kuin muitakin verkkosivuja, mutta niiden näyttö olisi räätälöity, jotta hiiren kursorin kaltaiset asiat eivät näkyisi ja pilaisi illuusiota.

Tekninen neromme Kris Jordan hoiti räätälöidyn ohjelmoinnin (Scala-kielellä) ja integroi sen UNC:n olemassa olevaan näytönhallintajärjestelmään. Yksi tämän järjestelmän suurista parannuksista osastolla aiemmin käytössä olleeseen järjestelmään verrattuna oli se, että vanhoilla näytöillä, joiden oli toimittava Scalan sallimissa joustamattomissa malleissa, ei ollut enää paljon suunnittelurajoituksia, vaan niiden oli toimittava Scalan sallimissa joustamattomissa malleissa. Muutimme kuitenkin perusasetuksia, ja Scalan mallien käytön sijasta osoitimme jokaiselle näytölle yksilöllisen URL-osoitteen, minkä ansiosta pystyimme hyödyntämään nykyaikaisten selainten joustavuutta ja olemaan todella luovia näyttöjen suunnittelussa. Nyt jokainen näyttö on asetettu yksilölliseen URL-osoitteeseen, jolloin UNC voi hyödyntää uusimpia web-tekniikoita ja suunnittelun joustavuutta uusissa ulkoasuissa

Vain NMC

Ei moni web-yritys pysty toteuttamaan tällaista projektia. UNC Diningin uuden verkkosivuston ja räätälöidyn sovelluksen menestys on täydellinen esimerkki New Media Campaignsin ainutlaatuisista vahvuuksista, jotka yhdistyvät jokaisessa verkkoprojektissa.

Korkeakoulujen erityistarpeiden laajamittaisen tuntemuksemme lisäksi tämä projekti vaati ammattitaitoisen asiakassuhdetiimimme käytännönläheistä koordinointia, harkittua, hyvin jäsenneltyä sisältöstrategiaa & informaatioarkkitehtuuria, rohkeaa, omaperäistä ja tehokasta, toimintoihin keskittyvää visuaalista muotoilua, reagointikykyistä, laihaa, asiantuntevaa HTML-& CSS-käsin-koodausta sekä monimutkaista räätälöityä taustapuolen ohjelmointia. Kaikki toimitettiin aikataulussa ja budjetin rajoissa, nopeilla latausajoilla, ja se lanseerattiin ylistävien arvostelujen kera.

Olimme iloisia saadessamme tilaisuuden esitellä digitaalisia taitojamme UNC Dining -sivuston kanssa, eikä asiakas voisi olla enempää innoissaan. Miten NMC voi innostaa sinua? Ota yhteyttä jo tänään.