Tunnettuvuutta ja kansainvälistymistä edistävien verkkosivujen suunnittelu

Make It Live suunnittelee ja toteuttaa livemusiikin tuotantopalveluita artisteille, jotta artistit voivat tarjota yleisölleen vaikuttavan livemusiikkikokemuksen. Tieto Make It Liven olemassaolosta kulki asiakkaiden suositusten kautta. Make It Live halusi kasvattaa tunnettavuuttaan ja laajentua myös kansainvälisesti.

Projektin tavoitteena oli suunnitella ja toteuttaa helppokäyttöinen, responsiivinen ja visuaalisesti uuden brändi-identiteetin mukainen verkkosivusto.

Toteutimme projektin neljän henkilön tiimissä:

• tiiminvetäjä
• visuaalinen suunnittelija
• UX-suunnittelija
• koodaaja.

UX-suunnittelijana vastuullani oli verkkosivujen rakenteen, sisällön ja informaatioarkkitehtuurin suunnittelu sekä työpajan suunnittelu ja fasilitointi. Lisäksi osallistuin UI-suunnitteluun elementtien asettelun osalta.

Yhteissuunnittelu

Käynnistimme projektin yhteissuunnittelun avulla. Suunnittelimme ja fasilitoimme nelituntisen työpajan, jonka pidimme Make It Liven luona. Työpajan tarkoituksena oli määritellä yrityksen arvot, verkkosivujen tarkoitus ja käyttäjäryhmien tarpeet. Työpajassa loimme mm. käyttäjäpersoonia ja käyttäjäpolkuja. Lisäksi määritimme eri käyttäjäryhmien (levy-yhtiön A&R, manageri, artisti ja omakustanneartisti) tärkeimmät tarpeet.

Käyttäjien tärkeimmät tarpeet olivat:

• Saada tietoa yrityksestä.
• Tutustua aiempaan tuotantoon ja nähdä monipuolinen artistikatalogi.
• Ymmärtää, mitä lisäarvoa yritys tuo artisteille.
• Selata sisältöä helposti ja nopeasti.

Työpajan lisäksi benchmarkkasin alan muita toimijoita ja tutustuin huolellisesti yrityksen liiketoimintasuunnitelmaan. Näiden tietojen pohjalta aloitin verkkosivujen suunnittelun.

UX-suunnittelu
ja sisältö

Sivurakenteen suunnittelu

Koska käyttäjien yksi tärkeimmistä tarpeista oli selata nopeasti ja helposti, suunnittelin yksinkertaisen ja selkeän sivurakenteen (home, clients, services, about, contact). Benchmarkkaus vahvisti tätä valintaa.

Koska käyttäjille oli tärkeää saada tietoa yrityksestä, suunnittelin sivut palveluiden esittelylle (services) ja yrityksen esittelylle (about). Artistisivu (clients) puolestaan vastaa käyttäjien tarpeeseen tutustua aiempiin tuotantoihin ja saada kokonaiskuva laajasta artistikatalogista. Lisäksi yhteydenottosivu mahdollistaa uusien asiakaskontaktien luomisen.

Etusivun suunnittelu

Käyttäjäpersoonien perusteella suurin osa käytöstä tapahtuu puhelimella, joten suunnittelin verkkosivut mobiili ensin -ajatuksella.

Työpajassa tehdyn käyttäjäpolun perusteella saatiin selville, että luovan työn vaiheessa tuotetaan suurin arvo Make It Liven asiakkaille. Käyttäjien yksi tärkeimmistä tarpeista puolestaan oli saada tietoa siitä, mitä lisäarvoa yritys tuo artisteille. Näin ollen verkkosivujen tärkeimpänä tehtävänä on viestiä käyttäjille tästä lisäarvosta. Ideoimme tähän ratkaisuja yhdessä tiimin kanssa, ja lisäsimme etusivulle lauseen “Bringing your music to life on stage”, joka tiivistää brändin ydinviestin.

Lisäksi etusivulle valittiin livekeikkakuva Make It Liven toiveiden mukaisesti, jotta sivusto välittää heti ensisilmäyksellä yrityksen toiminnan ytimen.

Prototyyppi

Rakensin toiminnallisen Figma-prototyypin, jonka avulla pystyimme esittelemään sivuston toiminnallisuutta. Brändi-identiteetin suunnittelua ja UX-suunnittelua tehtiin osittain samanaikaisesti, joten pystyin käyttämään prototyypissä lopullisia typografiavalintoja. Sivujen yläosaan jätin tyhjää tilaa muun tiimin suunnittelemille visuaalisille elementeille.

Tässä kohtaa valtaosa omasta osuudestani projektissa oli ohi, ja luovutin prototyypin muulle tiimille visuaalisen ilmeen viimeistelyä varten.

Brändi-identiteetti

Työpajassa kartoitimme Make It Liven omia toiveita ja odotuksia myös verkkosivun visuaalisen ilmeen osalta. Yrityksen toiveita olivat mm. tumma, moderni ja “katu-uskottava” tyyli. Tiimin muut jäsenet vastasivat typografia-, kuva- ja värivalinnoista sekä logon suunnittelusta.

Uusi brändi-identiteetti tuotiin sivustolla esiin typografiavalinnoissa, värikkäissä livemusiikkiin liittyvissä kuvissa ja aaltomaisilla äänen liikettä kuvaavilla pystyviivoilla.

Lopputulos

Projektin lopputuloksena syntyi uuden brändi-identiteetin mukainen responsiivinen verkkosivusto, joka vastaa eri käyttäjäryhmien tarpeisiin.

Projekti oli yksi ensimmäisistä asiakasprojekteistani, ja nykyisellä osaamisellani tekisin paikoittain toisenlaisia valintoja. Sivuston käytettävyyttä ja brändin ydinviestin välittymistä olisi ollut hyödyllistä testata yhdessä käyttäjien kanssa. Iteroiva lähestymistapa suunnitteluun olisi tuonut varmuutta suunnittelupäätösten onnistumisesta.