Content Driven Web Design!
Artmoney

Mikkel Lind Blach Portfolio

Cecilie Frederikke Johansen Portfolio

Sebastian Storm Portfolio

Gruppe A6
Link til løsning

Problemformulering

Hvordan kan en webløsning for artmoney.org udvikles, designes og implementeres, så den formidler artmoney konceptet, dækker kunstnernes og brugernes behov?

Delspørgsmål

  • Hvordan kan vi arbejde med User Experience Design, så oplevelsen med brugen af løsningen bliver helhedsorienteret?

  • Hvordan kan vi designe et User Interface, så det giver et sammenhængende udtryk på tværs af medier og platforme?

  • Hvordan kan en webløsning, der engagerer brugerne og kunstnerne, udvikles og implementeres?

Afgrænsninger

Artmoney har flere forskellige målgrupper med hver deres behov:

  • De kunstinteresserede
  • Artmoney samlere
  • Artmoney skabere
  • Virksomheder der tager imod artmoney som betalingsform

Vi vil primært fokusere på at formidle til “de kunstinteresserede” og skabere. Der tages højde for at indhold, informationsarkitektur, design og implementering kan fungere på tværs af de forskellige målgrupper.

UX Research

Koncept

Vores fokus i dette projekt er at fremhæve fællesskabet for målgruppen 40-60 årige, som er kunstnere og kunstinteresserede. Vi lægger vægt på at formidle fællesskabet for at tiltrække flere fra målgruppen, som endnu ikke er en del af det nuværende artmoney-community.
Ved brug af en ny tagline: “More than just art”, vil vi kommunikere et koncept ud der beskriver “mere end bare kunst”. Hos artmoney.org findes der nemlig ikke kun kunst i form af materialer, virksomhedens vision er netop større. Artmoneys fungerer nemlig som en valuta samt kan bruges som betaling i udvalgte butikker, opfordre samlere til at mødes og er med til at skabe et kunstunivers der udfolder sig i et kreativt fællesskab.
Vi ønsker at gøre konceptet indbydende og åbent over for brugerne, ved at fremvise det nuværende artmoney-fællesskab ærligt som en del af markedsføringen.

Hvad er en artmoney?

Hos artmoney.org kan man kan lave sin egen kunst under et specifikt regelsæt. En artmoney har altid en fast værdi af 200 kr og skal have dimensionerne 12 x 18 cm. Artmoneys fungere både som kunst og er en valuta. En artmoney kan derfor blandt andet bruges som betaling i udvalgte butikker.

Virksomhedens vision

  • Et globalt netværk af butikker der acceptere artmoneys
  • Frihed fra at være økonomisk slave til at leve for det liv man ønsker
  • At komme overens med hinanden uanset status, kultur, religion eller politisk
  • En håndlavet valuta, der giver “kunstneren” mulighed for sælge og betale med deres artmoneys
  • At integrere kunsten som en del af hverdagen

Artmoney.org's nuværende sitemap

Analyse af nuværende site

  • Dårlig formidling af artmoney konceptet
  • Ingen visuel identitet, der resulterer i ingen stemning
  • Forveksles med en kunst-webshop, uden at konceptet af artmoneys skinner igennem
  • Sprogbarrierer ved både brugen af Dansk/Engelsk i samme tekster
  • Sitet fremstår uprofessionelt der kan gøre brugerne utrygge i deres handlinger
  • Menupunktnerne virker misvisende i forhold til undersidernes indhold

Projektets formål

I dette projekt skulle der udvikles et redesign som både tager højde for UX, UI og development. Resultatet skulle både indeholde en hjemmeside og der integreres nye sociale medier, der skulle erstatte den eksisterende løsning. Her skabes derudover en brugervenlig brugerflade for kunstnerne og de kunstinteresserede. Kommunikationen skal specifikt tilsigtes den valgte målgruppe. Brugeren skal nemt kunne bruge samt forstå løsning og koncept.

Valg af målgruppe:

De kunstinteresserede og kunstnere

Tagline:

#Morethanjustart

Værdiord

kommunikation

Konkrete tiltag

  • Omstrukturering af indhold
  • Omstrukturering af navigation
  • En forsiden som hurtigt giver indblik i konceptet
  • Præcis og enkel kommunikation på hele sitet
  • CTA-knapper som gør sitet overskueligt og let at navigere i
  • En visuel identitet der afspejler kommunikationen og branchen
  • Et konkret tema som står for fællesskab, kreativitet og det kunstneriske
  • Vi har forbedret brugervenligheden
  • Valg af sprog
  • Integreret sociale medier i form af Instagram og Facebook

Organisationsmål

At oplyse omkring hvad Artmoney.org som virksomhed står for og hvordan artmoney fungerer. Derudover eksponering af artmoney og budskabet på de sociale medier.

Kampagnemål

Vil lave en fælleskab portal på de sociale medier for kunstinteresseret som har et grafisk udtryk som udtrykker genre kunst.

Hjælpemål

80% af alle besøgende skal kunne forstå konceptet bag Artmoney.org. Mindst 25% flere registreret brugere inden 2019.

Forretningsmål

At få solgt artmoneys og få flere artmoney medlemsskaber.

Det overordnede mål

At skabe et fællesskab og viden omkring emnet.

Google Analytics

  • 18 td frafald af sessioner allerede på forsiden
  • Gns. tid for visning er 00:00:38 - Frafald på 44,67 % baseret på sidevisninger
  • Join/register - Forsiden - About - Stor afvisningsprocent og % afslutninger
  • Primært henvisninger fra det sociale medie Facebook, Organic Search og Direct
  • Brugere med en session (med under 4 sider gns.) - har gns. besøgstid på 1.26 min i sessionstid
Overordnet Data
  • 32.192 sessioner
  • 228.365 unikke sidevisninger

Alle data er fra perioden 26 august 2016 til og med 26 august 2017. Det skal nævnes at der er en fejlkilde i dataene. Dette skyldes at en masse fra klassen besøgte siden pga. projektet.

Indsigter fra interview om Artmoney.org

"Ville gerne have det mere som apps, hvor det er mere adskilt med en tekst som forklare hvad det er som man går ind til."

"Jeg ved ikke hvad det er. Det ville være en ide hvis man allerede på forsiden blev forklaret om konceptet."

"Startsiden er meget kompakt og uoverskuelig."

"Er det lovligt?"

"Man skal gøre mere ud af at vise hvorvidt artmoney er lovligt og hvad formålet er med det."

"Det virker meget som scam fra udlandet."

"Hjemmesiden virker meget utroværdig."

"Der mangler noget tryhed på siden."

"Konceptet om artmoney lugter af svindel, så det er vigtigt at der tilføjes noget troværdigt indhold, som skal gøre konceptet mere troværdigt."

Link til lydfiler og skærmoptagelser kan ses her og her.

UX Design

Persona

User story

Senarie
Maria overvejer at finde inspiration til nyt kunst. Hun er kunstinteresseret og er hobbykunstner i sin fritid. Hun søger noget anderledes kunst, og har hørt fra sine venner, at hun skal undersøge artmoney.org. Maria går derfor ind på sitet for at undersøge nærmere.

Mål og forventninger fra brugeren
  • At sitet afspejler genren “kunst”
  • At finde mulig inspiration til værker
  • Evt. ved interesse købe noget kunst
  • At udforske “hvad er konceptet?”

Komparativ analyse

Virksomhed Url Kort beskrivelse Kontakt info footer Nem navigation Responsiv Sociale medier Visuelt
Artmoney Artmoney.org Nej Ja Nej Ja Nej Low/medium
Solrød kunst solrodkunst.dk Tildels Nej Nej Ja Ja Low/medium
Kunstgalleriet kunstgalleriet.dk Tildels Ja Ja Tildels Ja Medium
Kunstgalleriet-odensen kunstgalleriet-odense.dk Nej Ja Tildels Nej Ja Low
Helsingør Kunstgalleri helsingørkunstgalleri.dk Nej Ja Ja Nej Ja Low
Hjerm Kunstgalleri hjerm-kunstgalleri.dk Nej Ja Ja Ja Ja Medium

Prototyping

Informationsarkitektur

Content Audit

Vi har lavet en Content Inventory, hvor vi løb alle siderne fra artmoney.org igennem og noterede om der var tale om et loop (dynamisk) eller statisk sider. Vi har lavet en Content Audit ud fra vores Content Inventory og vurderet dem ud fra ROT-kriterierne: redundant, obsolete og trivial. Målet med det er at få nedskrevet “actions” på sider hvor der skal forbedres noget ved indholdet.
Link til Content Audit her

Content strategi

About siden skal redesignes, så alle de vigtige informationer kommer frem uden lede efter dem på siden. Browse menupunktet skal omdøbes til shop, da mange forbinder browse med noget andet. Shops bliver omdøbt til stores, da shops typisk opfattes som nogle der sælger virksomhedens produkter.

Menuen skal gøres enklere, evt. med en burgermenu til alle størrelser. Både forsiden, shops og artists skal være mere indbydende. Filtreringen placeres vandret i toppen i stedet for vertikalt. Den laves vandret i toppen da man skulle scrolle langt ned hvis man skulle filtrere på f.eks. land.

Sitemap

Vores sitemap er udbygget vha. vores content inventory & audit, hvor vi fandt 53 undersider af artmoney.org. Herfra defineres hvilken sidetype det var, altså en single, loop eller en kombi view. Derudover gav vi den en værdi udefra ROT skalaen med noter og en action som siden skulle have. Efter det startede vi først på at lave en kortsortering i gruppen for at snakke om hvad der skulle være på de diverse sider, hvordan og hvor det skal placeres, og hvordan vi ville navigere.

Bagefter lavede vi en kortsortering i Optimalworkshop til nogle testpersoner for at indsamle data om hvordan testpersonerne ville inddele indholdet og navigere på. Testpersoner var næsten enige i hvordan kortene skulle sorteres. Dog havde testperson 1 valgt at kortene “Hvad er artmoney” og “hvorfor skal jeg bruge artmoney” skulle være under about. Dette ses der bort fra da Joel Marsh i UX for beginners i lesson 4 (side 7) om de 3 whats siger at “It is always a good idea to have a title or an image (or both) that answers the question: “what is this?” og “What can the user gain?”. Ergo er det er en god ide at have en tekst eller billede som forklarer hvilken slags side man er kommet ind på og hvilke fordele man får som bruger. Vi har derfor valgt at placere "hvad er artmoney" og "hvorfor skal jeg bruge artmoney" under forsiden.

Vores endelige sitemap blev derfor dette:

Content Outline

Se vores Content Outline her

Navigations strategi

  • Vi har valgt at arbejde med en flad informationsarkitektur
  • Vi arbejder med en nav-flyout på mobilen
  • Navigationen skal fungere som et hjælpeværktøj for brugeren
  • Vi vil lave ændringer i navigationsmenuen for at gøre den mere overskuelig
  • Vi vil gerne have en utility navigation over sprog
  • I footeren vil vi have kontaktinformation og link videre til de sociale medier
  • Når brugeren er inde på en specifik artmoney, vil vi i bunden tilføje en ”Se lignende artmoney fra samme kunstner”-funktion, der skal lede brugeren videre til andre artmoneys på sitet, i stedet for en ”dead-end”
  • Når brugeren er inde på en specifik kunstner, vil vi i bunden tilføje en ”Se lignende artmoney fra samme kunstner”-funktion, der skal lede brugeren videre til andre artmoneys på sitet, i stedet for en ”dead-end”

Kravspecifikation

Sider: Forside, Shop, kunstnere og stores

De faste elementer er headeren og footeren.

Dynamisk data: På shop siden skal der være en række dynamiske dataer. Det er et billede af den enkelte artmoney (DATA_img), navnet på selve artmoney’en (DATA_Navn) og kunstneren på den (DATA_kunstner).

På stores siden skal der være dynamisk indhold af et billede (DATA_img), navnet på virksomheden (DATA_Navn) og hvor den ligger (DATA_land). På kunstnere siden skal der være dynamisk indhold af et billede (DATA_img), navnet på kunstneren (DATA_Navn) og hvor han/hun bor (DATA_land).

Funktionaliteter: Der skal være filtrering og sortering. Filteringen fungerer som en dropdown menu når man klikker på den. Der skal være et søgefelt, et login og oprettelses af bruger. Derudover skal der være et slideshow på forsiden.

Wireframes

Vores Wireframes er lavet i Adobe XD og kan ses her

UI Design

Design overvejelser

Designet har en essentiel betydning for sites identitet, og vigtigt - hvordan brugerne opfatter helheden af virksomhedens vision samt hvad de vil formidle.

I forbindelse af flere tests og analyser over det nuværende site (artmoney.org), kunne vi efterfølgende klargøre nogle klare overvejelser for at forbedre sitets forståelse samt design målrettet til brugerne. Vi ønskede at producere et nyt design, som skulle fungerer mere overskueligt og let visuelt. Det vil sige, at brugeren skal hurtigt kunne forstå hvad konceptet går ud og i hvilket univers de befinder sig i.

Derfor med billeder som sammenkobler vores vision af Artmoney.org's nye redesign, vil vi kommunikerer med en stemning af billeder udtrykt i form af et kunstmiljø, fællesskab og kreativitet. Vi har valgt at bruge en bred margin til at skabe fokus på indholdssektionerne og give sitet et letttere udtryk samt mere karakteristisk.

Styletile

Farverne i vores design er med til at kreere det univers vi tilsigtede. Vi har brugt den orange farve til at skabe opmærksomhed. Den orange farve er vores “hoved” farve, som har mest vægt på sitets design. Vi har eksperimenteret med nuancen af orange, og valgte endelig en farver som både skinner igennem, men også har et knæk af en blødhed. I første iteration havde vi overvejet at bruge en rød farve nuance, men efter flere overvejelser passede den røde farve ikke ind i vores løsning, da den kan komme til at fremstå som en blodig eller faretruende farve.
Farven grøn symboliserer kreativitet og menneskelighed. Vi har valgt denne farve da vi lagde vægt på fællesskabsfølelsen og menneskets kreativitet. Den grønne farve ses i to nuancer i vores endelige design, som er med til at give en ro på sitet. Sidst bruges en koksgrå farve som giver en moden stemning.

Formerne på sitet er firkantede. Det skaber rene linjer og et let overskueligt design. Da målgruppen er mellem 40 til 60 år, er der derfor taget højde for designets former. Firkantede former fremstår mere seriøse, i modsætning til runde eller håndtegnede former.
Vi har dog valgt at gøre de firkantede knappers hjørner en anelse runde, for at bryde de skarpe kanter firkantede faconer ellers kan have. Vi har valgt at lave mange knapper i vores design for at interagere burgerne i form af CTA.

Typografi

Overskrift fonten Poppins er moderne og let forståelig, så den hurtigt kan læses. Fonten har ikke fødder og er en geometrisk sans serif. Geometriske sans serif skrifttyper har været et populært designværktøj inden for den kreative industri på verdensplan. Brødteksten Montserrat er også en sans serif, som er nyttigt brugt til at læse længere tekster. Vi har tænkt over at skrifttypen skulle være letlæselig for brugeren.

Persuasivt Design

Vi har forsøgt at arbejde med persuasivt design, da web designerens største problem er at fange den besøgendes opmærksomhed - normalt skal man have fanget brugerne på under 8 sekunder. Så hvis der skal udvikles et overbevisende site skal vi kommunikerer til hjernens tre centre: Reptil-hjernen - det instinkt bårne center, det emotionelle/sanselige center og det logiske center.
Derfor ved at først at fange målgruppens interesse ved indbydende billeder på websitet og spændende indhold på de sociale medier, aktiveres reptilhjernen først. Derefter ved at bruge stemningen af fællesskab og storytelling skabes der følelser - som fanger den emotionelle hjerne del. Sidst arbejdes der aktivt med målgruppen og en masse content til CTA eller - whats in for me. Ergo den logiske hjerne del aktiveres. På den måde kan motiverende design ændre brugernes adfærd, ved at lokke, forføre og overtale din bruger.

Motion Graphics

Budskab

"At kunsten er mere end bare kunst hos artmoney"

3. aktsmodellen

Vi benyttede treakts modellen for at få planlagt historien/manuskriptet:

1.akt – Skabe opmærksomhed og følelse vha. Pathos: At artmoney we share the same feeling about art. We believe that art can be more than just art.

2.akt - En forklarende gennemgang af hvad artmoney konceptet går udpå: Artmoney is an unique handcrafted piece of art made by any durable material which functions as a currency.
Every artmoney has always the same format at 18 times 12 centimeters and a fixed value of 200 danish kr equal to 27 euro’s.

  • You can use artmoney to buy services or goods. For instance at the hairdresser or at a café
  • You can use artmoney to buy services or goods, for an exam
  • Buy artmoneys created by artists all cross the world or try to be an artist yourself
Storyboard
Moodboard
Styleframes
Animatic

Frontend Udvikling

Design in Browser

I dette projekt har vi brugt metoden design in browser, som betyder at vi har designet i browseren i stedet for et tegneprogram såsom photoshop eller sketch. Fordelen ved det er at vi hele tiden kunne ændre i vores design løbende uden de store problemer.

Frameworks

Vi valgte at prøve at bruge google's Material Design, som framework. Ved at bruge material design og dens gridsystem, som inddeles i rækker og kolonner, får man et resposnsivt website. Alle kolonner er inddelt i 12 grids, som gør det muligt at bestemme hvor meget indholdet skal fylde i skærmstørrelserne. Vi valgte at bruge det pga. material designs udfoldning af deres user interface og interaktioner. Derudover er det veloplagt til mobile-first, som der f.eks. ses på sitenav'en.

Mixitup

I filteringen har vi brugt plugin'et mixitup til at filtere alle vores artmoney. For at mixitup virker, skal man give den div man vil filtere på classen mix. Derudover skal man give div'en nogle bestemte classer. f.eks. har div'en fået classen below_2_mm_mobile, som gør at mixitup viser alle de artmoney hvis tykkelsen er under 2mm. Det er blevet defineret ved hjælp af data-toggle. Hvis man vil sortere efter A-Z eller Z-A, skal div'en have en data-name, som altså gør at produkterne kan sorteres efter navne. En linje javascript skal også skrives som aktiverer pluginet. Her er det vigtigt at alle produkterne og filteringen er i sammen div, som containerEL bliver sat ligmed. Til sidst bliver multifilteret aktiveret ved "Enable: true".

Test af Løsning

Bert Test

De fleste testresultater passer overraskende godt til hvad vi selv havde forventet.
Under kreativ - simpel ligger brugerne tættere på kreativ, som er fint. Grim - pæn ligger også tæt på vores forventning og uforståelig - forståelig ligger også fint. Man kan gøre det endnu mere forståeligt ved at gøre artmoney-produkter mere synlige, når man kommer ind på shoppen, da man i øjeblikket skal scrolle ned for at se dem. Ikke kunstnerisk - kunstnerisk, besværligt - brugervenligt og umoderne - moderne ligger brugernes input tæt på vores ønskede resultat. Brugerne mener at websiden er mere informerende end hvad vi selv satte den til og det er en positiv faktor. Med utroværdigt - troværdigt og stilforviret - sammenhæng ligger vi tæt på det ønskede resultat. På amatør - professionel ligger vi på lidt over 4, som egenligt er fint nok, selvom vi gerne ville tættere på 5.

Link til vores dataer kan findes her

Tænke Højt Test

Find en artmoney, som er lavet af metal og køb: "Så vil jeg prøve at scrolle lidt ned af forsiden. Så vil jeg trykke på knappen "check our shop", hvor jeg så kommer ind på en ny forside. Så vil jeg trykke på knappen See all, hvor jeg så kommer ind på nogle kunstnere. Jeg vil prøve at trykke tilbage til forrige side også scrolle længere ned. Der kommer så nogle artmoneys frem. Så vil jeg trykke på "material" også på "other". Den filtrere nu artmoney'erne"

Har du nogen forslag til forbedringer? "Inde på shoppen da jeg skulle finde en artmoney, klikkede jeg på en knap som sendte mig til kunstnere i stedet for at scrolle ned på shopsiden. Man kunne gøre noget så man kunne se nogle af produkter når man kom ind på siden. Ellers når man er inde under stores og kunstnere, så kunne der godt være en lille tekst som forklarede om den bestemte side."

Beskriv hvad det er for en hjemmeside som du har været inde på "Det er en webshop som sælger det såkaldte artmoney, som åbenbart har en fast størrelse og en fast værdi"

Vil du benytte hjemmesiden? "Umiddelbart ikke men det er mest pga. konceptet virker underligt, med at du kan betale med kunst og alle artmoney har en værdi på 200 kr. Men hvis det interesserede mig, ville jeg nok benytte siden, da designet virker meget enkelt og overkommeligt. Det er nogenlunde nemt at navigere rundt på, som nok skyldes en rød tråd"

Har du nogen forslag til forbedringer? "Inde på shopsiden var det svært at se artmoney hvis man ikke scrollet ned, da en tekst og en orange boks spærrede for synet. Man kunne nemt trykke på knappen inden man rullede ned. Man kunne evt. når man komme ind under stores og artists have en intro tekst som forklarede om den bestemte side"

Konklusion for tænke højt testen

Ud fra vores tænke højt test kan vi konludere at brugerne godt kunne lide at der var en rød tråd i hjemmesidens design og navigation. Brugerne kunne beskrive hvilken hjemmeside de var inde på og hvad hjemmesidens funktion var. De Ville umiddelbart bruge hjemmesiden hvis det syntes om artmoney. Et af forbedringsforslagene var inde på shop-siden, hvor en af brugerne klikkede direkte videre til kunstnerne da han skulle finde en artmoney. Det skal løses og det gøres ved at når man kommer ind på shop-siden, så skal artmoney-prdoukterne være synlige på skærmen uden man skal scrolle ned. Det kan gøres ved at slå de to elementer som er over artmoney-produkterne sammen eller gøre dem mindre

Link til tænke højt testens dataer kan findes her

Implementering

Wordpress Plugins

I dette projekt bruges Wordpress til at skabe en database. Der bruges pluginet Customfields og CPT UI (Custom Post Type UI). CPT UI bruges til at oprette custom posts type. REST API slåes til, til hver custom post type.
Customfields bruges til at oprette nogle felter til de oprettede custom posts type. På billedet til venstre er det blevet oprettet customfields til artmoney-produkterne og defineret en regel om hvornår de customfields skal vises. Customsfields'ne har en rækkefølge, et field label og et field name. Field label'et vises som en overskrift ved hver customfield inde under det oprettede custom post. Field name bruges når man er inde i javascriptet skal hente dataen fra wordpress.

Wordpress API

På billedet ovenover bliver wordpress API'en hentet ved at variablen apiURL sættes ligmed linket til wordpress API. Derudover laves der en et tomt array, som skal indeholder alle dataerne. GetPosts bliver kaldt, som indeholder en if-sætningen, som gør at hvis Posts-arrayet er mindre end 1, så bliver wordpress API'en hentet ved hjælp af at variablen result bliver sat ligmed await fetch(apiURL). Bagefter bliver posts sat ligmed await result.json();, som så kommer til at indeholde alle dataerne fra wordpress API'en.
Funktionen showPosts kaldes, hvor template variablen sættes ligmed template'en inde i html'en som har classen temp_artmoney_loop. Derudover bliver display variablen sat ligmed den row som skal indeholde alle artmoney-produkterne og senere bruges til at appende alle dataerne ind.
På sidste linje bruges cloneNode til at klone alle dataerne fra template'en fra html'en.

Dynamisk Indhold

I template'en er der givet en række classes som skal bruges til at sætte indhold ind fra wordpress API ved hjælp af javascript. Først bliver classList brugt på div'en som indeholder classen mix. Der linkes med den rigtige sti i API'en, som gør at en række classes bliver tilføjet, med dem som har classen mix. F.eks. hvilke farve, stil, materiale osv. Det skal bruges til når artmoney-produkterne skal filteres. Hvis man vil have sortering fra A-Z skal hver artmoney-produkt have et data-name. Det gøres ved hjælp af setAttribute.
Derefter sættes der titel, billede, kunstner og et link ind. Det gøres ved textContent, src og href.

Mixitup - Pagination

Til shopsiden har vi brugt Mixitup plugin'et pagination, som gør at der kun er 12 artmoney-produkter pr. side. Det gøres ved at tilføje pagination i javascript lige nedenunder multifilter (se billede til højre), hvor der så defineres et limit på 12.

PHP

PHP bruges som et serverside hvorimod javascript bruges som en clientside. Det vil sige at man i PHP kan lave en database, hvor ens oplysninger så vil blive gemt, da PHP skaber kontakt mellem browseren og serveren. Javascript er derimod et sprog som læses i browseren og kan læse filer som json. Dog kan det ikke gemmes på serveren.

DRY - Don't-Repeat-Yourself

Vi har brugt PHP's include tag til at sætte headeren og footeren ind på alle vores sider. Det sparer os for en masse tid, da vi slipper for at skrive det ind på alle vores sider.

Share Facebook - singleview Artist

Under en specifik kunstner, skal man kunne dele ham/hende på facebook. Dvs. at hvert enkelt URL og Meta-tags skal opdateres for hver kunstner. Facebook tillader ikke at man bruger javascript til at opdaterer ens Meta-tags. Derfor har vi brugt PHP, da vi skal rendere siden på serveren og ikke i browseren.

Step 1: Først skrives der en linje PHP som henter kunstnerens ID, som hentes fra API'en.

Step 2: Derefter indsættes et script som er hentet fra en facebook share generator, hvor websitets link var blevet angivet.
Her er det vigtigt at scriptet kommer lige efter body-tag'et.

Step 3: Til sidst indsættes en html kode, også hentet fra facebook share generator på det ønskede sted på websitet. Dog skal href modificeres, så det får det rigtige end-point (id). Det gøres via PHP med et echo tag, som referer til kunstnerens id ($userid, se i step 1).

Meta-data via PHP

Da vi ikke kan opdaterer Meta-dataerne via javascript, derfor bliver vi nødt til at gøre det serverside (PHP).

Step 1: Først oprettes en tom side, som bliver kaldt usermeta.php. Derefter bruges php tag'et include til at inkluderer den i filen inde under head.

Step 2: Fra linje 1-2 hentes alle dataerne fra en bestemt kunstner fra wp-api'en. Bemærk at den får et end-point på via et php string.
På linje 3 gemmes alle dataerne i et array.
Fra linje 9-14 lægges alle dataerne fra arrayet ind i nogle variabler.
Fra linje 17-25 opdateres Meta-dataerne (serverside)

Email formular

Step 1 - HTML

Først laves kontaktformularen i html'en. Her er det vigtigt at hver felt får et name attribute, som skal bruges til at sende informationerne videre til en PHP fil. Derudover sættes attributen required på navn, email og emne, der gør at brugeren skal svare på feltet. Der tilføjes også en placeholder som skal hjælpe brugeren med at udfylde feltet. form'en får en action, som sender den videre til PHP filen mail.php, når man trykker på submit knappen. Der laves også et felt som er hidden og får attribute'erne name og value. Det skal bruges til at hente kunstnerens email, så den pågælende kunstner får email'en.

Step 2 - Javascript

Kunstnerens email hentes via javascripten med hjælp fra en value Property og lægges som value i det hiddenfelt

Step 3 - PHP

På linjen 3 fra mail.php hentes kunstnerens mail via en PHP array'et $_REQUEST også inputtets name, som var kunstnermail.
Fra linje 6 til 12 hentes brugerens input, altså hans navn, email, emne og besked. Det gøres på sammen måde med et PHP array'et $_REQUEST, som tager imod inputterernes name.
På linje 15 laves emnet(subject), som består af en tekst string + brugerens navn ($navn) + brugerens email ($email). Punktummet i PHP betyder det samme som et plus-tegn (concatenation operator) i javascript når det er brugt sammen med en string.
På linje 17 bliver beskeden (message) lavet ved samme principper som emnet (subject) blev. Her bliver beskeden dog stylet via css, så $emne bliver til en h1 og får en farve.
På linje 23 bruges en PHP mail funktion, som indeholder kunstnerens mail ($to), beskeden ($message) og header ($header). Det gør at mail'en bliver sendt.
Linje 25 gør at brugeren sendes videre ind på html-siden takSiden.html.

Optimering af site

Vi lavede en load test under chrome's network fane, hvor vi sætte flueben ved disable cache, som gjorde at hele site blev loadet. Vi lavede testen på siderne home, blog, about og events. Screenshots af testen kan ses her. Vi fandt frem til at især billederne på vores site skulle optimeres.

Det gjorde vi ved hjælp af photoshop hvor vi gjorde alle vores billeder til det rette filformat. Vi justerede også deres størrelse, så de ikke er større, end den største størrelse som de anvendes i. Derudover komprimeret vi kvaliteten på billeder til 50%

Vi valgte at optimere vores egne CSS filer ved at minimer dem, så alle linjeskift og mellemrum. Vi sørgede dog for at have en backup af hver CSS fil, hvis der skulle komme rettelser.

De færdige load test kan ses her

Launch

SoMe Plan

Dokumentation af kortlægning

Som det første gik vi i gang med kortlægning som er et værktøj til at afdække hvad der sker af debat, aktiviteter, netværk og aktører på de to sociale medier i forhold til emnet.

Art for all - link
Identificering af samtlige nøglepersoner
Instagram - Eksisterende #Hastags
  • #morethanjustart: 303
  • #kunst: 3.349.393
  • #art: 298.861.408
  • #artmoney: 11.818
  • #artist: 73.247.698

Kristian Von Hornsleth


Man kunne overveje at inddrage nogle anerkendte kunstnere. Med henblik på at få dem til at udgøre en del af markedsføringen, komme til udtryk i kommunikationen, i forbindelse med co-creations, mulighed for dialog og feedback løbende fra inderkernen.

Derudover at kunne identificere behov for brugeren samt etablere relationer i netværket. Hvorfor er det en god ide? Fordi troværdigheden er i top, og at influencer kan påvirker følgernes brugeradfærd for den eksisterende målgruppe der allerede findes på deres medieplatform, som virksomhederne ikke har mulighed for.

Strategi og taktik

Strategi

Langsigtet planlægning - Hovedspørgsmålet: Hvad vil vi opnå?

strategiske mål
  • Styrke dets brand, så det bliver mere troværdigt
  • Styrke fællesskabet for kunstnere og dem som er interesseret i kunst som er en del af Artmoney
  • Udvide kundegrundlaget
  • Kommunikere budskab/koncept længere/bedre ud
SoMe strategi - Planlægning

Fokus: Hvad vi vil opnå ved at benytte SoMe som en del af kommunikationen

  • Vi vil anvende et eller flere sociale medier til at styrke fællesskabet online
  • Starte kommunikation/debatter via de sociale medier
  • At brugerne kan dele sin interesse med andre (oplagt at dele sin kunst)
  • Til at promovere kommende events
  • Til at få flere sidevisninger på artmoney.org (vores redesign)
  • Til at vise inspiration, teknikker og backstage af kunstnernes proces
  • Storytelling
  • Brugen af influencer

Koncept og valg af platform

Tagline: "more than just art"

Med vores tagline ønsker vi at kommunikere et budskab, hvor kunsten ikke bare er kunst, som den kan have tendens til i dagens samfund. Vi ønsker at kommunikere igennem dette hashtag/tagline med afsender fra artmoney.org. Konceptet går ud på, at artmoney ikke “kun” er kunst, men meget mere, ergo en valuta, et fællesskab, en organisation som afholder events mv.

Hos artmoney vil vi netop samle kunstnere og kunstinteresserede i et miljø for at skabe et forhold og en historie til hinanden. Artmoney.org er derudover et kunstprojekt hvor man bruger kunsten som den blev brugt i de gamle dage, hvor man kunne bytte sig til andre materialer. Dette er med til at skabe et skarpt syn på vores nuværende valutasystem.

Strategiens taktiske plan
Taktikker
  • Nærhed med brugerne
  • Engagement i form af interaktion, rækkevidde mv.
  • Holde en god frekvens
  • Bruge hashtags
  • Være visuelt stærk
  • Være menneskelig
  • Stille spørgsmål
  • Lave konkurrencer og give-aways
Platforme vi findes på:
Overordnet formål med SoMe:
  • Trække trafik til hjemmesiden
  • Markedsføre aktiviteterne
  • Øge salget af artmoneys
  • Nå ud til flere brugere
  • Øge interaktionerne
  • Skabe værdiskabende indhold
KPI’er plan A:
  • Inden Januar vil vi gerne have:
  • FB: 2500 synes godt om siden
  • Instagram: 1000 følgere på instagram


  • Inden Januar vil vi gerne have minimum:
  • FB: 25 likes pr. post
  • Instagram: 10 likes pr. post
KPI’er plan B:

Hvis plan A ikke opnår ønskede effekt, kan man overveje at justerer på nogle faktorer:

  • Annoncere på facebook for et budget, for at nå endnu længere ud
  • Samarbejde med influencers brugerprofiler som allerede rammer den ønskede målgruppe fx på Instagram for at opnå flere brugere interaktioner/følgere

Vores forslag til publicering plan:

Vi ønsker en daglig interaktion med målgruppen på de sociale medier. Det er oplagt at publicere forskelligt indhold på de forskellige medier, da fx Facebook og Instagram har hvert deres formål og udtryk som medie. Derfor vil brugeren på Instagram i højere grad opdage et udvalg af inspirationsbilleder der er illustreret i et mere seriøst udtryk, hvor Facebook-mediet indeholder konkurrencer, humoristiske gifs, artist of the month mv, ergo et mere humoristisk og “afslappet miljø”.

Link til publicering plan her

Eksempler/retningslinjer for posts:

Content

Facebook - gennemsnitlig 1 opslag om dagen. Heraf vil du finde:

  • Kunstner, som viser hvordan han/hun laver sine artmoney - evt. i forbindelse med en konkurrence
  • Post af collage med artmoneys
  • Et portræt eller interview af skaberen af artmoney.org, Lars kræmmer
  • Blog-teaser som linker til bloggen
  • International og national presse - hvor han er blevet kontaktet af et medie
  • Fokus på virksomheder - omtale om virksomheden
  • Posts omkring samarbejde med nye virksomheder/aftaler
  • “Artist of the month”
  • Post omkring artmoney gallery
  • Højsæson posts - fx i form af tema konkurrence (jule konkurrence)
  • Events (før, efter og imens)
  • Debatter - hvad din holdning? Hvad er din stil , politisk, kunsten osv.

Instagram - gennemsnitlig 1-2 opslag om dagen. Heraf vil du finde:

På væggen:
  • Post af collage med artmoneys
  • International og national presse - udtrykt i billeder
  • Fokus på virksomheder - personlig møde med virksomhed
  • Share your artmoney collection - konkurrence
  • Artmoney gallery - billeder af det
  • Højsæson - tema konkurrence
  • Events før, efter og imens billeder
  • Gifs af kunstner der laver en teknik
  • Billeder fra kunstner - både af artmoney og proces
  • Hvert 5. billede #hagstag med baggrund, med fokus på enten virksomhederne, samlerne eller kunstnerne
Stories:
  • Kunstner, som viser hvordan han laver sine artmoney - evt. kan man vinde artmoney’en
  • Se en kunstner afleverer sit dyrebare artmoney til køber - evt. på Cafe eller andet.
  • Fokus på virksomheder - personlig møde med virksomhed
  • Højsæson - tema konkurrence - reminder om konkurrencen
  • Storytelling i form af følg en artist/Lars Kræmmer
  • Events
Retningslinjer

(Instagram) Hvert 5. billede er et billede (topic) om kunstnere, samlere og butikker med en farve baggrund med et passende #hashtag. Det er skal være samme farve samt font fra hjemmesiden.

Billederne handler oftest om fællesskabsfølelsen. F.eks. hvad kunstneren laver og forholdet mellem kunstner, samler og butik.

Eksempler på posts

Analytics:

Formålet overordnet:
  • Trække trafik til hjemmesiden
  • Markedsføre aktiviteterne
  • Øge salget af artmoney
  • Nå ud til flere brugere
  • Øge interaktionerne
  • Værdiskabende indhold
Succeskriterier
  • Ved at opnå det ønskede antal followers (Instagram)
  • Ved at opnå det ønskede antal interaktioner på Facebook posts
  • Ved at opnå det ønskede antal interaktioner på instagram posts
  • Ved at opnå det ønskede antal likes på kanalen (FB)
KPI’er:
  • Unikke antal likes på siden
  • Ugentlig rækkevidde
  • Antal klik på linket
  • Platforme: Facebook & Instagram
På de sociale medier tilstræber vi en høj involvering brugerne i kommunikationen
  • Involvering af produkterne
  • Medskabelse af produkterne
  • Hjælpe med til at skrive blogs
  • Storytelling
  • Tæt på kunstnerne

TAT-test ud fra vores sociale medier:

Caroline 19 år
Henrik 51 år

(Instagram) “Konceptet er kunst, men også fællesskab, events. Lyse farver, det ligner folk der går op i kunst og kunstinteresserede. Kontrast farver”. - Caroline

(Instagram) “Det er at samle kunstnere. Det ligner en organisation/kunstner som holder events mv”. - Henrik

(Instagram) “Kunstnere og interesserede i kunst. Slut 30’erne-60’erne”. - Caroline

(Instagram) “Kunstnere og den kunstinteresserede forbruger til brug af Artmoney. En alder på 40 plus”. - Henrik

(Facebook) “Det er events, kunst fællesskab, mere sjovt indhold end Instagram fx Gifs”. - Caroline

(Facebook) “Man forsøger med kunsten af få flere dimensioner. Fx man kan betale med kunst. Fx cirklerne ligner fællesskab”.

(Begge medier) “Det giver mening at Instagram er pænere. Planen fungere godt, og det er nogle fine opslag som passer til målgruppen. Konceptet er spændende, fordi den både rammer kunstnere, butikkerne og interesserede i kunst (dem der køber kunst)”. - Caroline

(Begge medier) “Grunden til det er godt indhold er fordi de har to forskellige medier - som har plads til forskelligt indhold. KPI’erne er realistiske. Fællesskabet mødes passer godt til konceptet. Det er med til at skabe nye relationer”. - Henrik

Effektmåling

Vi ville have lavet en effektmåling af vores instagram men det er desværre ikke muligt da man skal op på 100 følgere mindst. Vi kan dog se at der er interaktion i form af likes på vores posts.

På facebook har vi indtil videre 77 sidevisninger med 29 synes godt om. Vi har en rækkevide på 94 personer. 111 har intergeret med vores indhold.

Artmoney teamet

Cecilie Frederikke Johansen

Multimediedesigner

Sebastian Storm

Multimediedesigner

Mikkel Lind Blach

Multimediedesigner