ARTMONEY

Content Driven Web Design


Gruppe #B6

Nadezda Christensen, Olga Batrakova, Svetlana Koshman

UX RESEARCH


Problemformulering


Når man som ny besøgende kommer på Artmoney.org http://artmoney.org/ er det meget uklart hvad Artmoney er og hvordan det anvendes. Formålet med vores projekt er at redesigne Artmoney sitet og skabe et mere informativt og overskueligt site, der synliggører konceptet og ideen bag Artmoney. Samtidig vil vi også gøre det nemmere at finde steder hvor Artmoney kan bruges som betalingsmiddel. Derudover er formålet med vores projekt at øge antallet af aktive kunstnere og kunstsamlere der selv designer eller er interreseret at købe Artmoney.



Konceptbeskrivelse


Vores eksamens projekt hedder 'Artmoney - Need cash? Draw your own money!' Slut produktet af vores projekt er en hjemmesidde det giver kunstnere, kunst-interreserede og kunstsamlere mulighed for at udveksle/handle Artmoney med hinanden.

Siden skal give kunstnere, kunst-interreserede og kunstsamlere en platform hvor de kan mødes, nyde og udveksle/handle kunst. Samtidig skal siden også skabe opmærksomhed omkring Artmoney generelt og informere den besøgende om konceptet og de muligheder der ligger i Artmoney.

En kunstner laver kunst og sætter det til salg på siden. En kunst-interreseret browser kunst på siden, bestiller og betaler det ønskede mesterværk. Kunstneren sender sit mesterværk og får pengene udbetalt når varen er kommet frem.



Indsigter fra dataanalyse


exam
  • 37,8% af de besøgende kommer via organisk søgning søgeordene er mange, men typisk indeholdende artmoney og stavet på mange måder.

  • 27,6% af de besøgende kommer fra sociale medier hvoraf hele 98% kommer fra Facebook.

  • 24,4% af de besøgende kender sitet i forvejen og taster sig direkte ind på sitet.

  • 10,3% af de besøgende kommer fra andre sider der linker til artmoney.org. Det er primært andre kunstnere der henviser til sitet.


Indsigter fra desk research og komparative analyser


I starten af projektet lavede vi desk research for at finde ud af hvad der er generelt for genren, altså hvad andre lignende koncepter benytter sig af på deres hjemmesider. Vi har lavet dette skema for at se hvad der går igen og det er blevet brugt til at tage stilling til hvilke funktionaliteter vi skulle have med i vores re-design.

Navn Link til websiden Visuelt design Bruger-venlighed Arkitektur Funktionalitet
Samleforening http://www.skandia43.dk gammeldags ja simpel og klar enkelt
Ny type penge https://bitcoin.org/en/ moderne ja simpel og klar enkelt
Christiania Art Gallery http://www.gallopperiet.dk/ gammeldags nej rodet og uklar ustruktureret
Dansk auktionshus https://bruun-rasmussen.dk gammeldags ja simpel og klar enkelt


Indsigter fra brugerinterview og brugertest

Peer-Review test


Jon, professionel kunstner, 46 år, har hørt om Artmoney fra sine venner, men han vil ikke selv deltage i projektet som producent. Han synes ikke, at 200DKK er en rimelig pris for hans kunst. Han kan måske blive interesseret i at samle nogle artmoney som investering i fremtiden. Han har nemlig en forståelse af kunst, som hjælper ham til at købe rigtige kunstværker.

Anna, interiør designer, 32 år, har aldrig hørt om Artmoney og havde svært ved at forstå konceptet. Det manglede nemlig ekstra forklaring. Hun tror ikke på, at deltagelse i projektet kan promovere hende som kunstner. Der findes bedre muligheder for at promovere sin kunst.

Natalia, arkitekt, 24 år, vil ikke deltage i projektet som producent, fordi hun har meget travlt med sit arbejde. Hun tror heller ikke på, at hun kan tjene penge på den måde.

Peter, arkitekt, web-designer, ex-hippie, 53 år, var meget begejstret for Artmoney. Han vil godt selv producere Artmoney ikke kun for pengenes skyld, men også for sjov. Han klagede kun lidt over, at der ikke er nogen butikker, restauranter osv. i hans hjemland, hvor han kan bruge sine egne Artmoney.



UX DESIGN


Målgruppebeskrivelse

Potentielle artmoney producenter


  • Kunstnerisk begavede skoleelever (forældrene betaler kontingent)

  • Kunstnerisk begavede (ikke professionelle) pensionister som får en mulighed for at kommunikere med hinanden baseret på fælles interesser

  • Hobbyister der kan komme til at producere artmoney

  • Sjældent professionelle kunstnere

  • Kunstforeninger der ønsker at skabe interesse om dem selv om deres kunst

  • Flygtninge/indvandrer der kan producere deres egne penge

  • Fanger som sidder i fængsel. Deres kunst kan desuden tiltrække flere samlere, der er begejstret for fængselskunst. Fangerne kan bruge artmoney som betalingsmiddel i fængslerne.


Persona #1: Kunstnerisk begavet skoleelev

Brian Ågaard


exam

Alder: 9 år
Beskæftigelse: Skoleelev
Bopæl: København
Civilstatus: Bor hjemme


Mål/behov

Brian går på københavns kunstskole hvor han med klassen har været på en fernisering som var arrangeret af Artmoney.
Brian er begejstret for konceptet og vil gerne selv lave sine egne artmoney som han så kan bruge bl.a. til at købe dyrt legetøj eller computerspil.

Likes
  • Elsker at male.
  • Kan lide at lave sine egne lommepenge.
  • Værdsætter at andre kan lide hans kunst.
  • Ekstrovert og kan lide at snakke med mennesker.
Dislikes
  • Hjemmesiden artmoney.org er kompliceret og ikke nemt at navigere på.
  • Han er begrænset af hvor megen tid han må bruge på nettet.
  • Han er ikke myndig til selv at handle.

Brian ønsker en løsning hvor hans kunst kan blive vist og anerkendt samt han kan tjene ekstra penge og opbygge et netværk i hele verdenen.



Persona #2: Hobbyister der kan komme til at producere artmoney

Anne Møller


exam

Alder: 52 år
Beskæftigelse: Kommunal ansat
Bopæl: Bagsværd
Civilstatus: Gift og har en søn på 18 år


Mål/behov

Anne har altid interesseret sig for kunst og har altid tegnet i hendes fritid. Hun er støt på en reklame for artmoney på FB og synes om konceptet. Hun vil gerne selv lave sine egne artmoney for at udvide hendes netværk og deltage i udstillinger og arrangementer.

Likes
  • Bruger meget af fritiden på at tegne og male.
  • Synes om det sociale i konceptet.
  • Værdsætter at andre kan lide hendes kunst.
  • Ser muligheden for en salgs- kanal for hendes egen kunst.
  • Synes godt om muligheden for at bruge artmoney f.eks. hos frisøren eller tandlægen.
Dislikes
  • Hjemmesiden er uoverskuelig.
  • Hun er usikker på om hun forstår alle mulighederne i konceptet for få butikker accepterer artmoney.

Anne glæder sig til at blive en del af et socialt kunst fællesskab hvor man kan bruge, sælge, og bytte artmoney dele og like værker på SoMe.



Personas #3: Fanger

Dan Skov


exam

Alder: 27 år
Beskæftigelse: Håndværker
Bopæl: Sunds
Civilstatus: Bor sammen med kæreste


Mål/behov

Artmoney har i samarbejde med et fængsel kørt et projekt hvor interesserede indsatte kan lave artmoney. Disse artmoney kan bruges internt i fængslets butikker. Dan producerer stadig artmoney i fængslet og synes om det. Det giver adspredelse i fængselshverdagen samt giver ham mulighed for at udtrykke sig gennem billederne.

Likes
  • Kan fokusere på andet end fængsel.
  • Alternativ måde at få og bruge penge på.
  • Tiden går hurtigere med en hobby.
  • Synes om det sociale i konceptet.
Dislikes
  • Man kan miste respekt over for andre indsatte
  • Begrænset adgang til internettet fra fængslets side.
  • Ligeglad og uinteresseret i alt på hjemmesiden som ikke giver ham direkte værdi.

Dan ser artmoney som et sted han kan slappe af og fjerne tankerne fra fængslet samtidig med han bruge værdien som betaling i fængslets butikker.



Brugerscenarie og customer journey


exam



User story


exam



Prototyping


exam

exam

exam




INFORMATIONSARKITEKTUR


Content Inventory / Content Audit




Kortsortering




Sitemap


Sitemappet er udarbejdet efter vi har lavet vores brugerundersøgelse. Brugerundersøgelsen lærte os at vores målgruppe forventer at få den information de skal bruge på en nem og hurtig måde. Derfor har vi lavet et fladt sitemap, hvor det er nemt at overskue strukturen på websitet vi skal lave.

exam



Content Outlines – Det faste indhold

Header – Footer


exam



Wireframes – Mobile


exam



Wireframes – Desktop


exam



UI DESIGN


Design language

I vores digitale løsning er det nødvendigt, at fundamentale elementer som farve, form, linje, kontrast, gentagelse, skygger, animationstyper osv. skal have et formelt, ensartet system af betydninger som en måde at kommunikere forståeligt med vores brugere. Dvs., at klare og konsekvente regler giver en god brugeroplevelse.



Atomic design

I vores design løsning brugte vi atomic design principper. Atomic design er en metode, der involverer at bryde et website layout ned i sine grundlæggende komponenter, som derefter genbruges på hele websitet.

exam



Persuasive design

I vores design løsning brugte vi også persuasive design principper. Et eksempel er Call to Action function i vores explainer video. Persuasive design understøtter virksomhedens forretningsmål. Det er en teknik, der bruges til at ændre folks holdninger eller få den til at foretage bestemte handlinger.


exam



Style Tile


exam



Typografi – modulære skala


exam



Sketch Prototyping

Desktop


exam

Mobile


exam


Motion Graphics


1. Kampagne video




Kampagne video / Storyboard

exam


Kampagne video / Moodboard

exam


Kampagne video / Styleframe

exam



2. Explainer video




Explainer video / Storyboard

exam


FRONTEND UDVIKLING


Framework: Bootstrap v4.0


Vi har brugt frameworket Bootstrap v4.0 grid til at arbejde mobile-first i dette projekt. I vores eksempel ses hvordan vi har benyttet Bootstrap v4.0 til at opbygge vores index.html side. Frameworket er downloadet fra http://getbootstrap.com.

exam



Plugins på websiden


1. Parallax

2. Popcorn / Video Call to action

3. Mixitup / Mixitup multifilter



SVG animationer


1. Kunstner evaluering


exam

HTML
exam

SVG
exam

JavaScript
exam



2. 'Brugernes roller' infografik


Infografikken består af 3 ikoner som brugeren kan interagere med. Når man trykker på ikonen, kommer der emne-forklaring. Strukturen består af HTML, JSON, SVG og JavaScript. Html’en indeholder 2 elementer, der er vigtige for interaktionen:

1. Det første html-element er div id=”icon”. Det indeholder SVG-filen med de forskellige ikoner. SVG-filen indlæses i JavaScript koden.

2. Det andet html-element er div class=”info-box”. Det viser den emne-forklaring som passer til den valgte ikon. Emne-forklaringen kommer fra JSON-filen, når man trykker på ikonen.

Når der klikkes på et af ikonerne, kaldes funktionen vis_info. Her bestemmes ID for det valgte billede, og funktionen vis_tekst kaldes på hvert element i listen af tekster.


exam



Optimering


Alle brugere kan godt lide når sitet loades hurtigt! Gerne på under to sekunder! Når cachen slås fra, kan man analysere, hvor længe brugeren skal vente. I vores tilfælde var det 2.16 sec. Vi brugte også en analyse fra Googles pagespeed tools https://developers.google.com/speed/pagespeed/insights/, som viste, at render-blocking JS and CSS bør elimineres, og browser caching bør benyttes. Værktøjet til test af, om siden er mobilvenlig https://search.google.com/test/mobile-friendly, viste et positivt resultat.

exam


HTML Prototyping




TEST AF LØSNINGEN


Tænke-højt-test


Spørgsmål eller opgaver til testperson

  • Find information om hvad artmoney er.
  • Find butikken “Klassisk Varieté” på siden og information om hvor meget betaling de accepterer med artmoney.
  • Find information om seneste nyhed.
  • Hvilken kampagne foregår på siden nu?
  • Tilmeld dig til nyhedsbrev.
  • Du skal forestille dig at du har en profil på siden som  Lars Kræmmer. Du skal login og uploade din nye artmoney.
exam


Med udgangspunkt i testpersonernes kommentarer har vi besluttet os for at ændre på:
  • På siden News, skal der lægges flere nyheder med mere information og tydeligere adskillelse af nyhederne
  • Når man logger ind som “armoney kunstner” skal det tydeliggøres hvor profilen kan administreres.
  • Information om aktuelle kampagner skal være tydeligere på forsiden.
  • SoMe ikoner skal fremhæves og gøres meget mere synlige
  • Kontaktinformaiton nederst på siderne skal gøres større og tydeligere
  • Muligheder for at like og dele nyheder på SoMe



BERT-test


exam



WP IMPLEMENTERING


HTML frontend, WP backend


exam




WP Plugins


Vi benytter CMS’et Wordpress til denne eksamensopgave.

Plugins: Custom Post Type UI og Advanced Custom Fields.
Artmoney 'Gallery' kan ikke rummes i almindelige indlæg: der mangler felter.
Løsning: Custom post med Custom Fields.

exam




JSON og dynamiske løsninger


For at vise Advanced Custom Fields i JSON-fil installerede vi ACF to REST API plugin. I Chrome installerede vi også en extension, der formaterer JSON - JSON Formatter 0.6.0 - så den ser pæn ud.

exam exam


Template

Statisk indhold på en HTML-side omdannes til templaten.

exam


JavaScript

JS henter Json ind i templaten og outputter.

exam



Mixitup / Mixitup multifilter plugins

Til vores filtrering benytter vi plugins Mixitup / Mixitup multifilter. For at få det til at fungere tilføjes en class=“mix” på alle de elementer der skal mixes. Så har vi lavet knapper til filtrering og slutteligt tilføjer vi det krævede JavaScript. Denne filtrering bruges til at sortere indholdet og der kan kun vises ét af gangen. Som vist i koden, har vi sat data-filter på siden Gallery, så vi kan filtrere Artmoney på COUNTRY, STYLE, ORIENTATION og MATERIAL. Plugins Mixitup / Mixitup multifilter bruges også på 'Artists' og 'Shops' siderne for at filtrere indholdet på henholdsvis COUNTRY og COUNTRY / INDUSTRY. Plugins er downloadet fra https://www.kunkalabs.com/mixitup/

exam




Formularer

Vi fik 'Login', 'Join Us', 'Send Message' og 'Artmoney Newsletter' formularerne til at fungere. Det betyder, at brugeren kan interagere med WP backend udenom WP brugerfladen via en uafhængig HTML-side.


1. Kode-eksempel fra registrerings formular 'Join Us'


exam


2. Kontaktformular 'Send Message'


'Send Message' er en kontaktform, hvor brugerens input på formularen sendes videre til en modtager (kunstner eller boutique). Når mailen er sendt, får brugeren en besked 'Thank you - you get the answer as soon as possible!' Kontaktformular 'Send Message' ligger på den samme side som kunstnerens single-view. Derfor bruges JS-kode for at hente kunstnerens emailadresse.

exam


3. 'Artmoney Newsletter' formular


For at få nyhedsbrevet til at fungere brugte vi WP-plugin Newsletter Version 5.1.1.

exam




PHP


1. Don't Repeat Yourself!

Vi har udvilket vores webside efter DRY princippet. Det står for Don’t Repeat Yourself. Ved at gøre det på den måde kan vi dele de sider vi laver op i fragmenter. I vores eksempel ses hvordan vi henter vores footer ind ved hjælp af PHP. På den måde får vi mulighed for at redigere eksempelvis footeren på alle sider ved kun at åbne en fil - footer.php i dette tilfælde.

exam




2. 'Active' nav-item class i menuen

Det giver en meget bedre brugeroplevelse, når det aktuelle menu-punkt er fremhævet. Når man skifter til et andet menu-punkt, kan man se, hvilken side man kigger på i øjeblikket.

exam




Loader


En loader advarer en bruger om at vente på en aktivitet, der skal gennemføres. I vores tilfælde tager det nogen tid at loade dynamisk indhold fra serveren. Derfor, for at forbedre brugeroplevelsen brugte vi loaderen på alle single-view og loop sider.


exam


SoMe integration


Facebook - like-og-del-bar muligheder og kommentarer via FB Comments plugin


På vores 'Artist' (single view) og 'Campaign' (statisk) sider lavede vi FB like-og-del og kommentar funktionaliteter.

exam



Instagram implementering


Vi brugte plugin INSTUSH http://www.instush.com/ for at lave Instagram galleri på vores 'News' side.

exam



LAUNCH


SoMe løsning


Strategi og taktik


Strategi:

I følgende strategi tager vi udgangspunkt i en enkelt kampagne - 'Prison Art' samt tilhørende event. Kampagnen løber over 2 måneder og har til formål at øge kendskabet til artmoney generelt med specielt fokus på 'Prison Art'. Derudover har kampagnen til formål at få flere til at købe og bruge artmoney. Selve eventen skal være med til at booste synligheden og omtalen af kampagnen.

Positionering:

Vi ønsker med vores SoMe aktiviteter at øge kendskabet omkring produktet artmoney og vores kampagne 'Prison Art'. Inden for kultur og kunstgenren er artmoney relativt ukendt, og hos kunstnere som kender til konceptet ikke særlig højt agtet. Dog ønsker vi med kampagnen at fremstå som unikke, seje og specielle i forhold til at kunne tiltrække os opmærksomhed således flere får lyst til selv at lave artmoney, men også bruge dem i de butikker der modtager artmoney.

Målet:

Vi ønsker at flere selv producerer artmoney, samtidig vil vi gerne have flere mennesker til at købe og bruge artmoney for således at vi også kan få flere butikker til at acceptere artmoney som betalingsmiddel.
For at opnå ovenstående mål, har vi opstillet følgende KPI’er:

  • 'Prison Art' kampagnen har til formål at øge antallet af likes og følgere på udvalgte sociale medier: Youtube, Facebook, Instagram, Pinterest og telegram
  • Antallet af mennesker der besøger og ser hjemmesiden www.artmoney.org samt undersiden Gallery skal i kampagneperioden øges med 50% i forhold til nuværende antal
  • Øge antallet af designere med 1 – 3 om ugen i kampagneperioden
  • Mindst 1000 visninger af video fra eventdagen 'Prison'
  • Minimum 30 tilmeldte pr. event
  • Antallet af kunder der køber atmoney skal øges med 20% i kampagneperioden


Eksempler / retningslinjer for posts


exam


Koncept og valg af platforme


Vi har valgt at vores mediestrategi skal foregå på 5 sociale medier med særlig fokus på Facebook.

Facebook
https://www.facebook.com/ArtmoneyDrawYourOwnMoney/
  • god til at skabe engagement
  • god til personlig kundeservice
  • god til at få budskabet spredt
Instagram
https://www.instagram.com/artmoney_drawyourownmoney/
  • god til visuel inspiration
  • god til at få fans til at dele billeder via hashtag
Telegram
https://web.telegram.org/#/im?p=@artmoney_drawyouownmoney
  • god til at skabe ens egen kanal med indhold om video, billeder og information
  • god til direkte og simpel kommunikation til abonnementerne
  • et medie i hastig fremmarch ude i verdenen
Pinterest
https://www.pinterest.dk/Lykke_dk/artmoney-draw-your-own-money/?eq=art&etslf=5871
  • god til arkiv over kunstnernes billeder verden over
  • god til at få visuel inspiration spredt
Youtube
https://www.youtube.com/channel/UCoKTHLLrQHsx7if4Kbwh9jQ/videos
  • god til at fange opmærksomheden
  • god til at få indholdet delt


Publiceringsplan


Vi tager udgangspunkt i 'Prison Art' kampagnen og opstiller en tidsplan der passer til ovenstående strategi om at skabe interesse og forankre denne gennem information og uddannelse af interesserede.

Prison art kampagnen forventes at løbe ca. 2 måneder fra 15 oktober til 23 december.

Planen viser de forskellige aktiviteter der skal aktiveres og hvilke dage de skal aktiveres på. Over hele kampagneperioden vil der således ske mange aktiviteter, men i ugen op mod eventet vil der være en større aktivitet der både skal tiltrække nye interessenter og kunder samt fastholde eksisterende. For at øge konverteringen og omsætningen, vil enkelte dage i ugen også fokusere på at skabe konverteringer.


exam


Analytics


Semrush

Der skal ske en løbende evaluering af kampagnen, ugentligt skal der evalueres på opstillede KPI, evt. tilpasninger skal implementeres. Til at overvåge vores SoMe valgt vi at bruge SEMRUSH https://www.semrush.com/ - all-in-one toolkit inden for digital markedsføring. Her kan vi samle vores Facebook, Instagram og Youtube profiler for at analysere og evaluere dem løbende.Vi kan se, hvordan målgruppes engagement ændrer sig med tid og hvilke opslag performer allerbedst, dvc. vi får at vide, hvilke typer opslag du skal have mere af – og hvilke typer opslag skal forbedres fremover.


exam



Hootsuite

Til at overvåge SoMe kan også bruges HOOTSUITE https://hootsuite.com/ - værktøj til at opnå bedre overblik over aktiviteterne på de sociale medier. Her kan vi samle vores Facebook, Instagram og Youtube profiler for at analysere og evaluere dem løbende.


exam



KAMPAGNE


2 måneders kampagne som handler om fangernes kunst. Det er også et socialt projekt, som kan tiltrække opmærksomhed til fangernes problemer generelt.

Målgruppe – Artmoney producenter. I den specifikke kampagne – fanger som sidder i fængsel.

Kampagnens mål er at tiltrække fanger – Artmoney producenter – til at registrere på websiden. Der skal være gratis registrering for den sociale gruppe.

Fangernes kunst kan desuden tiltrække flere samlere, der er begejstret for fængselskunst.

Vores video skal bruges på sitet og SoMe for at skabe en sjov vinkel omkring produktion af artmoney. Videoen skal fremhæve en bestemt og lidt skæv del af vores målgruppe - fanger. Samtidig vil lyden skabe underliggende stemning og være med til at fremhæve budskabet for målgruppen.





Vores process på Trello


exam