Logistiksystem Päron AB Ett företag bad mig skapa ett logistiksystem där jag använde mina UX-kunskaper och front end kunskaper i februari 2019 som sedan skulle back end programmerare skulle fortsätta utveckla. Briefen nedan beskriver det den information jag blev tilldelad för att lösa problemet. Uppgiften löstes genom att definiera mål och krav, skissa, utvärdera, skapa prototyp samt koda systemet. Bakgrund Tim Kock tog för några år sedan över som VD på ett globalt teknikföretag med namnet Päron AB. Efter att ha satt sig in i verksamheten ordentligt så känner han att företagets logistik skulle kunna effektiviseras med hjälp av ett modernare IT-stöd. Då han hört mycket gott om ditt företag, som är specialiserat på att bygga webbaserade affärslösningar, så har han vänt sig till dig med uppdraget. Problembakgrund Päron AB erbjuder (bland annat) ett antal olika teknikprodukter vars lagersaldo idag hanteras i ett kalkylark. I detta dokument rapporteras in- och utleveranser till företagets olika färdigvarulager varefter aktuella lagersaldon kan summeras. Detta arbetssätt driver mycket tid, och företaget har idag 1 200 anställda som arbetar heltid med hantering av kalkylarket. Att endast en person kan arbeta i dokumentet samtidigt ökar problematiken ytterligare. Krav på lösning Tim Kock inser att det är ett stort jobb att effektivisera denna process, men han känner att de är redo att påbörja den resan. I ett första steg vill han ersätta det befintliga kalkylarket med en webbapplikation där anställda kan rapportera förändringar i färdigvarulagret. Utöver detta vill han också kunna se aktuella lagersaldon. Även om applikationen främst kommer att köras på surfplattor i webbläsaren Zoo, så är det viktigt att alla plattformar stöds. Utöver instruktionerna ovan finns inga specifika krav på hur lösningen ska se ut. Företaget hanterar tre olika produkter: telefoner, plattor och klockor. Företaget har tre olika lager på tre olika platser: Norrköping, Cupertino och Frankfurt. Lösningen Logistiksystemet byggdes ur ett UX-perspektiv där jag först läste igenom det dokument jag blivit tilldelad. Jag försökte förstå de grundläggande problemen för både anställda och Vd:n. Eftersom jag inte hade möjlighet till användarstudier tänkte jag mig in som anställd på samt som VD på Päron AB. Vad som behövdes göras var att skapa en lösning åt de anställda på företaget som arbetar fysiskt på lagret med att ta emot och lämna leveranser. Även en lösning åt Vd:n behövdes göras, detta för att Vd:n skulle ha koll på aktuella lagersaldon.
Definition För att kunna skapa systemet tycker jag det är viktigt att ha klara definitioner av mål och krav vilket resulterade i att jag visualiserade mål, krav, delar, funktioner, komponenter och helhet. Jag skapade en customer journey / employee journey för att se den anställdas resa när den arbetar. Jag valde att göra en tydlig karta över vad som sker i varje steg för den anställda, detta för att verkligen förstå hur den anställda arbetar. Vilken sorts produkt den anställda ska rapportera, hur många, av vilket leveransföretag, om produkten ska in eller ut ur lagret var relevant att ha med i journeyn. När det gällde vad Vd:n Tim skulle ha på sin lösning definierade jag att han ville se aktuella produkter på varje lager samt vad som skedde på lager (aktiviteten). Även vad som hände om leveranser uteblev och kommande leveranser till varje lager var relevant att ha med som krav på lösningen.
Förstaskisserna Efter att ha bildat mig en förståelse över vad som behöver göras började jag skissa på lösningar. Dessa skisserna byggde på vad jag tidigare definierat som behöver vara med i lösningen. Bild till vänster visar den anställdas system och den till höger visar aktuell lagerstatus. Skisser 2.0 Efter att ha utvärderat med tre vänner om hur jag tolkat problemet, hur jag definierat mål och krav samt visade upp mina första skisser valde jag att göra nya skisser som byggde på feedback på utvärdering. Sliden att dra i (antal produkter) byttes ut mot att manuellt knappa in antal produkter. Detta eftersom antalet produkter varierade från 100 till 100 000 antal produkter i caset. En slider som har så högt antal blir en väldigt lång slider
Prototypskapade för den anställda på lagret En prototyp i prototypprogrammet Mockplus skapades, med klickbara funktioner och flöden. Prototypen skapades från de senaste utvärderade och itererade skisserna. När jag skapade prototypen insåg jag småproblem ex. pilar som kan uppfattas fel och om leverantörer skulle vara med. Jag säkerställde klassiska användbarhetsheuristiker som färger, logik, kontinuerlighet, feedback osv. Jag säkerställde även flöde och att krav och mål uppfylldes av anställda och VD var med i prototypen. Prototypen skapades ur ett ipad-format då detta var det efterfrågade men var meningen att vara responsiv för att stötta alla olika sorters plattformar. Första bilden är det en anställd på logistiklagret möts av när en leverans ska ske. Personen (Pelle i detta fallet) väljer produkten som leveransen gäller (telefon i detta fallet, vilket resulterar i att produkten blir grön). Pelle väljer antal produkter samt vilket leveransföretag produkten ska med. Sedan väljer Pelle om leveransen ska ut från lagret (röd pil utåt, vänster) eller in på lagret (grön pil inåt, höger). Produkten är GPS-baserad (i detta fallet Norrköping) och en ångraknapp finns om Pelle råkar klicka in fel antal produkter.
När Pelle klickat på antingen ut eller in pilen kommer Pelle till nästa sida. Där får Pelle feedback om vilken produkt han valde, antal samt med vilket företag. Om Pelle gjorde fel kan Pelle enkelt välja den röda knappen (ångra) och går då tillbaka till den förra sidan och göra rätt beställning. Om Pelle gjorde rätt beställning klickar han på den gröna knappen till höger och fortsätter arbeta.
Prototypskapande för VD För Tim (VD) var det viktigt att kunna se aktuell lagerstatus på produkter på olika lager. Detta har jag tolkat som att Tim vill se hur många antal produkter det finns på varje lager. Jag valde att göra detta datumsbaserat om Tim ville se hur många produkter som fanns på ett visst lager för exempelvis en månad sedan. Jag valde att skapa ett cirkeldiagram där de olika delarna visade hur stor procent som de olika produkterna hade på lagret, detta för att enkelt få en snabb överblick över lagrets status. Jag skapade även en aktivitetsknapp där Tim enkelt kunde klicka sig in på varje lager och se vad som hände på lagret under dagen. Även här valdes en kalender för att se aktiviteter för exempelvis en månad sedan. En daglig sammanställning över hur många av de olika produkterna som skulle in eller ut ur lagret visades och var valbar att dölja. Även kommande leveranser fanns med som en flik för att Tim enkelt skulle kunna se framtida leveranser, även här datumsbaserat. Daglig sammanställning fanns även med på kommande leveranser.
Efter att ha visad prototyp för företaget och fått feedback (exempelvis vad händer om mina anställda är färgblinda eller vad händer med leveranser som inte kommit) kodades prototypen i HTML, CSS och
JavaScript. Angående färgblindheten valdes att göra ett JavaScript som inte bara gjorde den valda produkten grön utan även fick en ram runt sig. En sida över uteblivna leveranser tillades där man kunde se anledning till utebliven leverans samt när leveransen skulle komma istället. Front end programmering: de delar som skiljer sig från prototypen
Avslutningsvis Systemet skulle nu fortsätta utvecklas av back end programmerare. En lärdom jag tar med mig är att tänka genom momenten mer på skissblocket innan jag gick till att skapa prototypen eftersom jag insåg vid skapandet av prototypen småsaker jag inte tänkt på. Jag lärde mig att front end programmering var riktigt kul och är nöjd över min prestation. Företaget blev nöjda och valde att gå vidare med min lösning.