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.

Buzzador e-handel, epilator, Norge
Buzzador gör recensioner till hårdvaluta.

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.

Buzzador e-handel, startsida, mobil
Buzzador e-handel, kampanjsida, mobil
Buzzador e-handel, profilsida, mobil

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.

Material Design, lagerprincip
Googles koncept Material Design var en källa till inspiration för både design- och utvecklingsteam. Därför valde vi kodramverket Materialize för att bygga Wordpress-temat.

Alla vi pratade med beräknade tid för webbutveckling till tre månader med minst två utvecklare. I bästa fall. Vi skulle bygga lösningen på två månader med bara en utvecklare. Men eftersom vi jobbar lite annorlunda i vårt team, tvärfunktionellt kan man säga, såg vi att det var möjligt.

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.

Buzzador e-handel, översättningar
Översättningar av strängar och fraser via sms till Norge.

Designteam och utvecklarteam

Två av eleverna från Hyper Island hängde på som designers efter konceptfasen. Kul! 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.

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.

Buzzador e-handel, flödesschema
Flödesscheman ritades på pappersrullar för att få överblick. Med alla händelser och valideringar blev de upp till 2 meter långa.

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.

Buzzador e-handel, kampanjtyp Deals
Buzzador e-handel, inbjudan, kampanjtyp Buzz
Buzzador e-handel, kampanjdatum passerat

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.

Buzzador e-handel, logik

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.

Unifaun och PacSoft är standardiserade system för logistik som Buzzador redan använde. Nu skulle vi bara integrera dem med WooCommerce webbordrar.

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.

Buzzador e-handel, startsida, desktop
Buzzador e-handel, profilsida, desktop
Buzzador e-handel, inställningar, desktop

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.

Buzzador e-handel, medlemspanel

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.

Buzzador e-handel, recensioner, trusted reviews
Buzzador e-handel, slutrapport

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.

Hyper Island-teamet

Victor Fagerquist, Hyper Island
Victor

Sune Mathias Bach Pedersen, Hyper Island
Sune

John Elgenstierna, Hyper Island
John

Niklas Andersson, Hyper Island
Niklas

Designteamet

John Elgenstierna, Hyper Island
John

Niklas Andersson, Hyper Island
Niklas

Øjvind Nordbø, Hyper Island
Øjvind

Thomas Palmbäck
Thomas

Eric Lindesvärd
Eric

Utvecklarteamet

Andy Karlsson, webbutvecklare
Andy

Aajjad Asif, Buzzador
Sajjad

John Elgenstierna, Hyper Island
John

Eric Lindesvärd
Eric

Uppdragsgivare

Pär Thunström, Buzzador
Pär Thunström, Buzzador

Vill du också lyckas med ditt e-handelsprojekt?

Prata med Eric