Urban Armor Gear eli UAG on mobiililaitteiden suojakoteloiden kansainvälinen huippubrändi. UAG pyysi meitä luomaan uuden verkkokauppasivuston käytettävyyden, tarinankerronnan, brändi-ilmeen ja suorituskyvyn parantamiseksi. Teimme hankkeessa koko ajan läheistä yhteistyötä UAG:n lahjakkaan tiimin kanssa – kyseessä oli siis todellinen kumppanuusprojekti.

HAASTE: Verkkokauppatilaus 20 sekunnissa

UAG on luonut menestyksekkään lifestyle-brändin, jolla on uskollinen kannattajakunta. UAG:n luova johtaja Casey antoi hyvin lyhytsanaiset ohjeet: ”Tehkää verkkokauppatilaamisesta niin helppoa, että lifestyle-sisältöä selatessa ehtii ostaa puhelinkotelon vaikka liikennevaloissa ennen kuin punainen vaihtuu vihreäksi.”

TOTEUTUS: Ongelmakohdista loistavaan lopputulokseen

Hankkeen alussa järjestimme käyttäjätutkimuksen ja strategiatyöpajoja luodaksemme selkeän käsityksen ongelmakohdista, mahdollisuuksista ja tavoitteista. Analysoimme jo olemassa olevan sivuston hyvät ja huonot puolet. Tämän jälkeen laadimme toimintasuunnitelman varsinaista projektia varten. Loimme tietojen pohjalta käyttäjäpersoonia ja hyväksyttyjen ominaisuuksien listan, jossa otettiin huomioon käyttäjien ja liiketoiminnan tarpeet sekä kustannukset.

Tietoarkkitehtuuri

Saatuamme selkeän käsityksen sivuston sen hetkisistä ominaisuuksista, uusista lisättävistä piirteistä ja myös tulevaisuudessa toteutettavista ominaisuuksista, järjestimme kaiken helppokäyttöiseksi ja tulevaisuutta kestäväksi rakenteeksi. UAG:llä ei ollut enää tilaa laajentaa entistä sivustoaan, joten oli tärkeää, että uuden sivuston rakenne olisi toimiva pitkälle tulevaisuuteen.

Toiminnallisuus

Mietimme haastetta monelta kannalta. Ensiksi oli poistettava kaikki ostovirtaa hidastavat tekijät. Jos asiakkaan on voitava tehdä tilaus 20 sekunnin kuluessa, tarpeettomiin vaiheisiin ei ole aikaa. Sivuston on automaattisesti tunnistettava mitä brändiä ja laitetta asiakas käyttää, ja tarjottava pikakuvakkeita ja ehdotuksia todennäköiseen ostoon perustuen. Sivuston täytyy ehdottaa nopeita maksuvaihtoehtoja, kuten Apple Pay, asiakkaan käyttämän laitteen perusteella. Lisäksi sivuston täytyy muistaa asiakkaan suosikkikategoriat, jotta asiakas voi ohittaa muita kuin omaa laitettaan koskevat suodattimet. Listassa on paljon muutakin – loimme räätälöidystä ostokokemuksesta aivan uuden käsityksen.

Toiseksi UAG:n sisällön oli oltava kätevä. Nähdessään mieleisen kotelon lifestyle-videossa käyttäjän on pystyttävä klikkaamaan videosta tuotesivulle. Jos asiakas katselee UAG:n lähettilästä tai urheilijaa, hänen täytyy pystyä ostamaan sen henkilön suosimia tuotteita. Ja sama toisinpäin – sisältö on yhdistettävä ostokokemukseen siten, että asiakas näkee tuotteet toiminnassa  ja saa varmuutta ostamiseen.

Luova suunta

Tavoitteemme oli muuntaa UAG:n brändin tyyli digitaaliseen muotoon, joka tehostaa käytettävyyttä. Keskityimme brändin tärkeimpiin teemoihin: järeä, ylellinen, innostava ja aito. Lisäksi halusimme UAG:n laittavan sivustolle lisää pienimuotoista videosisältöä esimerkiksi uusiin Instagramin tarinoiden innoittamiin sankariosioihin.

Tavoitteenamme oli luoda sekä virtaviivainen ostokokemus että mukaansatempaavaa tarinankerrontaa. Teimme sitä varten yleisistä teemoista tyyliltään kaksi erilaista versiota: pelkistetyn ja mutkattoman tyylin, jota käytettiin ostovirran kaikilla sivuilla sekä pitkälle kehitetyn tyylin, joka kiinnittää lifestyle-sisältöä selaavien käyttäjien huomion. Tämän jälkeen loimme välityylejä, jotka yhdistävät nämä kaksi versiota saumattomaksi kokemukseksi, jotta sivusto käy sitä mielenkiintoisemmaksi mitä pidemmälle lifestyle-sisältöön asiakas etenee. Tehtyään ostopäätöksen asiakas palaa puhtaille ja hyvin toimiville sivuille.

Käyttöliittymän suunnittelu

Suunnittelimme sivuston sivu kerrallaan kaikenkokoisille laitteille sopivaksi. Loimme yhdenmukaisen kokemuksen kaikilla laitteilla, mutta panostimme erityisesti mobiililaitteisiin, koska ne ovat eniten käytetty formaatti. Toimintatapa istui hyvin ketterään prosessiin, jossa suunnittelu- ja kehitystiimit tekevät läheistä yhteistyötä.

Kehittäminen

UAG:n verkkokauppa-alusta on Shopify. Tämä oli mielenkiintoinen haaste, sillä tyypillisesti Shopify-alustaa hyödyntävät yritykset käyttävät mallikielenä Liquidia. Parantaaksemme ostamisen nopeutta ja suorituskykyä reilusti meidän oli käytettävä huippuluokan teknologiaa. Shopifyn tavanomaisten rajoitusten ohittamiseksi loimme mukautetun sivuston Reactin ja Gatsbyn avulla. Yhdistimme sivuston Contentful CMS:ään ja Shopify API:iin, ja perustimme kätevän julkaisuputken Netlifyn avulla.

Tämä toimintatavan avulla saavutimme kaksi merkittävää etua. Ensiksi Gatsby, joka on staattisen web-sivuston generaattori, nopeuttaa paljon sivujen latautumista. Toiseksi sivuston rakentaminen Reactin avulla tarjoaa käyttöön valtavasti laadukkaita teknisiä resursseja, joita UAG voi hyödyntää tarvittaessa. Koska lifestyle-sisältöön käytettiin Contentfulia, UAG voi helposti mukauttaa sisältöä ja kierrättää saapumissivuja. Lisäksi toimintatapa ei vaatinut tuhansien varastoyksiköiden siirtämistä ja säilytti UAG:n nykyisen tuotteidenhallintaprosessin.

TULOKSET: Yhteistyötä lahjakkaalla tiimillä

Yhteistyömme oli loistava projekti sekä teknisen että visuaalisen suunnittelun tiimeille. On ollut todella palkitsevaa tehdä läheistä yhteistyötä UAG:n luovan ryhmän kanssa ja etenkin tutustua luoviin tapoihin, joilla ryhmä tekee sivustosta omansa sisällön julkaisun jälkeen.

Yhteistyömme jatkuu yhä. Seuraavana ovat vuorossa käytettävyystestausta, A/B-testausta, ominaisuuksien lisäystä ja parannusten tekoa.

ASIAKAS: Urban Armor Gear 

Urban Armor Gear on USA:ssa vuonna 2010 perustettu mobiililaitteiden suojakoteloiden valmistaja. Yrityksen tuotteita myydään ympäri maailmaa ja tuotteissa yhdistyy laadukkuus ja ammattitaito.