E-handel för Buzzador

E-handelskoncept för fyra länder på fem språk i samarbete med Buzzador och Hyper Island.

Om projektet

Lifecycle of digital products

Vi hade jobbat ihop ett tag, Buzzador och jag. Det stod klart att företagets digitala plattform behövde ses över. Systemen fungerade bra. Men användarupplevelsen skulle förnyas. Det behövdes en fräsch angreppsmodell. Vi undersökte möjligheterna att starta resan tillsammans med Hyper Island.

Turen var på vår sida. Projektet Lifecycle of digital products skulle precis dra igång på skolan. Om tre dagar! Buzzadors VD gav klartecken över telefon. Kör, sa han. Briefen till Hyper Island skrev jag på tåget hem från Göteborg den kvällen.

Playbook över förväntan

Vi fick en grupp elever placerade i Karlskrona. Det var otroligt uppfriskande att jobba med dem. Trots att de bara är tjugo-nånting är de redan vana att tänka globalt. De med designinriktning skiljer inte på designarbete och kodning. För dem är det sak samma. Prototyper i Framer och designfiler i Sketch produceras flitigt tillsammans med strategiskt överraskande mogna resonemang som håller ihop dem.

E-handelssajten designades mobile first vilket betyder att världen var 320 pixlar bred.

Dessutom är eleverna orädda. »Vi gjorde om logotypen också, den här blir bättre«, sa dom. En erfaren konsult tänker inte så, eftersom allt som inte direkt har med projektet att göra, räknas som avgränsningar. Nu blev det ingen ny logotyp. Men det är skönt för en uppdragsgivare att jobba med folk som tänker fritt.

Tio hangouts, några slack-trådar och fyra veckor senare åkte vi ner till Karlskrona på presentation. Playbooken som levererades var över förväntan.

Medlemsresor

En viktig komponent i briefen var förstås kundresorna. Vi kallade dem för medlemsresor eftersom Buzzadors affär bygger på medlemskap. Totalt har Buzzador 400 000 medlemmar i Norden. Det var för dem vi gjorde det här. Alla var överens om att det var ett ux-projekt vi hade framför oss, inte ett teknikprojekt, även om tekniken skulle hjälpa oss i mål. Det var front-end som det stora klivet skulle tas.

Webbutveckling för e-handel

Nu var det dags att förverkliga konceptet. Buzzadors avancerade databasmiljö bjöd på en fin utmaning. Närmare 30 system flätade samman alla flöden i bakänden. Alltihop skulle integreras med Wordpress CMS och världens största e-handelsplattform WooCommerce. Passade oss perfekt. Wordpress har blivit lite som vårt eget vardagsrum med åren.

Fem språk

E-handelsplattformen skulle serva fyra länder på fem språk. (Norden plus engelska.) Förutom att sköta projektledning för design och utveckling skulle jag också skriva sajten och hantera översättningarna. Både på sidor och i strängar. Här fick jag god hjälp av flera medarbetare på Buzzador.

Fraser skickades till översättare i länderna via mejl, Slack och till Norge med sms. Innehållet på staging-sajten uppdaterades på alla språk live samtidigt som kod växte fram. Agilt, snabbt och extremt effektivt. Här använde vi standardredskap som Polylang och Loco Translate.

Vi beslutade också tidigt att kodspråket skulle vara engelska. Till exempel originaltexten i alla strängar. Det beslutet hade vi stor glädje av genom hela projektet.

Designteam och utvecklarteam

Två av eleverna från Hyper Island hängde på som designers efter konceptfasen. Väldigt roligt. Vi satte upp två slack-team, ett för designteamet och ett för utvecklarteamet där även IT-chefen och flera nyckelmedarbetare på Buzzador var med. En av flera fördelar med Slack är ju transparensen. Vi befann oss på fyra olika orter, översättare exkluderade. Detta var alltså fyra–fem år före pandemin.

Till en början var det tre personer i varje team där jag synkade teamen med varandra. Perfekta grupper om man får tro teorier om det kreativa teamets prestationer. Mot slutet växte teamen till fem respektive fyra personer.

Konceptfasen var vägledande men många designproblem var ännu olösta. Designteamet gjorde nu mer detaljerade skisser, för exempelvis actions och states, för inloggat respektive utloggat läge och prototyper när det behövdes.

Samtidigt började utvecklar-teamet bita tag i logik och back-end-kopplingar. Vi skissade upp detaljerade logiska flöden för hur sajten skulle fungera. Ganska snart förstod vi att vi var tvungna att modda WooCommerce ordentligt om vi skulle nå våra mål. Vi hoppade till exempel över hela varukorgen och byggde en egen utcheckning som passade våra syften bättre.

Kampanjtyperna

Det som gjorde den här webbshoppen speciell var att vissa produkter inte gick att köpa. Som medlem i Buzzador blir du ibland inbjuden till kampanjer där du inte betalar en spänn för produkten. (Däremot måste du recensera den.)

Selekteringen görs back-end men informationen måste överföras till sajten. Där visas kampanjen som en tidsbegränsad, personlig inbjudan enbart för de medlemmar som är utvalda och inloggade.

Dynamiska kampanjkort. Olika typer och status.

Här valde vi att låta back-end-systemen fortsätta göra jobbet och inte använda WooCommerce alls. Däremot skulle ytterligare en selektering göras i Wordpress, med formulär i olika steg, för att kvalificera medlemmen att få delta i kampanjen.

Till exempel för att få reda på vilken tibetansk hundras medlemmen har eller om nån i familjen råkar vara allergisk mot grön chili.

Medlemmar som inte är inbjudna ser också kampanjen men då som låst. För att både medlemmar och nya besökare snabbt skulle kunna se just sina tillgängliga kampanjer byggdes en personlig filtreringsfunktion.

Vanliga produkter som köps och betalas med kort är tillgängliga för alla. Även för nya besökare som i samband med sina köp blir medlemmar. Uppgiften med att låta affärssystem och filter samspela med Wordpress och WooCommerce krävde både kreativitet och djuplodande logiska resonemang.

Exempel på logikjobb. Sajten hämtar data från flera sql-databaser med ajax-anrop i realtid beroende på kampanjens status, medlemmens status och filtrering.

Kampanjdatabasen

Eftersom det är tusentals kampanjer i databasen och alla är sökbara så hämtade vi dem med ajax-anrop. Det gjorde användarupplevelsen snabbare eftersom html-sidor inte behöver laddas om. Lägger du på cachning på html-sidorna dessutom, vilket man alltid gör, blir sajten supersnabb och ux bättre.

Vi ville finnas där för medlemmarna under deras micro-moments i mobilen. När de står i kö nånstans, väntar på bussen eller under en fikapaus.

Apparna

Det fanns nativa appar för både Android och iOS när projektet startade. Med i planen låg att stänga dem. Dels för att vi ville göra en modern app-liknande webbtjänst. Dels för att få ner utvecklingskostnaden och kunna lägga all energi på en enda plattform. Ett strategiskt beslut som skulle löna sig i längden. Med Wordpress nya REST API skulle vi kunna bygga nya appar i framtiden om vi ville.

Dessutom kommer du åt mobilens funktioner som positionsbestämning och kamera via webbläsaren nuförtiden. En av funktionerna vi byggde in i Buzzadors webb-app var just att ta en profilbild med mobilens kamera. Mest på skoj faktiskt.

Logistik och distribution

Buzzador skickar mängder av paket från packcentraler i hela Norden till sina medlemmar. Även kylvaror. Så alla ordrar som kommer in måste automatiskt generera packlistor och hamna på rätt distributionscenter i rätt land. Medlemmarna ska också kunna spåra sina paket med ett klick.

Det fanns en plugin för Unifauns tjänster men den var till en början inte kodad enligt Wordpress Core standarder. En massa skumma javakonflikter började dyka upp. Dessutom var pluggen gjord för bara ett land i taget.

Vi fick leverantören att koda om enligt våra specifikationer och med några egna kodrader fick vi den att fungera för alla länder. Det var grymt skönt att se ordrarna generera fraktdokument när vi tittade i Unifauns webbgränssnitt.

Exempel på startsida och medlemssidor enligt kortprincipen, desktop.

Skilja på språk och land

Det gäller att hålla tungan rätt i mun när man bygger en sajt för flera länder. (Till skillnad från Wordpress Multi-site som är en sajt för varje land.) Språk är inte samma sak som land vilket får konsekvenser.

Till exempel kan en svensktalande person bo på en finsk adress. Språket ska då vara svenska men landet är Finland. Personen kan inte beställa svenska produkter, men ska kunna se finska produkter på svenska. Och en dansktalande person boende i Norge ska kunna läsa sajten på danska, men enbart kunna delta i norska kampanjer.

Ordrar och hela logistik-apparaten styrs alltså av användarens adress och inte av nationalitet. Språket däremot styrs av var mobilen eller webbläsaren befinner sig. Eller om besökaren valt språk själv.

Gamification och medlemspanel

Vi utvecklade också Buzzadors poängsystem. Användarens aktiviteter delades in i nyckelhändelser som dels gav olika poäng och även låste upp synliga brickor. Med hjälp av toasts meddelades användaren vad som hände och vilka poäng som delades ut.

Medlemmarna kan se sin aktuella buzzador-status i sin medlemspanel där poäng och brickor finns samlade. Att delta i kampanjer ger förstås mest poäng. Men även att exempelvis uppdatera sin profil och rekrytera vänner.

Upplägget för medlemspanelen. Skissen är inte översatt.

Recensioner och slutrapporter

En av de viktigaste medlemsresorna var den för recensioner. Buzzador-konceptet bygger på att recensioner räknas som valuta. Att kunna recensera produkter smidigt och lägga till bilder och video var därför ett måste. Vi kunde inte använda Woo:s standardrecensioner här eftersom vi var tvungna att koppla dem till affärssystemet back-end som i sin tur pratar med namnkunniga prisjämförelsesajter via API:er.

Vi läste också in buzzningar från de största sociala medienätverken baserat på hashtaggar. Varje kampanj har alltid en unik hashtagg. Så för varje produkt kan alla besökare se andras recensioner och omdömen.

Sajten skickar flaggor och hämtar och skriver information i bakgrunden oavbrutet beroende på var i kampanjprocessen medlemmen befinner sig. När kampanjen är över ska medlemmen skriva en enkel slutrapport. Alla dessa aktiviteter kan användaren också själv påbörja på sina kampanjsidor.

Delmoment för recensioner och slutrapport med progress bar.

Miljoner mejl

En annan nyckelkomponent var mejl. Buzzador skickar cirka sex miljoner mejl per år. Alla statusflaggor från både Wordpress och backend-systemen pratar med en SMTP-server som sköter den saken.

Varje mejl sorterades in i en händelsetabell med unika id-nummer. Så vi visste vilken kategori det tillhörde och på vilket språk det skulle skickas. Totalt rörde det sig om 13 kategorier. På fem språk blir det 65 olika mejltyper att hålla reda på. Några tog WooCommerce hand om. Som välkomstmejl och orderbekräftelser. Men 11 kategorier återstod.

Avgörande ögonblick

Allt jobb på staging-sajten gjordes med några tusen importerade användare och kampanjer. Det var tillräckligt för att stresstesta alla tänkbara tillstånd, statusvarianter och medlemsresor. Nu kom det avgörande ögonblicket. Tanka in 400 000 medlemsposter som registrerade användare i Wordpress.

Vi såg till att alla medlemmar kunde använda sina befintliga lösenord. Wordpress har en kryptering men lösenorden var krypterade sedan tidigare. Vi grejade det trots att alla lösenord var skyddade. Av säkerhetsskäl vet enbart användaren själv sitt lösenord. Importen tog drygt 20 timmar. Nu var det snart dags att köra skarpt.

Ja, vi klarade det! 🍾

Vi klarade att genomföra projektet på två månader som utlovat. Dygnet-runt-jobb sista tiden, backlog, prioriteringar och begränsat familjeliv, men det gick vägen. Vi gick live på rätt dag till och med. Teamet och medarbetarna på Buzzador var fantastiska under upploppet. Egentligen skulle det inte gå.

Det var en praktfull syn när ompekningar var klara, trafiken strömmade in och de första orderraderna fylldes på den 2 september 2015. Vi sov gott den natten. För då hade vi inte sovit på 38 timmar.”

Vi riktar ett varmt tack till alla medlemmar som kom med synpunkter och glada tillrop första tiden efter lansering.

Wordpress Core standarder

Under ett så här komplext projekt stöter man garanterat på oväntade hinder. Ett sätt att slippa många av dem är att koda php helt enligt Wordpress Core standarder. Något vi alltid gör, men alla gör det inte.

Vissa tillägg (plugins) kan verka bra. Frestande att använda för att ta genvägar runt problem. Många gånger tjänar du på att koda en egen lösning istället. Då slipper du fusk.

Kampanjer i sociala medier

Efter lansering hjälpte vi till med att sjösätta flera kampanjer på Facebook och Twitter. Nu hade vi äntligen bra landningssidor att länka till. Detta i kombination med ett livligt Instagram-konto, och medlemmarnas buzzningar i alla sociala medier, Youtube inräknat, bidrog till en starkt ökad digital närvaro.

Framför allt är den nya strategiskt valda plattformen Wordpress formbar. Det är förhållandevis lätt att göra justeringar. Det är lättare att både anpassa sajten efter en värld som aldrig stänger av och att ta egna initiativ till förbättringar. Klar blir du liksom aldrig.