Prototype:
Efter hi fi wireframes er blevet udviklet og samlet til en wireframe, så bliver der arbejdet på en prototype som man kan brugerteste på kunder. Denne prototype bliver udviklet med henblik på testing inden arbejdet på hjemmesiden begynder, på denne måde kan man få nogle ting på plads inden man laver hjemmesiden, så man kan undgå en masse fejl fra starten af.

Prototypen bliver udviklet i programmet Adobe XD, hvor der bliver arbejdet med alle hjemmesidens kommende sider. På denne måde kan man lave en 1 til 1 på den rigtige hjemmeside og fremvise det for kunderne under en brugertest, uden at have en hjemmeside klar.

Prototypen tager udgangspunkt i hi fi wireframe som er blevet udviklet ud fra diverse undersøgelser som har kunne gøre hjemmesiden mest muligt brugervenlig.

På prototypen er der blevet arbejdet med det rigtige styletile, udvalgte billeder som skal ind på den rigtige hjemmeside, på denne måde er der også blevet udviklet en decideret formel at gå ud fra når hjemmesiden skal bygges op.

Udover alt dette, så er prototypen også blevet udviklet med henblik på fremvisning til en klient, så der allerede inden hjemmesidens opstart kan blive ændret i design eller andre rettelser der skulle være fra klientens side af. Det vil sige at der ikke har været fokus på at gøre den fuld funktionel med alle knapper, dog en måde at fremvise produktet på, samt teste på diverse ting.

Som man kan se i denne prototype, hvis man klikker ind på linket til den, så er der arbejdet med forsiden, takeaway, running sushi og kontakt siden, da det er de vigtigste sider at få med på den rigtige hjemmeside.
På forsiden kan man se tre tydelige bokse som er inddelt med de tre forskellige restauranter, så det bliver brugervenligt for kunden at komme ind og bestille bord eller takeaway på den rigtige restaurant, dette har været et tiltag der er blevet taget, da undersøgelserne viste at kunderne bestiller ved de forkerte restauranter under interview med klienten.
Udover dette, så er det inddelt flere steder, hvis man kigger i footeren er der tre afdelinger, men der er også tre afdelinger inde på kontakt siden, på denne måde holder man kunden i hånden i form af repetition, så kunden aldrig er i tvivl om det er det rigtige sted man bestiller eller kontakter.

Delkonklusion
Efter at have gået igennem diverse research og spørgeskemaer der var blevet lavet, har man kunnet danne rammerne for et løst design før man gik videre til et fast design.
For at komme frem til dette design har man også en identitet som man skal være opmærksom på fra den nuværende hjemmeside, ud fra denne identitet bliver der skabt et styletile som danner rammerne for hele designet på hjemmesiden.

Efter at man har kunne konkludere hvordan Hi fi skal se ud, er det muligt at påbegynde en prototype. Ud fra denne prototype kan man nu tage skridtet videre og teste det fulde design man er kommet frem til ud fra diverse test og research.
Prototypen danner de fulde rammer for hvordan hjemmesiden kommer til at se ud, dog med fokus på diverse brugertest man nu kan tage kunderne igennem.

Experimentation
Efter at der er blevet udviklet en prototype på baggrund af diverse wireframes, så giver det nu rig mulighed for at teste nogle ting af på kunderne og målgruppen inden udviklingen af produktet kan starte.
Derfor er der blevet lavet nogle testmuligheder i forhold til prototypen som er relevant i forhold til brugervenligheden til kunderne.

Prototype:
Efter hi fi wireframes er blevet udviklet og samlet til en wireframe, så bliver der arbejdet på en prototype som man kan brugerteste på kunder. Denne prototype bliver udviklet med henblik på testing inden arbejdet på hjemmesiden begynder, på denne måde kan man få nogle ting på plads inden man laver hjemmesiden, så man kan undgå en masse fejl fra starten af.

Prototypen bliver udviklet i programmet Adobe XD, hvor der bliver arbejdet med alle hjemmesidens kommende sider. På denne måde kan man lave en 1 til 1 på den rigtige hjemmeside og fremvise det for kunderne under en brugertest, uden at have en hjemmeside klar.

Prototypen tager udgangspunkt i hi fi wireframe som er blevet udviklet ud fra diverse undersøgelser som har kunne gøre hjemmesiden mest muligt brugervenlig.

På prototypen er der blevet arbejdet med det rigtige styletile, udvalgte billeder som skal ind på den rigtige hjemmeside, på denne måde er der også blevet udviklet en decideret formel at gå ud fra når hjemmesiden skal bygges op.

Udover alt dette, så er prototypen også blevet udviklet med henblik på fremvisning til en klient, så der allerede inden hjemmesidens opstart kan blive ændret i design eller andre rettelser der skulle være fra klientens side af. Det vil sige at der ikke har været fokus på at gøre den fuld funktionel med alle knapper, dog en måde at fremvise produktet på, samt teste på diverse ting.

Som man kan se i denne prototype, hvis man klikker ind på linket til den, så er der arbejdet med forsiden, takeaway, running sushi og kontakt siden, da det er de vigtigste sider at få med på den rigtige hjemmeside.
På forsiden kan man se tre tydelige bokse som er inddelt med de tre forskellige restauranter, så det bliver brugervenligt for kunden at komme ind og bestille bord eller takeaway på den rigtige restaurant, dette har været et tiltag der er blevet taget, da undersøgelserne viste at kunderne bestiller ved de forkerte restauranter under interview med klienten.
Udover dette, så er det inddelt flere steder, hvis man kigger i footeren er der tre afdelinger, men der er også tre afdelinger inde på kontakt siden, på denne måde holder man kunden i hånden i form af repetition, så kunden aldrig er i tvivl om det er det rigtige sted man bestiller eller kontakter.

Low fi wireframes:
Under udviklingen af hjemmesiden er der blevet gjort brug af low fi wireframes for at skabe et bedre overblik over hvordan hjemmeside kunne komme til at se ud. På denne måde har man kunne skaffe et billede af hvordan diverse elementer på hjemmesiden har skulle sidde.
Udover dette, så er low fi wireframe også blevet brugt, da man altid har kunne smide papiret ud og lave en ny.
Low fi wireframes til denne hjemmeside har været under udvikling, hvor der er blevet lavet flere wireframes, for at få et bredere udvalg, da der altid er flere løsninger end en. Efter at alle low fi wireframes var blevet lavet, har man derefter kunne sidde og vurdere hvilken retningen hjemmesiden skulle tage, da der har været fokus på nogle vigtige elementer på enkelte wireframes.
Da man ved hjælp af diverse undersøgelser der er lavet i starten, har fundet ud af at klienten har problemer med bestillinger til andre restauranter end hvad der har været hensigten, så har der også været stort fokus på at skabe et første indtryk af, at man vælger den rigtige afdeling når man bestiller.
Da man har samlet alle low fi wireframes, har man samlet det til en samlet low fi wireframe, hvor man har samlet elementer fra flere forskellige til en.
Man kan her se den samlede low fi wireframe

Hi-fi wireframe:
For at kunne skabe den bedste forståelse for hjemmesiden ud fra low fi wireframes har man samlet det hele til en samlet hi fi wireframe. På denne måde har man kunne skabe flere detaljer for hjemmesiden, men også hvor diverse elementer har skulle være osv.
Brugen af en hi fi wireframe er yderste vigtig, da hele gruppen for sat en fornemmelse af hvordan hjemmesiden kommer til at se ud, men man har også en skitse man kan følge til prototypen.
Denne hi fi wireframe er blevet lavet på grundlag af low fi wireframes som er baseret på diverse undersøgelser der er blevet lavet i starten af projektet. Derfor er det tydeligt at se, hvordan disse undersøgelser har en stor indflydelse på hele projektet fra starten af, da det danner rammerne for hele løsningen til klienten.
Der er utrolig stor fokus på forsiden, hvor der er blevet arbejdet i brugervenlighed i forhold til de forskellige afdelinger der er i denne sushi kæde, da man vil alle fejl bestillingerne til livs.
Udover dette, så er der blevet brugt fokus på at sende kunden direkte ind til takeaway afdelingen, da de fleste kunder gerne vil bestille hurtigt frem for at se på hjemmesiden.
Alle disse undersøgelser har dannet ramme for en samlet hi fi wireframe som nu kan videreudvikles til en XD prototype, som man kan komme ud og teste ved kunderne.

Delkonklusion af Interpretation
Interpretation delen af design thinking har været med til at give en god forståelse af målgruppen, med SMP modellen og SMUK modellen. Ud over det kan man også se at der er blevet lavet en persona ud fra den primære målgruppe, samt en golden circle til at se gruppens valg om hvad der kunne være godt at have for at gøre brugeroplevelsen bedre.

Ideation:
Efter interpretation fasen kommer ideation, det er nu der kan blive snakket om ideer til løsningen ud fra ens data der er blevet sammensat. Der findes mange forskellige måder at starte ideation på, da det handler om at finde på diverse ideer. Der bliver for det meste altid gjort brug af brainstorm under ideation da denne metode skaber en bred mængde ideer og løsninger som kan skabe et stort udvalg.

Brainstorm:
Under denne brainstorm er der blevet gjort brug af post it notes, hvor der er blevet skrevet en masse muligheder ned, for at skabe et bredt udvalg men derimod også for, at se hvilke muligheder der kunne være. En brainstorm metode er god til at finde flere gode løsninger som man kan sammensætte til en enkelt løsning i sidste ende.
Efter at der er blevet brugt noget tid på, at lave diverse ideer så har man samlet post it noterne til en bunke hvor man derefter er gået dem igennem i gruppen en efter en. På denne måde får man et indblik i alle ideerne sammen, men person der har fundet på ideen kan også udbrede den mere.
Da man har samlet overblikket over ideerne og hvilken retning man gerne vil gå, har man gjort brug af en low fi wireframe metode, for at skabe et design på ideen.

Persona
Der er blevet indsamlet en del data om målgruppen fra de forskellige spørgeskemaer og interviews, ud fra dem er der blevet udviklet en person som kan sættes op med alle valg i mente så der kan blive en større brugervenlighed. Denne person bliver vist via en persona, som er en metode hvor man viser en specifik person fra målgruppen samt denne persons valg, muligheder og udfordringer. Personaen der kan ses under dette afsnit, er om Line som der er blevet interviewet som kunde, dette gør at der er mere konkrete data, da det er en reel person der er blevet snakket med.

User Scenarios
Oliver vil gerne ind på king’s sushi og bestille take-away, da han vil have at ejeren får hans penge går han ind på hjemmesiden, Oliver bor i Odense og han skal bestille fra den afdeling:
Oliver åbner King’s Sushi hjemmesiden
Kan han se forskel på de tre forskellige afdelinger?
Svar: Ja det kan han, det står tydeligt på forsiden hvilke forskellige afdelinger
der er og hvordan man bestiller take-away

Oliver åbner Odense menuen og kigger på de forskellige muligheder
Kan han nemt bruge hjemmesidens interface?
Svar: Ja det er forholdsvis nemt at navigere rundt på menuen

Oliver ser om man kan finde nogle kuponer til at gøre hans take-away billigere
Kan man det inde i menuen?
Svar: Ja til slut kan man vælge at få 10% rabat igennem nogle perioder

Golden Circle
Der er blevet lavet en golden circle model for at vise hvorfor gruppen har valgt at lave en hjemmeside i dette projekt, hvad hjemmesiden skal indeholde, og hvordan det bliver løst af gruppen. Denne model er et lille overblik over en lang process som er til for at vise gruppens valg i projektet.

BMC – Business model canvas
Der er ud fra King’s sushi blevet lavet en business model canvas eller BMC til at vise hvordan de laver deres forretningsmodel. Ud fra dette ville der kunne skabes et overblik over hvad der kunne opdateres med et nyt system.

Primær målgruppe
Den primære målgruppe er den gruppe som bliver brugt til brainstorming om design og funktionalitet. Den primære målgruppe er unge kvinder mellem 18-25 år, som er vist oppe i segmenteringen, så det er med dem i mente at design valgene er blevet truffet.

Sekundær målgruppe
Den sekundære målgruppe er den gruppe som derimod ikke bliver taget forhold til, da det ikke er dem som King’s vil gøre glade. Den sekundære målgruppe er personer mellem 30-40 årige og opefter til de 40+ årige.

CRAP – Nuværende hjemmeside King’s Sushi Odense
Der er blevet lavet en C.R.A.P. analyse på den nuværende hjemmesides forside for king’s sushi, denne analyse skal hænge sammen med en anden C.R.A.P analyse som gruppen senere laver på det færdige produkt.

Contrast, rød – Inde på King’s gamle hjemmeside kan man se at boksene og baggrunden ikke passer med hinanden, den midterste box skulle være længere hvis de skulle passe sammen og være mere repetitive.

Repetition, grøn – Man kan se at de tre muligheder har en overskrift, overskriften på de to første har det samme format, med samme font størrelse og uden caps, derimod kan man så se at den sidste mulighed er rent caps og det strider mod repetition delen af analysen.

Alignment, gul – I alignment kan man se at de tre muligheder i bunden ikke flugter med billederne over dem, dette giver ikke et godt indtryk af alignment og det ligner at hjemmesiden ikke har en ordentlig magin som øjet kan følge.

Proximity, blå – I dette afsnit kan man se at logoet går ind og roder på proximitien i navigationsbaren, logoet går ind og essentielt splitter navigationsbaren i to. Navigationsbaren skal gerne have god proximity da brugeren gerne skal kunne se hele baren på en gang uden at splitte synet.

Valg af målgruppe
Der er blevet foretaget nogle spørgeskemaer der har hjulpet med at finde målgruppen til dette projekt, i disse spørgeskemaer blev det hurtigt tydeligt at målgruppen bestod hovedsageligt af kvinder og størstedelen af målgruppen er også 18 til 25 år gammel. Dette mener dog også at gruppen har en del svar som er ældre end de 18 til 25 så dette betyder at der er en meget bred målgruppe til King’s sushi så det er blevet besluttet internt i gruppen at der skulle laves en primær og en sekundær målgruppe.

SMP modellen – Segmentering
King’s sushi sælger Sushi og andet asiatisk mad, dette er en del af et meget stort marked alene her i Odense, bare på en hurtig Google søgning kan man se at der er alene er tyve sushi restauranter i Odense midtby. King’s giver med regelmæssighed rabatkuponer ud på deres hjemmeside eller i restauranten for at tiltrække flere kunder, men et af King’s problemer er at de har tre forskellige hjemmesider og kunderne bliver tit forvirrede over det. Derfor er det King’s ønske som sagt at gruppen skal lave en hjemmeside hvor kunderne tydeligt kan se hvilke afdelinger der er hvilke samt bestille take-away fra den.
Ud fra de forskellige skemaer har gruppen lavet tre forskellige segmenter som passer til spørgeskemaernes resultater.

Disse segmenter er ikke nok alene så gruppen har valgt at bruge SMUK modellen til at lave en videreudvikling af målgruppen, Smuk modellen kan ses i afsnittet under dette og viser hvordan de tre segmenter passer ind i King’s

Delkonklusion af Discovery
Discovery delen af design thinking har givet et overblik over gruppens research, med de forskellige spørgeskemaer og interviews kan der ses et belæg for forbedringen af King’s sushis hjemmeside. Disse forskellige ting er et godt fundament til et godt projekt, researchen har også givet nogle mere udbredte svar end forventet hvilket viser at der er flere kunder end forventet der bliver forvirrede af King’s sushis nuværende løsning, dette kan ses i de interviews gruppen har foretaget med afdeling Odense og afdeling Nyborg.

Interpretation
Moodboard
Der bliver lavet et moodboard til dette projekt for at finde den rigtige stemning der skal til når man laver et design til en hjemmeside til en sushirestaurant, det er vigtigt at der bliver beholdt den samme stemning gennem wireframes, prototype og det endelige design. Grunden til at det er vigtigt er at man ikke skal forvirre sine kunder med forskellige design, da de skal kunne se restaurantens identitet.

Styletile
Efter moodboardet bliver der lavet et styletile, hvor man kan se hvilke farver og fonte der skal bruges på den nye hjemmeside, farverne vil blive en blanding af de gamle hjemmesider, samt hvad der er blevet fundet frem til i moodboardet.
Derudover bliver der arbejdet med en anden font, da det skal være let læseligt for brugeren at læse teksten på hjemmesiden. Til dette bliver der arbejdet med den klassiske font Lato, da denne font er utrolig god at læse for brugeren, udover dette så er den heller ikke for iøjnefaldende og den passer sammen med designet på hjemmesiden.

Information architecture

Metoden IA (Informations arkitektur) handler om at organisere ens information på ens specifikke produkt, dette kan for eksempel være på en hjemmeside, det at lave en IA er med til at gøre hjemmesiden mere overskuelig og nemmere at bruge for en kunde. I dette projekt bruger gruppen IA til at lave et rent og overskueligt layout til vores hjemmeside. Grunden til at der lige præcis bliver brugt IA i til dette produkt er at gruppen gerne vil lave et produkt som vi kan være stolte af og at det bliver nemt for brugeren at bruge, det skal også være med til at content på hjemmesiden ikke bliver rodet eller kaotisk at se på. 

Design thinking

Design thinking er en metode hvor man kan lave en rapport ud fra en model, denne model kaldes for “Double diamond” – modellen. Gruppen har tænkt sig at bruge modellen til at skrive rapporten, de fem faser og deres underkategorier er nemme at forstå og perfekte til at lave en god rapport med. 

Interviews

Der er blevet lavet fem forskellige kvalitative interviews, to med nogle kunder, en med en konkurrent og to med klientens forskellige afdelinger, en i Odense og en i Nyborg. Disse interviews skulle vise hvad kunderne tænkte om King’s sushi, hvad konkurrenterne gjorde og hvad klienten gjorde for at skaffe flere kunder.

Første interview:

I det første interview har gruppen valgt at interviewe Line som er 25 år og arbejder i sit eget firma med SoMe kanaler, Line bestiller gerne sushi i weekenderne og bruger også gerne 500kr i snit på det som hun kalder for luksus og dovenskabsmad. Hun har dog faste vaner når det kommer til hvad hun spiser og hvor hun bestiller det fra, hun siger at hun helst vil sidde på restauranten men er gået over til take-away da covid-19 perioden stadig er i gang. Grunden til at Line bruger Just eat er at det er hurtigere at bestille take-away frem for gennem restaurantens hjemmeside, hun har dog indrømmet at det ville hjælpe til at bruge restaurantens hjemmeside hvis der kom flere reklamer og regelmæssige rabatter på restaurantens egen hjemmeside.

Andet interview:

Det andet interview er med en kunde der hedder Dursun, Dursun er 37 år gammel og han er underviser, Dursun bestiller sjældent sushi, han bestiller det gerne på specielle dage som fødselsdage osv. men ellers bestiller han det ikke. Når han bestiller sushi bestiller han gerne for mellem 350 og 400kr, men han kan bedst lide at gøre det gennem take-away. Dursun siger at han bruger mest restaurantens egen hjemmeside da han godt kan lide at alle pengene går til firmaet specielt i covid-19 tiden, han bruger ikke meget tid inde på den reelle hjemmeside, han går bare direkte over i take-away, han vil dog ikke købe mere sushi end han gør hvis der kommer rabatter fra den bestemte restaurant.

Indledning

Sushi er set som en delikatesse, det er noget professionelle kokke bruger langt tid og mange kræfter til at lave. Da det ikke er det samme at købe færdiglavet nede i supermarkedet kigger man til steder som King’s Sushi, hvor sushi bliver lavet til ens individuelle smag og behag. King’s har i øjeblikket tre forskellige hjemmesider til tre forskellige afdelinger, dette vil der blive lavet om på, der bliver lavet en samlet hjemmeside så det ikke er så forvirrende for nye og gamle kunder. I denne rapport vil der blive vist hvordan gruppens tankegang gennem forløbet har været, samt vil der blive vist gennem metoder hvordan King’s sushi kan forbedres.

Derudover vil der blive vist løsningen og de eventuelle fremtidsplaner der er for brandet. 

Problemformulering
Kings running sushi har pt tre forskellige hjemmesider, og tre forskellige webshops, det vil de gerne have samlet på en hjemmeside hvor den er optimeret til både takeaway og restaurant.

Hvordan kan man effektivisere King’s running sushi hjemmesider, og grafiske elementer til en samlet hjemmeside?  

• Hvordan skaber man en god kontrast og æstetik for tre hjemmesider i en samlet hjemmeside? 
• Hvordan kan man effektivisere klientens forskellige webshops til en samlet side? 

Metodeliste

Desk research

Desk research er en meget brugt metode der handler om at lede efter eksisterende kilder og artikler der findes i feltet, dette bliver gjort i starten af projektet så gruppen kan lave et godt produkt som er bakket op om af research der passer til gruppens argumenter. I dette projekt kommer gruppen til at bruge desk research til at finde ud af hvilke konkurrenter klienten har, samt hvilket Tema, der kan tilpasses til en wordpress hjemmeside. Grunden til at der lige præcist bliver brugt desk research er at det er en nem måde at finde frem til King’s sushis konkurrenter ud over det kommer gruppen til at bruge konkurrenterne i field research.

Field research

Denne metode, Field research handler at gruppen skal lave sine egne eksperimenter og få sine egne resultater derfra, dette kan for eksempel være via en AB test, disse tests skal helst være lavet med 5 forskellige kunder. Projektet og de valg der bliver taget inden for design er bygget op om disse tests de bliver brugt til at finde en målgruppe, til at vise hvad målgruppen gør i forbindelse med projektet og til designvalg som målgruppen kan vælge via AB test. Grunden til at field research bliver brugt er så gruppen kan få styr på informationen der kommer ind er fra de personer som gruppen gerne vil ramme.