torsdag den 8. marts 2012

Logo

Vi glemte helt at lægge vores logo ind på bloggen, men bedre sent end aldrig.
Logo uden tekst:

Logo med tekst:





Moodboard

Dette er vores moodboard. Vi har valgt disse farver, fordi vi associerer dem med sødesager. De blå og lyserøde nuancer passer fint sammen med den lysebrune, så der er en form for kontrast.  Typografien har vi valgt for at give hjemmesiden "de bløde former", og en typografi der er med til at visualisere hjemmesiden. Derudover har vi valgt billeder der indeholder samme farver som farvepaletten, for at skabe en sammenhæng - og give hjemmesiden et flot og visuelt design.

Kodning af 960 grid

Vi har haft meget svært ved at kode efter 960 grid,men det lykkedes efter lang tid. Vi havde lavet vores Photoshop filer efter 24 griddet, men det viste sig at hvis man kodede efter 24 griddet så fyldte det hele skærmen og ikke kun de 960 pixels som det rigtigt skulle. Derfor blev vi nødt til at kode efter 12 griddet og det resulterede i, at vores billeder var for store så derfor blev vi nødt til at gøre alle vores billeder mindre. Vi har også 2 bannere som skal gå udover selve 960 griddet, men det kunne ikke lade sig gøre så derfor bliver vi nødt til at vise et screenshot af vores design i morgen.
Vi har på hjemmesiden bare valgt at have en brun bar.
Nedenfor kan vores hjemmeside ses uden de tredimmensionelle bannere.

onsdag den 7. marts 2012

Wireframes til undersiderne

Her er wireframes til undersiderne:




Undersider

Her er de to undersider. Vi har selvfølgelig fokuseret på, at de skal være så overskuelige som muligt, ligesom forsiden, så vi har igen gjort brug af billeder frem for tekst. Den første underside kommer man ind på ved at klikke "temaprodukter" på forsiden. Billederne viser et eksempel på et produkt for hver kategori - så man kan klikke sig videre enten ved brug af knapperne i sidemenuen, eller ved at klikke på billederne.
Den anden underside kommer man ind på efter at have valgt en kategori, og derefter et produkt. Opstillingen er meget simpel og overskuelig, og for at lokke kunden til at købe flere ting, har vi tilføjet en "relaterede produkter"-linje, og en linje der viser hvad andre brugere har købt, udover det viste produkt.


 

tirsdag den 6. marts 2012

Brugeroplevelsen

For at udvikle SpecialKøbmandens hjemmeside, så den bliver en succesfuld digital løsning, er det vigtigt at have kendskab og indsigt i brugernes behov.
Vi ønskede efter en mindre webanalyse at sætte brugeren i centrum/fokus, og give dem en oplevelse, der skal få dem til at agere.
Det vil vi bl.a. ved at skabe en bedre brugervenlighed i form af at skabe et enkelt design, hvor brugeren ikke mister overblikket, men kan nemt navigere rundt på hjemmesiden, hvilket kan være med til at resultere i øget vækst og produktivitet - men også for at det bliver et mere visuelt design, hvor man associerer sig med det virksomheden sælger.

Design


Her er designet til vores forside. Vi har valgt at lave et meget "typisk" design for en kageside, da vi synes at det var noget Specialkøbmanden manglede, eftersom at man ikke umiddelbart forbandt siden med kager og lignende. Mange forbinder pasteller med søde sager, derfor har vi brugt en kombination af lyserød og blå, og så lige den brune til at bryde lidt med det. Vi har valgt at have alle "labels" på forsiden, for at gøre det overskueligt for kunden. Desuden har vi fokuseret meget på brugen af billeder, frem for brugen af tekst, som Specialkøbmanden gør, da det blandt andet er en af de ting på deres side, som ikke fungerer særlig godt, og som skaber forvirring.

Wireframe

Vores design er hvad man nok vil betegne som ”typisk” for en kageside, men sådan har vi gjort, fordi vi synes det var noget der manglede på den oprindelige side. Det går trods alt ikke, at man går ind på en side uden at kunne se hvad den går ud på – man kan derfor sige, at Specialkøbmanden højst sandsynligt ville dumpe en ”trunk test”. Med vores design, er brugeren på intet tidspunkt i tvivl om, hvad det er de er kommet ind på. Samtidig har vi fokuseret meget på at lægge ”labels” ud på forsiden, for at vise brugeren Specialkøbmandens store udvalg, eftersom at det er dét, der har gjort dem så populære, som de er i dag. Derfor har vi valgt at lægge det hele ud på forsiden via billeder - hvorimod den oprindelige side lægger alle deres produkter ud gennem tekst, hvilket bliver langt mere tungt og forvirrende at se på.
Vi har valgt at bruge pastelfarver, eftersom at det typisk er sådanne farver man forbinder med søde sager. Vi har brugt en kombination af blå og lyserød, og så lige den brune for at bryde med pastelfarverne – og så også fordi mange associerer den brune med chokolade. Havde vi derimod brugt alt for mørke farver, ville det få siden til at fremstå som værende eksklusiv og dyr, og det kan jo komme til at skræmme kunderne væk, især nu hvor det er produkter, som man skal købe igen og igen (medmindre der er tale om køkkengrej selvfølgelig). Kort sagt kan man sige, at vores side udstråler lidt noget barnligt, hvilket fungerer godt, da de fleste af Specialkøbmandens kunder er kvinder med børn. På denne måde viser vi, at siden kan tilbyde ting, som er relevante for børn, såsom sukkerbilleder med prinsesser eller fodbolde.
Her er wireframen til vores forside:

Hierarkisk strukturering


Dette er vores sitemap, hvor man ser en hierarkisk strukturering over vores hjemmeside. Vi har menuerne og derefter undermenuerne, og det har vi valgt for at gøre det mere overskueligt, så det i stedet for at stå på en lang liste, står under den tilsvarende kategori. Det at stille det op på denne måde, gør, at det bliver som sagt overskueligt, og det er nemmere at navigere sig rundt på hjemmesiden.
Under "kagekurser" har vi undermenuer, der er lagt i sitemaps, fordi der under hvert kursus er flere undermenuer, og det, at der er flere menuer under, vises bedst på denne måde, ved at lave symbolet som viser, flere sider følger på denne undermenu.
Indholdsopdelingen har vi som sagt valgt at tage hovedemner på den nuværende side, specialkoebmanden.dk, og derudfra lave dem om til hovedmenuer, også derefter lagt de emner der passer ind til hovedmenuer under, så man har en opsamling af alle disse elementer på ét sted i stedet for flere steder.

Denne strukturering er bedre end den oprindelig website, specialkoebmanden.dk, fordi den giver en mere overskuelig opdeling af siden, og derfor er med til at give en nemmere og hurtigere navigation for kunderne. Derudover er et hierarki en simpel måde til at organisere informationer på hjemmesiden, og derfor bliver det nemmere for kunden at finde det ønskede produkt, da produktet ofte er placeret flere steder end kun ét.

Flowchart (taskflow)


Denne proces viser et forløb over fra man starter med et problem og i sidste ende finder frem til en løsning.
I vores proces starter man med at gå ind på google, for at finde den ønskede ting, og derefter klikker man ind på specialkoebmanden.dk, og der beslutter man sig for om det er denne ret hjemmeside, er det ikke er processen slut, og derfor ryger tilbage til google indtil man finder ud af om det er den rette. Men ved man at det er den rette side, så i dette tilfælde, søges der på en figur - finder ikke - ender proces med at man ryger tilbage til "søger figur" indtil man har den, og når det sker, at man finder den rigtige figur - går man step by step videre til kassen - og så ender denne proces, da man har købt varen.
Og derfor har problemet fået en løsning. 


mandag den 5. marts 2012

Personas og Scenarios

1. Persona: Hannah
Hannah er 26 år, og bor i København sammen med sin kæreste. Hun har ingen kendskab til SpecialKøbmanden, men gør sine køb i andre offline butikker, for det har hun det bedst med at føle på varen inden der handles. Hannah elsker at bage, fordi man får lov til at sammensætte ingredienser på en spænende måde, for at få det til at smage godt, men også for at få eksperimenteret, hun bager ofte gerne flere gange om måneden.
Men når hun så gøre køb på en hjemmeside, så vil hun helst have, at det er en hjemmeside der har en enkel opsætning, er nemmere at navigere rundt i og få step at følge til indkøbskurven. (Selvom vi godt ved, at man ikke skal spørge kunden om, hvad de forventer af en hjemmeside). Når hun så handler på nettet er det forskelligt for hvad hun bruger af penge.

Scenario:
Hannah skal bage til en fødselsdag, og hun vil gerne imponere ved at købe noget specielt og anerledes. Hun kigger på nettet og tjekker nogle af de første sider ud, men finder ikke det hun har brug for. Derfor ender hun på specialkoebmanden.dk, hvor hun finder en hjemmeside, hun synes ser rigtig fin ud, da hun associerer sig til en side der sælger kageudstyr, ud fra valg af pastelfarverne og opstilling af menuen. Derudover virker siden indbydende og spændende ud. Hun finder hurtigt frem til det hun skal bruge, og finder ud af, at der er relaterede produkter til det eftersøgte produkt, og derfor beslutter hun sig for at kigge nærmere på disse produkter, for at få mere inspiration til sin bagning. Derefter fortsætter hun de få steps til kassen. Da Hannah er vant til at købe i butikkerne, vælger hun muligheden om selv at afhente varen i butikken.

2. persona: Johanne
Johanne er 35 år og bor i Roskilde. Hun har en datter på 5år og en søn på 7 år. Johanne har altid været glad for at bage, egentlig ikkefor at spise kagerne det lader hun andre om, men fordi hun godt kan lideudfordringen i det. Hun har før været på et kagedekorations-kursus med enveninde, hvor hun har fået inspiration fra, og ligefra denne dag er hun dybt afhængig afkagedekorationens kunst. Hendes børn elsker selvfølgelig, at deres mor bager såmange kager, men hun tager dog højde for, at de ikke skal have kage alt fortit, så hun prøver at begrænse det til særlige lejligheder.



Scenario:
Johanne og hendes veninde har fået til opgave at lave kager til en børnefødselsdag. Veninden beder Johanne om at tjekke specialkøbmanden,som hun ellers aldrig har hørt om før. Hun går ind på siden, og er ikke et øjeblik i tvivl om, at dette i hvert fald er en side om kager. De lyse og bløde pastelfarver giver hende lyst til at være på siden, og at tage det stille og roligt mens hun søger efter de ting hun har brug for. Hun kunne godt tænke sig, at finde noget der egner sig til en kage til et barn, for eksempel noget med Hello Kitty eller Prinsesser. På forsiden spotter hun en række emner, såsom temaprodukter, farver og pynt. Mon ikke der er et tema for børn? Tænker hun straks hvorefter hun trykker på "temaprodukter". Ja, det var der så sandelig, og lige det hun havde brug for. Hun ser at der også er ting der ville fungere rigtig godt hvis fødselaren var en dreng - det måtte hun huske til næste gang. For denne gang nøjes hun med at købe nogle sukkerbilleder med disney-prinsesser og lignende figurer - de skulle nok imponere pigerne. Hun lægger dem i indkøbskurven, og herefter går alt som smurt.
3. persona: Anja
Anja Hansen er 38 år ogarbejder som revisor. Hun bor i et hus sammen med sin mand og deres 3 børn. Anja bruger meget af sinfritid med at bage kager, som er hendes store interesse. Den interesse har hun dogikke altid haft, hun synes selv at det er noget der er kommet med tiden, efterhun har fået børn. Hun vil rigtig gerne udvikle sine evner, og kunne imponereandre med sin kage kunst. Hun synes dog, at det er lidt irriterende, at man skalrende i så mange forskellige forretninger, for at få de ingredienser, som hunskal bruge, og at det naturligvis koster så mange penge, hvilket har fåethende til at gå i stå. Også er hun ikke rigtig glad for at købe ting over internettet, i frygt for at give for personligeoplysninger. Men da hun har kendskab til specialkoebmanden.dk, som hun fik via. en artikel i Femina ved hun at hun kan få lige hvad hun skal bruge, og som en ekstra bonus, har hun mulighed for at handle i butikkerne istedet for over nettet.
Scenario:

Vi spurgte Anja om hvad dervil få hende til at handle over internettet, når hun skulle bruge noget forSpecialKøbmanden, efter de strukturændringer vi havde fortaget os.
SpecialKøbmanden er blevetmere troværdig. Siden er blevet let og overskuelig, så det er nemt at finderundt på deres side, og hurtigere kan komme til kassen. Hun syntes desuden ogsåat deres søgeoptimering blev langt bedre, hvilket hun mener, er klart positiv.Da det vil resultere i at flere vil komme til at handler os dem, ligesom hunselv vil overveje.

Hun kunne desuden også godt lide farvevalget på siden, da den udstråler noget "barnligt", hvis man kan sigedet sådan og kager forbinder man jo også med børnefødselsdag og på den måde vil den også ramme deres målgruppe bedre end den første hjemmeside gjorde.


Brainstorm over pitch og idé

Ud fra vores pitch, har vi som sædvanligt, lavet en brainstorm, så vi kan få de vigtigste ting "ud på bordet". Og derudfra kreerede vi en brainstorm over vores idé til projektet.