UX - Datadriven Design


Blomsterbinder Bente har en fysisk blomsterbutik nede i Lyngby. Hun har ikke en hjemmeside endnu og hun vil gerne have, at I kommer op med en prototype.

Bente’s krav

• Brugeren skal kunne købe blomster online og derfor er det vigtigt, at købsformularen er brugervenlig og overskuelig.

• Man skulle kunne læse om hendes produkter og kan ligge det en kurv. (Skal ikke virke - bare måle på hvor mange der gør)

• Man skulle kunne finde information om hende.

• Man skulle kunne sende blomster til hinanden med små ekstra ting som vin eller chokolade.

Krav til opgaven


I skal opstille forskellige hypoteser som I skal teste af. Altså lave forskellige eksperimenter.

Prototypen skal kodes i HTML/CSS/JS/PHP - Brug de kodetemplates som er blevet udleveret.

Prototypen skal bestå af 4 HTML sider: Forside,Produkt side,About side, Købsformular

Inspiration


Vi har søgt på konkurrenter til Bentes Blomster og testet deres hjemmesider og deres flow af for at få inspiration.

Vi lagde mærke til at alle selvfølgelig har blomster i fokus men vi syntes der manglede personlige profiler. Og det har vi jo, nemlig Bente. Så vores udgangspunkt, side A, er med Bente i fokus.

Vi har også kigget på måden at præsentere buketter, webshop og kontakt (CTA) og prøvet at samle det hele på forsiden og derefter dele informationerne ud på andre underside.

Prototypen


Vi har lavet vores sider i Visuel Studio, en A-version og en B-version.

For at lave en A/B-test (splittest) har vi lavet en index.php side hvori vi har indsat et PHP-script. Dette PHP-script gør at brugeren enten bliver sendt hen til A-versionen eller B-versionen.

For at tracke vores brugers adfærd på siderne har vi anvend Hotjar. Hotjar er et online værktøj, som kan bruges til at spore brugernes bevægelsesmønstre og handlinger på siderne. For at tracke har vi indsat Hotjar ID-nr. på hver side.



Hypoteser


Vi har arbejdet med Bentes ønsker og krav for at kunne opstille nogle brugbare hypoteser.

Bente´s krav

Brugeren skal kunne købe blomster online og derfor er det vigtigt, at købsformularen er brugervenlig og overskuelig.

Man skulle kunne læse om hendes produkter og kan ligge det en kurv. (Skal ikke virke - bare måle på hvor mange der gør)

Man skulle kunne finde information om hende

Man skulle kunne sende blomster til hinanden med små ekstra ting som vin eller chokolade.

Dataanalyse


Efter at vi gik ”live” med sden og kunne sende den ud til test hos vores testpersoner, kunne vi indhente data fra Hotjar.

På Hotjar har vi kunne indsamle data via ”Recordings” hvor vi kan se testpersonerne rejse rundt på siden via video-klip.

Vi har også kunne analysere på Heatmaps, der danner ét billede, af alle brugernes klik på siderne. Ved brug af heatmaps for version A og version B og stille dem op mod hinanden har vi kunne se de tydelige forskelle. Disse forskelle har så kunne be- eller afkrafte vores hypoteser.

Behavior patterns


2.Instant Gratification (Umiddelbar tilfredsstillelse)

Når brugerne klikker på kurven kan de udover at se navnet samt prisen på deres valgte vare i kurven også se et miniature billede.

Design heuristikker

3. User control and freedom - Brugerne bør kunne fortryde deres valg

Det er en gængs designkonvention at brugeren har mulighed for at fortryde deres valg, her ved klik på krydset

4. Consistency and standards Interfacet bør være ensartet og følge gængse designkonventioner

Det er en gængs designkonvention at kurven er placeret øverst til højre og derfor er designet genkendeligt for brugerne.

7.Social Proof (Social Bevis)

På vores design på galleriet ses ingen reviews og det er vores endelige design sendt ud til test. Vi kunne opstille en ny hypotese og teste et nyt galleri-design hvor der ses reviews som kan virke tillokkende på brugerne da de kan se hvilke blomster andre brugere synes om.

Gruppens "take" på opgaven

Vi arbejde godt, struktureret og målrettet med opgaven og kom godt i mål, trods den korte varighed opgaven stod på i.

Vi fik god feedback ved vores præsentation, især vores analyser af data blev fremhævet.