FLPHOTO
Case study 2023 - gruppeprojekt 3.sem
FLPHOTO er en privatphotograf som specialisere sig i bryllupsfotografering. Han ønsker at skille sig ud fra andre og udvide sin målgruppe til enhver som mangler en fotograf til begivenheder og andet.
PROBLEM
Hvordan kan man formidle FLPHOTOs billeder på en ny attraktiv hjemmeside? Hvordan udvider man målgruppen til at omfatte både private personer og virksomheder? – og skaber værdi for begge målgrupper?
MÅL
Designe og udvikle en responsiv hjemmeside som rammer begge målgrupper. Inddrag FLPHOTOs erfaringer og billeder så besøgende bliver inspireret og nysgerrige.
MAIN VÆRKTØJER
Miro, Adobe XD, Premier Pro, Photoshop, Illustrator, HTML, CSS, JavaScript.
Research, feltarbejde og dataindsamling
Processen startede med undersøge forskellige fotograf-hjemmesider. Hvad virkede og hvad virkede ikke. Ved hjælp af et interview med FLPHOTO, fik vi et mere klart billede over hans vision om hjemmesiden og hvad indholdet skulle omhandle. For at indsale data fra forskellige målgrupper, sendte vu diverse spørgeskemaer ud til både privat personer og virksomheder. Spørgsmålene lød på, hvad de kunne tænke sig i en fotograf og hvordan en hjemmeside kunne se ud
Privat personer ønskede også at se et godt udvalgt af billeder fotografen har taget. Det er et væsenligt element i forbindelse med at udvælge fotograf. Det var også vigtig at prisen og kvaliteten stemmer overens. En introduktion af fotografen er mindre vigtig end den service og ydelse han kan tilbyde.
Et eksempel på hvad FLFHOTO ikke ønsker.
Mørke og miskommunikerende farver.
“Mit humør er hvad der skiller mig ud.
Jeg går meget op i at kunden føler sig rolig og de får en følelsen af at det er en god oplevelse at have mit som fotograf.”
– FLPHOTO
Virksomheder ønsker at se kvalitetsbilleder. Et godt portfolio af eksempler, så de kan se fotografens erfaringer og om stilen er et match til deres brand-identitet. Et plus er, hvis fotografen kan være fleksibel og justerer stilen til den specifikke opgave og tema, som virksomheden ønsker. Dernæst er prisen også vigtig.
Mange virksomheder ser gerne et længere sammenarbejdende forhold til fotografen, så der er konsistens i deres billeder og stil. På den måde er kommunikationen også rart, da begge parter kender til hinanden.
Personas, Tone of voice og Value Proposition Canvas
Ud fra vores undersøgelser kom vi frem til hvilke målgrupper og tone of voice vi ville fokusere på.
De 2 persona har tildeles samme ønsker, men forskellige arbejdsmetoder. Privat personen ønsker, udover gode billeder, at fotografen er rart at være med og at man kan føle sig tryg. Virksomheder ønsker et mere professionelt samarbejde hvor deadlines skal overholdes og kvaliteten skal være konsistent gennem hele forløvet.
VPC er med at bestemme hvilke værdier hjemmesiden kan tilbyde, hvad der kan forventes og hvad der skal undgås. Den er med til at sætte rammerne og fokuserer på hvad der kan sælges og hvordan det skal komme til udtryk.
Tone Of Voice:
Menneske orienteret & Professionelt.
Hjemmesiden skal bruge et sprog så FLPHTO får øjenhøjde med kunderne. Billederne skal være i god kvalitet, så der er ingen tvivl om dygtigheden.
“show it – don’t tell it”
Struktur, opsætning og test
Efter en masse brainstorm og kortsortering med forskellige muligheder og efterfølgende mange test, fik vi genereret 4 informationsarkitektur til hhv. header, forside, footer og billedgalleri til hjemmesiden. Vi testede vores løsning og disse strukture gav mest værdi for siden.
Designprocess
Fra idé til wireframes til produkt
Designprocessen startede med en masse idegenerering. Her blev der blandt andet lavet mindmaps moodboards, råskitser, farvekoordinering og meget andet. Vi havde hele tiden fokus på vores tone of voice, personas og VPC i mente, imens vi udrettede designet for siden.
Principper og regler som er gennemtænkt ind i designet og produktet
- Gestaltloven
- Designprincipper
- On-boarding
- Guiding
- Sweetspot
Mindmap af hjemmesiden. Her er ordene “Rolig”, “professionelt”, “imødekommende”, “Rent” og “Personligt” highligtet. Det er de adjektiver som skulle være i fokus under hele designet. Der er både hvad FLPHOTO ønsker kunderne skal kunne mærke gennem hjemmesiden, og hvad stemmer overens med de usergoals begge persona har.
FLPHOTO ønskede også et nyt logo til hans firma. Det skulle være simpel og personligt men samtidig genkendelig, så han kunne lave visitkort til diverse messer. Dette blev den endelige logo for virksomheden.
De 5 adjektiver er kommet til udtryk igennem farven, fonten og strukturen hvor man kan mærke varmen og dens imødekommenhed som var ønsket. Her er et udklip af den visuelle wireframe sammenlignet med det færdige website. Man bliver mødt med klare kvalitetsbilleder fra starten, så der ikker er nogen tvivl om at FLPHOTO kan finde ud af at levere et godt produkt. Det gør også at siden ser professionelt ud. Citater fra tidligere kunder er med til at fremhæve FLPHOTOs personlighed og virker som pålidelig kilder. Samtidig er der skarpe kanter og whitespace som gør at hjemmesiden virker mere ren og overskueligt.
Kodning af hjemmeside hva. HTML, CSS & JS
Til dette projekt har vi implementeret vores elementer i HTML5, stylet i CSS3 og gjort
elementerne funktionelle i JavaScript. Vi har brugt GitHub til at samarbejde i projektet. Der er brugt biblioteker, W3Schools og andre kilder som hjælp og inspiration til at få en velstruktureret, velkommenteret og valideret kode. Koden er gjort responsivt til både en mellem-skærm og mobilskærm med media-query størrelsen
1023px og 650px.
Vi har tilføjet robots.txt for at begrænse interaktionen med andre websider, og hvad nettet har adgang til. Derudover er der tilføjet en metatekst for at optimere SEO fra nettet til hjemmesiden. Unikt for hjemmesiden er en prisberegner, så kunderne kan have et estimeret prisbeløb inden de booker FLPHOTO. Det stemmer overens med vores personas usergoals og fra undersøgelsen om at prisen også er et vigtigt element i forbindelse med booking.
FLPHOTO har 3 standard-pakker som udgangspunkt. Dertil er der mulighed for at tilføje ekstra elementer som drone-billeder. Det kan tilføjes til prisberegneren, og man kan få et totalbeløb udgivet.
Da FLPHOTO har en hel masse billeder, gav det mening at lave et billedegalleri til at udstille dem. På den måde er det med til at vise kunderne de forskellige stilarter og kvaliteten han kan udføre.
Test, min rolle og konklusion
Gennem hele forløbet har vi testet undervejs. Både af skitser, informationsarkitektur og det færdige produkt.
Det har resulteret i at vi måtte ændre stil og udseende end hvad var oprindeligt tænkt, for at imødekommende personas og resultaterne fra diverse test. Vi har blandt andet udført en tænke-højt-test, hvor vi har givet testpersonerne opgaver som de skulle løse på hjemmesiden. På den måde har vi hele tiden optimeret siden og designet, så man får den bedste user experience.
Her er en test-video som skulle laves i forbindelse med projektet.
Test video
Min rolle
Da dette case study var et gruppeprojekt, har jeg været med til alle faser i processen. Det har hjulpet mig med at se hvordan det er blevet til fra start til slut og hele udviklingen derimellem.
Mit primære fokus har været på UX og kodningen, da det er her mine færdigheder skinner mere igennem. Selvom Javascript ikke en en spidskompetence, har jeg udviklet en 100% funktionel side med elementerm som er implementeret igennem en mange trail and errors. Det har resulteret i en masse ny viden og mere selvtillid i mine beslutninger.
FLPHOTO ER FAN AF HJEMMESIDEN!
Vi har designet en hjemmeside, som afspejler FLPHOTOs rolige personlighed og har gjort hjemmesiden attraktiv ved at sætte billederne i centrum og opbygge virksomhedens venlige personlighed og gode kvalitet ved brug af værdiskabende content elementer.
Vi har udvidet FLPHOTOs målgruppe til private personer og virksomheder og skabt content der imødekommer målgruppernes user goals.
Filip Lind, fotografen bag FLPHOTO har valgt at bruge vores design og logo til hans personlige virksomhed hvor hjemmesiden er under ombygning.