Modulära, skalbara & framtidsvänliga Chef.se

Sommar 2016 — Sätta samarbetet

När Äventyret först mötte Chef så sökte de en digital partner snarare än en ny webbplats. De hade dock en handfull buggfixar angående gränssnittet på deras dåvarande sajt som borde bli fixade, men främst idéer för ny funktionalitet. Vi valde initialt att adressera Chefs behov i ordningen:

1. Buggfixa gränssnitt på dåvarade sajt
2. Utveckla nya strategier och koncept tillsammans med Chef

Efter inläsning / överlämning av dåvarande sajt lade vi dock om planerna. Projekt Buggfixa hemsida behövde växa för att även addressera följande behov:

• Större redaktionell frihet för Chef att administrera den egna webbplatsen
• Implementering av lågt hängande frukter gällande konvertering och användarpersonalisering
• En uppfräschning av form och manér
• Ett modulbaserat gränssnitt (för att underlätta snabba iterationer och implementationer av framtida funktioner)
• Versionshantering av kod och ett genomtänkt arbetsflöde för utvecklare
• Bättre prestanda

Ingen ville längre dela upp arbetet i två faser (buggfix & koncept-/strategiarbete) som vi först tänkte. Det var rimligt att istället samköra utveckling och konceptarbete i en serie av projekt och iterationer, där lanseringen av en ny webbplats för Chef.se var den första i raden.

Höst 2016 — Visionera fritt

Äventyret och Chef använde hösten till att rita och planera framtidens Chef.se. Chef hade med sig tydliga idéer och frågeställningar för nya funktioner. Äventyret satte inga begränsningar på arbetet utifrån att det skulle hinnas med att bygga i en första lansering. Istället satte vi värde på att förstå vad som skulle vara rimligt två-tre iterationer bort, oavsett budget och tidsaspekter initialt. Det finns flera fördelar med detta:

• Viss funktion åker snålskjuts på annan funktion, implementeringsmässigt. Om flera funktioner kräver liknande lösningar kan vi välja att tidigarelägga alternativt senarelägga relaterade funktioner.
• Det blir möjligt att planera delprojekt, version och iterationer.
• Projektet får en tydlig riktning visonärt, oavsett om alla medel är på plats för att genomföra alla idéer på en gång. De första iterationerna av en produkt eller tjänst är de viktigaste då dessa utgör grunden. Den måste få ta lite extra tid, medan de snajdigaste funktionerna kan toppa ett bra grundarbete senare. Men för att behålla peppen i arbetsgruppen, behövs visionen av den fulla produkten från start.

Leverablerna för ovan var allt ifrån prototyper i Html+Css+Js, Invision-klicka-sig-igenom-skisser-prototyper, gamla hederliga rasterbilder och flödesskisser. Tillsammans skulle de ge en vision av interaktionsprinciper, kommunikationskoncept och formmanér för nya Chef.se.

Vår 2017 — Det gör ont när knoppar brister aka “Scope-dokumentet”

För att kunna lansera en ny sajt i slutet av maj behövde vi i mars ta ett steg tillbaka från idémöten och skisser och fundera på hur vi prioriterar ny funktionalitet. Teknikplaneringen hade pågått parallellt med visionsarbetet och behövde nu få ett avgränsat scope.

Äventyret tog fram en specifikation av vad som borde och kunde hinnas med innan juni, utifrån tidigare offert och visionsarbete. Chef och Äventyret reviderade specen tillsammans vid två tillfällen innan signoff. Med detta i ryggen kunde projektet ta en ny vändning: Produktion!

Katten på råttan, råttan på repet

Parallellt med en ny webbplats planerade Chef, Äventyret och Odyssey hanteringen av Chefs användardata. Målet: Chef kommer att samla all kund-data i en masterdatabas, vilken skulle ge ännu bättre kundservice i Chefs alla kontaktytor mot sina prenumeranter.

Lansering 31:e maj 2017

Följande var implementerat vid lansering, till skillnad från tidigare webbplats:

• Effektivare signup-flöden för att köpa produkter och skaffa inlogg
• Stabilt utvecklingsflöde där det är enkelt att iterera, lämna över och följa arbetet med kod för utvecklare.
• Lätt för Chef att lämna Äventyret (om Chef så önskar). Kodbasen är lätt att ta över och är inte person-/byråberoende på samma sätt som tidigare. Redaktionella möjligheter att skapa innehåll utan att be Äventyret om hjälp är intressant både för Chef och Äventyret. Exempel: CV-skolan där förfrågan var att Äventyret skulle skapa en listsida med filmer, men istället gjorde vi ett system för att skapa listor och populera innehåll på det sättet en önskar.
• Lätt att sätta upp mätpunkter själva
• Dedikerade sajter för event
• Lätt att sätta upp kampanjsajter
• Kommunicerande och personifierade paywalls
• Nytt annonsformat
• Layoutagnostiska moduler gör det lätt att bygga templates utifrån innehållet.
• Uppfräschad form

Punkterna ovan är väl värda att ha implementerade en och en, men den stora vinsten med lanseringen är att punkterna sammantaget ger en bra grundplåt att iterera nya delprojekt på — för att effektivt driva och spegla Chefs affärsutveckling digitalt.

Teknisk lösning

Sammanfattning av teknik som gjorde nya chef.se möjlig:

• Herokus Pocus: Äventyrets egen boilerplate och deploylösning för WordPress med Git och Heroku som grundbultar.
• Utvecklings, staging- och produktionsmiljöer på Heroku.
• Composer: För att garantera samma utvecklingsmiljö vill vi versionshantera alla plugins och WordPress-version via composer (och därmed Git).
• Jaws DB: Den databaslösning som vi till slut valde för Heroku.
• Comet Cache Pro: Cache-plugin med stöd för SALT och inloggade användare
• Egenbyggda plugin mot Apsis och Titeldata. Exempelvis hanterar Chef sina prenumerations-versioner och erbjudanden via Titeldata. För att synka med Chef.se behöver vi dra in de aktuella erbjudanden från Titeldata in i WordPress admin för Chef att välja på när de där kommunicerar dessa. Pluggarna hanterar också paywalls-logik.
• Auth0: SSO med stöd för WordPress. Lösningen var med länge men ströks, för den krånglade till Chefs viktigaste signup-flöden mot Titeldata.
• Nätverkssajter för de rikare event-sidorna
• ACF Pro: Dynamic content-fält och repeaters gör det lätt för Chef att själva bygga layouter av de gränssnittsbyggstenar vi planerat tillsammans. Byggstenarna kan ses som en legosats, de är byggda för att kunna passa med varandra oavsett ordning. Innehållet avgör till största delen vilken modul som används.
• Formable: Äventyrets egen produkt, för att bygga och distribuera formulär. Molnlösning.
• Amazon S3: För att hantera media på Heroku. Bilderna hanteras i Chef-temat med Äventyret-utvecklade pluggen Make it Srcset för att få stöd för srcset-attributet sizes och kunna hantera bilder utanför the_content() och the_post_thumbmail(). Vi använder också Cloudfront som cdn.
• Migreringsplan av gammalt innehåll: Sajten flyttades från en stationär server till Heroku där alla deploys skapar nya instanser. Detta ställer också krav på hanteringen av uppladdad media. Allt innehåll lagras på Heroku i en extern databas. Vanligtvis med WordPress så lagras filerna på den lokala servern, och så var lösningen även på Chefs tidigare sajtversion. Lösningen är att flytta ut all media till ett CDN. Dessvärre är det svårare att uppdatera det innehåll som länkar till denna media i tusentals poster och år av publicerat innehåll. För gammal media använde vi enkla url-rewrite regler (.htaccess) som skickar vidare förfrågningar (301 redirects) mot det nymigrerade media-biblioteket i Chefs CDN.
• Amazon proxy: För att få IP-nummer till Heroku. När vi skulle peka CNAME till Heroku hade inte Chefs DNS-leverantör stöd för att peka enbart till namn. Efter lite trixande löste vi problemet på detta sätt.
• Profile Cloud: En trackertjänst från Apsis som löser personalisering för icke inloggade användare, samt kopplar data för ännu ej inloggade användare till dessas konto när de skapar ett. Konfigurerad av Odyssey.
• Globala menyer via switch_to_blog(): Vi funderade på att använda WordPress rest-api för detta men det var enklare att göra en jämförelse för vilken sajt man var på, byta blogg, eka ut globala menyn och sedan byta tillbaka. I och med att huvudsajtens meny alltid ska ärvas till eventuella nätverkssajter går det att göra på detta sätt.