Wave-R -sovellus

UI/UX-suunnittelu

Wave-R -sovellus

Vastasin mikrovaikuttajasovelluksen UI/UX-suunnittelusta ja visuaalisesta ilmeestä.

Projektin yhteenveto

Asiakas
Wave-R Oy
Kesto
9 kk (2025–2026)
Roolini
Visuaalinen ilme ja UI/UX-suunnittelu
Yhteistyössä
Ohjelmoija ja tuoteomistaja
Alusta
Sovellus ja verkkosivu
Työkalut
Figma ja Claude

Taustaa

Mikä on Wave-R?

Wave-R oli startup, jossa työskenteli viisi perustajaa ja kaksi työntekijää vuosina 2025–2026. Yritys kehitti sovelluksen, jonka kautta vaikuttajat ja kuluttajat voivat luoda profiilin ja hakea mukaan yritysten kampanjoihin. Samassa kampanjassa voi olla mukana useita vaikuttajia.

Roolini

Tulin Wave-R:iin syksyllä 2025 ainoaksi suunnittelijaksi. Sovelluksen konsepti ja ensimmäinen versio olivat jo olemassa, mutta visuaalinen identiteetti oli jäänyt keskeneräiseksi eikä sen alla ollut skaalautuvaa design-järjestelmää. Vastasin UI/UX-suunnittelusta, design-järjestelmästä ja visuaalisen ilmeen viimeistelystä. Suunnittelin sekä mobiilisovelluksen että työpöytäsivuston ja tein tiivistä yhteistyötä kehittäjän kanssa. Tuotekehityksen lisäksi tuotin markkinointimateriaalit: animaatiot, printin ja digitaaliset kuvat.

Haasteet

  1. Vähäinen aikamäärä
  2. Nopea startup-tahti
  3. Pieni tiimi

Käyttäjäryhmät

  1. Vaikuttajat ja kuluttajat, jotka haluavat ansaita lisätienestiä tai aloittaa someuraansa
  2. Yritykset, jotka haluavat näkyvyyttä aitojen somejulkaisujen kautta

Suunnittelu

Pohjatyö oli tehty

Kun tulin mukaan, sovelluksen konsepti, brändi ja ensimmäinen versio olivat jo valmiina. Aiempi suunnittelija oli luonut visuaalisen identiteetin ja logon sekä suunnitellut MVP:n. Perustajat olivat lisäksi testanneet ideaa käytännössä yhdistämällä yrityksiä ja vaikuttajia kampanjoihin WhatsAppin kautta.

Minun tehtäväni oli viedä sovellus eteenpäin tästä pisteestä. Aloitin työpöytänäkymän suunnittelusta, jota sovelluksessa ei vielä ollut.

Skaalautuvan design-järjestelmän rakentaminen

Rakensin tilalle tyhjästä atomic design -pohjaisen järjestelmän ja määrittelin komponentit, värit, typografian ja efektit tokeneina. Huomioin saavutettavuuden heti: säädin kontrastit WCAG-kriteerien mukaisiksi ja vahvistin samalla visuaalista ilmettä, joka oli alun perin rakennettu kiireessä.

Hyödynsin rakentamisessa tekoälyautomaatiota. Esimerkiksi rakensin Claude Coworkiin oman skillin, joka tuotti Figmaan oikean muotoiset, valmiiksi normalisoidut ikonitiedostot.

Design-järjestelmän rakentaminen vei aikaa, mutta koin sen välttämättömäksi: sen ansiosta uusien näkymien suunnittelu oli myöhemmin huomattavasti nopeampaa.

Lomakkeiden UI-elementit Figmassa

Tekoälyn kanssa suunnittelu

Rutiinien automatisoinnin lisäksi käytin tekoälyä suunnittelun sparrauskumppanina, pääosin käyttöliittymän logiikan ja UX-tekstien testaamisessa.

Koin, ettei tekoäly vielä tässä vaiheessa pystynyt tuottamaan käyttöliittymiä, jotka herättävät käyttäjässä luottamusta, joten tein designit itse. Testasin Figma Makella erilaisia versioita, mutta viimeistelin ne käsin.

Koska sovellusta koodattiin tekoälyn avulla ja tahti oli nopea, halusin vahvistaa Figman ja tekoälyn välistä kommunikaatiota. Rakensin tiedostot niin, että tekoäly osaa lukea niitä mahdollisimman hyvin. Näin design ja toteutus pysyivät lähempänä toisiaan.

Käyttäjätutkimus

Suunnittelin ja toteutin käyttäjäkyselyn selvittääkseni, mikä saisi mikrovaikuttajat ja kuluttajat käyttämään sovellusta useammin. Kyselyyn vastasi reilut 50 käyttäjää.

Vastaajat olivat kiinnostuneita sovelluksesta ja halusivat käyttää sitä, mutta turhautuivat teknisiin ongelmiin. Kysely myös vahvisti tärkeän suunnitteluopin: käyttöliittymä ei ollut se, mikä eniten vaikutti sovelluksen käyttöön. Se muistutti priorisoimaan oikeita asioita ja testaamaan oletukset käyttäjillä sen sijaan, että olisin luottanut siihen, miltä ongelma näytti suunnittelijan näkökulmasta.

Jennin kanssa oli mahtavaa työskennellä. Rooli ei ollut helpoin, mutta Jenni omaksui sen nopeasti ja ylitti odotukset. Erityisesti mieleen jäi tehokkuus sekä tarkkuus työn tekemisessä.

Eino Lehmusoksa Wave-R Co-Founder / Tuoteomistaja

Esimerkkejä

Alla esimerkkejä designeista, joita tein Wave-R -sovellukseen.

Selkeämpi kampanjanäkymä

  • Sijainti näkyviin: Tutkimuksessa kävi ilmi, että vaikuttajia harmitti eniten, jos kampanjoita ei löytynyt omalta paikkakunnalta.
  • Suodattimen vaihto: Kiinnostuksen kohteet -suodatin ei palvellut, kun kampanjoita oli vielä vähän. Sijainti on tässä vaiheessa käyttäjälle tärkeämpi tieto.
  • Palkkio esiin: Aiemmin palkkion joutui etsimään erikseen. Toin sen kortille, jotta tarjouksen arvon näkee heti.
  • Aika konkreettiseksi: Päivämäärät eivät kerro tarpeeksi selkeästi, milloin kampanja on avoinna. Selkeämpää on näyttää, montako päivää kampanjaan on vielä aikaa.
Ennen Kampanjanäkymä ennen
Jälkeen Kampanjanäkymä jälkeen

Kampanjailmoitus

  • Olennaiset tiedot otsikon alle: Sijainti, kampanjatyyppi ja jäljellä oleva aika nousevat omalle rivilleen heti otsikon alle, jotta vaikuttaja voi päättää nopeasti, kiinnostaako kampanja. Tuotekampanjasta näkee, että palkkion lisäksi saa tuotteen.
  • Yhteystiedot selkeinä linkkeinä: Yrityksen osoite ja verkkosivu ovat nyt napautettavia linkkejä, eivät leipätekstiin hautautuneita.
  • Logo tunnistettavuuden tueksi: Lisäsin yrityksen logon, jotta brändin tunnistaa yhdellä silmäyksellä.
Ennen Kampanjailmoitus ennen
Jälkeen Kampanjailmoitus jälkeen

Lopputulos

  • Kokonaisvaltainen atomic design -järjestelmä, joka palvelee saumattomasti sekä mobiilisovellusta että verkkopalvelua.
  • Yhtenäinen, tunnistettava ja huolella viimeistelty visuaalinen identiteetti.
  • Koodivalmis Figma-arkkitehtuuri, joka virtaa MCP-työnkulun kautta suoraan ohjelmistokehitykseen.
  • Parempi käyttäjäkokemus ja selkeämpi UX-kirjoitus.
Wave-R:n tili- ja asetussivu työpöytänäkymässä.
Waverit lähelläsi -näkymä, jossa mikrovaikuttajat esitellään korttiruudukkona.
Mobiilisovelluksen tili- ja asetusnäkymä.
Saldonäkymä, jossa nostettava summa ja tapahtumat.
Vahvistusnäkymä noston käynnistyttyä.
Sovelluksen etusivu tervetuloviestillä ja uusimmilla kampanjoilla.
Kampanjapolku, joka näyttää hakemuksen vaiheet.