Joinexin brändiuudistus: Kohti vahvempaa brändiä

Design • Yrityskulttuuri

Joinex uudisti brändiään lähtökohtina päivittää ilme 2020-luvulle, luoda kiinnostavat verkkosivut ja tuoda suuremmalle yleisölle esiin se, mitä Joinex todella on. Uudistuksen perustan luo Joinexin jo olemassa oleva yrityskulttuuri.

Laadukas ja nykyaikainen sisältö uskottavuuden mittarina

Viime vuosisadalla alkoi kulttuurimme visualisoituminen, kun uusien medioiden, kuten elokuvan, tv:n ja internetin, myötä kuvien määrä moninkertaistui. Nykypäivänä kuviin keskittyvän sosiaalisen median arkistumisen myötä jokainen henkilöbrändää itseään tietoisesti tai tiedostamatta somepresenssillään.

Yritykset eivät ole muutoksen mukana tuomista vaatimuksista irrallisia, vaan myös yritysten tulee tuottaa visuaalisesti miellyttävää ja laadukasta sisältöä ollakseen uskottavia. Siksi myös Joinex halusi kirkastaa visuaalista ilmettään ja laajemmin brändiään, mikä näkyy konkreettisimmin verkkosivujen uudistuksena.

Joinexin verkkosivut ennen ja jälkeen.
Brändin uudistus näkyy konkreettisimmin verkkosivujen uudistuksena.

Brändin peruspilareiksi jo olemassa olevat ydinarvot

Visuaalisen ilmeen merkitys on yleisesti ottaen helppo ymmärtää, koska ilme näkyy selkeästi ulospäin esimerkiksi verkkosivuilla ja markkinoinnissa. Joinexinkin tarve uudistua lähti nimenomaan verkkosivujen tyylistä ja logosta, jotka oli saatava vastaamaan orastavan 2020-luvun tarpeita.

Visuaalinen ilme on kuitenkin vain yksi brändiä rakentava tekijä, ja itse brändi on logoa ja iskulausetta paljon laajempi asia. Brändi on kaikkea sitä mitä yritys todella tekee, kuten toimintatapoja, arvoja, visioita, työkulttuuria ja tuotteita. Siksi kirkastaakseen visuaalista ilmettä tulee olla selvillä siitä, mitä oikein halutaan kirkastaa.

Brändäykseen suhtaudutaan yhä paikoitellen varauksella – ja ihan ymmärrettävästi. Brändäys on tarkoittanut pitkään sliipattuja stock-kuvia ja ylhäältä päin asetettuja strategioita, joissa luetellaan arvoja, joiden takana yhteisön tulee seisoa. Monesti kuulee puhuttavan brändin luomisesta, mikä on omiaan vahvistamaan mielikuvaa siitä, että brändi luodaan tyhjästä sen sijaan että se ilmentäisi jotain aitoa.

Aidoimpaankin brändiin liittyy käytännössä aina jotain keinotekoista, sillä brändin rakentamisessa on kyse niiden asioiden valitsemisesta, joita halutaan korostaa: mitkä arvot ovat meille tärkeimpiä tai mikä luo arvoa asiakkaiden silmissä? On kuitenkin eri asia, valitaanko brändiä rakentavat tekijät tyhjästä vai jo olemassa olevan kulttuurin pohjalta. Joinexin brändiuudistuksessa lähdimme liikkeelle konkreettisista asioista; siitä millaisia ovat Joinexin toimintatavat ja työkulttuuri.

Aloitimme prosessin nimeämällä millaisten arvojen takana Joinex seisoo ja miten ne näkyvät arjessa. Ydinarvoiksi tunnistimme inhimilliset arvot, jotka eivät vanhene: palvelun, luottamuksen ja rehellisyyden. Sen vastapainona arvostamme myös kovaa teknologiaosaamista ja innovatiivista propellipäähenkeä. Käytännössä arvot näkyvät rentona, matalahierarkisena työkulttuurina, jossa on tilaa erilaisille ihmisille ja ajatuksille. Arvot ovat myös osa jokaisen työnkuvaa, meillä jokainen on myös asiakaspalvelija eikä palvelua ole erotettu omaksi segmentikseen.

Brändin jatkuvaa kehitystä

Joinexin uudistunut brändi rakentuu vahvemmin jo olemassa olevan yrityskulttuurimme pohjalle. Brändi ei kuitenkaan tule valmiiksi ulkoasumuutoksen myötä, vaan se on jatkuvaa kehittämistä ja kehittymistä. Jokainen työyhteisön jäsen tuo kulttuuriin jotain omaa persoonallaan, minkä vuoksi kulttuuri, ja samalla brändi, kasvaa ihmisten mukana. Hyvä henki syntyy sisältä ja näkyy ulos – ja aidoista asioista on helppo viestiä.

Ne jo aiemmin mainitut sliipatut stock-kuvat tuntuvat nykypäivän hektisen verkkosisällön joukossa falskeilta. Sen sijaan ollaan kiinnostuttu persoonallisesta, erikoisesta ja autenttisesta. Siksi Joinexin verkkosivuista haluttiin luoda sekä visuaalisesti kiinnostava sekä informatiivinen kokonaisuus, joka sisältää ja jossa voi jakaa yhä monipuolisemmin tietoa siitä, millainen yritys Joinex todella on.

Uudet tiedonjaon kanavat, kuten sosiaalisen median sivut ja blogi, ovat konkreettinen teko arvostamamme teknologiaosaamisen ja innovatiivisuuden puolesta. Mitä useamman ihmisen tieto saavuttaa, sitä otollisempi maaperä luodaan uusille ideoille ja keksinnöille. Juttusarjan seuraavassa osassa keskityn tarkemmin siihen, miten verkkosivujen sisältö rakennettiin tukemaan brändiä.

React pähkinänkuoressa

Teknologia

Zoolander-kuva tekstillä "React.JS so hot right now"

Or should one say “React still so hot”? Onhan se kuitenkin julkaistu jo 6 vuotta sitten – 29. toukokuuta 2013.

  • Facebook loi Reactin, minkä vuoksi se sai paljon huomiota.
  • Se ratkaisi SPA:n ( Single Page Applications ) merkittäviä ongelmia.
  • Tänä päivänä React on suosittu yksinkertaisuutensa ja juostavuutensa vuoksi. Toki suosioon vaikuttaa myös se, että isot yritykset, kuten PayPal, Uber ja Instagram käyttävät tekniikkaa.

Mitä React on?

React on tapa rakentaa käyttöliittymiä. React tekee käyttöliittymien rakentamisen helpoksi pilkkomalla jokaisen sivun paloiksi. Näitä paloja kutsutaan komponenteiksi.

React -komponentti on pala koodia, joka kuvaa jotain tiettyä osaa sivusta. Jokainen komponentti on JavaScript -funktio, joka palauttaa palan koodia, joka puolestaan kuvaa osaa verkkosivusta.

Sivu siis muodostuu Reactilla siten, että näitä funktioita kutsutaan ja kasataan tietyssä järjestyksessä, ja näytetään tuo järjestys käyttäjälle.

React on JavaScript -kirjasto, joka käyttää JSX-syntaksia (JavaScript XML). React ei itsessään vaadi JSX:n käyttöä, eli sitä olisi mahdollista kirjoittaa suoraan JavaScriptinä, mutta useimmat kokevat JSX:n käytön hyödylliseksi. Yleisesti ottaen kukaan täysjärkinen ei kirjoita Reactia ilman JSX:ää.

JSX lyhyesti:

  • JSX muistuttaa hyvin pitkälti HTML:ää.
  • JSX on XML:n kaltainen syntaksi, eli jokainen tagi täytyy sulkea.
  • JSX:n käyttö sallii Reactin näyttää hyödyllisempiä virhe -ja varoitusilmoituksia.
  • JSX mahdollistaa dynaamisen sisällön luomisen helposti kirjoittamalla JavaScriptiä aaltosulkeiden sisälle.

Komponentit ja propsit

Komponentit siis sallivat käyttöliittymän erottelun itsenäisiin ja uudelleen käytettäviin lohkoihin. Komponentteja voidaan luoda funktioiden lisäksi “ES6 class:ia” käyttämällä. Lisätietoa ES6 luokista: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes.

Props on lyhenne sanasta “Properties”. Propseja käytetään tiedonvälitykseen komponenttien välillä. Perusidea propseissa on se, että voit kirjoittaa yksittäisen komponentin, jota voidaan käyttää useassa eri paikassa sovellustasi. ”Parent” -komponetti, voi antaa sen sisällä olevalle ”Child”-komponentille propsit. ”Child”-komponentti voi siis sijaita myös eri tiedostossa kuin ”Parent”-komponentti. Periaatteessa propsit auttavat kirjoittamaan uudelleenkäytettävää koodia.

Reactin yksi ainoita tiukkoja sääntöjä on se, että luokkien tai funktioiden ei ole koskaan tarkoitus muokata omia propsejaan suoraan. Sen sijaan, että propsien arvoa muutettaisiin, muutetaan tilan arvoa eli ”State”. Tästä tarkemmin seuraavassa kappaleessa.

Tila eli ”State”

Tila initialisoidaan luokan konstruktorissa. Konstruktori on ainoa paikka, missä tilan arvo voidaan asettaa suoraan ilman siihen tarkoitettua setState()-funktiota tai hook:ia.

Sovelluksen tila voidaan siis päivittää käyttämällä setState()-funktiota tai State hook:ia käyttämällä. State hook:stä lisätietoa löytyy: https://reactjs.org/docs/hooks-state.html

Tila lyhyesti:

  • Tilaa ei saa päivittää suoraan, vaan siihen käytetään setState()-funktiota tai State hook:ia.
  • Konstruktori on ainoa paikka, jossa tilaan voidaan suoraan päivittää jokin arvo.
  • Tilaa voidaan päivittää asynkronisesti.
  • Tilan arvoja päivittämällä voidaan uudelleenrenderöidä komponentteja.

Yhteenveto

Tässä oli lyhyehkö katsaus Reactin perusteisiin, joiden on tarkoitus antaa lukijalle pientä näkemystä Reactin käytöstä teoriatasolla. Teille, joita React kiinnostaa enemmän ja haluatte käytännön esimerkkejä tai harjoituksia, voin suositella Helsingin yliopiston tarjoamaa Full Stack MOOC -kurssia. Kurssin sisältö on laaja ja tarjoaa hyvät perustaidot moderniin websovelluskehitykseen.

https://fullstackopen.com/

Lähteet ja lisää luettavaa

https://joinex.fi/react-hooks-react-blogi-part-2/

https://fullstackopen.com/osa1/reactin_alkeet

https://reactjs.org/docs/getting-started.html

https://reactjs.org/docs/introducing-jsx.html

https://reactjs.org/docs/state-and-lifecycle.html

https://medium.com/@thinkwik/why-reactjs-is-gaining-so-much-popularity-these-days-c3aa686ec0b3

Fujitsu Technology Solutions

Caset • Teknologia

Fujitsu Technology Solutions – Jakeluketjun hallintaa

Käyttöliittymien suunnittelu ja prototyyppaus Adobe XD:llä

Design • Teknologia

Käyttöliittymän suunnittelu on helppoa. Aluksi.

Kaikki lähtee asiakkaan ideasta, jossa käyttäjälle on kaavailtu uusia mahdollisuuksia. Kokenut koodari hahmottelee ajatusta hetken päässään, piirtelee karkeita kulkukaavioita siitä, mitä dataa kulkee minnekin, ja avaa lopulta koodieditorin. Käyttöliittymä ottaa muotoaan, mutta hetken päästä edessä on jokin seuraavista tilanteista:

  1. Käyttöliittymä ei näytä hyvältä.
  2. Haluttu toiminnallisuus onkin odotettua monimutkaisempi.
  3. Jokin toiminto on unohtunut.
  4. Asiakas ei pidä käyttöliittymästä.

Sorrun omassa työssäni valitettavan usein näihin tilanteisiin johtavaan ylimielisyyteen. Kuvittelen hahmottavani käyttöliittymään tarvittavat elementit ja niiden väliset vuorovaikutukset riittävän hyvin. Kuitenkin löydän itseni aina asettelemasta lomakkeiden virhe-elementtejä ja muita helposti unohdettavia komponentteja paikoilleen.

Sitten näytän lopputulosta asiakkaalle ja kaikki menee uusiksi.

Monen odottamattoman lisäyksen ja korjauksen jälkeen on alkuperäinen visio usein hämärtynyt ja koodipohja nopeiden korjausten jäljiltä hutera. Refaktorointiin palaa aikaa ja energiaa, eikä voi olla ajattelematta, miksi taas kerran jätti suunnittelun väliin.

Älä suinkaan koodaa käyttöliittymää suunnitelman pohjalla. Suunnittele käyttöliittymä mielummin epäonnistuneiden koodausyritysten pohjalta.

Mielekästä suunnittelua Adobe XD:llä

Suunnittelun mieltää usein liian raskaana prosessina. Toteutettava käyttöliittymä on kuitenkin yksinkertainen ja vastaavia on tullut tehtyä jo monia. Näkymiä ei vaivauduta piirtämään paperille, hitaasti aukeavan kuvankäsittelyohjelman käynnistämisestä puhumattakaan. Jonkinlaisista leiskoista olisi tietysti apua, kunnes niiden implisiittisiä interaktioita pitää alkaa erittelemään asiakkaalle.

Kevyeeseen suunnitteluun on onneksi olemassa työkaluja — sellaisia, joilla käyttöliittymien prototyyppauksesta on oikeasti hyötyä itselle, omalle tiimille ja asiakasinteraktiolle. Käsittelen tässä kirjoituksessa ilmaista Adobe XD ohjelmaa, joka on käytettävissä sekä Windows että MacOS laitteilla. Samat periaatteet pätevät varmasti sen kilpailijoihin, kuten Sketch, inVision ja Figma.

Adobe XD:llä työskentelyn tuloksena on käyttöliittymän interaktiivinen prototyyppi, jonka voi lähettää asiakkaalle arvioitavaksi tai kehittäjätiimille työn tueksi. Tein esimerkkinä kolmesta näkymästä koostuvan pyöräkaupan. Sen arviointiversiota voi kokeilla niin kuin se olisi valmis sovellus. Painikkeet johtavat oikeisiin näkymiin ja siirtymät ovat ainakin havainnollistavassa muodossa paikoillaan. Kehittäjäversiosta ilmenee mm. käytetyt värit, fontit, kuvat ja näkymien väliset siirtymät.

Kolme sovelluksen näkymää esitettynä rinnakkain. Kolmannesta näkymästä kulkee nuolia muihin näkymiin.
Esimerkkinä luodun pyöräkaupan prototyypin kehittäjäversio.

Kullanarvoista prototyypeissä on asiakkaan mahdollisuus kommentoida niitä täsmällisesti. Jos painikkeen väri häiritsee, asiakas voi kiinnittää siihen merkin ja ilmaista huolensa lyhyesti tekstillä. Enää ei tarvitse murehtia siitä, kuinka olette pitkään puhuneet samasta asiasta eri nimillä tai eri asioista samalla nimellä. Merkki näyttää täsmällisesti mistä on kyse.

Vasemmalla on kuva käyttöliittymästä, johon on kiinnitetty kaksi numeroitua merkkiä. Oikealla on merkkien numeroita vastaavat asiakkaan kommentit, joissa on parannusehdotuksia.
Kommentteja voi kohdistaa käyttöliittymään kiinnitettyihin merkkeihin.

Konkreettinen prototyyppi poistaa omista ajatusprosesseista ”näyttääköhän tämä hyvältä” vaiheen. Keskittymisen voi ohjata ratkaisemaan miten asiat toteutetaan eikä miltä ne näyttävät toteutettuna. Kun tietää mihin on menossa, koodia menee merkittävästi vähemmän hukkaan.

Seuraavassa Adobe XD artikkelissa sukelletaan sovelluksen perusteisiin ja opetellaan käyttöliittymän prototyypin luomista käytännössä!