Case
Craigslist
Optimering av användarupplevelsen
Tidsintervall: 2 veckor
Projekt: Grupparbete i kursen Process och metod, UX Design KYH
Verktyg: Figma, Trello, Figjam, papper och penna, Formulär
Metoder: Design Thinking Process, Scrum, User Research, Användbarhetstester, Wireframing, Prototyping
Min roll: UX researcher/-designer
Om projektet
Vårt uppdrag var att att göra en redesign av Craigslist, USAs motsvarighet till svenska Blocket, till en mer användarvänlig online-marknadsplats. I detta grupparbete, med Design Thinking Process i fokus och i enlighet med ramverket Scrum, var målet att ta fram en prototyp av en startsida som upplevs som användarvänlig.
Problemformulering
Föreställ dig följande: Du ska leta efter en barncykel till din son på en marknadsplats på internet. Den behöver vara 20 tum, ha några växlar och fotbroms, samt gärna gå att hämta i närheten. En vän har tipsat dig om Craigslist.com, men när du kommer in på startsidan blir du genast osäker på var och hur du ska börja leta efter din cykel. Sidan känns omodern, rörig. Du får ingen bra magkänsla och litar inte på att det är en seriös sida. Du bestämmer dig för att googla vidare efter en annan online-marknadsplats som känns mer pålitlig och enkel att använda.
Hur löser vi dessa problem för användaren, så att upplevelsen att använda Craigslist blir positiv och enkel?
Citat av användare:
“Jag kände att det blev en kognitiv överbelastning när jag kom in på sidan då det var väldigt många olika val att klicka på.”
“Messy- no focus in design - where do I go first - and then- and what am I doing on this site?!”
Process
För att lära känna våra användare och förstå deras behov och önskemål utförde vi en user research. Vi började med att göra en analys av hemsidan och läsa recensioner och kommentarer på Reddit som del av en målgruppsanalys. Utifrån den data vi samlade in formulerade vi tre user stories, som en första hypotes på möjliga förbättringar på Craigslists förstasida, för att göra den mer användarvänlig.
Under vidare user research sökte vi information och kunskap kring:
Testa av våra hypotetiska user stories
Lära känna och få information om användarnas behov och önskemål
Identifiera painpoints
Ringa in problemformuleringar
Enkätundersökning
För att testa om vår hypotes stämmer med verkligheten eller ej önskade vi lära känna vår målgrupp bättre med hjälp av en enkätundersökning. Av de 17 användares svar vi fick in kunde vi se att våra hypoteser till viss del stämmer, men att det också fanns en del andra punkter som var viktiga för våra användare.
Utifrån den hitintills insamlade datan, kunde vi gå vidare med en konkurrentanalys, samt göra en persona för att ringa in våra användares viktigaste behov och pain points.
Konkurrensanalys
Vi gick vidare genom att göra en konkurrensanalys där vi jämförde Blocket, Facebook Marketplace och Tradera. Dessa marknadsplatser var de vanligast förekommande bland våra användare enligt deras svar i enkäten. I analysen fokuserade vi på tre områden:
→ design, färger och känsla
→ startsidan, funktioner och meny
→ nackdelar
Persona
Vi analyserade den data vi samlat in och tog slutligen fram två problemformuleringar, som vi ville lyfta fram när vi skapade personan Laura. En visuell presentation av våra användares smärtpunkter och frustrationer som de upplevde när de var inne på hemsidan. Den gav oss ett bra fokus vidare, för att se till att vår redesign av Craigslist slutligen skulle möta användarnas behov och önskemål.
Brainstorming & snabba skisser
För att generera idéer på vår kommande prototyp utförde vi en Design Studio. Därefter skissade vi snabba wireframes för hand.
User Stories
“Som användaren vill jag enkelt kunna navigera i hemsidans innehåll så att jag snabbt kan hitta det jag söker”
“Som användare vill jag ha en mer modern startsida, med fler färger och roligare typsnitt så att jag får en mer positiv upplevelse av att vara inne på webbplatsen.”
Vi arbetade enligt Scrum och hade en gemensam Scrum board. Våra user stories delade vi upp i flera tasks. I en gemensam brainstorming kom vi fram till definition of done för varje kort. Vi la in beskrivande text för DoD, la in länkar till olika hemsidor för inspiration, samt skissade snabba wireframes på papper som alla hade tillgång till. Vi estimerade även tid för varje kort, och röstade genom “sten-sax-påse” metoden.
Wireframes
Vi delade sedan upp våra tasks och skissade upp wireframes i Figma.
Mockups
Vi kombinerade sedan ihop dessa wireframes till en gemensam startsida. Därefter gjorde vi en mockup av de wireframes vi valt, genom att implementerade vår style guide.
Designbeslut, Style Guide
Vi har valt att behålla Craigslist lila färg för att behålla igenkänning. Vi har dock gjort den till en ljusare nyans för att få en lite gladare känsla
Vi har valt att använda fonter som rekommenderas för att vara enkla att läsa och därmed användarvänliga
Vid val av storlek på texten har vi utgått ifrån UX principer för att göra hemsidan lättläst och bra ur tillgänglighetssynpunkt
Vi har även kolla så att det är godkänd kontrast på bakgrund och text för att göra sidan lättläst.
Användningstester
Test 1 - Utföra 2 scenarion, “Thinking out loud” & Design review
Vi började med att göra ett test på våra mockups. Våra testpersoner fick då två scenarion att försöka utföra. Vi bad dem även att tänka högt och berätta vad och hur de gjorde, samt delge tankar och funderingar. Detta för att vi skulle få så mycket info av användarna som möjligt. Vi gjorde i samband med detta test även en Design review.
Scenario 1: Sök upp en yogaklass
Scenario 2: Lägg till en ny annons
Testresultat och feedback
Iteration
Därefter gjorde vi en iteration och förbättrade våra wireframes utifrån de samlade svaren från användbarhetstesterna.
Test 2 - Jämföra två nya förslagen i ett liknande A/B test
A/B test för att jämföra olika förändringar. Här fick vi ny feedback som vi tog till oss inför slutgiltig prototyp.
Testresultat och feedback
Med fokus på processen och UX metoder, gav projektet erfarenhet av jobba enligt Design Thinking Process och att praktiskt jobba enligt ramverket Scrum. Det var lärorikt att i ett team gå igenom alla delar i en UX process, hela tiden med användaren i centrum. Med hjälp av retrospectives, gemensam brainstorming, DoDs, fick vi med alla i teamet på samma bana och det var en väldigt rolig process. Användningstesterna gav många viktiga insikter för att nå en bra slutprodukt.
Vad jag lärt mig
Att i användarenkäten specificera plattform användarna ska ge feedback på. De flesta tittade på hemsidan via mobilen, och vår analys var skärmstorleken laptop. Om jag vid senare tillfälle planerar göra en persona och konkurrensanalys, så är det klokt att redan i enkäten inkludera några korta frågor om användaren, såsom ålder, vardagliga rutiner, demografi m.m. Även fråga om vilka liknande tjänster de använder och vad de gillar/inte gillar med dem, som grund för en konkurrensanalys. Detta glömde vi här och fick därför göra en iteration genom att göra om enkäten och skicka ut den på nytt, vilket tog onödig tid, men gav en viktig lärdom.
Under första sprinten fastnade vi i diskussioner kring detaljer, därför är det viktigt att våga ta upp vad som gått mindre bra under retrospcetive för att hitta strategier för att komma framåt snabbare. Vi bestämde då att vid liknande tillfälle framåt bryta för en bensträckare, samt pausa ämnet till ett bättre lämpat tillfälle.
Att det är tidsmässigt effektivare och att föredra att i kommande projekt utföra tester redan vid enkla wireframes. Lättare för användarna att ge kritik till en mindre arbetad wireframe, samt att det går snabbare att skissa om. Hade vi gjort första testet med enkla wireframes, kunde vi snabbare ha generera ett större antal skisser utefter feedback på första testet.
Key learnings
Vår lösning
Startsida före och efter redesign
Under projektets gång har vi använt det digitala verktyget Figjam för att skapa en visuell överblick över projektet.
