Rapport for Redesign af virksomheden Feelgood Bakery Gruppenavn: Bagedysten Medlemmer: Jens V. Hartfelt, Daniella Munck, Natalie K. Frandsen, Sara J. Klausen Link: http://afleveringer.hartfeltgrafik.dk/feelgoodbakery/index.html brugernavn: keammd kode: kode2015
Analyse Hvad formoder du, at afsenderen vil? osv. Hvem er afsenderen? De vil sælge glutenfrit brød og mel. Afsenderen er Feelgood Bakery på Prs Charlottes Gade i Kbh N. Hvem er målgruppen? kvinder, glutenallergikere, sundhedstrend, lækkersultne, unge kvinder der ønsker at være sunde, modne karrierekvinder, familier med glutenallergikere Hvad er afsenderens budskab? At sælge hjemmebagt brød rustikt Fokus på sundhed og hvordan kroppen reagerer på forskellige madvarer Hygge med sundt mel imens det er lækkert Hvilken effekt ønsker afsenderen at opnå? Personligt, hyggeligt, hjemligt Hvad kan du forestille dig, at afsenderen ønsker, at målgruppen skal tænke om afsenderen? Et trygt bageri med fokus på fællesskab, men en anelse til den liberale side. Farver Er der brugt en overskuelig farvepalette? Nej. Farvepaletten virker tilfældig og usammenhængende pink, lime, blå og grøn til tekst og brødets farver til baggrund. Og i så fald hvilke kontraster og harmonier er der i farverne? sort/hvid kontrast til brødtekst. Komplementær kontrast til links grøn og pink. Komplementær kontrast, Lys/mørke kontrast, Monokromatiske farver Treklangs farver osv. Understøtter brug af farverne hierarkiet og sidens indhold? Der er ikke anvendt farvekontrast til at understøtte sidens indhold eller til at skabe overblik på siden. Der er forsøgt brug af komplementær kontrast til navigationen. Er det funktionelle behov opfyldt? Nej. For mange menuer, for meget information og få lidt hierarki og struktur. Links er svære at ramme Det er svært at gennemskue hvad der er links og hvad der er info 1
Kan du se, hvad der er links, overskrifter etc. Er behovet for relevans opfyldt? Der er en overrepræsentation af link og undersider. Flere af siderne kunne sammenlægges for større overskuelighed. Farven på links (både i hover, active og neutral) er svære at se mod baggrunden. Er fotos, illustrationer, grafik etc. relevant i forhold til sidens indhold og funktion? Fx farvernes medbetydning, typografiens medbetydning osv. Fotos er brugt helt fint i overensstemmelse med farver, komposition og ensartethed. Logoet er det eneste grafik der er anvendt på hjemmesiden. Farve valget i logoet er underligt til formålet. Den blå farver giver forkerte associationer og cirklerne giver et indtryk af noget kemi/svampe relateret. Den indrammende ring er utydelig. Thumbnail versionen er mislykket og ligner en regnvejrssky. Banner Versionen er også mislykket. Typografi Hvor er der brugt display skrift, brødtekst og konsultativ tekst? Display/overskrift: Display / Courier Brødtekst: Serif / Times New ala Side links: Serif / Times New ala Navigations links: Sans serif / Arial eller Helvetica Hvor mange forskellige skrifter er brugt? 3 der I hvilke klassificering grupper tilhører disse skrifter? Sans serif fonten til links er grotesk Serif fonten til brødtekst og underoverskrift er en slab serif Fonten til logo font/display er display. Følger tekstopsætningen konventionerne? Er brødteksten fx let at læse, er der for lange linjer osv. Passer valget af skrift til sidens budskab og indhold? Links er ret små og svære at læse. Brødtekst på artikelsider er fint opsat med ok margen, ok linjeafstand og ok formatering. Overskriften er tydelig at adskille og let at læse. Identificer kontraster og gestaltlove, hvilke er brugt hvor? Det virker ikke til at der er brugt nogle kontraster eller gestaltlove. Links, overskrifter og menupunkter flyder sammen med undtagelse af sort/hvid kontrast for større læsbarhed. 2
Er der gjort brug af det gyldne snit, white space, grid? Siden gør brug af et 3 spaltet grid. Der er white space på begge sider af indholdet og indholdets max bredde er forholdsvis lille. Kan du identificere følgende kompositoriske elementer på sitet? Dynamiske, statisk, harmonisk, symmetrisk/asymmetrisk osv. Stjerne komposition, L komposition, cirkelkomposition osv. Symmetrisk komposition, diagonal komposition Er hierarkiet mellem elementerne på siden overskuelige? Nej Fortæller brug af kompositoriske virkemidler noget i forhold til budskabet? At hjemmesiden er hjemmelavet ligesom brødet Engagerer siden emotionelt? Både og. I en kombi af medfølelse og hygge. Billederne er med til at tilføje en smule af stemningen. Får siden overbevist sine brugere? Siden får ikke helt overbevist sine brugere. Man får indtrykket af at butikken ikke er helt etableret. Understøtter de visuelle virkemidler budskabet overbevisende? Billederne gør, men opsætningen er ikke så hyggelig og ikke alle billeder er af lige god kvalitet. Er stil og udtryk velvalgt i forhold til målgruppe og budskab? Lidt for standard, kedeligt og intetsigende. Nogenlunde passende i forhold til at være en nystartet virksomhed. Site arkitektur 3
Egne idéer lave et live facebook feed (testimonials) for at fremme fællesskabsoplevelsen og give brugeren incitament til at se de ting andre synes godt om. nyt logo Fjerne undersider og overflødige menupunkter Nuværende links/sider Home Butik Webshop Melmix og mel opskrifter Spørgsmål & svar Testimonials Om Feelgood Bakery Kontakt Nuværende links/sider Webshop Produkter Opskrifter Om os Butik/Kontakt/åbningstider/Spørgsmål & svar Testimonials erstattes af facebookfeed i siden 4
Koncept og idé Moodboard 5
6
Wireframes 7
Styleguide 8
Mockups 9
Layoutdiagrammer 10
Beskrivelse af test og testresultater Her sammenligner vi vores testresultater med gruppe 5 som har testet vores side. Gruppe 19 (os selv) Beskrivelse af problem Hvilken heuristik? Link til siden hvor problemet findes Kategori (alvorsgrad) Forslag til løsning Hvor lang tid vil det tage at løse? mangler burger menu på smartphone version Status synlighed. alle sider 3 lav det 1 2 timer interaktivitet er ikke tydelig nok på mobil version Status synlighed. alle sider 3 ændre farve på links i mobilversion for at gøre dem mere synlige halv time mangler fag ikon på fane Manglende navne på ejere Status synlighed. Status synlighed. 0 lav det 20 min. om os 1 lav en footer i bunden 10 min. De fleste af vores egne problemer, er mest synlighedsproblemer (synes vi selv). Vi har prøvet at teste, hvordan man nemt kommer rundt på vores side og hvordan synligheden er for de forskellige ting. Vi har valgt at implementere en burgermenu til mobilversionen, da vi synes, det er en stor hjælp for navigationen på en lille skærm samtidig med, at det ikke gør siden for rodet og sammenpresset ved at have en navigationsbar. Udover det, har vi valgt at ændre farven på vores links i mobil versionen. Vi synes ikke, at interaktiviteten er tydelig nok i forhold til desktopversionen, hvor vi har farveskift som hover effekt. Vi har også indsat et fag ikon på fanebladet, som udelukkende er for synets skyld. Det er ikke vigtigt for selve brugen af hjemmesiden, men det giver en god finish og er lækkert for øjet at kigge på. 11
Gruppe 5 om vores side: Nr. Svar Problemer Forslag til løsning Hvor lang tid vil det tage at løse? 1 Melside Alt for meget tekst Afkort teksten 15 30min 2 På sidste side om os Om os og kontakt burde være 2 forskellige menupunkter 3 Ind under mel tryk SHOP HER Vanskeligt at vide, at mel er webshoppen, da der ikke er nogen tilhørende stor overskrift Lav flere menupunkter Lav tydelig overskrift over, hvad der er webshop og hvad der er opskrifter Hvad kan købes? 20 30min 15min Vi er næsten enige, med det som Gruppe 5 er kommet frem til, ang vores hjemmeside, vi har lyttet til dem og har derfor valgt og lave nogle ændringerne. Vi har laver vores overskrifter om på de forskellige sider, da man før let kunne overse dem, derfor har vi valgt at sætte overskrifterne i øverste venstre hjørne. Gruppe 5 satte fokus på, at de syntes det var meget tekst på vores Mel side, og at det var lidt tørt at komme igennem, vi har lyttet til dem og tænkt over, hvordan vi kan forbedre det, men det er en lidt større proces at ændre i det, så derfor har vi valgt at lade teksten stå som den er. Vi har sat et ekstra menupunkt ind som er Kontakt, der førhen lå under menupunktet Om os, da man skulle scrolle langt ned på siden for at nå til kontaktoplysningerne. Desuden har vi også tilføjet menupunktet Webshop da den før var slået sammen med siden Mel. 12
Refleksion: Vi har valgt at tage virksomheden Feelgood bakery og lave et redesign til deres hjemmeside. Vi har lavet en one pager som skulle give et mere overskueligt look. Vi ville gerne bibeholde den hjemlige og hyggelige stemning, og har derfor valgt at bruge farver i varme, brune nuancer for dels at fremhæve stemningen, men også for at give associationer til brød. Vi har også videreført deres pink hover effekt fordi, det er et meget markant element i deres nuværende hjemmeside. Ved mere end 2 3 elementer vises der kun et udvalg i vores layoutdiagrammer. Deres brand er hjemligt, da man kan se de selv har taget billeder af deres produkter med deres telefon eller Kamera. Vi har derfor valgt at bibeholde den del af hjemmesiden ved at genbruge deres egne billeder, som er meget autentiske. Vores proces : Vi har været enig det meste af vejen, vi har haft de samme ideer om designet, men vi har ikke været helt enig i fonten og farverne, derfor kom vi med et forslag som ramte alles smag og som fungerede for designet. 13