Ny sajt åt Newbody Family

Sedan 1987 har Newbody Family hjälpt föreningar och skolklasser att nå sina drömmar genom att sälja företagets omtyckta produkter. Under åren har Newbody fortsatt att utveckla sitt erbjudande, varumärken och försäljningskanaler.

Vi inledde ett samarbete med Newbody för att hjälpa till att skapa en mer stringent digital upplevelse. Tre mål sattes upp – öka köpintentionen, varumärkesattityden och minska kontaktkostnaden. Under förarbetet kunde vi identifiera flera behov som behövdes uppfyllas för att nå målen. Flera sajter behövde slås ihop, Magento, deras befintliga e-handelsverktyg, gjorde hemsidan trögjobbat och frustrerande. Sajterna upplevdes som röriga och svårnavigerade och gav inte alls bilden av Newbody som den ledare de är i sin kategori.

Detta gjorde vi

• Webbplatsstrategi

• Komplett redesign

• Innehållsstyrning

• Internationalisering

• Frontend

• Backend – Jamstack/Headless med Wordpress, Magento och Gatsby

Designen bakom

Den nya designen behövde både synkas med Newbody Familys nuvarande identitet och ge stort utrymme för redaktörerna att skapa innehåll, utan att vara fastlåsta i snäva mallar.

En av designprinciperna var att gå tillbaka till grunden och göra den riktigt bra. Det övergripande ramverket bygger därför på en design besökare känner igen. Upplägget gör det enkelt att förstå och navigera sig runt på webbplatsen.

En kombination av typsnitten Sun och Antenna skapar kontrast och variation. En gedigen typografisk hiearki togs fram för att ge redaktören stora möjligheter att skapa både enkla och innehållsrika sidor utan att det ska kännas rörigt. Färgskalan är begränsad till vitt, svart och rött för att skapa tydlighet. Den röda färgen fungerar som interaktionsfärg och indragare.

Blockdesign för maximal flexibilitet

För göra det möjligt för sajtens redaktörer att skapa det innehåll och den struktur som bäst kan lösa uppgiften tog vi fram ett omfattande bibliotek av innehållsblock. Genom att dra och släppa blocken i en sidmall kan webbredaktören snabbt bygga upp och testa sig fram till en passande layout.

I grund och botten handlar framgångsrika sajter om att svara på besökarnas frågor på ett så hjälpsamt sätt som möjligt. Genom intervjuer med besökare och analyser av besökar- och kundtjänstdata kunde vi ta fram en översikt av besökarnas frågor som vi sedan baserade webbplatsens struktur och innehåll på. Med hjälp av innehållsguider skapade vi underlag för själva innehållsproduktionen som håller ihop webbplatsen både under projektet och under lång tid framöver.

För att slippa den tidsödande uppgiften att producera, välja och ladda upp ikoner byggde vi in ikonbiblioteket Fontawesome i publiceringsverktyget. Genom en snabb sökning får redaktören tillgång till närmare 2000 ikoner direkt i redigeringsläget.

Tekniken bakom

Behoven

Tidigt i projektet var vi överens om att Newbody Family ska påbörja en väg mot en modern applikationsstruktur där man frikopplar de administrativa delarna mot de visuella, en så kallad Headless arkitektur.Detta ger möjligheten till att skapa webbplatser och applikationer som är säkra, snabba, skalbara och enklare att underhålla och uppdatera, många parametrar som även skapar en bättreSEO ranking på köpet.

Även i linje med att Newbody Family expanderar internationellt och får mer och mer besökare via deras digitala kanaler som tidigare använt de analoga katalogerna, behöver webbplatsen vara rustad för detta.

Val av CMS

Vi utforskade en rad olika CMS i början av projektet med ett mål om att skapa en enkel och flexibel administratörsupplevelse. Detta resulterade i att vi valde WordPress av de anledningarna att WordPress idag är den ledande plattformen för webbredaktörer och med sin Gutenberg-editor kan man enkelt jobba med en flexibel blocklayout för att bygga upp sina sidor och inte behöva vara beroende av fasta sidmallar. Startsträckan blir även minimal när andra byråer med specialkompetens får möjligheten att påverka innehållet på webbplatsen och då får arbeta i ett välkänt verktyg.

Static Site Generator

Webbplatsens visuella lager byggs upp av en så kallad Static Site Generator som heter Gatsby. Gatsby i sin tur hämtar all information den behöver för att generera en webbplats och skapar upp en statisk variant, nästan på samma sätt som cache-plugins fungerar idag. Den stora fördelen med detta är att det inte finns några underliggande servrar och webbplatsen hostas i det yttersta lagret på webben i form av en så kallad CDN, vilket gör den lika snabb oavsett vilken världsdel man besöker den från. När det även inte finns någon underliggande server så finns det stora skalbarheter och säkerheten är hög.

För att sedan ha delar av webbplatsen som är dynamisk använder vi en serverless-teknik som låter oss hämta och skicka information till andra applikationer. Detta också för att skapa en så skalbar och driftfri lösning.