KYOTO.DK ANALYSE OG REDESIGN Website: juuul.dk/kyoto.html Password: kea Malene Rostgaard Rasmussen Camilla Skov Sørensen Thomas Juul Mathias Vangsgaard
2
ANALYSE, KOMMUNIKATION Hvad vil siden og hvem forsøger de at få i tale? Branding for deres fysiske butik og indsigt i deres univers. Design- og tøj-interesserede unge, som følger de nyeste trends og gerne vil holde sig opdateret på, hvad der sker indenfor mode og design. Hvem er afsenderen? KYOTO.dk Hvem er målgruppen og hvordan ser en persona ud herfor? Modeinteresserede mænd og kvinder under 40, som prioriterer tøjbudgettet og værdsætter hele købsoplevelsen bl.a. butikkens indretning. Unge som er på de sociale medier. Hvad er afsenderens budskab? At skabe et univers for køberen, så de allerede før de besøger den fysiske butik har en forventning om hvad de køber og hvad butikken står for. Vise et univers, som understøtter den livsstil mange unge er en del af. Butikkens brands er i centrum, så forbrugeren hurtigt får indsigt i, at de bliver en del af et modebevidst og trendy livsstil. Hvilken effekt ønsker afsenderen at opnå? En positiv kommunikation til branding af butikken og en følelsesmæssig investering, inden man besøger den fysiske butik. Hvad kan du forestille dig, at afsenderen ønsker, at målgruppen skal tænke om afsenderen? Afsenderen ønsker at målgruppen bliver draget ind i deres univers, og får lyst til at være en del af den livsstil som de udstråler, og dermed besøger den fysiske butik, hvor den kan opnå dette. Hvad vil siden og hvem forsøger de at få i tale? Branding for deres fysiske butik og indsigt i deres univers. Design- og tøj-interesserede unge, som 3 følger de nyeste trends og gerne vil holde sig opdateret på, hvad der sker indenfor mode og design. Hvem er målgruppen og hvordan ser en persona ud herfor? Modeinteresserede mænd og kvinder under 40, som prioriterer tøjbudgettet og værdsætter hele købsoplevelsen bl.a. butikkens indretning. Unge som er på de sociale medier.
MÅLGRUPPE, PERSONA Interesser: Design er en stor del af Ottos livsstil. Han går meget op i mode og de nyeste trends inden for alt hvad man kalder livsstil - herunder mode, indretning, restauranter osv. Han kan godt lide at holde sig opdateret på diverse sociale medier. Mediebrug: Medierne bruges som et naturligt element i hverdagen, herunder oftest Instagram, hvor han viser sig selv og sin livsstil frem. Samtidig bruger han også de sociale medier til at følge med på de nye trends, deltage i begivenheder/events og generelt holde sig opdateret på hvad der sker i modeverdenen. Social adfærd: Når Otto ikke er på studie eller arbejde, drikker han ofte øl eller kaffe med vennerne på de hippe steder i københavn, deltager i div. sociale events i det københavnske kulturmiljø, herunder åbning af nye butikker, launch af collabs mellem to brands, f.eks. i Wood Wood, Kyoto, Soulland osv. Pengene bliver hyppigt brugt i High fashion butikker og natklubber som Chateau Motel, KB3, condesa osv. Holdning til kategorien: Otto interesserer sig for designtrends og arbejder stærkt på en fremtid indenfor modebranchen. Han bruger meget tid på at udvide sin horisont indenfor design, ved at undersøge forskellige brands univers på nettet og andre sociale medier. Han vil gerne opnå et personligt statement, som stadig er high fashion. NAVN: OTTO BOPÆL: KØBENHAVN V ALDER: 25 ÅR CIVILSTATUS: SINGLE 4
GRAFISKE VIRKEMIDLER Det funktionelle behov er opfyldt, da hjemmesiden er tydeligt og klar i sit hovedindhold. Den er overskuelig og enkel med lidt tekst, mange billeder, simpel og samme skrifttype hele vejen igennem. Behovet for relevans er opfyldt, da websitet giver et indblik i butikkens univers ved at fremvise deres brands og indretning. Deres webside fremstår enkelt, overskueligt og stilrent, hvilket også er det budskab man får når man besøger deres fysiske butik. Designet på websitet virker til tider som halvfærdige løsninger så som at logoét og navigationsmenuén på forsiden blender ind med splashbilledet, og dermed ikke fremstår tydeligt. Stil og budskab er helt klart velvagt i forhold til målgruppe.målgruppen vil udfra hjemmesiden vælge at besøge den fysiske butik og dermed købe deres produkter, da de formår at kommunikere det mod- erne og stilrene look som deres målgruppe søger. 5
SPROGLIGE & STRUKTURELT VIRKEMIDLER SPROGLIGE VIRKEMIDLER Teksten er let forståelig og overskuelig at gå til. Tekstens indhold er præcist og er til tider en guide til hvordan man opnår looket som butikken ønsker at signalere som værende trenden lige nu. Websitet for overbevist sine bruger ved at lave små sætninger som f.eks white is on your mind som er billedteksten til hvidt tøj. Samtidig henvender teksten sig til det bud- skab de prøver at kommunikere som er at man bruger deres website til at tjekke deres brands og tøj ud og derefter kan køberen vurdere om de vil møde op i den fysiske butik for at prøve det. Da websitet er meget trend præget og da virksomheden går op i at dem som klikker sig ind på deres website skal føle de kigger på noget modebevidst, er det et godt valg fra afsenderens side at have valgt et ungdommeligt sprog, men slag og humor i. Der er ikke særligt meget tekst, dog er det relevant da der er tekst til deres billeder af tøj, og en kort tekst om deres brand også. Det er nemt at læse og forstå hvad budska- bet er og meget overskueligt da det er delt op i små tekstbidder. STRUKTURELT VIRKEMIDLER Der er kun 4 menuer på afsenderens website hvilket gør det nemt at nde rundt i. Deres logo og menu fader dog ind i baggrundsbilledet på nogle af siderne, hvilket ikke virker helt gennemtænkt. Websitet gør brug af negative space og de holder meget af informationen samt billeder centret på forsiden. Som sagt er der ikke meget tekst på siden, men de få ting som der står er relevant og giver information nok at budskabet kommer du til køberen. Det er en website man hurtigt skimter igennem, da billederne viser hvad de sælger og hvad de ønsker at kommunikere.
NAVIGATION HELVETICA NEUE BOLD BILLEDSTIL BRØDTEKST HELVETICA NEUE REGULAR IKONER FARVEPALETTE #57524D #D7D7D7 #0F0E0C #A7A27D #8C5048
ANALYSE, WIREFRAME 8
9 ANALYSE, SITEMAP
RESEARCH WOOD WOOD Enkelt og overskueligt website, som viser butikkens univers. Derfor er der her brugt en del af de sammen elementer som hos Kyoto. De har to billeder, i stedet for et stort, hvilket giver at andet udtryk, da overskriften her står for sig selv på en hvid baggrund, og ikke over billedet. Den er derfor lidt mere tydelig. De følger den sammen trend, men det enkle og overskuelige udtryk. SOULLAND Hos Soulland er siden nem at navigere rundt på, men på en lidt mere kreativ måde en hos Wood Wood og Kyoto. I stedet for en stor overskrift, bruger de deres genkendelige logo øvers på sitet. Shop delen fylder meget på hjemmesiden, hvorimod hos Kyoto er det branding for deres fysiske butik og univers der er i centrum.soulland gør brug af et splash- billede, som kyoto også har på deres site. De følger også den enkle og overskuelige trend, som med få virkemidler ser professionelt ud. NUÈ GROUP Nué group har et mere feminint look, da de modsat de andre sites kun skal appelere til kvinder. De bruger derimod stadig den meget enkle og simple stil, som giver det profesionelle look, som man må sige er en del af trenden for hjemmesider i modebranchen. Deres Site er responsive, da de har fokus på, at mange af deres brugere ofte tjekker deres site på Iphone eller Ipad. 10
KONCEPT OG IDE Vi vil gerne bevare det univers og koncept de har valgt til deres hjemmeside, da det giver indsigt i hvordan deres fysiske butik fremstår. Vi vil forbedre UX og UI, ved at gøre den mere overskuelig, professionel og æstetisk. Vi vil derfor prøve at gøre siden mere overskuelig, ved at lave nogle flydende overgange, så afsnittende er en del af oplevelsen på sitet. Derved undgår man følelsen af at man bliver kastet rundt til forkseliige sider, og at informationen er let og tilgængelig. Designdelen af siden er meget rodet, hvilket vi synes fremstår uprofessionelt. Det vil vi opdatere ved at gøre siden mere enkel, og give elementerne mere plads, så øjet fanger den enkle detalje. Farverne vil blive holdt lyst, da det vil give sitet et mere professionelt look. 11
NYE WIREFRAMES FORSIDE BRANDS CONTACT INSTAGRAM FEED BRANDS ABOUT 12
LAYOUTDIAGRAM.header img (icon).splash img (splash).div Img / a.nav a a a FORSIDE BRANDS CONTACT INSTAGRAM FEED ABOUT 13
BRØDTEKST HELVETICA NEUE REGULAR BILLEDSTIL NAVIGATION HELVETICA NEUE THIN ABOUT BRAND CONTACT IKONER FARVEPALETTE #57524D #D7D7D7 #0F0E0C #A7A27D #E8E2D8
KODNING En af de største problemer ved kodningen var at vi skulle lave en pop-up menu, som lagde sig over sitet. Vi var derfor nødt til at bruge javascript til at definere et event, når klikker på menu-genvejene. Derfor skulle vi også i vores header linke til eksterne javascripts, som definere handlingen for hver genvej, og beskrive det i javascript. Dette gjorde vi praktisk ved at overlayet altid ligger i bunden under navigationen med en højde på 0 og først når vi klikker, skalerer den op til den ønskede størrelse på sitet, så alt dækkes undtaget af headeren med vores logo. 14
15
Heuristik Problem URL Kategori Løsning Kan løses på... Konsistens og standarder Curser bliver ikke til hånd, - kan man eller kan man ikke trykke på link? (det ligner at man arbejder med tekst. Juuul.dk/ kyoto.html 1 Rettes i css 15 min Æstetisk og minimalistisk design About for meget tekst! (Brands-> men, der er et navn der stikker ud helt til kant) Juuul.dk/ kyoto.html 1 Tekst er deres egen hjemmesides og kan ikke laves om. Rettes i css 45 min. Status Synlighed Det fremgår ikke at man kan købe ting. (webshop/butik) det ligner at det kun er en blog eller design forum. Det fremgår ikke tydeligt hvor butikken er placeret kontakt? ( About / Contact det ligner at teksten er blevet skåret) Placering?? Scrollbaren er for responsiv den er ikke tilpasset siden. Juuul.dk/ kyoto.html 0 1 2 2 Behøves ikke at blive rettet Adressen står under kontakt, men alt efter hvilken skærm man indlæser hjemmesiden på viser eller viser den ikke adressen (css) About og Contact vises fint på nogle skærme, men skal ændres så den kan ses på alle skærme ligegyldigt størrelse. (css) Scrollbaren reagere på forsiden, men da de andre sider lægger sig oven på forsiden reagere denne ikke på de andre sider. (css) 0 min 5 timer i alt da det er samme fejl der går igen (skalering)
BESKRIVELSE AF TEST OG TEST RESULTATER. Konsistens og standarder: (Rettes ikke) At cursoren ikke laves om et en hånd eller lign for at vise at man kan klikke rundt på siden, har vi valgt at lade vær med at rette. Det skyldes at når du holder cursoren hen over about brands contact dannes der en streg under ordet, hvilket vi mener er nok til at fortælle brugeren de skal klikke sig videre. Æstetisk og minimalistisk design: (Rettes ikke) Der bliver nævnt at der er for meget tekst under about. Da teksten er det vi har taget fra den originale hjemmesiden, ser vi ikke at have ret til at ændre i teksten og vi vælger derfor at bibeholde alt teksten. (Rettes) Under brands -> men er der nogle af brands navnene som stikker ud under billedet da teksten fylder mere end billedet. Dette har vi valgt at ændre i css ved at sætte en scrollbar funktion ind, da alle brands stadig kan være der, men ikke stikker ud under billedet. Status Synlighed: (Rettes ikke) Da websitet ikke har en webshop og dermed kun er en fremvisning af hvad de har af brands i den fysiske butik, kan vi ikke ændre så meget ved det. (Rettes) Grunden til at beliggenhed ikke kan ses for butikken er fordi websitet ikke er skaleret ordentligt ned endnu. Her indsætter vi en scrollbar så man har mulighed for at se alle billeder og tekst ligegyldig hvilken skærm man er på. Samtidig ændre vi billedets størrelser en smule for at sørge for alt kan ses. (Rettes) Det samme gælder for about og contact. Det er ikke skaleret rigtigt ned, og her indsættes også en scrollbar for at man har mulighed for at se alle billeder og tekst ligegyldig hvilken skærm man er på. Samtidig ændre vi billedets størrelser en smule for at sørge for alt kan ses. Det vi har valgt at løse/rette var at skalere siderne ned så det passer til alle skærmstørrelser. Da dette ville tage alt for lang tid, har vi valgt at indsætte en scrollbar de fleste steder da det er en simpel og pæn løsning til vores problem. 17
REFLEKSION OVER PROCESEN Vi har valgt at fokusere mest på UX, ved at få flydende overgange mellem de forskellige sider. Brugeren skal ikke klikke sig rundt imellem forskellige sider, men får muligheden for at at blive på forsiden hele tiden, og derefter åbne de forskellige navigationer op som lag på lag. Dette bliver mere overskueligt for brugeren da de hele tiden har én side at forholde sig til. UI har vi valgt at beholde nogenlunde på samme måde som Kyoto s. De ændringer vi har valgt at fortage, har været for, at alle elementer på hjemmesiden skulle have plads til at fremtræde, da det på den måde ser mere professionelt ud, og giver mere blikfang da det er rent og overskueligt. Vi har hele tiden haft vores målgruppe i tankerne når vi har valgt design og ændringer. Siden er gjort mere overskuelig og det er tydeliggjort hvor man kan finde frem til f.eks. brands, contact og about. 18