VAHVA BLOGI
Kuinka rakennan prototyypin?
Näin rakennat digitaalisen prototyypin, jonka vaikuttavuutta voit testata asiakkaillasi.

Vahva Partners
30. Toukokuuta 2020 • Lukuaika: 14min

Prototyypillä saat testattua lyhyelläkin aikajänteellä palvelusi tai tuotteesi vaikuttavuutta asiakkaisiisi. Rakentaminen alkaa ensiksi miettimällä ongelmaa, minkä ongelman aiot ratkaista? Prototyypin rakentaminen hyödyttää ennen kaikkea itseäsi jäsentelemään ajatuksiasi. Usein liiallinen ajattelu ja ventilointi ilman konkreettista prototyyppiä voi jopa kaataa idean etenemisen. Tässä syitä miksi prototyypin rakentaminen mahdollisimman aikaisessa vaiheessa on hyvä asia:
1. Nopea palaute ja mahdollisuus iterointiin
Mitä nopeammin pääset rakentamaan prototyypin ja testaamaan sitä oikeilla asiakkailla, saat hyvin nopeasti palautetta, onko tuotteellesi tai palvelulle kysyntää. Prototyyppiä rakentaessasi pystyt korjaamaan jo aikaisessa vaiheessa ongelmia, joihin saattaisit vasta törmätä paljon myöhemmin. Tämä säästää sinulta harmaita hiuksia ja ennen kaikkea…rahaa.
2. Prototyyppi kertoo enemmän kuin tuhat sanaa
Aikaisessa vaiheessa tulet kohtaamaan tilanteen, jossa joudut pitchaamaan tuotetta tai palveluasi lukuisille ihmisille, muun muassa rahoittajille, kumppaneille, ystävillesi tai vaikka rakkaalle vaimollesi, kun aiot ilmoittaa hänelle irtisanoutuvasi hyväpalkkaisesta päivätyöstäsi ja ilmoitat ryhtyväsi yrittäjäksi.
Kun sinulla on näyttää jotain konkreettista tuotteesta tai palvelustasi, edellämainitut henkilöt ymmärtävät ideasi paljon selkeämmin, kuin perinteinen pitchaus. Kuten vanha sanonta sanookin: “Kuva kertoo enemmän kuin tuhat sanaa”. Tässä vaiheessa voimme sanoa, että prototyyppi kertoo enemmän kuin kymmenen tuhatta sanaa.
3. Rahoittajien ja yhteistyökumppaneiden näkökulma
Rahoittajat ja tulevat yhtiökumppanisi arvostavat sitä, että sinulla on tuoda pöytään jotain konkreettista. Tämä viestii omaa ammattitaitoasi visualisoida ideoitasi ja todellista halukkuuttasi viedä tuotteesi markkinoille. Rahoittajat kohtaavat päivittäin yrittäjiä, joilla idea on pelkästään litania eri lauseita. Näyttämällä prototyyppiä ohitat saman tien 10 000 muuta yrittäjää, joilla heidän mukaan on päässään seuraava Google tai muu miljardiluokan bisnesidea.
Rakennusvaihe
Aloitetaan prototyypin rakentaminen rekisteröitymällä ilmaiseen prototyyppipalveluun Figmaan. Aloitetaan luomalla uusi tiedosto painamalla palvelun oikeassa yläkulmassa olevaa “+” merkkistä symbolia. Meille avautuu nyt alkunäkymä, jossa meillä on pelkkää tyhjä työalue, johon voimme alkaa rakentamaan prototyyppiä.

Vaihe 1: Mobiili, tietokone vai websovellus?
Tässä vaiheessa olisi viimeinkin hyvä saada päätettyä, aiotko rakentaa prototyypin mobiilille, työpöydälle vai jonkinlaiselle kombolle, eli websovellukselle. Aloitetaan tässä kirjoituksessa mobiiliversiosta, sillä nykyaikana suuri osa palveluista ovat mobile-first lähtöisiä. Valitsimme esimerkissä pohjaksi seuraavanlaisen pohjan käyttämällä frame-työkalua (F).

Vaihe 2: Elementtien lisääminen
Voimme alkaa lisäämään relevantteja elementtejä prototyyppiimme. Peruselementit kuten otsikko, leipäteksti, kuva, video, nappi on hyvä pitää nyt mielessä, sillä jokaisella elementillä on prototyypissä oma roolinsa. Aloitetaan lisäämällä otsikko prototyyppiin käyttämällä tekstityökalua (T), tähän kohtaan kannattaa miettiä kyseistä näyttöä kuvaava otsikko, joka tietty riippuu palvelustasi.
Leikitellään ajatuksella, että olemme rakentamassa käytettyjen vaatteiden kauppapaikkaa, jossa yksityishenkilöt voivat myydä vaatteitaan. Nimetään otsikko “Discover” sivuksi.

Seuraavaksi voimme lisätä palvelumme päätuotteen, eli myytävät tuotteet käyttämällä Rectangle-työkalua (R). Näin saamme yksinkertaisen laatikon piirrettyä prototyyppiimme.
Voimme muokata laatikon ominaisuuksia kuten leveyttä (W), korkeutta (H), reunojen pyöristystä (Corner Radius), täyttöväriä (Fill) palvelun oikeassa reunassa olevasta työkalupalkista.

Voimme täyttää laatikon millä tahansa kuvatiedostolla. Käytämme tässä esimerkissä Unsplash-kuvapankkia, josta voit jatkossa hakea vapaasti käytettävissä olevia kuvia. Kuvan liittäminen onnistuu yksinkertaisimmillaan valitsemalla laatikko ja liittämällä kopioitu kuva sen päälle (CTRL+V). Lisäsimme vielä hieman reunojen pyöristystä vetämällä laatikon reunoissa olevia palluroita.

Seuraavaksi voimme lisätä esimerkiksi tekstielementtejä, kuten tuotteen nimi, myyjän nimimerkki ja hinta, jotta laatikkomme olisi mahdollisimman informatiivinen käyttäjälle.

Vaihe 3: Prototyypin julkaiseminen
Onnittelut! Rakentamasi prototyyppi alkaa konkretisoitumaan. Onneksi Figman sisäänrakennettu testaustyökalu mahdollistaa prototyyppisi esikatselun nettiselaimessasi, joten et tarvitse mitään erityisiä ohjelmia prototyypin näyttämiseen. “Share” napista pystyt jakamaan prototyyppisi kenelle tahansa linkin saaneelle testattavaksi. Oikealla puolella olevasta “Play” napista pystyt itse testaamaan prototyyppiäsi.

Prototyypin rakentaminen ei kuitenkaan pääty siihen, että olet saanut rakennettua ensimmäisen vedoksesi. Tarkoituksena on kerätä paljon tietoa tuotteen käytettävyydestä ja iteroida prototyyppiä kerätyn asiakaspalautteen myötä. Tarkoituksena on saada vietyä prototyyppiä mahdollisimman pitkälle hiotuksi niin sanotun palautesyklin kautta. Pidä siis iteraatio-asiakaspalaute sykli mahdollisimman lyhyenä, jotta pystyt reagoimaan nopeasti käyttäjätestauksen havaintoihin.
Ota yhteyttä
Mikäli mietit prototyypin rakentamista, etkä tiedä mistä aloittaa, me kyllä ratkaisemme asian.
Yhtiömme panostaa sataprosenttisesti asiakkaittemme liiketoiminnan kasvuun. Yli 50 vuoden kokemuksella voimme luvata, että kuuntelemme oikeasti asiakkaitamme. Siitähän meille maksetaan.