TEMA Afgangs projekt MMDb

Transkript

1 Uddannelse og studiested: Multimediedesign ved UCN Projektets navn: Salon C Semester: 4. semester Klassebetegnelse: 04mmdb Vejleders Navn: Line Helverskov Termin: Sommer 2013 Antal sider eks. bilag: 29,4 sider (70512 tegn) Sites placering: Username: rikke Password: Rapport og produkt må offentliggøres. Synopsis: I dette projekt er det udviklet et responsivt website med bookingsystem til frisørsalonen Salon C. Websitet er opsat i Wordpress med PHP, MySQL og HTML, og i udviklingsarbejder er der blandt andet taget højde for datasikkerhed og, at websitet skal kunne vises på pc, tablet og smartphone. Dato og underskrift: Rikke Lund Steen Kasper Villemoes Hald Side af 57

2 Side af 57

3 Indhold Indledning Kundeoplysninger Projektstyring og organisering Foranalyse Problembeskrivelse Indehaverens ønsker til produktet Problemformulering Udviklingsmetode Analyse Interessentanalyse Målgruppeanalyse Salonens nærområde og demografi Personas SWOT analyse Virksomhedens værdier Kundeoplevelsens faser Kravspecifikation Delkonklusion Design Design ændring Visuel identitet Moodboard Websitets struktur Websitets funktion Senarier Websitets indhold Wireframes Websitets grafiske design Fonts Gestaltlove Farve valg Administrationssitets struktur Senarier Usecaces Brugergrænsefladens indhold Datastruktur Produktmappe Implementering Valg af CMS-system og programmeringssprog Afgrænsning Databasesystemet Responsivt website Sikkerhed Inputvalidering Kryptering af passwords HTTPS Rollebaseret adgangssystem Refleksion og evaluering Side af 57

4 Opsummering Konklusion Perspektivering/ Refleksion... Fejl! Bogmærke er ikke defineret. Videre udvikling Afsnittenes forfattere Bibliografi Side af 57

5 Indledning Dette projekt udarbejdes for frisørsalonen Salon C, med indehaveren Cindie Østertoft som kontaktperson. Salon C har 3 ansatte og ligger i Svendborg. Salon C er en af mange frisører i Svendborg, og der er derfor hår konkurrence om kunderne. En hurtig søgning efter frisør salon på krak giver resultater bare indenfor bygrænsen. Indehaveren er ikke tilfreds med deres nuværende ITløsning, da den er dyr, og ingen i salonen kan finde ud af at opdatere websitet hvilket blandt andet gør, at deres online tilbud ikke følger butikkens egentlige tilbud. Målet er at udvikle et brugervenligt interface som indehaveren selv kan holde opdateret, samt give en bedre sammenhæng mellem salonens website. Kundeoplysninger Salon C Ørbækvej 9B, 5700 Svendborg Tlf.: Indehaver: Cindie Østertoft Projektstyring og organisering For at sikre effektivitet og overblik i projektet har vi overvejet hvordan vi vil styre og organisere arbejdsprocessen i perioden. Vi har afklaret forventninger om indsats i en samarbejdskontrakt (se Bilag 1 - Samarbejdskontrakt) for at undgå misforståelser. Dernæst har vi valgt at benytte et gantt-diagram til tidsstyring (se Bilag 2 - Gantt-diagram), og at skrive logbog (se Bilag 3 - Logbog) for at dokumentere grundlaget for beslutninger, der muligvis ikke bliver synlige i rapporten. Projektets filer vil blive opbevaret og delt via Dropbox, for at gøre projektet mindre følsom overfor hardware-problemer. Versionsstyring af filerne vil foregå mundligt, da gruppen er så lille. Arbejder vi hjemme en dag, vil vi være på Skype, for at kunne stille hinanden spørgsmål. Til slut har vi 2 tekst-filer. I den ene skriver vi spørgsmål til f.eks. vejleder når vi kommer på dem. Så er det nemt at huske dem til næste møde, eller mailkorrespondance. I den anden har vi sorteret kilder under emner, så vi nemt kan finde dem når vi får brug for dem. Side af 57

6 Side af 57

7 Foranalyse Problembeskrivelse Salon C s indehaver Cindie Østertoft er træt af virksomhedens website. Selvom hun har mulighed for selv, at indsætte og redigere sidens indhold i et CMSsystem, kan hun ikke få det til at virke. Dette har kostet hende noget opmærksomhed om nye services salonen tager med hjem fra kurser, og produktserier hun tidligere har markedsført via websitet, da hun ikke er i stand til at opdatere tilbuddene. Måske er dette grunden til at salget af hårprodukter er faldet fra kr. til kr. (et fald på 15,7 %) i løbet af det sidste år (se Bilag 4 - Salonens statistik). Administrationen af websitet har skiftet hænder flere gange på grund af konkurser, og hun ved efterhånden knap nok hvem hun skal ringe til når hun har problemer. Cindie er glad for salonens online booking system, da medarbejderne slipper for at forlade en kunde for at tage telefonen. Der er dog stor visuel forskel på salonens eget website, og det eksterne site der henvises til for online booking. Kunderne kan simpelthen blive i tvivl om de er havnet det rigtige sted. Dette afsnit er skrevet ud fra referatet af første kundemøde ( se Bilag 5 - Referart af første kundemøde). Indehaverens ønsker til produktet Cindie Østertoft vil gerne have et nyt website for Salon C, der lever op til følgende krav: 1. Hun skal selv kunne opdatere websitets indhold 2. Der skal laves et bookingsystem med samme visuelle udtryk som hovedsitet 3. Sitet skal give mulighed for at præsentere hendes produkter på en overskuelig men grafisk iøjnefaldende måde 4. Websitet skal fungere på smartphones og tablets Problemformulering For at udvikle et produkt der lever op til kravspecifikationen må vi finde svar på følgende problemstillinger: Hvordan bygges et website, så salonens indehaver selv kan opdatere sidens indhold, uden at have erfaring med webudvikling? Hvordan beskytter man persondata i en database og i det system der kommunikerer med databasen? Hvordan præsenteres websitets indhold overskueligt på både computere, taplets og smartphones? Side af 57

8 Udviklingsmetode I dette projekt mener vi, at det er muligt at lave en lineær udviklingsproces. Hverken Salon C s og kundernes behov eller andre faktorer burde ændre sig i projektperioden, og derfor er det muligt at planlægge processens faser, da sandsynligheden for uforudsete ændringer er lille. Derfor vælger vi at benytte vandfaldsmetoden, som udgangspunkt for processen dog tilpasset vores behov. Denne består af en række faser: Foranalyse, Analyse, Design, Produktion, Evaluering og Drift som det ses på Figur 1. Figur 1 Foranalyse I projektets foranalyse undersøges problemet ved at mødes med virksomheden og specificere virksomhedens ønsker til produktet. Analysefase Her analyseres hvilke faktorer der spiller ind på problemet, og der derfor skal tages hensyn til under designet af produktet. Designfase Løsningen designes ud fra de oplysninger der kom frem i analysefasen. Produktionsfase Produktet produceres ud fra de beslutninger der blev truffet i designfasen. Refleksionsfase Der reflekteres over processen gennem projektperioden, så man kan undgå eventuelle faldgrupper i næste projekt. Driftsfase Den sidste og fortsættende fase er driftsfasen. Vi har ikke planer om at være involveret i denne, men under de andre faser skal vi overveje hvordan produktet skal opbygges, så den daglige drift bliver nem for Salon C s personale. Vi har valgt at undlade en testfase, da vi finder det upraktisk at samle alle testene i en periode af projektet. I stedet vil vi ved tvivlsspørgsmål under design- og produktionsfasen lave brugertest, så vi senere undgår at skulle gå tilbage i processen for at rette op. Faserne og hvor meget tid vi afsætter til hver fase, kan ses i vores gantt-diagram (se Bilag 2 - Gantt-diagram). De overordnede opgaver under faserne skriver vi ind løbende, efterhånden som vi finder ud af hvad der skal produceres og hvad Side af 57

9 der skal tages hensyn til i den forbindelse. De mindre opgaver vil vi ikke bruge tid på at estimere et tidsbudget for, da det vil tage mere tid end vi vil få ud af at lave det. De mindre opgaver holder vi i stedet styr på mundligt, ved at skrive stikord i rapporten, hvor vi mener et afsnit skal være, og ved at liste og tildele arbejdsopgaverne i et separat dokument efter behov. I den oprindelige vandfaldsmetode afsluttes en fase helt, før den næste påbegyndes. I tidligere projekter har vi erfaret, at man ofte sidder med nogle enkelte opgaver i slutningen af en fase. Det kan f.eks. være at rette et afsnit eller skrive lidt til eller fra, eller måske mangler en kommentar fra vejleder for at kunne afslutte afsnittet helt. I stedet for at lade hele gruppen sidde og vente på at småting bliver ordnet, har vi valgt at justere metoden til vores behov ved at tillade overlapning mellem faserne. På den måde kan vi fortsætte med næste fase, dog kun med opgaver der ikke afhænger af de uafsluttede opgaver i forrige fase. Se overblikket over faserne og deres overlapning i gantt-diagrammet. Side af 57

10 Side af 57

11 Analyse Interessentanalyse Vi vil med denne interessentanalysen (Jensen) skabe os et overblik over, hvilke interessenter der skal tages hensyn til igennem projektforløbet. Gruppen lavede en brainstorm over hvilke interessenter der kunne havde interesse i projektet(se Bilag 6 Interessent-brainstorm). Her efter diskuterede gruppen hvilke interessenter der var vigtigst for projektet og placerede interessenterne i 3 prioriteter hvoraf 1 er den vigtigste. Sorteringen der er vist i Tabel 1 er blevet til efter principperne om at interessenterne havde noget direkte at skulle havde sagt i forhold til projektets udvikling. 1. prioritet 2. prioritet 3. prioritet Indehaver Konkurrenter Kommune Kunder Omkringliggende Fagforening butikker Medarbejdere Leverandører Staten Tabel 1 Denne prioritering er også med til at gøre det lettere at inddele interessenterne i de fire grupper: gidsler, resourcepersoner, grå eminender og eksterne interessenter på Figur 2. Vi har valgt også at inddele interessenterne på denne måde for at give et bedre billede af interessenternes indflydelse og nødvendighed for projektet. Gidsler er den gruppe selve projektet omhandler. Men gidslerne har ikke meget at skulle have sagt. Ressourcepersoner er dem som har en direkte indvirkning på projektet, det kan f. eks. være udviklerne. Grå eminence har en stor magt, og har meget at skulle sige til udviklingen af projektet. De grå eminencer udøver derfor deres magt i det åbne og ikke i det skjulte. Eksterne interessenter er dem der ikke har de store muligheder for at påvirke projektet, det kan f. eks. være de omkringliggende butikker som har et ønske om at få flere besøgende til området. Side af 57

12 Figur 2 Ud fra disse to sorteringer dannes der et klart billede af de vigtigste interessenter for projektet: Kunder, Indehaver og Medarbejder. Kunder Fordele: Det bliver mere brugervenligt, da der kommer visuel sammenhæng mellem websitets hjemmeside og bookingsystem. Siden bliver kompatibel til flere platforme og er derfor mere tilgængelig. Ulemper: Mulig forvirring over det nye design. Inddragelse: Vi vil løbende inddrage folk fra salonens målgruppe, når vi har behov for større klarhed om deres adfærd eller præferencer i projektrelevante spørgsmål. Dette forventer vi at gøre mundligt med udgangspunkt i f.eks. spørgeark og/eller visuelle design afhængig af hvad tvivlsspørgsmålet omhandler. Indehaver Fordele: Det nye design kommer til at passer bedre til salonens stil. Websitet bliver lavet i et brugervenligt CMS-system, som indehaveren selv kan opdatere det. Det vil blive sparet penge på websitet. Ulemper: Der skal bruges nogle ressourcer på møder med projektgruppen. Inddragelse: Vi vil løbende kontakte Cindie og holde hende underrettet om projektets fremskidt. Skulle der opstå et behov for yderligere information, end det hun gav os fra projektets start, vil vi også bede hende om dette. Grundet distancen vil kontakten hovedsagligt foregå via telefon og mail, men vi holder nok et møde i slutningen af, eller efter projektperioden for at sætte hende ordenlig ind i produktet. Medarbejder Fordele: Da projektet muligvis giver salonen flere kunder, er dette med til at fremme finansiel stabilitet i virksomheden, og sikre medarbejderne arbejdsplads. Ulemper: Side af 57

13 Inddragelse: Disse er en vigtig kilde til information om kundernes adfærd, og skal derfor inkluderes i projektet. Vi opfatter dog også indehaveren som en del af denne gruppe, da hun arbejder dagligt i salonen, og vores primære kontakt med medarbejdergruppen vil være til hende da hun har det store overblik over salonens forhold. Ud fra disse fordele og ulemper dannes der nu et billede af, hvordan vi i udviklingsprocessen skal tage hensyn til interessenterne. Det er vigtigt at det nye website, er opbygget så nye og gamle kunder kan finde rundt, og ikke bliver forvirrede over det nye design. Det er også vigtigt at websitets administrationsdel er brugervenligt, så salonens indehaver og medarbejdere ikke skal spilde ret lang tid i hverdagen, på at sætte sig ind i det. Målgruppeanalyse Målgruppeanalysen giver et mere præcist billede af hvem man skal ramme med markedsføring og design. Der er f.eks. stor forskel på designet til en meget ung målgruppe i forhold et en moden målgruppe. Ifølge salonens indehaver er de fleste af salonens kunder årige af begge køn (se Bilag 5 Referart af første kundemøde), hvilket understøttes af statistikken fra deres administrationssystem. Fra april sidste år, til april i år fordeler websitets bestillinger sig som vist i Tabel 2. Se resten af statistikken i Bilag 4 - Salonens statistik. Indehaver kunne godt ønske sig flere af de årige og årige, men da det ikke er svært at få salonens tider booket op, er det ikke vigtigt for hende at der gøres en indsats på området Aldersfordeling (Mænd/Kvinder/I alt) Andel Til og med 6 år 6/2/3% 7 år til 14 år 9/3/4% 15 år til 24 år 11/3/5% 25 år til 50 år 41/27/29% 51 år og derover 33/66/51% Ikke angivet eller ukendt 8% I alt 100% Tabel 2 Salonens nærområde og demografi Vi gik en tur rundt i det kvarter salonen ligger i, for at danne os et helhedsbillede af dets omverden. Salonen ligger sammen med en håndfuld andre virksomheder, ved en stor parkeringsplads. Blandt andet ligger der en Netto, der trækker en del mennesker til. Der ligger en håndfuld andre saloner i Salon C s nærområde (under 1 km afstand), og en del flere i Svendborgs centrum (2 km). På Figur 3ses et kort over Svendborg fra Google Maps. De røde prikker og markører viser områdets frisører. Markør H viser Salon C s placering. Side af 57

14 Figur 3 Udover få virksomheder består området hovedsagligt af boliger; både boligblokke, rækkehuse og villaer. Befolkningen varierer meget i alder, og største delen har en årlig indkomst på eller derunder. Der bor en mindre gruppe med højere indkomst ud til sundet. Se Bilag 7 - Demografi for flere detaljer. Dette afsnit og tilhørende bilag er produceret ud fra kilden(geomatic, 2009). Personas Vi har i de foregående afsnit indsamlet data om målgruppen. Igennem disse afsnit har vi beskrevet de første fire trin ud af 10 i at danne personas (Engelby, 2011, s. 214). Det femte trin er så at beskrive vores personaer. Vi vil derfor beskrive 2 personaer, fra hver sin ende af målgruppen. Disse vil senere blive brugt til at analysere hvordan brugerne vil bruge produkterne. Palle Palle Dahl er 35 år og er lige blevet far for anden gang. Palle bor med hans kone og 2 børn i lejlighed i Svendborg øst. Til dagligt arbejder Palle som postbud og er derfor sent færdig på jobbet stort set hverdag. I hans fritid nyder Palle at tage ud og løbe hvor han går meget op i at måle hans rute og hastighed med hans Side af 57

15 smartphone. Når Palle ikke løber eller er på arbejde, nyder han at holde fri med hans familie, og bare være derhjemme og kunne være sig selv. Palle har en PC, tablet og smatphone der bliver brugt dagligt og har derfor en teknisk kunnen over middel. Marie Marie Knudsen på 55 bor i et parcelhus i Svendborg med hendes mand Erik på 61, og deres kat Tyksen. Erik arbejder i det lokale byggemarked og Marie er ansat i køkkenet i det lokale ældrecenter. I hendes fritid nyder Marie at pusle om køkkenhaven og stauderne. Der går dog nogle gange lidt tid imellem, men ukrudt kan jo også blomstre. 2 gange om ugen går de tur med vennerne i deres egen lille motionsklub; med mindre det regner eller der er en der har bagt kage, for så bliver det til et kortspil i stedet. Erik har en computer han bruger til lidt forskelligt: kostspil, , søgning på sejlskibe osv. Marie har tidligere syntes det var asocialt at sidde foran den, og kunne ikke helt se ideen med det, men nu da efterhånden alt papirarbejde skal ordnes via internettet tog hun for et halvt år siden initiativ til at deltage i et it-kursus. Nu synes hun det der internet er ret smart, men også lidt forvirrende. Der er f.eks. utroligt mange opskrifter, men hvis ikke man søger præcist nok kommer der så mange frem at det bliver uoverskueligt. Erik er flink til at hjælpe, og deres udeboende datter sender engang imellem Marie hjemmesideadresser med interessante emner. SWOT analyse For bedre at kunne udarbejde et slagkraftigt budskab, er det nødvendigt først at analysere på, hvad der rent faktisk er Salon C s styrker, potentialer og muligheder. Til det formål har vi lavet en SWOT-analyse(Strenghts, Weaknesses, Opportunities, Threats) (Thorborg, 2005, s. 69), som er velegnet til at give et billede af virksomhedens øjeblikkelige situation. Med SWOT-analysen vil vi opnå kendskab til virksomhedens egne styrker og svagheder og kunne skabe et billede af udefrakommende muligheder og trusler. Side af 57

16 Strength Weaknesses Opportunities Threats - Frisørsalonen har et veluddannet personale - Kønsneutral indretning - Ligger ved siden af en dagligvarebutik så folk bliver mindet om at de snart skal klippes igen. - Salonen går meget op i at ikke alle deres hårprodukter ikke indeholder parabener, parfume, tilsætningsstoffer etc. - Tiltrækker ældre med folkepensionistrabat - Gode muligheder for parkering - Ligger mentalt langt væk fra centrum - Personalet har begrænsede evner inden for IT og dermed til dels også makedsføring - Den nærliggende salon Hairværk har skiftet ejer, og Salon C har derfor mulighed for at stjæle nogle kunder. - Salonen har tidligere deltaget i et marked på parkeringspladsen. Dette arrangement kunne gentages. - Finanskrise - Det sker at butikker rundt om salonen lukker, og får området til at se lidt dødt ud - Aggressiv markedsføring fra konkurrenten Salon Office - Konkurrencen på prisniveauet har sat priserne så lavt, at der er begrænsede muligheder for rabatter og lignende. Tabel 3 Salon C har en lang række styrker (se Tabel 3), som vi kan tage udgangspunkt i, når der skal formuleres salgsargumenter. De har primært deres styrke i at personalet er veluddannet. Samtlige ansatte har den lange frisør uddannelse på fire år, i stedet for den korte på et år. De ansatte og ejeren selv er ofte på kursus for, at være med den sidste nye mode indenfor hår-design. En anden styrke salonen har, er dens placering. Salonen er placeret ved et lille center, hvor der er andre butikker som automatisk sørger for at en masse mulige kunder kommer forbi salonen dagligt. Da der er tale om et lille center, er der derfor også masser af parkeringspladser. Selvom salonens placering kan ses som en styrke kan den også opfattes som en svaghed da salonen er placeret nogle kilometer fra centrum. Set fra salonens perspektiv er det nødvendigvis ikke et minus at der stadigvæk er finanskrise. Dette har bl.a. haft den påvirkning, at flere af salonens konkurrenter har måtte dreje nøglen om. Desværre har det også haft den effekt, at nogle af de arbejdsløse frisører har åbnet nye saloner i de gamles sted. Virksomhedens værdier Da målgruppen spænder så bredt aldersmæssigt, er det vigtigt for indehaveren Cindie at salonen er ret neutralt indrettet. Stilet og rent uden at blive kedeligt. Det skal være tydeligt at det er en all-around salon. De stræber efter en hyggelig og afslappet stemning hvor alle føler sig velkomne. Side af 57

17 Kundeoplevelsens faser For at finde ud af hvilket produkt der kan hjælpe salonen og dens kunder, vil vi få et overblik over de forskellige situationer kunderne oplever i forbindelse med deres frisøraftaler. Vi har bedt en række personer fra målgruppen, samt salonens indehaver forklare os hvordan det foregår, fra de får tanken om at de trænger til en klipning, til de betaler for servicen. Resten af dette afsnit er sammenfatningen af vores undersøgelse. Se vores arbejdspapirer i Bilag 8 - Kundeoplevelsens faser. Figur 4 viser de 6 faser kundernes oplevelse spænder over: Figur 4 1. Kunden får lyst til frisørbehandling. Måske bliver vedkommende inspireret af en bekendt, af reklamer eller ved at se lækkert hår i medierne, en ny årstid, en kommende højtid, en reklame i lokalavisen eller måske trænger håret bare. 2. Kunden undersøger evt. hvilken frisør vedkommende vil besøge og/eller hvordan der kan bestilles tid. Dette sker oftest via internettet eller telefon, men også via venner, ved at besøge salonen eller finde den i telefonbogen. 3. Tidsbestillingen sker oftest via telefon (se bilag kundemøde1), men også ofte via online booking og engang imellem ved personlig henvendelse i salonen. 4. Kunden påmindes om frisøraftalen. Bestiller de tid via telefon eller web, kan de få en påmindelse via sms eller . Møder kunden op i salonen, får vedkommende det også på en bon, og ellers har kunden måske skrevet det i kalenderen. 5. Den femte fase er selve aftalen med frisøren bestående af 5 underpunkter. a. Ventetiden til det bliver kundens tur kan fordrives med læsning i magasiner, spil eller socialisering via mobiltelefonen, en kop kaffe eller te, eller læse om frisørens produkter b. Selve behandlingen med tilhørende smalltalk c. Vejledning om hvordan frisuren/hårfarve/hovedbundsproblemerne vedligeholdes evt. med de rigtige produkter. Side af 57

18 d. Valg af frisørprodukter. Langt de fleste produkter bliver solgt i forbindelse med en service. Kun 7,8% af betalingerne det sidste år har været salg af hårprodukter uden medkøb af en service. Se Bilag 4 - Salonens statistik. e. Betaling (og evt. bestilling af næste aftale) 6. Hvis man er registreret kunde ved Salon C, har man mulighed for at modtage tilbud og påmindelser om, at det er lang tid siden man sidst har været ved frisøren. Dette sker via sms og . Herefter lukkes løkken muligvis, ved at kunden igen får lyst til et frisørbesøg. I fase 5a når kunderne venter i salonen, sidder de og slapper af og fordriver tiden. Man kunne udnytte denne ventetid til, at reklamere lidt for salonens sortiment af hårprodukter, som indehaveren gerne ville øge salget af. Dette kunne gøres på flere måder. Man kunne have en tablet liggende, med en webapp der præsentere produkterne eller en mappe med printede sider om produkterne, hvor siderne så kan udskiftes. For at beslutte hvilket produkt vi skal fortsætte med, har vi opsat fordele og ulemper ved begge i Tabel 4. Webapp Fordele Ser fancy ud Kan genbruge materiale fra hjemmeside Indehaver kan selv opdatere via et cmssystem Ulemper Nogle kundegrupper vil nok ikke samle tabletten op, da de ikke føler sig fortrolige med teknologien Ikke alle kunder vil føle navigationen intuitiv Trykt mappe Fordele Alle aldre kender interaktionsformen Ulemper Kræver farveprint for at opdatere Det er ikke sikkert indehaveren fuldstændig selv kan opdatere den Ser ikke så fancy ud Tabel 4 Der er mange fordele ved løsningen til tablet, men da nogle kundegrupper bliver udelukket da de ikke er fortrolige med teknologien, og ikke har tendens til på eget initiativ at eksperimentere med det føler vi, at produkt-mappen vil være en bedre løsning. Vi skal dog have for øje under designet, at vi skal gøre det så nemt som muligt for indehaveren at opdatere indholdet. Der er udskiftninger i produktsortimentet nogle gange pr halve år. Side af 57

19 Kravspecifikation Ud fra overblikket vi har fået i denne fase, har vi besluttet at udvide kravspecifikationen for projektets produkt til følgende: 1. Personalet skal selv kunne opdatere websitets indhold 2. Der skal laves et bookingsystem med samme visuelle udtryk som hovedsitet 3. Sitet skal give mulighed for at præsentere hendes produkter på en overskuelig men grafisk iøjnefaldende måde 4. Websitet skal fungere på pc samt smartphones og tablets Endvidere vil vi gerne lave følgende, hvis der bliver tid til det. 1. Bookingsystemet skal kunne tilbyde kunderne påmindelser, lige som det nuværende. 2. Systemet skal give salon C s personale mulighed for at sende reklame og tilbud til registrerede kunder, der har givet deres samtykke. 3. Der skal produceres en produktmappe hvor indholdet kan skiftes, og hvor indehaveren selv kan lave så meget af vedligeholdelsesarbejdet som muligt. Delkonklusion Vi har i analysefasen fundet ud af, at projektets vigtigste interessenter er Salon C s indehaver. Medarbejdere og kunderne. For at inkludere disse, vil vi løbende holde indehaver og medarbejdere opdateret på projektets fremskridt, og evt. spørge dem i tvivlsspørgsmål hvor deres mening er relevant. Kunderne vil vi løbende inddrage med brugertests. Salonens målgruppe består hovedsagligt af årige af begge køn, økonomisk placeret i middelklassen eller derunder. SWOT-analysen viste at en af salonens største styrker, er personalets grundige uddannelse hvilket er et vigtigt salgsargument til websitet. Foruden dette, vil salonens indehaver gerne at websitet er kønsneutralt og udstråler at alle er velkomne. Analysen af kundeoplevelsens farser viste, at der er mulighed for at oplyse kunderne om salonens sortiment af hårprodukter når de sidder og venter i salonen. Den bedste måde at gøre dette på, er med en produktmappe. Side af 57

20 Side af 57

21 Design I analysefasen fandt vi ud af, at Salon C har behov for en produktmappe der informerer om salonens hårprodukter, et website der repræsenterer salonen, et bookingsystem og herunder et system der kan sende påmindelser og tilbud til registrerede kunder. Vi vil i denne fase først finde et visuelt udtryk der skal bruges på disse produkter, og derefter designe de enkelte produkter. Design ændring Da vi første gang i dette projekt var nået frem til websitets visuelle design, valgte vi at kassere det og wireframes og begynde forfra. Dette afsnit forklarer hvad vi mener problemet var, og hvad vi lærte af det. Resten af rapporten fokusere udelukkende på det efterfølgende arbejde vi lavede. Det efterfølgende afsnit Visuel identitet er forblevet uændret fra vi brugte det til det gamle design, da det stadig er de samme værdier projektets produkter gerne skulle ende op med at udtrykke. Processen i denne fase af projektet, har ikke været så lineær som vi havde planlagt. Da vi var i gang med det grafiske design af websitet, kunne vi ikke få det til at falde på plads og fungere. Vi gennemgik vores daværende design for, at finde det grundlæggende problem og det gik op for os, at vi var gået forkert til opgaven. Vi var ikke gået nok i dybden da vi udviklede websitets wireframes (se Figur 5). Vi havde kun opsat den grundlæggende struktur, og havde ikke i ret høj grad taget højde for hvad sitet skulle indeholde eller udføre. Figur 5 Side af 57

22 Til det visuelle design havde vi mange ideer. Vi skitserede dem i hånden og afholdt en brugertest for, at finde brugernes og indehaverens favorit (se Figur 6). Ud over at finde favoritten fandt vi også ud af at mange af vores ideer var for vilde og/eller tunge visuelt. Designene der var udarbejdet efter, at de skulle være spændende og grafisk flotte var for komplekse i forhold til, at sidens vigtigste del egentligt skulle være indholdet og de funktioner den tilbyder. Figur 6 Til det nye design vil vi først fastlægge websitets indhold og hvilke funktioner det skal udføre. Herefter vil vi bygge wireframesene op på baggrund af det, og til sidst tilføje et simpelt visuelt design. Visuel identitet Den visuelle identitet tager udgangspunkt i de værdier virksomheden gerne vil udtrykke. Vi har reduceret analysefasens afsnit herom ned til følgende stikord: Neutralt Stylet Rent Ikke kedeligt All around plads til alle Hyggeligt Afslappet Velkommen Moodboard Ud fra disse værdier har vi søgt rundt på især Google.dk og Colourbox.dk og fundet billeder vi synes afspejler disse værdier i form af stemninger, farver, former osv. I gruppen diskuterede vi hvert billede, og vores tanker om dem. Nogle blev sorteret fra, og ud fra resten producerede vi dette moodboard (se Figur 7). Side af 57

23 Figur 7 (se moodboard i fuld størrelse i Bilag 9 - Moodboard) Ud fra dette moodboard, og processen med at lave den er vi nået frem til nogle elementer det visuelle design skal bygges ud fra. Produkterne skal have en lys baggrundsfarve (hvid, creme eller lys beige f.eks.) for at gøre siden imødekommende, rolig og neutral. Ligeledes vil vi bruge et grafisk element med organiske bløde kurver til at skabe noget dynamik i udtrykket. Noget i stil med strukturen i krøllet hår, eller bladranker. I dette element skal der indgå nogle få klare farver og/eller jordfarver for at lave lidt kontrast til baggrunden og gøre det en lille smule livligt og frisk. Websitets struktur Et af websitets undersites bliver et administrationsværktøj, hvor de ansatte kan få vist og administrere aftaler og andre oplysninger. Designet af dette site har vi valgt, at beskrive sammen med designet af bookingsystemet i et senere afsnit da udviklingen af administrationssitet, og bookingsystemets bagvedliggende datastruktur hænger tæt sammen. Websitets funktion Websitets struktur bør bygge på hvilke funktioner websitet skal varetage. I dette afsnit vil vi liste dem i prioriteret rækkefølge. 1. Websitet skal give mulighed for at booke en tid. Online booking skal fremhæves, da dette sparer de ansatte tid men der skal også være et telefonnummer for ikke, at undlade de kunder der ikke ønsker at bestille online. Side af 57