GRUB

Ett fiktivt skolprojekt i två delar. Prototyparbete för att skapa en webbapplikation med målet att minska matsvinnet i samhället.

Vad & Varför

En tjänst utvecklad som en webbapplikation där både privatpersoner och företag inom ett visst gemensamt geografiskt område ska kunna lägga upp annonser för att skänka bort överflödiga matvaror i stället för att slänga. Privatpersoner kan både skänka bort och hämta överblivna matvaror, företag kan endast skänka bort.

Syftet är att kunna söka mellan dessa annonser för att hitta varor man behöver i stället för att köpa nytt i butik, med målet att minska matsvinnet. För att kunna utnyttja tjänstens fulla potential behöver man registrera sig vilket möjliggör att man både kan hämta och reservera varor samt använda sig av meddelandefunktionen. Utan inlogg kan man endast söka varor och läsa annonserna samt hämta varor som skänks via företagsannonser.

Projektbeskrivning & de övergripande kraven

Vi skulle i första fasen leverera ett flödesschema, wireframes (för mobil och desktop) samt en mid-fidelity klickbar prototyp att kunna testa två prioriterade flöden på. Genomföra användartester på prototypen och våra två utvalda flöden. Vi hade tre veckor på oss för fas 1.

Den andra fasen bestod av att förfina prototypen och gå från mid-fidelity till high-fidelity. Utgå från den information vi samlat in vid våra användartester och göra förbättringar därefter. Skapa interaktiva komponenter med minst 3 olika states. Även ta fram en mockup för både mobil och desktop av en särskilt utvald sida. Muntligt presentera prototypen och vår lösning för ”klienten”. Denna fas fokuserade på UI. Vi hade två veckor på oss för fas 2.

De övergripande kraven för projektet var:

Lösningen skall vara i form av en webbapplikation.
Lösningen skall vara anpassad för användning i mobilen men även fungera på desktop.
Lösningen skall vara funktionell både med och utan användarkonto.
Lösningen skall riktas mot både privatpersoner och företag.

Idégenerering

Fas 1 började med att vi, ett team på 5 personer, bröt ner problemet vi ställdes inför med hjälp av passande metoder, exempelvis Journalistens 6 frågor (vem, vad, när, var, varför och hur). Vi skapade även user stories för att få en bättre förståelse för vad vi ville utveckla. När vi gjort det och hade en gemensam syn på problemet kunde vi gå vidare med en traditionell brainstorming för att komma fram till hur vi ville lösa problemet och minska matsvinnet. Då vi arbetade remote så gjorde vi allt vårt arbete i Miro där vi hela tiden kunde följa varandra och se vad var och en i teamet gjorde.

Vi skrev ner våra idéer och möjliga lösningar på sticky notes. Vi gick sedan gemensamt igenom alla förslag. Vi röstade med hjälp av prickar fram 4 olika koncept som vi gick vidare med. Dessa 4 koncept genomförde vi sedan en övning kallad Love & Hate på där vi noterade vad vi gillade och ogillade (fördelar och nackdelar) med varje förslag. Efter denna övning hade ett av koncepten klart utkristalliserat sig som den mest passande lösningen för problemet.

Lösningen vi kom fram till var en webbapplikation där boende och personer inom ett visst postnummerområde kan dela med sig av matvaror som annars riskerar att slängas genom att lägga upp annonser samt reservera varor som andra personer lagt ut.

Flödesschema

Vi började arbetet med att skapa ett flödesschema för både privatpersoner och företagsanvändare. Detta för att få en förståelse för hur vi ville att tjänsten skulle fungera samt för att ha något att förhålla oss till när vi sedan skulle börja med våra wireframes.

Vi fortsatte efter detta med att skapa skärmar till vårt flödesschema och grunden till våra wireframes genom att börja skissa med hjälp av papper och penna. Anledningen till att vi valde att arbeta med just papper och penna i detta skede var för att vi snabbt ville få ut skisserna utan att fundera för mycket på resultatet eller arbeta för prestationsinriktat. Det viktiga var vad vi fick ut av det, att vi arbetade fram en visuell och funktionell variant av vårt flöde, men vi fokuserade ännu inte på att det skulle vara visuellt tilltalande.

Vi utgick alla från vårt flödesschema och körde korta pass där vi individuellt skissade upp förslag på olika skärmar till applikationen. Vi redovisade skisserna för varandra och heatmappade sedan de områden och förslag vi tyckte var viktiga att få med till våra wireframes. Vi klippte ut de delar vi var överens om och placerade ut dem mot vårt flödesschema. Vi itererade och körde en omgång till av skisser och heatmapping för att kunna fylla de delar av flödesschemat som saknade skärmar av flödet vi tänkt oss.

Wireframes

Vi gick sedan vidare till att skapa våra wireframes för mobil. Dessa skapade vi direkt i Miro. Vi började med att göra två skärmar tillsammans för att ha en standard att utgå ifrån, efter det fortsatte vi att arbeta var för sig med att skapa de olika skärmarna i flödet. Eftersom vi gjort ett så grundligt arbete med flödesschema och skisser för hur varje skärm skulle se ut gick det väldigt snabbt att skapa alla våra wireframes.

När våra wireframes för mobil var klara gick vi vidare till desktopversionen, där vi utgick från mobilversionen men konverterade dem till desktop.

Mobil

Ett urval av de wireframes vi skapade för mobil.

Desktop

Ett urval av de wireframes vi skapade för desktop. Då dessa inte var huvudfokus så var det viktiga här att få med de komponenter vi visste att vi behövde, utan att fokusera för mycket på layout i detta skede.

Prototypen, mid-fidelity

När vi hade våra wireframes klara satte vi i gång med vår prototyp. I denna del av projektet valde vi att arbeta i Adobe Xd. Då det endast var en mid-fidelity prototyp som vi skulle göra i detta skede så gick även denna del av arbetet mycket snabbt då vi endast behövde återskapa elementen från våra wireframes i prototypen och göra den klickbar. Vi skapade två klickbara bestämda flöden för att kunna testa dem senare under våra användartester. De flöden vi ansåg viktiga och ville testa var:

Att söka efter en vara, reservera den samt kontakta annonsören
Lägga upp en annons för att själv skänka bort en vara

Användartester

Nästa steg efter att prototypen var klar var att testa den på den möjliga målgruppen. Innan vi bokade in testpersonerna diskuterade vi igenom vad vill ville testa och varför.

Vi valde att göra ett test var där alla fick agera testledare. Eftersom vi jobbade remote så var ingen annan i gruppen med vid testtillfället för att kunna anteckna, men vi försökte kompensera det genom att spela in röst samt mobilskärmen med klick från testdeltagarna för att kunna dela med de andra i gruppen senare. När testerna var gjorda samlades vi och gick igenom alla tester tillsammans och antecknade det som framkom av testerna på sticky notes i Miro. Vi gick sedan igenom lapparna tillsammans för att sammanställa och föra in datan i Excel. Här var fas 1 klar.

Prototypen, high-fidelity

Fas 2 startade ca 4 månader senare. I denna fas jobbade vi i grupper om två vilket betydde att det var endast jag och en gruppmedlem från den tidigare gruppen som tog fram just denna high-fidelity prototyp.

I vår high-fidelity prototyp skulle vi endast visa ett av våra två flöden. Vi valde att arbeta vidare med flödet där man som inloggad användare söker upp och reserverar en vara. Anledningen till det var för att vi kände att det gav en lättförståelig men ändå bred bild av hur tjänsten var tänkt att fungera.

Vi började vårt arbete med att leta inspiration från andra liknande tjänster. Vi undersökte färgpaletter och skapade mood boards över vad vi ville uppnå. Genom att göra en snabb koll bland liknande tjänster eller tjänster som arbetar med miljöfrågor kan man tydligt se att de flesta utgår från en grön färgpalett. Vi ville inte gå den vägen, dels för att sticka ut och komma bort från det traditionella men också för att genom att använda andra färger kunna locka en bredare målgrupp. Vi ville använda starka färger som gav en pigg känsla och därmed kunna locka de som vanligtvis kanske avskräcks och har fördomar om den traditionella miljökämpe-looken. Detta val skulle vid ett skarpt projekt självklart behöva testas vidare på för att se om det skulle vara rätt väg att gå.

Vi valde att ge vår webbapplikation namnet Grub vilket vi tyckte passade in i den lekfulla känsla vi ville förmedla.

Vi började med att skapa sidan som skulle visa en lista med sökresultat. På denna sida testade vi oss fram med olika färger och grafiska komponenter tills vi kände oss nöjda med ett första utkast till den grafiska profilen. Vi satte då samman ett enkelt designsystem gällande färger, typsnitt och komponenter.

Efter detta fortsatte vi att bygga ut med resterande sidor i tjänsten. Vi jobbade mycket med olika kort, micro/makro whitespace, hierarkier, primära/sekundära knappar och färger för bekräftelse (success). Vi såg även till att färger, texter och komponenter uppfyllde kraven för god läsbarhet i enlighet med WCAG (Web Content Accessibility Guidelines).

Resultat

Illustration

Jag skapade en illustration som gick att anpassa till olika delar i prototypen. Vi använde den som bakgrund till både sidan med sökresultat och startsidan. Även denna förstärkte intrycket av piggt och lekfullt men hjälpte även till att visa på syftet med tjänsten.