Stärkt digital närvaro för Preem: Ny webbplats med modern design och hög prestanda

Rebel and Bird har tillsammans med Preem lanserat en ny webbplats, preem.com. Sajten förenar Preems varumärke och kommunikation i en modern design och upplevelse med en snabb teknisk lösning. Den nya webbplatsen är utformad för att möta användarnas behov på ett effektivt och engagerande sätt. Detta genom en tydlig innehållsstruktur och navigation för ett informationstungt innehåll som nu är anpassat till sajtens målgrupper och deras olika besöksintentioner. 

”Teamet av digitala experter från Rebel and Bird/B3 Consulting Group har bidragit med värdefull kompetens i allt från UX, design och innehåll till utveckling. Under resan har samarbetet med dem varit avgörande för att lyckas med projektet, ett samarbete som nu fortsätter i och med den digitaliseringsresa som Preem är inne på med ett tydligt fokus på att förbättra den digitala kundupplevelsen - just det Rebel and Bird kan allra bäst”, Robert Öhman, Team Lead, Digitala kanaler, Preem

"Det känns fantastiskt roligt att få ut vår första gemensamma sajt! Preem är engagerade, kompetenta och nyfikna samtidigt som de ger oss möjlighet och förtroende att utmana i kundupplevelse, teknik och process. Detta har skapat ett otroligt starkt partnerskap och nu ser vi fram emot kommande releaser av nya kundmöten”, Andreas Eriksson, Försäljningschef och kundansvarig Rebel and Bird/B3

Kundens utmaning

På grund av en föråldrad teknikstack hade Preem inte möjlighet att arbeta så effektivt som man önskade med sitt innehåll och varumärke för att tillgodose sina målgruppers behov. Preems varumärke behövde anpassas för en digital upplevelse och det fanns behov av att byta ut den tekniska arkitekturen som inte längre kunde stödja en snabb och flexibel sajt med snabba förändringsbehov. Dessutom behövde sajtens olika målgrupper, primärt investerare, journalister och jobbkandidater enkelt förstå innehållet och snabbt hitta vad de kom dit för att göra utan att förvirras av all information som sajten rymde.

Lösning - Design

• Nytt koncept för webb: Rebel and Bird har implementerat ett nytt designkoncept och förfinat och förbättrat det för en digital upplevelse. Fokus har legat på att säkerställa att konceptet fungerar effektivt på webben och att det uppfattas på rätt sätt av användarna där känsla och varumärke har varit i stort fokus.

• Grundläggande UX/UI-komponenter: Målet för denna lansering har varit att få ut en första version av UX/UI-komponenter som möter Preems nya varumärkesidentitet och dess mål. Preems uppdaterade identitet bygger på tre designprinciper: Inkluderande, Framåtlutad och Ambitiös. Designarbetet med denna sajt har lagt grunden för att möta dessa designprinciper och skapa förutsättningar för fortsatt utveckling.

Lösning - Teknik

• Modern teknikstack: Webbplatsen bygger på Gatsby, ett ramverk baserat på React och GraphQL, med ett datalager från Gatsby. Rebel and Birds komponentbibliotek av React-komponenter är paketerade med Vite och visas upp med Storybook. CMS:et som används är Optimizely 12, där data hämtas med hjälp av Optimizely Graph och en egenskriven source-plugin till Gatsby.

• Optimerad prestanda: Lösningen genererar statiska sidor där endast realtidsinformation hämtas från fristående API:er. Detta ger optimal prestanda och kräver endast skalning av API:et vid stora besöksantal, eftersom de statiskt genererade sidorna cache'as hos CDN:et. För att förbättra användarupplevelsen används även Cloudflare Images för att transformera och optimera bilder.

• Framtidssäker design: Gränssnittet är uppbyggt av komponenter från Rebel and Birds komponentbibliotek, som i framtiden även kommer att användas på flera andra webbsidor och plattformar hos Preem, med möjlighet till tematisering per plattform.

Resultat

Den nya webbplatsen erbjuder en enkel och avskalad användarupplevelse, där Preem tydligt lyfter fram vad som är viktigt för användarna och deras motiv för att besöka sajten. Den förbättrade sajten uppfyller moderna tekniska och designmässiga krav, vilket resulterar i en snabbare och mer effektiv digital närvaro för Preem. Sajten har inte bara stärkt Preems varumärke online utan också skapat en skalbar och kostnadseffektiv digital infrastruktur.

Besök gärna den nya sajten här.