Kunnon reseptisivu
Sarjat: Paras digitaalinen palvelu, Paras käyttökokemus, Paras toteutus
Snellmanin uuden reseptipalvelun suunnittelussa ja toteutuksessa panostettiin liikkuvaan kuvaan ja käyttäjän mukana elävään reseptikokemukseen.
Kunnon reseptisivun lähtökohdat
Snellman halusi nostaa reseptisivustonsa uudelle palvelutasolle ja auttaa ihmisiä onnistumaan ruoanlaitossa entistä paremmin. Reseptit muodostavat noin 80 % Snellmanin sivuliikenteestä.
Verkko on myös täynnä reseptejä ja reseptivideoita. Tekstimuotoiset reseptit jättävät kuitenkin sijaa tulkinnalle ja perinteiset somevideoreseptit vaativat käyttäjältä nopeaa pause-sormen käyttöä. Videomuotoon visualisoitua, omassa tahdissa seurattavaa reseptipalvelua ei ollut tarjolla.
Tavoitteet
Uuden palvelun päätavoitteena oli tarjota elämyksellinen käyttäjäkokemus, jota seuraamalla ruuanlaitto olisi helppoa. Videosisällön tuli toimia ensisijaisesti mobiilissa koko ruudun kokoisena pystyformaatissa mutta skaalautua myös desktop-formaattiin vaakamuotoisena. Samalla haluttiin muodostaa pohja kuluttajaa palveleville sisällöille, joita olisi mahdollisuus jalostaa useisiin kanaviin ja formaatteihin.
Snellmanin brändin keskiössä on ajatus paremmin tekemisestä. Tavoitteena oli luoda parempi reseptisivu. Kuin itselle tehtäisiin.
Palvelumuotoilu ja strategia
Projekti alkoi työpajoilla, joissa määriteltiin uuden palvelun tarpeet, onnistumisen mittarit, ydinkohderyhmät, sekä miten voisimme tulevaisuudessa palvella Snellman.fi vierailijoita entistä paremmin.
Suunnittelimme ja kehitimme sivustoa yhdessä Snellmanin kanssa, keskittyen erityisesti mobiilikäytettävyyteen, interaktiivisuuteen ja visuaaliseen ilmeeseen. Halusimme auttaa Snellmannin asiakkaita tekemään arjestaan paremman. Helpomman.
Ennen julkaisua sivusto beta-testattiin Snellmanin työntekijöiden ja Snellmanin uutiskirjetilaajien kanssa, ja nauhoitimme kaikki sessiot Hotjarilla. Keräämämme palaute (n. 1500 vastausta) oli pääosin positiivista: sivusto todettiin sujuvaksi, visuaalisesti houkuttelevaksi ja käyttäjäystävälliseksi. Varsinkin aloittelevat kotikokit kokivat uudenlaiset, helposti vaihe kerrallaan katseltavat reseptivideot matalan kynnyksen keinona syventää kulinaarista osaamistaan.
Löysimme myös asioita jotka mielestämme olivat vaikuttaneet itsestäänselviltä ratkaisuilta, mutta osoittautuivat testikäytössä hankaliksi. Käyttäjätestauksen vastausten ja sessioiden nauhoitusten perusteella koonsimme oleellisimmat ja useiten toistuvat havainnot yhteen nippuun, ja näiden perusteella viilasimme yksityiskohdat kuntoon ennen varsinaista julkaisua.
Käyttäjäkokemus
Keskityimme käyttäjän polun eri vaiheissa helpon navigoinnin lisäksi ydinviesteihin, informaatioarkkitehtuuriin, käyttäjien sitouttamiseen ja vuorovaikutukseen.
Käyttäjätarinat, jotka ohjasivat tekemistämme:
- Haluan löytää itselleni sopivan reseptin helposti
- Haluan löytää itselleni sopivat tuotteet ja tuotetiedot helposti
- Kun löydän mielenkiintoisen reseptin, haluan kokata sen helposti.
- Haluan tallentaa omat suosikkireseptini, ja jakaa niitä muille.
- Kun löydän mielenkiintoisen reseptin, haluan lisätä siinä olevat raaka-aineet ostoslistalle, jonka voin jakaa myös muille.
Lisäksi halusimme tarjota vierailijoille keinon tehdä sisällön selaamisesta dynaamista ja mielenkiintoista painottamalla liikkuvaa kuvaa ja helppoa käytettävyyttä.
Design-työtämme ohjasi käytännönläheisyys. Kun ensimmäinen prototyyppi videoresepteistä oli koodattu, siirryimme keittiön puolelle ja kokkasimme reseptit itse. Iteroimme ratkaisua saadun palautteen perusteella (“Vaikea vaihtaa reseptin vaihetta kun kädet on valkosipulissa!”), ja seisomme lopputuloksen takana ylpeinä.
Käytettävyys mobiilissa
Reseptipalvelun suunnittelussa kiinnitettiin erityistä huomiota käyttökokemukseen mobiililaitteilla.
Suunnittelimme muun muassa mobiilinäkymän alalaitaan navigaatiota ja käyttöä helpottavan alapalkin, joka helpottaa esimerkiksi ostoslistan kokoamista sekä reseptin jakamista – ja todennäköisesti myös keittiössä mukana kokkaamista.
Eli otimme käyttöliittymäsuunnittelulla haltuun reseptin koko kaaren.
Reseptivideot pyörivät mobiilinäkymässä selkeässä kokoruututilassa, mikä helpottaa ohjeiden seuraamista eri kokoisilla päätelaitteilla.
Toteutus ja käytetyt teknologiat
Palvelu toteutettiin Wordpressillä, sillä se helpotti vanhan sisällön migraatiota uudelle alustalle. Tuttu sisällönhallintajärjestelmä helpotti lisäksi siirtymistä uuteen sivuun, eikä vaatinut esimerkiksi asiakkaan työntekijöiden ylimääräistä koulutusta.
Wordpressiin saatiin lisäksi toteutettua helposti rajapinta Snellmanin käytössä olevan tuotteen elinkaarijärjestelmän (PLM) kanssa, mikä auttaa saumattomassa tietojensiirrossa ja esimerkiksi tuotetietojen oikeellisuuden varmistamisessa. Esimerkiksi reseptien raaka-aineiden ravintoarvot tulevat suoraan tästä järjestelmästä. Systeemi mahdollistaa myös paremman löydettävyyden sekä resepteille että tuotteille, sillä käyttäjä pystyy hakemaan sisältöä laajalla parametrien skaalalla – esimerkiksi allergiat huomioiden.
Tämä säästää pitkässä juoksussa runsaasti työaikaa sekä toimiston että Snellmanin puolella.
Sisällöntuotanto
Aloimme kehittämään Snellmanin verkkosivujen visuaalisuutta yhdessä uusien sivujen kehittämisen kanssa. Data kertoi, että ruokakuvissa toimii herkullinen yksinkertaisuus ja selkeys. Halusimme visuaalisella korostaa Snellmanin keskeisimpiin kuuluvaa bränditunnusta, vihreää väriä, mahdollisimman hyvän tunnistettavuuden ja erottuvuuden varmistamiseksi.
Reseptien suunnitellussa yhdistyvät Googlen ruokahakutrendien huomiointi ja ruokatoimittajan asiantuntemus. Toteutamme Snellmanille kuukausittain uusia reseptivideoita ja brändikuvia, joita voidaan hyödyntää myös esimerkiksi printissä, Metassa ja Tiktokissa. Uudessa vaiheittain selattavassa, kokoruudun videoformaatissa tuottamiamme reseptejä löytyy Snellmanin sivuilta jo yli 80 kappaletta ja luku kasvaa muutamalla reseptillä joka kuukausi. Spiikatut ja koostetut versiot reseptivideoista ovat sivuston lisäksi jatkaneet elämäänsä mm. myös Tiktokissa, jossa ne ovat lyhyessä ajassa keränneet satoja tuhansia katselukertoja.
Yhteenveto
Snellmanin uusi reseptisivusto on esimerkki innovaatiosta, käyttäjäystävällisyydestä ja mobiilioptimoinnista. Se ei vain palvele nykypäivän käyttäjiä, vaan asettaa uuden standardin reseptisivustoille, yhdistäen teknologian ja luovan suunnittelun tuottamaan arvoa sekä yritykselle että sen asiakkaille.
Avainlukuja:
1500
käyttäjätestausta
80+
vaiheittain selattavaa reseptivideoa
34K
Videoreseptinäyttöä kuukaudessa
206K
kävijää kuukaudessa
Verkkosivuprojektit ovat alttiita lumipalloefektille ja laajenemaan edetessään. Genero osoitti suurta joustavuutta sisällyttäessään uusia ideoita, joita keksimme matkan varrella. Olemme nyt iloisia siitä, että meillä on sivusto, joka on parempi ja toiminnallisempi kuin alun perin saatoimme edes kuvitella. Uskomme, että se kestää aikaa ja tarjoaa pohjan uusille ideoille. Ja mikä tärkeintä: voimme nyt tarjota kuluttajille kattavampaa tietoa tuotteistamme, kun taas uusi reseptisivun muoto tekee herkullisten ruokien valmistamisen kotona helpoksi käyttäjille.
Tommi Fors, Marketing and Communications Director, Snellmanin Lihanjalostus Oy
Työn tiedot
- Palvelun nimi: Snellman.fi
- Suunnittelutoimisto: Genero, DNM13 Revolution Oy
- Tuotantoon osallistuneet tahot: Genero
- Asiakas: Snellman Lihanjalostus Oy
- Grand One -sarja: Paras digitaalinen palvelu, Paras käyttökokemus, Paras toteutus
- Sivuun voit tutustua osoitteessa: snellman.fi