FRISØR VEST. Link til hjemmesiden: Frisorvest.github.io. Lavet af: Aleksander, Benjamin, Line & Cathrine

Transkript

1 FRISØR VEST Link til hjemmesiden: Frisorvest.github.io Lavet af: Aleksander, Benjamin, Line & Cathrine

2 Case 3: Aleksander, Benjamin, Line & Cathrine. Beskrivelse af gruppens tidsplan Trello: Vi har benyttet os af Trello for at få et godt overblik over den tid vi havde til rådighed i forbindelse med vores case 3 dage, samt for at få mest ud af disse dage. Dag 1: Den første dag i projekt forløbet gik med at indsamle data i form af interviews, data, snakke med butikken samt danne os et overblik over den målgruppe vi skulle formidle virksomhedens produkt ud til på bedst mulig måde. Dag 2: Projektets anden dag gik med at lave skitser og moodboards for at vi kunne komme så tæt på det design der ville kunne ramme den valgte målgruppe bedst muligt. Udover det gik dagen med at samle op på gårsdagens informationer og viden. Dag 3: Vi fortsatte her med projektets designproces, hvor vi finpudsede skitser og lavede mockups for at kunne komme så tæt på det ønskede design som muligt. Her fandt vi dog ud af at ikke alle ideer i skitserne fungerede på skærmen, derved blev vi også klogere og mere bevidste om hvad vi i bund og grund ønskede. Dernæst gik vi i gang med selve kodningen af vores hjemmeside. Vi startede med mobilsiden for bedre at kunne få det mest relevante med, dernæst til computer hvor der i højere grad kom mere information og tekst. Dag 4: Kodningen var på vores fjerde dag i fokus. Vi fortsatte hvor vi slap og arbejde videre som dagen forinden. Udover kodningen af vores hjemmeside begyndte vi at snakke om hvilke 1 af 10

3 elementer der skulle være en del af vores rapport, samt overveje sammenhængen i vores arbejdsproces. Interviews: Interview er en af de benyttede metoder i vores case. Interview er en kvantitativ metode, hvor man her kan opnå viden om menneskers følelser, oplevelser, samt holdninger mm. vi har i casen benyttet os af personinterview. Med et personinterview har vi mulighed for at komme dybere ned i den enkeltes tanker, dermed har vi den fordel at vi i højere grad kan komme i dybden og opnå detaljeret viden. Nedenfor ses en kort beskrivelse af de interviewede: Fokusområder for interviewende ud fra den eksisterende hjemmeside: - Brug af både mobil og computer. - Besværligt at logge in. - Besværligt at skulle oprette en bruger for at kunne bestille tid. - Ønsker hurtigt at kunne finde åbningstider, booking og priser. 2 af 10

4 - Ønsker bedre overblik. - Hjemmesiden er ikke særlig tiltalende. Udover selve interviewende, så har vi også valgt at lave en SWOT-analyse af virksomheden inden vi begynder at lave ændringer: Styrker - Veluddannet erfarent personale - Kønsneutral indretning - Gode parkeringsmuligheder - Tiltrækker en bred målgruppe - Billige priser Muligheder - Få optimeret deres hjemmeside - Organisere et arrangement i byen, f-eks open by night Svagheder - Ligger langt fra centrum og andre butikker - Personalet har begrænset erfaring i forhold til IT Trusler - Den nærliggende Salon - For enkel hjemmeside Forretningsmodel: 3 af 10

5 Ud fra interviewende samt SWOT-analysen og forretningsmodel canvas, er vi kommet frem til at vi skal udvikle en mere overskuelig, nem og spændende hjemmeside. Dette vil både skabe værdi for virksomheden, samt dens kunder. I og med at det grundlæggende skaber værdi for forbrugeren, gør at de den vej igennem kommer til at købe den service Frisør Vest levere, som også er deres primære indtægtskilde. Målgruppe: Frisør Vest s målgruppe er meget bred i og med at stort set alle benytter sig af frisører. Som kan ses i højre side, er der blevet lavet en statistik over målgruppen. Den primære målgruppe for Frisør Vest ligger i alderen fra Det er dem der har den største procentdel, men de resterende aldersgrupper spiller også en rolle. Dette er dog igennem forældre mm. Af samme grund har vi derfor valgt at tage udgangspunkt i aldersgruppen Personas: En personas er kort fortalt med til at sætte et ansigt på den valgte målgruppe. Ud fra analysen af målgruppen, har vi valgt at lave to personas, som begge giver et godt billede af forbrugerne. 4 af 10

6 Designproces: I forhold til design processen mht hjemmesiden valgte vi at tage stor udgangspunkt i vores user stories og hvordan de interviewede ønskede en funktionel side. Det startede derfor ud med diverse skitser af forskellige hjemmesider, i forhold til hvordan den bedst muligt skulle opbygges og give overskuelig service til brugerne. Det endte ud i en enkel menubar og et fint banner, som vi ville tage udgangspunkt i. Derudover brugte vi meget tid på at bestemme hvilke farver vi ville bruge, da vi ikke mente at der var nogle bestemte der repræsenterede frisøren. Vi endte derfor ud med at gå efter meget kønsneutrale farver, da hjemmesiden skal kunne appelere til en bred målgruppe bestående af begge køn - altså grå, hvid og gyldne farver. Vi ønskede også at hjemmesiden skulle være så enkel som muligt, da den ikke skulle bestå af for mange overflødige informationer. Efter et hav af skitser og diskussion om, hvad der ville passe bedst til projektet, begyndte vi på vores mock-ups. Her trådte farverne i karakter og hvordan vores vision om sitet skulle komme til livs. Vi brugte dertil meget tid på at snakke om baggrunden på siden og hvor klart den skulle fremtræde, samt hvordan banneret skulle understøtte og fremhæve produkterne. Vores snak om mock-ups blev basis for hjemmesiden og derfor også mobilsiden, hvor vi valgte samme layout, men at fjerne det mest overflødige der var på computersiden, selvom vi gik efter mindst muligt af samme. Ud fra vores tanker om et meget enkelt og overskueligt layout kom vi frem til et moodboard, der kunne give et godt billede over de tanker vi har gjort os. 5 af 10

7 Skitser: 6 af 10

8 Mock-ups: Mobil: 7 af 10

9 Computer: 8 af 10

10 Logoproces: Vores designproces logoet, var på mange måder den samme som for selve opbygningen af hjemmesiden. Vi havde i tankerne at skabe et meget mere enkelt og fint logo, da det de havde i forvejen overhovedet ikke fungerede. 9 af 10

11 Realiseringsdel: Ud fra vores Mockups har vi forsøgt at kode en responsiv hjemmeside. Vi startede med at kode hjemmesiden til mobil og derefter til PC. Menu (mobil): Til menuen har vi brugt en burger menu, da det er mest responsivt til mobile first og da det er en del af vores design. Da vi ikke kunne få burgermenuen til at være i højre side ligesom på mockups, er den i venstre side under logoet. Menuen slider ind fra venstre, når man trykker på burgermenuen. Selve forsiden og undersidernes indhold passer OK i forhold til vores mockups. På siden med valg af tid, kan man dog ikke vælge noget udover at trykke på knappen videre. På kontaktsiden har vi kodet et live google maps. Webversion (PC): Versionen til PC er lavet nogenlunde som mobilversionen. Den eneste egentlige rettelse, er menuen, hvor vi har lavet en horisontal menu og lagt den til højre, da det er mest responsivt. Validering af kode: Alle html siderne er blevet valideret, der er dog en enkelt Error i index siden, hvor vi har sat en style ind med baggrundsbillede. Dette gjorde vi efter, at vi ikke kunne få den til at virke i css og brugte lang tid på at søge efter fejlen. Performance test: Hjemmsidens performance er testet og scorede henholdsvis 89 point på mobilenhed og 95 point på Computer. Siden har en god performance. Konklusion: Ud fra vores arbejde i løbet af de sidste to uger, synes vi at vi er kommet godt i mål. Vi har opnået det vi ønskede med de forskellige processer, og synes vores færdige produkt er super fint og opfylder de ønsker/forhåbninger forbrugerne ledte efter. 10 af 10