Ravintola Little Saigon

Nettisivujen suunnittelu  |  Copywriting  |  Webflow rakennus  |  SEO
Live sivusto
Little Saigon ravintola nettisivut

Tietoa projektista

Little Saigon on vietnamilainen ravintola, joka tuo vietnamilaisen kotiruoan ja ilmapiirin Helsinkiin. Little Saigonin missio on tarjota kodin tunne Suomeen muuttaneille vietnamilaisille opiskelijoille. Ravintolalla on huippuarvosteluja ja tyytyväisiä vakioasiakkaita, mutta nettisivut eivät täsmää heidän hyvään maineeseensa. Tehtäväni oli uudelleensuunnitella ja rakentaa Little Saigonille uudet nettisivut tutkimuksen ja uuden brändäyksen pohjalta, mikä kesti noin viisi viikkoa.

Ratkaistavat ongelmat

Selvitin Little Saigonin ongelmat tapaamisessa omistajan kanssa ja analysoimalla vanhoja nettisivuja. Yhdeksi ongelmaksi selvisi asiakkaiden hämmennys epäselvästä menusta, joka oli myös erilainen nettisivuilla ja paikan päällä. Epäselvän menun lisäksi nettisivuilla oli paljon ongelmia, jotka aiheuttivat käyttäjälle huonon käyttökokemuksen eikä käyttäjä tällöin ollut tarpeeksi vakuuttunut vieraillakseen ravintolassa. Lisäksi brändäys ei täsmännyt ravintolan arvoihin ja missioon eikä se ollut yhtenäinen nettisivuilla ja paikanpäällä. Tavoitteeksi tuli parantaa Little Saigonin auktoriteettia sekä luoda selkeä ja houkutteleva menu, mikä vähentäisi käyttäjien hämmennystä ja saisivat heidät luottamaan ravintolaan tullakseen sen asiakkaiksi. Näiden lisäksi tavoittelimme parempaa SEO:ta, jotta ravintola saisi enemmän näkyvyyttä.

Miten käyttäjästä vakuuttunut vieraillakseen ravintolassa?
Ravintolan tarina ja arvot esille
Ruoka, ravintola ja henkilökunta näkyviin
Tiedot ja kuvat ajankohtaisiksi
Menuun selkeät annostiedot
Moderni ulkoasu, joka täsmää brändiin
Tekstisisältö kohderyhmän ymmärrettävällä kielellä
Tuttavallinen tekstisisältö
Toimiva ja helppokäyttöinen nettisivu

Ratkaisu

Selkeän menun lisäksi tavoitteena oli rakentaa Little Saigonin auktoriteettia, mikä onnistuisi toteuttamalla Little Saigonin arvoihin ja missioon liittyvä ajankohtainen ja selkeä nettisivu. Yksi tärkeimmistä auktoriteetin rakentajista on nettisivujen hyvä käyttökokemus. Olin selvittänyt alussa ravintolan arvot ja mission, joten seuraavaksi lähdin selvittämään, mikä tekisi juuri Little Saigonin nettisivun käyttäjälle hyvän käyttökokemuksen.

Käyttäjätarinoita
“As a user I want to see restaurant’s allergens easily online so I can see if there is enough options for me to visit”
“As a user I want to hear restaurant’s story so I can feel connected to the restaurant”
“As a user I want to be able to pre-order from a restaurant so I can get my food fast”
“As a user I want to find restaurant’s location and opening hours easily so I can decide when to visit without frustrating”
“As a user I want to pre-order from a restaurant’s website so I can get my food fast”
“As a user I want to find restaurant’s location on shopping center’s map so I can navigate there easily”
”As a user I want to read websites in vietnamese, english or finnish so I can be able to understand the text”
“As a user I want to find prices from restaurant’s website so I can see if the prices are in my budget”
“As a user I want to find restaurant’s contact info easily so I can contact them without frustrating”
“As a user I want to see pictures of restaurant’s food before visiting so I can see if the food is good and authentic”
”As a user I want to see picures of vietnamese food in  restaurant’s menu so I can be able to understand what the unfamiliar food looks like”
“As a user I want to see pictures online of a restaurant so I can see if I like the athmosphere”

Käyttäjätutkimus

Minun täytyi tietää nettisivujen käyttäjien tavoitteet ja toiveet, jotta pystyisin luomaan heille hyvän käyttökokemuksen. Päätin kirjoittaa käyttäjätarinoita, jotta ymmärtäisin mitä toimintoja käyttäjä tarvitsee ja miksi. Kirjoitin käyttäjätarinat omistajan kanssa käyneen tapaamisen ja kilpailijoiden nettisivujen analysoimisen pohjalta. Keskeisiksi käyttäjän tavoitteiksi selvisi löytää nettisivuilta ajankohtainen tieto annoksista ja ravintolan yhteys- ja sijaintitiedoista. Koska kirjoittamani käyttäjätarinat kävisivät mihin tahansa ravintolaan, päätin selvittää syvällisemmän käsityksen Little Saigonin asiakkaiden tarpeista kyselylomakkeen avulla.

Brand guide

Kyselylomake

Toteutin käyttäjätutkimuksen kyselylomakkeella kuudelle osallistujalle, jotka olivat Little Saigonin asiakkaita. Kysymyksiin kuului esim. mitä he yleisesti toivovat löytävänsä ravintolan nettisivuilta, mistä asioista he tykkäsivät tai eivät tykänneet vanhoilla nettisivuilla ja mitä vanhoilta nettisivuilta puuttui heidän mielestään. Hyödynsin tutkimustuloksia käyttäjätarinoiden täydentämiseen ja käyttäjäpolun toteuttamiseen. Toteutin käyttäjäpolun, jotta ymmärtäisin tuloksista ilmi tulleita käyttäjän tarpeita syvällisemmin.

Rautalankamalli mobiilissa
Nettisivun raakalankamalliNettisivun raakalankamalli
Nettisivun raakalankamalliNettisivun raakalankamalli

Suunnitteluvaihe

Suunnittelin uusien nettisivujen pohjaksi sivustokartan ja yleiset sisällöt kullekin sivulle tutkimustuloksien pohjalta. Suurin osa netin käyttäjistä vierailee sivustoilla puhelimitse, minkä takia suunnittelin Little Saigonin sivujen rautalankamallin ja mockup-version ensisijaisesti mobiiliin. Tavoitteisiin liittyi mission kertominen, joten halusin korostaa sitä toteuttamalla missiosta kertovien tekstikappaleiden väliin liikkuvan logon, jotta käyttäjä olisi motivoituneempi lukemaan tekstien sisällöt. Menu on ravintolan nettisivujen tärkein sivu, joten suunnittelin siitä mahdollisimman selkeän tavoitteen mukaan ja lisäsin sille oman navigaation. Kun rautalankamalli oli valmis, lähdin suunnittelemaan nettisivujen visuaalista puolta. Toteutin Little Saigonille heidän arvojen (autenttinen ruoka, kaverillisuus, vietnamilaisuus) ja nuoren kohderyhmän mukaisen brand guide:n, jota hyödynsin lopulta nettisivujen lisäksi myös heidän paperillisen menun suunnittelemisessa.

Prototyypin testaus

Toteutin high-fidelity prototyypin Figmassa mockup:n mobiiliversiosta. Testasin uusien nettisivujen toimivuutta kuudella eri-ikäisellä käyttäjällä. Annoin heille tehtäväksi toteuttaa tiettyjä toimintoja ja lopuksi kertoa heidän käyttökokemuksestaan. Käytettävyystestauksesta tuli ilmi uusien nettisivujen helppokäyttöisyyden lisäksi muutama kehityskohta, jotka olivat kuitenki nopea korjata.

Mockup mobiilissa
Nettisivun mockupNettisivun mockup
Nettisivun mockup
Nettisivun mockupNettisivun mockup

Webflow rakennus

Rakensin uudet nettisivut Little Saigonin vanhojen nettisivujen pohjalle Webflow:hun, jotta he säilyttäisivät paikkansa Googlessa. Poistin vanhojen sivujen elementit ja aloitin rakentamisen tyhjältä pohjalta. Kun nettisivujen rakennus oli valmis, lisäsin lopulliset kuvat ja kirjoitin sivujen sisällöt omistajan ohjeiden ja toiveiden mukaan. Lopuksi lisäsin vuorovaikutusefektit, kuten logon animaatio sivua skrollatessa.SEO-asetuksiin tein vain pieniä muutoksia, koska suurin muutos SEO:ssa on nettisivujen rakenteessa ja sisällössä.

Lopputulos

Toteutin Little Saigonille heidän uudet nettisivut, joista asiakas ja nettisivujen käyttäjät ovat antaneet positiivista palautetta. Asiakas on lopputulokseen niin tyytyväinen, että päätti hyödyntää nettisivujen menua QR-koodin avulla ravintolassa paikan päällä. Vanhojen sivujen menusta hämmentyneet asiakkaat eivät ole enää kysyneet apua menun ymmärtämiseen. Tämä osoittaa, että uusien sivujen menu on tarpeeksi selkeä. Toteuttamaani brändäystä Little Saigon pystyy jatkossa hyödyntämään ravintolan visuaalisiin ratkaisuihin. SEO:n ansiosta nettisivut ovat toisella sivulla Googlessa hakusanalla “Vietnamilainen ravintola Helsingissä”. Vanhat nettisivut olivat samalla hakusanalla sivulla viisi.

Live sivusto

Hung Vuong, Little Saigon

"Palkkasin Niinan tekemään ravintolalleni nettisivut, joista tuli paremmat kuin osasin kuvitella. Niinan kanssa on helppo työskennellä. Hän on hyvin kuuntelevainen minun ideasta ja teki siitä paremman. Iso plussa. Hän on auttanut hyvin kehittämään ideoita ja se näkyi lopputuloksessa. Suosittelen Niinaa ehdottomasti."

Katso lopputulos