Pari vuotta sitten Vincitiin palkattiin ensimmäinen graafikko koodarilauman keskelle, ja siitä toiminta on laajentunut kokonaiseksi tiimiksi käyttöliittymäsuunnittelijoita ja graafikoita. Ilman kasvukipuja ja orastavia vatsahaavoja ei kuitenkaan olla selvitty.Kerromme miten Vincitissä graafikoiden ja koodareiden yhteistyö on kehittynyt. Monenlaisia työtapoja on kokeiltu – vaihtelevalla menestyksellä. Lisäksi annamme ideoita ohjelmistotaloille jotka harkitsevat omien graafikoiden palkkaamista.

1. KANNATTAAKO
GRAAFIKKO PITÄÄ
LEIVÄSSÄ?
Jukka Hietamäki & Antti Tolppanen

2. JUKKA HIETAMÄKI
• Passionate UI Designer Lahesta
• entinen lähettämötyöntekijä,
varastomies, 2 x webbi- / graafinen
suunnittelija
• vajaa 2 vuotta Vincitillä
• viimeaikoina lähinnä iOS-juttuja ja
brändiuudistusta
KETÄ NOI ON? ANTTI TOLPPANEN
• Passionate UI Designer Kuopiosta
• entinen mehutrukkikuski,
sisustusmyyjä, 2 x webbisuunnittelija
• reilu 2 vuotta Vincitillä
• viimeaikoina lähinnä ankankuvia ja
webbipalveluita
Kaleva, toukokuu 2011

3. Graafikko kannattaa pitää leivässään.
MISTÄ ME PUHUTAAN?
SPOILER
ALERT!
Ensimmäisten graafikoiden haasteista
insinööritalossa.
Mitä haasteista on opittu:
Miten haasteisiin on vastattu.
CC Image courtesy of incase on Flickr

4. Valmis!
PROJEKTI A
Kick-off
Valmis!
PROJEKTI B
Kick-off
PROJEKTI C
Kick-off
Valmis!
PROJEKTI D
Kick-off

5. MARSSITAHDISTA JA
-JÄRJESTYKSESTÄ
CC Image courtesy of PEOSoldier on Flickr

6. Toisinaan projekteja myydään leiskoilla.
Asiakkaalla on graafinen ohjeisto ja ”näkemys”
mitä valmiin tuotteen tulee olla.
Haaste:
MARSSITAAN VISUT EDELLÄ
MARSSITAHDISTA JA -JÄRJESTYKSESTÄ

7. • Mitä pidemmälle tuotetta on tehty, UI:n
korjaamisen kynnys ja kustannukset kasvavat.
• Ylikuormitetaan kaikkia.
• Päätelaitteiden guidelinet voivat muuttua
pitkien projektien aikana.
• Liian aikaisin ostetut lisenssit, etenkin fontit,
voivat tulla kalliiksi.
MITEN TÄMÄ ILMENEE ARJEN
TIIMELLYKSESSÄ?
MARSSITAHDISTA JA -JÄRJESTYKSESTÄ

8. Grafiikoiden vaatimukset saattavat muuttua
merkittävästi.

9. AN D ROID:
111 ikonia / graafista elementtiä x 4 x 4 = 1776
LDPI
MDPI
HDPI
XHDPI
MARSSITAHDISTA JA -JÄRJESTYKSESTÄ

10. UI-ratkaisuja miettiessä myös koodarit mukana.
– Tekniset rajoitteet ja mahdollisuudet sekä
budjetti rajaa suunnitelmia.
– Erilaisia näkökulmia – erilaisia ideoita.
– Perustellaan asiakkaalle ratkaisuja monelta
eri kantilta mietittynä > Palvelee asiakasta.
RATKAISUJA
MARSSITAHDISTA JA -JÄRJESTYKSESTÄ

11. Tosi raa’an tason konseptointi.
– paperiprotoilu > wireframet > moodboard
– Viivytetään visuaalisen linjan valitsemista
loppuun asti ja pidetään linja!!!1!
• Loppuun asti mietityt UI-speksit antaa
graafikolle työrauhan.
LOPULLINEN RATKAISU
MARSSITAHDISTA JA -JÄRJESTYKSESTÄ

12. ”Et joskus parempia ratkasuja niiltä kun itteltä,
et se on.. häirittee mut toisaalta tosi makee.
Et homma toimii.”
– Antti, keikari, uikkarisuunnittelija
MARSSITAHDISTA JA -JÄRJESTYKSESTÄ

13. RESURSOINTI,
ALLOKOINTI, ESTIMOINTI
JA MUITA TOSI HIENOJA VIERASPERÄISIÄ
INSINÖÖRITALOSSA OPITTUJA SANOJA
CC Image courtesy of bcndp on Flickr

14. Liikaa projekteja, liikaa koodareita,
liian vähän taidekoululaisia.
Usean päällekkäisen projektin takia hankala pitää
koodarit työssään.
Aikatauluttaminen tehtävä tiukaksi.
Haaste:
TÖIDEN KERÄÄNTYMINEN
CC Image courtesy of UCL Mathematical and Physical Sciences on Flickr

15. • Liian tiukka aikataulutus ei anna tilaa yllätyksille.
• Joutuu tekemään liian montaa eri projektia
saman päivän aikana.
• Keskeytellään. Halutaan pikaisia vastauksia
ongelmiin esim. kasvokkain tai Skypessä
• Oiotaan – ei välttämättä anneta riittävästi aikaa
jokaiselle hommalle.
MITEN TÄMÄ ILMENEE
TYÖNTEOSSA?
TÖIDEN KERÄÄNTYMINEN

16. • Tulee paha mieli, kun työn jäljellä ei voi
paukutella henkseleitä.
• Stressi > kiukuttelu > alkoholin väärinkäyttö
> häpeä > rappio. Tässä ollaan.
MITEN TÄMÄ ILMENEE
TYÖNTEOSSA?
TÖIDEN KERÄÄNTYMINEN

17. • Edetään sprintti kerrallaan > kaiken lähtökohta.
• Aikataulutetaan päiviä löyhästi
> vältetään oikomista.
• Hyväksytä kaverilla ennen lähettämistä
> vältetään huonoa työn jälkeä ja häpeää.
• UX-tiimin kasvaessa maanantaipalaverit.
• Tehdään projekteihin mahdollisimman vähän
kerrallaan.
KEVYITÄ RATKAISUJA
TÖIDEN KERÄÄNTYMINEN

18. TRELLO-RATKAISU

19. 1. Tehdään ominaisuuden UI design ennen kun
ominaisuuden kehitys alkaa.
2. Palaute devaajilta, mahdolliset korjaukset heti.
3. Kehitys, testaus.
4. UI review, graafikko tsekkaa ominaisuuden ja
tekee mahdolliset korjaukset designiin
nähtyään ominaisuuden livenä.
5. Toista 3-4 tarpeen mukaan.
RIIPIN LISTA™
MARSSITAHDISTA JA -JÄRJESTYKSESTÄ

20. Kuse kaikki aikataulut
TÖIDEN KERÄÄNTYMINEN
Ei oikomista. Ei kiireilyä.
Lykkäystä saa kun sitä pyytää.
Kukaan ei ole suuttunut.
Asiakkaan kanssa voi aina neuvotella.
VIIMEISET OLJENKORRET 1/2

21. Häikäise kaikki tyypit
TÖIDEN KERÄÄNTYMINEN
Todista, että graafikko kannattaa pitää leivässään.
> Palkatkaa lisää väkeä.
VIIMEISET OLJENKORRET 2/2

22. Laskutettava työ menee aina tietenkin edelle,
mutta mitä jos:
Haaste:
SISÄINEN NAKKISADE
Pitää tehdä joulukortit, lehti-ilmoitukset,
autoteippaukset, messumateriaalit…
Pitää toimia myynnin tukena.
Pitää tehdä uudet nettisivut.

23. “Hyötyjä on se että mun ideat saa
fyysisen muotonsa.”
– Johanna, ankkaemo, innostuja, HR-bossi
SISÄINEN NAKKISADE

24. • Sisäisiin töihin on monella mielipide ja
”näkemys”.
• ”Näkemys” ei löydy ennen kuin ensimmäinen
versio on tehty.
• Paljon korjauksia – usein aikataulu hyvinkin
tiukka.
• Täytyy olla turhan monen alan asiantuntija:
copywriter / AD / graafinen suunnittelija / tuotanto-AD /
painotuotesuunnittelija / www-suunnittelija / ”koodari”.
MITEN ILMENEE TYÖN
TIIMELLYKSESSÄ?
SISÄINEN NAKKISADE

25. SISÄINEN NAKKISADE
KOODIKOULU-TARRA
”ankka, uus logo, jotain koodaamiseen liittyvää,
’suoritin koodikoulun’ tai jotai, läppärin kanteen liimataa”

26. 6. ELOKUUTA 2012

27. “Aa ok. Hienoa. Ootteko yhtään miettiny
mitä sinne laitetaan?”
– Jukka, Pirkanmaan & Lahen komein, graafinen suunnittelija
“Mietittiin vähän sillee, että jos nyt alkuun tekisit
meille uudet nettisivut. Katsotaan niitä
asiakasprojekteja sitten.”
– Jarkko, Fat-Steve, myyntikeisari, UX-tiimin isä ja kummisetä
“No… En mä oikein osaa sanoa. Kyllä sä varmaan
tiedät paremmin, että mitä siellä vois olla…”

28. _v1.jpg

29. “Joo…Hei mut palveluita tuleekin neljä.
Ne on… Mietitään vielä. Mut neljä.”

30. _v2.jpg

31. _v2_2.jpg

32. “Tässähän on jo ihan ideaa!”
“Kai sinne nyt tulee se rekrysivusto?
Mulla on siitä ideoita!”
– Johanna, ankkaemo, innostuja, HR-johtaja
“Mut tästä puuttuu nyt edelleen se ostajan opas.
Ja tehdäänkö sittenkin single page…?”

33. _v8.jpg

36. “Ei siitä nyt kyllä tuu punaista.
Mennään vanhoilla väreillä. Joo.”

37. _v11.jpg

40. MAALISKUU 2013

41. “No nyt aletaan taas puskee niitä nettisivuja.
No tehdäänkö me nyt kuitenkin niistä
punamustat?”
“Hei mulla on sit ideoita siitä rekrysivustosta!”

42. _v12.jpg

46. LOKAKUU 2013

47. “Joo. Hyvä se on. Ulos vaan.”
– Pasi, johtaja, markkinointinakkikeisari, ideanikkari
“Tee niistä ihmisen näköisiä.”

48. _v14.jpg

53. “Kai sinne nyt tulee se rekrysivusto?!”
“Julkaistaan nyt, korjataan ja
lisäillään sitten.”
“Lisäillään sitten.”

54. • Vältetään raskaan työn aloittamista ennenkuin
kaikkia asiaa hämmentäviä on kuultu.
• Sitoutetaan myös muita sisäisiin duuneihin.
• Trelloon muutaman kysymyksen ”briiffilomake”.
• UX-tiimin viikkopalaverit > Nakit tasoihin.
• Vastuualueet > Kuka piirtää ankat.
RATKAISUJA
SISÄINEN NAKKISADE

55. TAISTELU
RESURSSEISTA
KOODI VS. KÄYTTÖLIITTYMÄ

56. “Eli koodaajan / project leadin näkökulmasta
ehkä vielä enemmän olis tarvetta tiiviimmälle
yhteistyölle UI-kuvia tehdessä tai jollekin
sellaiselle että pääsis jotenkin mukaan siihen
teidän luomisprosessiin.”
– Iiro, kiipeilijä, project lead, devaaja
KOODI VS. KÄYTTÖLIITTYMÄ

57. Budjetti tulee vastaan – ei varaa hiomiseen.
Ei varaa käyttää UI-suunnittelijaa.
Yhteistyö ei pelaa.
HAASTEET
KOODI VS. KÄYTTÖLIITTYMÄ
CC Image courtesy of epSos.de on Flickr

58. Toteutus ei ole kaunis tai käytettävä.
MITEN TÄMÄ NÄKYY ARJEN
HARMAUDESSA?
KOODI VS. KÄYTTÖLIITTYMÄ
MVP / VCP vs. MDP
(Minimum Viable Product = Very Crappy Product vs. Minimum Delightful Product)

59. Tiiviimpi yhteistyö
• UI-konseptin kirkastaminen kehittäjien kanssa
ennen kehitystyön aloittamista.
• Yhteisiä suunnittelupalavereja aina
tarvittaessa.
• Workshopit > mukana kehittäjä, visupoika,
UX-tyyppi, myyjä, asiakas.
RATKAISUJA
KOODI VS. KÄYTTÖLIITTYMÄ

60. VALMIS TUOTE ON
KOKO TALON
REFERENSSI
Ei siis pelkästään diplomi-insinöörin taidonnäyte
tai taidekoululaisen portfolion täyte.

61. KYLLÄ KANNATTAA.

62. Y H T E I S H E N K I
0
0,75
1,5
2,25
3
2011 2012 2013 2014
Graafikoiden määrä Vincitillä ja sijoitus GPTW:ssä
7. sija 6. sija 5. sija 1. sija

63. Y H T E I S H E N K I
“Graffa- ja käytettävyyspuolen hipsterit
monipuolistavat ja virkistävät kehitysilmapiiriä
muuttamalla sitä heterogeenisemmäksi.”
– Ville, kantrikukko, myyntimies

64. “...ekstrabonukset mahtavasta
huumorista!!!:)”
– Topi, hyvä jätkä, koodari
Y H T E I S H E N K I

65. Y H T E I S H E N K I
“On muutama sellainen hipsteri,
jolle voi naureskella ja vittuilla.”
– Juha, raju rakastaja, Team lead, koodari

66. Y H T E I S T Y Ö TA V AT
“On suoraan sanottu että millon ehtii katsoa
asiaa ja pysytty siinä aikataulussa, mikä on
projektin sujuvuuden kannalta varsin
merkittävä juttu.”
– Topi, hyvä jätkä, koodari

67. Y H T E I S T Y Ö TA V AT
“Tehdyistä ominaisuuksista saadaan
UI-suunnittelijan palaute heti -> voidaan
lyhentää palauteloopin kestoa ja täten
pienentää keskeneräisen työn määrä.”
– Juha, raju rakastaja, Team lead, koodari

68. PA LV E L L A A N A S I A K A S TA PA R E M M I N
“Usein päästään parempaan tulokseen
haastamalla ideoita ja ajatuksia eri
näkökulmista.”
– Ville, kantrikukko, myyntimies

69. PA LV E L L A A N A S I A K A S TA PA R E M M I N
“Aiemmin oli muistaakseni hieman
riskinä se, että projektissa oli yhtä
monta ilmettä kuin oli devaajiakin.”
– Mikko, pingiskunkku, Team lead, devaaja

70. “Ihan vitun kivaa!”
– Jarkko, Fat-Steve, myyntikeisari, UX-tiimin isä ja kummisetä

71. KYSYTTÄVÄÄ?
ANT TI TOLPPANEN
Passionate UI Designer
+358 44 416 9969
antti.tolppanen@vincit.fi
JUKKA HIETAMÄKI
Passionate UI Designer
+358 40 515 0031
jukka.hietamaki@vincit.fi
Linkedin →Linkedin →

72. KIITOS.