UI/UX-suunnittelu
Kielibuusti verkkoportaali
Vastasin kaikille avoimen kieltenoppimisportaalin visuaalisesta ilmeestä ja osallistuin sen käyttöliittymäsuunnitteluun osana hankkeen tiimiä.
Projektin yhteenveto
- Asiakas
- Kielibuusti-hanke
- Kesto
- 3 vuotta (2021–2024)
- Roolini
- Visuaalinen ilme, graafinen suunnittelu ja käyttöliittymäsuunnittelu
- Yhteistyössä
- Kielibuusti-hanke, Aalto-yliopisto ja Siili Solutions ohjelmistokehittäjät
- Alusta
- Verkkosivu, Drupal
- Työkalut
- Figma
Taustaa
Mikä on Kielibuusti-hanke?
Kielibuusti on opetus- ja kulttuuriministeriön rahoittama valtakunnallinen hanke, joka kokoaa suomen ja ruotsin kielen oppimisen, opettamisen ja tukemisen yhteen kaikille avoimeen palveluun.
Mukana olivat pääkaupunkiseudun viisi korkeakoulua: Aalto-yliopisto, Helsingin yliopisto, Haaga-Helia, Laurea ja Metropolia. Aalto vastasi portaalin rakentamisesta, ja työskentelin Aallolla osana hanketiimiä.
Roolini
Toimin hankkeessa ainoana graafisena suunnittelijana koko kolmen vuoden ajan. Vastasin yksin portaalin visuaalisesta ilmeestä, graafisesta suunnittelusta ja valokuvien ohjauksesta.
Käyttöliittymän suunnittelin yhdessä Siilin designerin kanssa, ja vastasin siitä, että kokonaisuus pysyi yhtenäisenä. Siilin kehittäjät toteuttivat ratkaisut, ja suunnitteluvalinnat varmistettiin minulta.
Portaalin lisäksi vastasin hankkeen muusta visuaalisesta viestinnästä, kuten painotuotteista, some-sisällöstä ja markkinointimateriaaleista. Tässä case studyssä keskityn verkkoportaaliin.
Haasteet
- Yksi verkkoportaali neljälle täysin erilaiselle käyttäjäryhmälle
- Laajojen ja erilaisten oppimateriaalien jäsentäminen helposti löydettäväksi kokonaisuudeksi
- Aalto-yliopiston Drupal-pohjan komponenttirajoitukset
Käyttäjäryhmät
- Suomen ja ruotsinkielten oppijat
- Suomen ja ruotsinkielten opettajat
- Opinto- ja uraohjaajat sekä korkeakoulut
- Työyhteisöt ja työnantajat
Suunnittelu
Suunnittelupäätökset perustuivat yhteistyöhön asiantuntijoiden kanssa sekä käyttäjätutkimuksiin
Hanke teki laajaa käyttäjätutkimusta: työpajoja, kyselyitä ja haastatteluita eri käyttäjäryhmien kanssa ennen portaalin rakentamista, sen aikana ja sen jälkeen. Työpajat kokosivat yhteen koko Kielibuusti-hankkeen väen, ja olin niissä mukana yhtenä osallistujana.
En itse suunnitellut tai vetänyt tutkimusta, mutta hyödynsin sen tuloksia jatkuvasti. Muunsin käyttäjäpalautteen visuaalisen ilmeen ja käyttöliittymän ratkaisuiksi.
Jennin kanssa työskentely on ollut hieno kokemus. Hän kiinnittää huomiota suunnittelun yksityiskohtiin ja vastaa aina nopeasti, minkä ansiosta suunnittelutehtävät etenivät tehokkaasti. Jenni on paitsi nopea ja joustava iteroimaan suunnittelutyötä, hän tuo tiimille aina myös tuoreita ja luovia ideoita arvioitavaksi, mikä auttoi meitä ratkomaan suunnitteluhaasteita tehokkaasti.
Hänen positiivinen asenteensa, avoimuutensa ja oma-aloitteisuutensa tekevät hänestä ilon työskennellä, ja hän luo ympärilleen oppimisen ja yhteistyön ilmapiirin. Opimme Kielibuusti-projektin aikana valtavasti toisiltamme, ja hänen kykynsä sopeutua ja viedä meitä kohti tavoitteitamme on ollut olennaista projektin onnistumiselle.
Jennin panos – sekä hänen tekemänsä suunnittelutyö että tapa, jolla hän toimi tiimissä – vaikutti valtavasti Kielibuusti-projektiin.
Working with Jenni has been a great experience. She pays attention to detail in design and always responds quickly, allowing us to move through design tasks efficiently. Not only is Jenni quick and flexible when it comes to iterating on design work, she always brings fresh and creative ideas to the team for further review, helping us to tackle design challenges effectively.
Her positive attitude, open-mindedness and proactive nature make her a pleasure to work with and she creates an environment of learning and collaboration. We’ve learned so much from each other while working on the Kielibuusti project, and her ability to adapt and drive us towards our goals has been essential to the success of this project.
Jenni’s contributions – both in the designs she created and the way she engaged with the team – made a huge impact on Kielibuusti project.
Käännetty englannista.
Esimerkkejä
Alla esimerkkejä käyttäjäpalautteen myötä tehdyistä muutoksista.
Beige pohjaväri sai portaalin tuntumaan hitaalta
Käyttäjähaastatteluissa selvisi, että beige pohjaväri sai portaalin tuntumaan vanhanaikaiselta ja hitaalta. Vaihdoimme pohjavärin valkoiseksi ja portaali tuntui modernimmalta ja nopeammalta.
Hahmoja ei tunnistettu
Käyttäjäpalautteesta ja haastatteluista kävi ilmi, etteivät käyttäjät ymmärtäneet, keitä etusivun hahmot esittivät. Kuvat koettiin kuvapankkimaisiksi, vaikka ne oli kuvattu erikseen Kielibuusti-hanketta varten. Poistin alkuperäiset kuvat ja järjestin sekä ohjasin uuden valokuvauksen, jossa henkilöt esitettiin aidoissa oppimistilanteissa. Uudet kuvat tekivät sisällöstä samaistuttavampaa ja luotettavampaa.
Lopputulos
Lopputuloksena syntyi selkeä, ohjaava verkkoportaali, joka palvelee neljää käyttäjäryhmää kolmella kielellä yhden yhtenäisen käyttöliittymän kautta. Visuaalinen identiteetti skaalautuu Aalto-yliopiston Drupal-pohjan rajoissa printistä mobiiliin. Saavutettavuus rakennettiin sisään alusta asti: kontrastit, typografia ja monikielinen logiikka WCAG-kriteerien mukaisesti.
