Merkevaren Colossal Bli kjent med den eksisterende merkevaren Colossal er en webside/blogg om kunst (foto, design, animasjon, malerier, arkitektur, tegning og gatekunst m.m). Det første som slår en er websidens flere sorteringsverktøy i menyen med de mest populære/delte postene og kategoriene. På grunn av sidens størrelse er det derfor lage inn en random -filterknapp (ala wikipedia) for å få en vilkårlig bloggpost. De har også en webshop med systemet Shopify. Førsteinntrykket av Colossal er lite oversiktlig. Designet virker veldig WordPress standardtheme 2010. I responsive mode (tablet og under) får man en mye penere look i headeren. Websiden er veldig lang på grunn av mye bilder i mange bloggposter. Det er også mange forstyrrende elementer i form av farger, mange ulike tekststørrelser og ujevne luftmellomrom i både bredde og høyde. Websiden er delt inn i to seksjoner i bredden, en contentdel og en sidebardel. Sidebaren virker unødvendig, på grunn av reklamen ikke henger/fixed position når en scroller (og det en del scrolling av pga sidens lengde). Helheten av Colossal sin bloggside virker rotete, mye klikking for å finne noe innenfor de ulike emnene. Webshopen er noe mer ryddig, men navigeringen virker tilsvarende rotete. I footeren til webshopen står det at de er overalt i sosiale medier: Twitter, Facebook, Pinterest, Google+, tumblr., Vimeo. På primærhovedsiden får man inntrykk av at det kun er Facebook, Twitter og plutselig noe som ikke er nevnt tidligere: Feedly. Noe står skrevet i en liten paragraf om hvor de er. Når de først promoterer at de er overalt, burde det stått konsekvent overalt og gjerne med tilhørende ikoner.
Målgruppe Hvem når de frem til og hva får de ut av det? Målgruppen er folk som interesserer seg for annerledes kunst, gjenstander, nips. Det er lett å bli inspirert til å ville ha tilsvarende produkter selv. Enten ved å se om de har det i webshopen eller i DIY-poster. Dette er helt klart en webside for kreative mennesker. Colossal er koblet opp mot ulike sosiale medier hvor de har hundretusenvis av følgere. Målgruppen kan derfor være teknologianlagte. Scenarios er lagt opp til den orginale websiden og testet ut på tilfeldige personer. Testingen var vellykket ved å se et sterkt behov til forbedring av navigasjon. Personas og scenarios Vidar (30) Utdannet lege, jobber som fastlege på et offentlig helsesenter. Følger med på børsen, har en del aksjer i potensielle småprosjekter Ylva (37) Tatt etterutdanning innen hudpleie og kosmetikk. Eier og driver to egne hudpleieklinikker. Nettopp kjøpt et oppussingsobjekt midt i
og selger når det er godt i pluss. Har alt det nyeste innenfor digitale nips. Scenario #1 Vidar skal se etter inspirasjon til et stort, fargerikt kunstverk som kan henge på helsesenteret han jobber hos. Han er absolutt åpen for å handle stort både fysisk og pengemessig fra andre steder i verden. Scenario #2 I tillegg til kunstverket ønsker Vidar å finne nips til å pynte venterommet. Han er på let etter kreative blomsterpotter. sentrum som skal se topp moderne ut. Godt teknisk anlagt. Har de nyeste kassasystemene i butikkene sine. Scenario #1 Ylva ønsker å finne inspirasjon til nyinnkjøpt leilighet, for så å gjøre det ca likt i egen leilighet. Åpen for alt av farger så lenge det ser moderne og minimalistisk ut. Scenario #2 Ylvas salonger heter Duen skjønnhet, siden de fører mye av Dove s produkter. Hun ønsker derfor å finne fuglekulpturer som kan pynte opp salongene. Hun skal ha 12 stykker. Vilde (49) Vgslærer på kunststudier i Daniel (23) Snart ferdigutdannet kokk. Har
Drammen. Maler abstrakt kroppskunst med staffeli 2 ganger i uken. Fikk sin første smartphone for ett år siden. haugevis med matapper for inspirasjon og for å holde orden med mattilbudene. Fingernem og må alltid ha noe å gjøre. Scenario #1 Vilde skal se om det finnes noen kreative møbler med flere bruksområder for oppbevaring av bøker. Scenario #2 Siden hun er lærer ønsker hun å finne et DIY-prosjekt til elevene sine som ikke tar særlig mer enn en skoledag å gjennomføre. Vilde har tidligere sett en tredjepartsside hvor man kan få tak i plastspikre og strips. (Makedo) Scenario #1 Daniel skal finne et lite DIYprosjekt med en kreativ papirskjermlampe. Scenario #2 Daniel er lettinspirert og sjekker samtidig ut shopen til Colossal. Her ønsker han å finne noe lampeinspirert å kjøpe.
Idun (24) Frilansskuespiller. Siste utdanning fra videregående: musikk, dans og drama. Idun har en noe eldre smartphone og bruker sosiale medier (spesielt instagram) aktivt. Scenario #1 Idun håper å finne et annet type tastatur til til bærbare maskin. Gjerne eksternt, annet enn det orginale plastopplegget. Hun ønsker å kjøpe en ferdig løsning. Scenario #2 Favorittfargen til Idun er rød, hun vil derfor finne et bilde med så mye røde detaljer som mulig for så å printe det ut i storformat. Alex (26) Bartender. Forkjærlighet til avansert lyd og lys. Har det nyeste nye fra Apple. Både imac, Air, AppleTV, ipad og iphone 5S. Oppdaterer daglig i sosiale medier med omgivelsene i baren og fra stemningen på kveldene. Scenario # 1 Har hørt gjennom Idun at det finnes mye forskjellig av alt på Colossal. Skal se etter inspirasjon til annerledes lyssetting i stua. Scenario #2 Alex har lett for å kjede seg og saumfarer ofte internett uten å ha noe konkret mål. Se etter tilfeldige poster på Colossal.
Problemstillinger og løsninger Hva kan gjøres for å endre på inntrykket? SWOT Styrker Colossal har er mengden brødtekst. Den er liten nok til at det ikke blir forstyrrende i forhold til bildene som skal fungere som inspirasjon. Bildene som legges ut er det høy kvalitet i både filformat og rent bildeteknisk er det ingenting å klage på. En annen ting som er fint: En del av inspirasjonen/kunsten/dingsene og interiøret de presenterer i bloggen kan kjøpes rett fra shopen. De trekker det litt lenger enn websider som poster masse flott inspirasjon, uten å vite hvor en kan få tak i det. I tillegg til daglige oppdateringer på websiden er de flinke til å legge ut linker til bloggpostene sine i sosiale medier. De er flinke til å samle følgere uten å bli masete. Det er kvalitet de viser. De er dessuten flinke til å holde seg innenfor temaene de fremmer. Har enda til gode å finne noe som ikke passer inn. Headeren på websiden er full av mange farger, så det er forståelig at de ønsket å bruke flere farger gjennom hele siden. Helhetlig gir dette et klovnete utrykk. Dette kan løses ved å ha nøytrale bruksfarger på de store flatene og ha en klar signalfarge som kan brukes for et gjennomført utrykk. Denne signalfargen kan ha en kontrastfarge for å skape litt mer dybde. Bruken av så mange skriftstørrelser i både normal og bold får det til å virke som mange ulike fonter. Dette skaper et rotete inntrykk. Dette kan rettes opp ved å ha en tydelig styleguide. Tydelig markere hva som er overskrift, ingress, brødtekst, paragraf og det som hører med. Content og sidebar bør løses på en annen måte så siden ikke virker så skjev når det scrolles. Sidebarområdet blir helt blankt på grunn av annonse helt øverst. Websiden kan fint være 90% av vinduet og contentet følge etter i bredden. Her vil det brukes
mobilefirst-tankegang når det legges opp wireframe. Dette kan fort være en webside en besøker via mobil. Antall bilder i hver bloggpost virker problematisk hvis dette er en webside som primært besøkes via mobil/mobilnett. Det er store flotte bilder som tar lang tid på et tregt nett. Det vil sluke store mengder av den grensen mange har av oppsatt datamengde på mobil. Dette kan bli mye bedre ved å korte ned antall bilder (maks 3-5 hvis utsnittene er ulike og spennende). Når det kommer til det visuelle ved å laste inn bilder, så er det forståelig at bildene ikke laster før en har scrollet ned til området bildet er (skaper fade-in effekt når det lases inn). Likevel er dette en metode som virker langtekkelig og hengete. Slik det er lagt opp nå tar det lang tid før bildene laster inn, selv på wifi og maskin. Det som er verdt å merke seg er at de har lagt trending -posts i footeren. Hvis det er en gjengangsbruker som sjekker innom en gang i dagen vil det være svært tungvint å scrolle helt i bånn for å se hva som er populært. Dette kan for eksempel løses ved å legge trending i menyen, eller la det være headerbildet/headerbildene. Eventuelt legge det i en separat slider. Wireframen til bloggpostene og arkiv/filtrering/kategoriløsningen er knotete med byline. Dette kan løses ved å dele opp overskriften og byline. En ting som er savnet i den eksisterende løsningen er datostempling, dette kan elegant løses ved å legge det til etter byline, eller under bloggposten. På samme område er det mer naturlig å ha kategoriene bloggposten er lagt inn i. En annen ting som er savnet er en knapp som sender en opp til toppen av websiden. Dette vil wireframeskisseringen og brukertesting komme nærmere på. Utfordringer Utfordringer slik websiden er lagt opp nå: Navigasjon (Både vanlig webside og shop)
Rotete inntrykk o Alt for mange farger o Ulike skriftstørrelser mange plasser. Hele 10 ulike skriftstørrelser (px). 10.5, 12, 12.6, 13, 14, 16, 18, 20, 24, 26. o Ulik navigasjon til sosiale medier (vanlig webside og shop) o Oppsett rundt bloggpost/arkiv/filtrering virker klundrete Mye vertical scrolling o Alt for mange bilder av den samme gjenstanden i bloggposter Tregt innlastingsscript o Ødelegger for opplevelsen, spesielt på mobil
Konkurrenter På grunn av mangfoldet til Colossal kan inspirasjon hentes alt fra interiørsider, kunstgalleri, teknologimagasin, fotoporteføljer og nettaviser. Det finnes mange tilsvarende websider med denne typen inspirasjon. Derfor er det en del konkurrenter. Forskjellen er at på flere av konkurrentsidene må en ha bruker for å kunne se/søke. Det trengs ikke på Colossal. Åpent for alle. Andre direkte faresoner til at noen velger å bruke en annen webside, kan være hvis de lar seg skremme av det rotete inntrykket på den eksisterende websiden. Konkurrenter med høyt antall følgere og brukere kan være av typen tidsfordrivsider som Stumbleupon/tumblr., Reddit/9gag. Det disse konkurrentene gjør bedre er enkel mulighet til å like/dislike en side/bilde for så å gå videre til neste del. Sekundærkonkurrenter som enkle interiørblogger og DIY-bloggere.
Tekniske løsninger Nåværende og fremtidige Colossal er en eksisterende webside (thisiscolossal.com) og har registrert sitt domene på mediatemple.net. Hadde Colossal.com vært ledig hadde det vært greit å kapre for å redirecte til siden. Dette ville forkortet tiden det tar å skrive domenet, spesielt på mobil. På sosiale medier har de tilsvarende navn som domenenavnet sitt: Twitter: colossal Facebook: thisiscolossal Pinterest: itscolossal Google+: +Colossal tumblr.: itscolossal Vimeo: itscolossal Synd de ikke har fått kapret nøyaktig det samme som domenenavnet eller bare Colossal hele veien. Et viktig men her er at de er dyktige på å markedsføre seg ved å holde seg oppdatert på de ulike arenaene, så de kommer høyere opp ved søkeresultat. En kommer derfor ikke inn på en ripoffsite med det første. De har med andre ord bygget seg opp en solid merkevare innenfor navnet og temaet. CMSet de bruker per i dag er WordPress (ref kildekoden). WordPress er en helt ålreit løsning for å raskt laste opp bilder, bloggposter og legge til/redigere eksisterende themes. Dette er også den løsningen dette prosjektet skal ta videre. WordPress er enkelt og greit for både innholdsytere og programmerere. Dessuten trenger en ikke være verdensmester i noe nytt programmerspråk for å få det til å fungere. Det holder med å kunne basic HTML5, CSS3 og være innforstått med hvordan PHP fungerer, da WordPress sitt kodespråk er bygget på dette. På den nye løsningen kan de se bort i fra Shopify, da WordPress har solide plugins til webshops. I dette tilfellet skal det benyttes ecommerce, siden det er mest brukt og
er enkelt for innholdsyter å legge til/fjerne produkter. Så slipper vedkomne to ulike innlogginger. Når det gjelder sikkerhet til betaling kan man velge ulike arenaer, mest brukt og sikrest for både kjøper og selger er PayPal. Dette er kun et tastetrykk unna i ecommersepanelet. Oppdateringsplan Per i dag er ansvarlig redaktør Christopher Jobson. Innholdsytere er bl.a Johnny Strategy. For kvalitetssikring, trykkfeil og vedlikehold har de Eric Hazen. Serveren fikses av Data Folks Labs og utviklere er Studio of the Month og Equal Parts Creative. De har også et veldedighetsprogram som ordnes av Kristin Lewis. Måten de har løst oppdateringsmengden på virker å fungere. 2-3 poster daglig med mange kvalitetsbilder hver dag holder. De er flinke til å variere hvilken kategori som kommer, så det ikke blir det samme hele tiden. Kan ikke se timestamps, så vet ikke når på døgnet de oppdaterer, men ut i fra observasjon er det delt utover dagen. Kan godt være det er timet inne i WordPress, slik at de har laget x-antall poster og setter på timer. Det samme vil gjelder nok oppdateringslinkene fra Facebook. En plugin tar nok tak i postene og slenger de ut enten med en gang de er lagt ut, eller til et gitt tidspunkt. Siden de er internasjonalt kjent (shipper produkter over hele verden bl.a) er det vanskelig å fastslå tidspunkter som passer bedre. Nyere forskning viser at mandag-onsdag mellom 14-15 og hverdager kl 19-20 er da folk er mest aktive på sosiale medier i Norge. Det er vist å være tilsvarende i andre land. Det vil si på vei hjem fra jobb og i forbindelse med sen middag/nyheter på kvelden. Derfor KODWYWD (Keep on doing whatever you were doing). Det de vil vinne på i lengden med den nye løsningen er både gamle og spesielt nye brukere vil få en bedre brukeropplevelse. Det vil gå raskere og bli oversiktlig.
Markedsstrategi Slik det er lagt opp nå gjør de følgende: Nyhetsbrev: Ukentlig Twitter, Facebook, Google+, tumblr.: Alt etter hvor mange blogginnlegg. Alt fra 1-5 daglig. Pinterest: Alt etter antall blogginnlegg i tillegg til å pinne andre tilsvarende inspirerende bilder. Disse er merket i egne gruppealbum. Vimeo: Legger ut alle videoer fra Colossal i tillegg til tilsvarende fra andre websider. På dette punktet gjør de alt etter boka, de tilpasser seg mediumet og gjør det som er unikt for mediumet i tillegg. Siden 90% av det de legger ut er automatisk fra websiden er det lettere å prioritere kundeservice. Både over mail og være Colossal ansikts utad i sosiale medier hvis folk har spørsmål eller tips. Gjerne ha en holdning for mersalg. Både takke tipser og sier Dette ser supert ut, vi vil definitivt se videre på dette!, eller tilsvarende. Da vil tipser føle seg viktig og mest sannsynlig komme tilbake og tipse flere. Eksempel på videre handling ved tips: En følger tipser om et supert produkt som en enkeltperson har patent på. Colossal kontakter personen med produktet og sier de kan selge det for personen. Dette kan Colossal markedsføre på sin webside og i webshop og få en fair prosent av kostnaden. På grunn av den massive kretsen i sosiale medier kan de derfor gi ut 5%-10% i rabattkode i webshop. Da vil følgerne føle seg utplukket til noe spesielt. Disse tilbudene må være sjeldne, slik at det føles som en ekstra oppmerksomhet og ikke en selvfølgelighet. Det vil også virke pushy, needy og masete hvis dette markedsføres ofte. Tanken er å legge en webshop direkte i websiden, slik at brukeren får alt rett der de
er. Slik kan de også øke salget. Sammen med dette kan de også endre advertisers til å komme med produkter de ønsker Colossal kan selge for de, mot prosenter i selvvinning, linking mot webside og tilsvarende. Med en slik løsning kan de også få vekk andre advertisers som vil gi websiden et ryddigere uttrykk. Eksisterende innhold Hva finnes og hva skal med videre og hvordan? Eksisterende innhold kan med videre, sett at det modereres til den nye malen hvor mengden bilder minskes. Dette er for å minke på den totale datamengden det tar å laste, spesielt for mobilbrukere. Dette vil gi en raskere nedlastning som gjør scrolling raskere til den typen inspirasjon en vil ha. På mobilnett er tiden med filoppløsningen og nelastningsløsningen (scriptet) med bilder: 13 sekunder før innholdet og de 3 første bildene kommer inn. Selv etter 2 minutter er ikke mer enn halve forsiden lastet inn. Det tok opp mot 5 minutter å laste inn forsiden ned til siste bloggpost. Dette kan få brukeren til å ville gjøre noe annet enn å bruke Colossal. Forsiden alene utgjør 6,7 MB med bilder. Dette i seg selv burde ikke utgjort et veldig stort problem, men på grunn av javascriptet som laster inn et og et bilde etter rekkefølge fra toppen og ned virker siden enorm å laste inn. Ved release til ny webside kan det fortsette likedan som før med content, eneste endringen blir mindre bilder. Både i filstørrelse og antall. Hvis det orginalt er plukket ut 10 bilder som er godt varierte kan det plukkes ut 4-5, såfremt det er ulike utsnitt (eventuelt perspektiv fugle, normal og froskeperspektiv) og viktigst for variasjon: vinkel. Eksempel til bildeutsnitt: Heltotal, halvtotal, halvnær og ultranært. Hvis det er bilde av et fotografi eller maleri kan det være et bilde som viser hele bildet, et som viser detaljer og et som viser det i omgivelsene det er ment til å stå i. Hvis dette ikke er mulig, vis til et-to bilder som er ulike, hvis mulig. I tillegg til å sikre en variert og konsis mengde bilder, skal det brukes ulike checklister
for å se om siden er klar til å slippes: http://lite.launchlist.net/ http://searchenginewatch.com/article/2287002/website-launch-checklist-25-thingsto-test-before-your-site-goes-live http://useit.com/papers/heuristic/heuristic_list.html Organisering Slik siden fremstår nå, virker sitemapet å fungere slik illustrasjonen viser. Man kan nå så å si alt overalt, men det fremstår rotete slik det er vist med den eksisterende løsningen, spesielt kategorien..more hvor det er titals med underkategorier i en dropdown. Webshopen er en separat del og er derfor linket ut og vekk fra primærhovedsiden. Den nye websiden vil være så langt det går, en onepager. Andre ting som vil bli merkbart annerledes er webshopen, denne vil gå inn under det samme domenet, pakket inn i det eksisterende systemet, med en ny variant. Nemlig WordPress med ecommerce.
Avsluttende refleksjon Den nye wireframen virker ryddigere, oversiktlig og langt mer en hyggelig og lettvint variant enn eksisterende for brukere. Merkevaren er ivaretatt ved å beholde mye av de samme funksjonene. Det går mer på direkte salg, enn en ekstern shoppingside. Designmessig er det gjort en del endringer underveis og mot slutten for å få en raskere og enklere forståelse av hva de ulike ikonene gjør ved klikk/hover. Valget av Call to Action-farger ble ut i fra forskning om hvilke som gir økt salg og klikk. Fargene ble derfor en rødorange salgsknapp som har vist seg svært effektiv. Som en kontrast til denne er det også en tydelig turkis knapp til buttons som ikke krever like mye oppmerksomhet, i denne grad salg. En ny funksjon som er påtenkt er en likefunksjon som lagres i cookies. Dette er fordi siden er så stor at å lete etter noe som man kanskje ikke husker navnet på, er vrient. Et problem som kan oppstå er usikkerhet rundt like-funksjonen. Ikonene som er aktuelle er tomler, hjerter, stjerner. Facebook har sluttet med likes på eksterne websider, de har bare anbefalingsknapp. Derfor er det tenkt å ha tommel opp/ned. Å ha for eksempel et hjerte for favoritter hadde blitt for sukkersøtt. Trending og top 20 samles muligens under en og samme side/funksjon.