Projektin loppuraportti

1. Johdanto

Tämä loppuraportti käsittelee Pengwin Media -virtuaaliyrityksen toimeksiantoa ja muita tehtäviä WIMMA Labissa vuonna 2021.

Toimeksiantajan roolissa toimi kesän alkupuolella Paavo Nelimarkka, ja myöhemmin työskentelimme ilman toimeksiantajaa. Lisäksi Kari Pitkäniemi ja Marko "Narsu" Rintamäki toimivat projektityöskentelyn tukena, ja Teemu Kontio avusti tiimiä haastavissa teknisissä ongelmissa.

Projektiryhmä koostui kuudesta Jyväskylän ammattikorkeakoulun tieto- ja viestintätekniikan opiskelijasta:

Nimi	Rooli	Vastuualueet
Annukka Rajala	Tiiminvetäjä, web-kehittäjä, UI-suunnittelija, graafikko	Sisäinen ja ulkoinen viestintä
Roope Huttunen	web-kehittäjä
Eliel Taskinen	web-kehittäjä	Sosiaalinen media
Janna Niemi	web-kehittäjä, UI-suunnittelija, graafikko
Tatu Seppänen	web-kehittäjä, testausautomaatio	Tietoturvavastaava
Sari Kumpulainen	web-kehittäjä, testausautomaatio

2. Tehtävä, tavoite, tulokset

2.1. Yhteenveto projektin toteumasta

Pengwin Median päätehtävänä oli toteuttaa WIMMA Labin brändiuudistus ja uudet nettisivut. Lisäksi tehtävänämme oli päivittää somekanavia ja konsultoida tarvittaessa muita tiimejä koodaamisessa, käyttöliittymäsuunnittelussa sekä graafisessa suunnittelussa.

Kesän työskentely voidaan jakaa karkeasti kahteen jaksoon: Avoimiin oviin valmistautumiseen ja Avointen ovien jälkeen aloitettuun Next.js-projektiin. Molemmilla jaksoilla oli omat tavoitteensa ja haasteensa. Avoimet ovet sijoittuivat noin kuukauden päähän projektin alusta, joten aikaa tavoitteiden suorittamiseen oli rajallisesti. Avointen ovien jälkeen aikaa oli hieman enemmän, minkä ansiosta suurempien tavoitteiden asettaminen oli mahdollista.

Ennen avoimia ovia

Kesän työskentely alkoi WIMMA Labin brändin päivittämisellä. Brändiuudistus tehtiin nopealla aikataululla, jotta päivitettyä brändiä voitaisiin hyödyntää Avointen ovien markkinoinnissa ja nettisivujen päivityksessä.

Ennen Avoimia ovia tärkeimpänä tehtävänä oli saada mahdollisimman nopeasti aikaan staattiset verkkosivut WIMMA Labille, virtuaaliyrityksille sekä itse Avoimet ovet -tapahtumalle. Sivut suunniteltiin niin, että samasta pohjasta voitiin helposti luoda sivut jokaiselle tiimille. Käytimme yksinkertaisia teknologioita (HTML ja CSS), jotta kaikki tiimiläiset pääsisivät osallistumaan koodaamiseen mahdollisimman matalalla kynnyksellä, eikä aikaa kuluisi ylimääräiseen teknologioiden opetteluun. Valokuvasimme kaikki WIMMA Labin tiimit ja osallistujat nettisivuja varten.

Staattisten väliaikaisten sivujen päätarkoituksena oli esitellä kuvaavasti ja kattavasti virtuaaliyritysten suunnitelmia loppukesälle. Halusimme tuoda myös paremmin esiin virtuaaliyritysten jäseniä. Koska WIMMA Lab järjestettiin etänä, "tekemisen näkyväksi tuominen" koettiin tärkeäksi.

Vastuullamme oli sosiaaliseen mediaan postaaminen ja WIMMA Labin sekä Avointen ovien markkinointi. Postauksia varten tarvitsimme kuvia, joten useampi tiimiläinen valokuvasi yhteisiä tapahtumia ja otti screenshotteja Teams/Zoom-kokousten aikana.

Avointen ovien jälkeen

Avointen ovien jälkeen oli uusien nettisivujen suunnittelun vuoro. Suunnittelussa käytettiin apuna Figma mockup-työkalua, jolla luotiin karkeat mallit sivuista koodaustyön helpottamiseksi. Yksityiskohtien suunnittelussa oltiin joustavia ja suunnittelua tehtiin eteenpäin samalla kun valmiiksi suunniteltuja osia sivusta oltiin jo koodaamassa.

Aloitimme suunnittelun rautalankamalleista, joihin sijoittelimme sisältöosioita ja tekstejä paikalleen. Sitä mukaa kun tarvittavat sisältöosuudet alkoivat hahmottua, kirjoitimme niiden sisältöjä puhtaaksi ja käänsimme niitä suomeksi ja englanniksi. Myös lopullisen visuaalisen ilmeen suunnasta luotiin oma Figma-mockup, jota sovellettiin kaikille sivuille. Uudistuksessa haluttiin kiinnittää erityistä huomiota siihen, että uusi tyyli ja sisältö kuvaisivat osuvammin WIMMA Labia.

Tiimiläisiä kiinnosti Reactilla koodaaminen, joten uudet sivut toteutettiin Next.js:llä. Next.js on sovelluskehys, joka tekee Reactin käytöstä mielekästä myös perinteisemmissä nettisivuissa. Halusimme hyödyntää guides-osiossa markdown-tiedostoja, jotta sisällön päivitys olisi mahdollisimman helppoa ja vaivatonta, ja tällaisen ominaisuuden toteuttamiselle löytyi Next.js:stä tukea ja dokumentaatiota. Muita Next.js:n tarjoamia etuja ovat mm. kuvien automaattinen optimointi, tuki lokalisoinnille, hakukoneoptimointi ja nopeat latausajat.

Uuden verkkosivun tärkeimpiä ominaisuuksia:

• Lokalisaatio (suomi/englanti)
• Palvelee sidosryhmiä ja opiskelijoita
• Guides-osion automaattinen generointi markdown-kielestä
• Toimiminen Docker-kontista Kubernetes-alustan päällä
• WIMMA Labin uuden brändin mukaisuus
• Skaalautuvuus mobiililaitteille

Viimeisillä viikoilla toteutimme myös virtuaaliyritysten logouudistukset. Uudistusprosessi aloitettiin järjestämällä vartin juttelutuokio jokaisen virtuaaliyrityksen kanssa, jossa ideoita kerättiin virtuaaliselle whiteboardille. Näiden ideoiden pohjalta suunnittelimme ja toteutimme uudet logot Overflowille, Mysticonsille, IoTitudelle ja Pengwin Medialle. Käytimme logojen uudistuksessa Illustratoria ja Inkscapea.

2.2. Projektin onnistuminen (suunnitelma vs. toteutuma)

Työskentely aloitettiin toukokuun puolivälissä (17.5.2021) ja päätettiin heinäkuun lopussa (30.7.2021). Työskentely jaettiin sprintteihin, joista lähes kaikki olivat viikon pituisia. Ainoana poikkeuksena oli sprintti 05, jota pidennettiin kahteen viikkoon juhannusvapaiden vuoksi. Sprintit aloitettiin sprintin suunnittelulla ja päätettiin sprinttikatselmointiin. Katselmointi järjestettiin tiimiläisten kesken joko perjantaina iltapäivällä tai maanantaiaamuna. Työskentelyn edistymistä seurattiin GitLabin Kanban boardien avulla.

Sprintit onnistuttiin suunnittelemaan pääosin hyvin. Lähes kaikki sprinteille suunnitelluista taskeista saatiin suoritettua sprinttien aikana, ja mielekästä tehtävää saatiin lähes aina jaettua kaikille tiimin jäsenille. Kesän loppua kohden työn määrä ja haastavuus alkoi nopeasti kasvaa, joten myös taskeja jäi useampia hieman laahaamaan jäljessä, eikä työtaakka ollut enää niin tasaisesti jakautunut.

Tärkeimpänä tavoitteena oli uusien WIMMA Labin nettisivujen ja guides-osion toteuttaminen Next.js-sovelluskehyksellä, ja tämä tavoite myös saavutettiin. Muutamista ideoista, kuten erillisestä kontaktisivusta, staattisesti generoiduista Twiiteistä Twitter APIn avulla, sekä guides-osion pidemmälle viedystä tyylittelystä jouduttiin ajan puutteen vuoksi luopumaan.

3. Ongelmat

3.2. Ongelmat suunnittelussa

Avointen ovien jälkeisellä sprintti 04:llä tahti tuntui hidastuvan huomattavasti verrattuna Avointen ovien kiireisiin. Reactin opiskelu ennen Next.js-projektia koettiin tärkeäksi, joten ryhmäläiset opiskelivat itsenäisesti Full stack open -kurssin materiaaleja. Materiaalien koettiin selventävän hyvin Reactin perusteita, mutta pelkkä opiskeluun keskittyminen ei kuitenkaan loppujen lopuksi tuntunut ryhmäläisistä erityisen mielekkäältä tekemiseltä. Sprintistä jäi hieman epämääräinen fiilis, kun mitään konkreettista ei jokainen välttämättä saanut aikaan. Jatkossa sprinttisuunnittelussa kiinnitettiin huomiota siihen, että opiskelua ja "oikeaa tekemistä" pystyi jokainen ryhmäläinen vuorotella oman fiiliksen mukaan.

3.2. Ongelmat toteutuksessa

Monilla tiimiläisistä ei ollut paljoa aiempaa kokemusta Reactista. Next.js-sovelluskehys asetti tiimiläisille haasteita, sillä uuteen teknologiaan perehtymiseen oli aikaa hyvin rajallisesti.

Tietojen löytäminen sivujen historiaosuuteen oli työlästä, sillä aiemmin WIMMA Labin historiaa ei oltu koostettu sen tarkemmin yhteen paikkaan. Vanhemmat projektit oli dokumentoitu omiin dokumenttikansioihinsa, jotka löytyivät sieltä täältä ja niiden jäljittäminen vei paljon aikaa kesän alussa.

4. Yhteenveto

4.1. Keskeiset opit

• Verkkosivujen suunnittelu ja toteutus
  • Verkkosivujen skaalautuvuus eri laitteissa
  • Grafiikan ja logojen suunnittelua ja toteutusta
  • Illustrator, Inkscape
• Teknologiat
  • React
  • Next.js
    • Lokalisaation toteuttaminen kahdella kielellä
• Gitin käyttö
• LinkedInin käyttö
• Projektityöskentely sekä omassa ryhmässä että eri ryhmien välillä
• Markdownin automaattinen generointi JSX-muotoon ja markdown yleisesti
• Docker-kontit ja Kubernetes-alusta
• CSC:n-pilvipalvelualusta
• CI/CD pipelinet
• Testausautomaatio ja Robot Framework
• Twitter-upotuksen lisääminen verkkosivulle

4.2. Itsearviointi

4.2.1. Ryhmätyö

• Projektipäällikkyys: Team leader osallistui päivittäin järjestettävään palaveriin aamuisin, joissa käytiin läpi yleisiä ajankohtaisia asioita ja kerrottiin tiimien edistymisestä. Täältä saatu tieto välitettiin ryhmäläisille, jonka ansiosta tieto kulkeutui hyvin kaikille osapuolille. Ryhmällä oli päivittäin oma sisäinen daily, jossa käytiin läpi jokaisen edistymistä ja sitä mitä on tekemässä. Tämän ansiosta team leaderilla oli kokonaisvaltainen käsitys projektin senhetkisestä tilasta. Jos jollakin ryhmän jäsenellä ei ollut tiedossa, mitä lähtee seuraavaksi tekemään, ehdotettiin hänelle mahdollista tekemistä.
• Erilaisuuden hyödyntäminen: Ryhmän jäsenillä oli monipuolisesti erilaisia erikoistumisalueita: mm. kyberturvallisuus, ohjelmisto- sekä mediatekniikka. Ryhmän jäseniä oli useilta eri vuosikursseilta ensimmäisen vuoden opiskelijoista opintojen loppuvaiheessa oleviin. Projektin alussa kartoitettiin millaisia taitoja jokaisella on sekä mitä kesän aikana haluaisi tehdä. Ryhmän jäsenet pystyivät melko vapaasti vaikuttamaan siihen mitä kesän aikana tekivät ja miten. Kesän aikana oli myös mahdollista perehtyä asioihin, joista oli kiinnostunut muttei vielä ollut osaamista.
• Työnjako ja tehtävien hallinta: Tehtävien jakaminen ryhmän jäsenten kesken onnistui pääosin hyvin. Omiin tehtäviinsä pystyi vaikuttamaan omien vahvuuksien ja mielenkiinnon kohteidensa mukaan. Muutama Pengwin Median jäsenistä toimi myös osana muiden tiimien toimintaa ja tuki muita ryhmiä auttamalla koodauksessa tai toimimalla konsultointitehtävissä. Muiden ryhmäläisten tekemisistä ja kuulumisista oltiin perillä joka-aamuisten palaverien avulla, vaikka jotkin työtehtävät vaativat muissa tiimeissä toimimista.

4.2.2. Suunnitelmallisuus

Alussa varattiin yhteistä aikaa suunnittelulle, mutta projektin edetessä suunnittelu tapahtui pienemmissä osissa ja omien ehdotusten jakamisena päivittäisen palaverin jälkeen. Projektin edetessä suunniteltiin myös paljon hyödyntäen hahmottelutyökalua Figmaa, minne jokaisella tiimin jäsenellä oli oikeus mennä katsomaan, ehdottamaan ja muokkaamaan hahmotelmia.

4.2.3. Vuorovaikutus

Yhteydenpito sidosryhmiin

WIMMA Labin sisäinen kommunikointi tapahtui pääasiassa Discordin, Microsoft Teamsin ja Zoomin välityksellä. Ryhmä hyödynsi ulkoisessa viestinnässään eri sosiaalisen media kanavavia, mm. LinkedIniä ja Twitteriä.

Pengwin Media oli pääasiallisessa vastuussa WIMMA Labin sosiaalisesta mediasta. Ryhmä tuotti ja julkaisi sisältöä mm. Twitteriin, Instagramiin ja LinkedIniin. Toiset ryhmät olivat vastuussa sosiaalisen median päivityksistä viikon verran, jolloin he pystyivät kertomaan omasta projektistaan ja sen etenemisestä. He lähettivät julkaistavan materiaalin Pengwin Medialle, joka julkaisi postaukset eri sosiaalisen median alustoille.

Tiedonhankinta (toimeksiantajalta tiedon saaminen)

Ryhmällä ei ollut varsinaista toimeksiantajaa, mutta projektin alkuvaiheessa ryhmällä oli epävirallinen toimeksiantaja. Varsinkin projektin alkuvaiheessa kommunikointi oli tiiviimpää, sillä ryhmä tarvitsi sosiaalisen median käyttäjätilien tiedot sekä tietoa aikaisemmista WIMMA Labin toteutuksista. Vuorovaikutus epävirallisiin toimeksiantajiin hiljeni vähitellen avointen ovien jälkeen.