13 ugers udvikling, 40% øget omsætning, 16% flere mobilbrugere

Fitness World valgte Atomic design

Fitness World ville have resultater med det samme. Så det fik de. Også i den grad.

“Jeg gider ikke holde en masse kaffemøder. Jeg vil se resultater, og jeg vil se dem hurtigt. Kan I klare det?”

Marketingchef Allan Helleskov Kleiner er no-bullshit-typen. Tak for det. Det nye design var allerede på plads, nu skulle det bare kodes, indtil det skinnede lige så flot som photoshop-filerne. Der skulle også lige udvikles et nyt Drupal-site, som skulle integreres dybt med Fitness Worlds egne systemer. Og marketingchefen vidste godt, det ikke var “bare lige”.

Hvor hurtigt kan jeg se resultater, spurgte marketingchefen utålmodigt.

Er en uge hurtigt nok?, svarede leverandøren med et smil.

Og sådan gik det til, at Fitness World fik en frontend i Atomic Design.

Atomic Design

Atomic design er en metode til at sikre et konsistent design af websider. Designet brydes ned i dets mindste elementer, fx farver, fonte og former (som i “formen på en knap” osv). De mindste elementer kaldes for atomer, og bygges i HTML en gang for alle.

Atomerne bruges til at lave molekyler, som er mindre enheder – fx en knap, der består af atomerne form, farve og en font til tekst.

Molekylerne sættes igen sammen til organismer, fx en header – og organismerne bruges så til at bygge fx de sidetyper, der benyttes i det daglige arbejde med at publicere på et website.

Allan Helleskov Kleiner kendte godt principperne. Men han vidste også, at de er svære at overholde i praksis. “Design er jo en kreativ proces, som er i konstant udvikling. Derfor er der meget at holde styr på,” siger han.

Hos Peytz er vi vilde med at bygge design systematisk. Vi anvender en række designprincipper og udviklingsværktøjer som er bygget efter Atomic Design principperne. Det styrer vores proces i arbejdet med design, sådan at vi hele tiden arbejder på at skabe et sammenhængende design system i et tæt samarbejde mellem designere og udviklere. Det sikrer en konsistent og gennemført brugeroplevelse for brugerne. På den måde bygger vi frontend kode, der sparker røv.

For Allan Helleskov Kleiner betød det, at hans utålmodighed blev indfriet.

Efter nogle få uger kunne jeg se frontenden dukke op i responsive udgave. Jeg, og alle de andre interessenter, kunne se den på alle vore devices, og jeg kunne godkende den før der blev kodet en eneste linje backend.

Marketingchef Allan Helleskov Kleiner, Fitness World

Instant feedback

Tirsdag morgen kastede tre frontend-udviklere sig over designfilerne fra Loft37.

Frontend-udviklerne splittede designet i atomer og byggede det op efter principperne for Atomic Design. Koden blev gjort tilgængelig for Fitness World i systemet Pattern Lab, hvor alle Fitness Worlds interessenter kunne følge udviklingen på deres egen mobil, tablet og pc – og klikke sig rundt i frontenden, som om sitet var færdigt.

Allan forklarer fordelene således: “Ved at bruge Atomic Design principperne og Pattern Lab kunne vi ikke bare følge med i hele processen. Vi fik også sikret, at designet er konsistent på hele sitet – og at ændringer, fx af en farvepalette, slår igennem på alle sider med det samme. Systemet betyder, at vi ikke længere behøver designere til at lave de mere banale tilføjelser og ændringer, fordi elementerne er givet på forhånd og “bare” skal samles.”

Super effektive frontend-udviklere. Det var fedt at kunne se noget så hurtigt. Pattern Lab fungerer rigtig fint, det hele blev afklaret, før backenden blev udviklet.

Thomas Roel Jørgensen, Lead Developer, Fitness World

Tæt samarbejde på tværs af landegrænser

En Drupal-arkitekt gik i dialog med Fitness Worlds egne IT-folk for at finde den bedste løsning på udfordringerne – og da arkitekturen var fastlagt, satte leverandøren et helt hold udviklere på opgaven. Såvel arkitekten som udviklerne arbejder på Peytz's kontor i Moldova, og det gav først anledning til nogen skepsis hos Fitness World:

Også Fitness World’s Lead Developer var nervøs for samarbejdet med Moldova. “Men det var helt uden grund. Hele forløbet har været supergodt. Jeg kunne hente arkitekten frem på Skype nårsomhelst, og fik et tæt ping-pong samarbejde, og det er guld værd, især når man udvikler API’er sammen. Og så kan man godt mærke, at han er en skarp herre – man skal ikke forklare ret meget, før han er helt med,” siger Thomas Roel Jørgensen fra Fitness World.

Jeg var nervøs for at skulle samarbejde med Moldova-afdelingen på grund af den fysiske afstand, sproget, kulturen – ja, det hele. Men det gik helt uden problemer. Det har været meget positivt.

Regitze Von Kiær Carl, Web Manager, Fitness World

Agil udvikling til aftalt pris

Det siger sig selv, at sådan et projektet ikke kan leveres som fast pris – for opgaven var jo ikke defineret, og kunden havde som sagt travlt. Men efter de første 200 timers indsats var overblikket så godt, at vi kunne aftale en fast ramme for at løse resten af opgaven. Rammen holdt.

Den holdt, fordi projektet blev afviklet efter de agile metoder, herunder hele to ugentlige team-møder, hvor Fitness World, Loft37 og Peytz deltog og prioriterede indsatsen.

Det holdt, fordi Fitness World hver uge fik et totalt overblik over antal brugte timer, opdelt på frontend, backend og logiske opgavedefinitioner.

Resultatet kunne ses den 24. januar 2018 – kun 13 uger efter det allerførste møde.

Og tre måneder senere gjorde Fitness World resultatet op: 16% flere brugere på mobilen og en 40 % stigning i omsætning via mobilen. Så bliver det ikke meget bedre.

Med en så presset deadline kan det jo ikke undgås, at der dukker problemer op. Men Peytz har bare løst de issues, der kom. Også når det var besværligt.

Thomas Roel Jørgensen, Lead Developer, Fitness World

Fitnessworld.com fokuserer på at hjælpe brugerne til at finde den løsning, der er den rigtige for dem: Vil du træne alene eller på hold, vil du træne i et eller flere centre, vil du have en personlig træner, husk at booke plads på dit hold næste tirsdag, osv. Kompleksiteten fremkommer, fordi der er flere end 150 centre at vælge mellem, centrene har ikke de samme priser og tilbyder ikke de samme hold.

Bodyless Drupal

Fitness World har et princip om selv at eje al data, selv at holde al data og at holde data samlet ét sted.

For fitnessworld.com betyder det, at sitet hostes af Fitness Worlds IT afdeling, og at så godt som alt sitets indhold og al sitets data hentes og leveres via Fitness Worlds eget API til deres egen MySQL server og andre interne systemer.

Gennem API’et styres eksempelvis autentificering af brugere, holdbooking, info om centre, instruktører, priser osv osv. Drupal er således tæt på body-less, fordi det kun holder indholdet til sitets statiske sider – hovedsageligt præsentationen af de enkelte centre.

API’et taler med en række andre interne systemer udover Drupal – og leverer på samme måde indhold til Fitness Worlds app. Dermed viser website og app altid de samme data. I praksis betyder det ikke bare en sammenhængende oplevelse for kunderne, men også at app’en fx kan give notifikationer om din næste træning.

Den samlede hosting af alle systemer giver hastighedsfordele i forhold til at have dem hostet forskellige steder – og Fitness World sikrer det samme høje sikkerhedsniveau for alle applikationer.

Drupal er installeret med en loadbalancer og tilhørende servercluster.

Drupal ligger på et servercluster, som kigger på den samme MySQL base. Både MySQL og Jobserveren kører på eget jern

Deployment

Peytz står for maintenance og opgradering via en Git provider, hvorfra Fitness World henter koden med et enkelt klik. Et script henter koden, kører den ind på serverne, henter tilpasninger til Drush og andre services og programmer, som Drupal benytter sig af, installerer programmet, clearer cachene, oprettet en ny cache – og rydder scripts.