Case: Filabel.dk børnetøj

Filabel - Must haves til mor og barn Tilbage i foråret 2010 gik børnetøjsbutikken Filabel.dk online med en ny butik, udviklet og leveret af Afdeling 18. Normalt fungerer jeg ikke som platformsleverandør, men dette projekt var simpelthen for spændende.

Hvilke fordele har Filabel så opnået ved at få en online marketing mand til at levere deres nye system? Jeg vil her gennemgå nogle af de i mine øjne bedste features.

Om Filabel

Filabel er en børnetøjsbutik, der har eksisteret siden 2005. Den er drevet af Anitta fra hendes landejendom i Spjald, sammen med hendes mor og en assistent. Filabel sælger alle de kendte mærker af drengetøj og pigetøj, men forsøger også at specialisere i unikke udenlandske brands fra Japan, New York, ja fra hele verden.

Filabel var låst fast i en forældet platform, der ikke var til at hugge og stikke i, og det var umuligt at vækste på grund af den. Samtidigt havde jeg igennem nogen tid stået for deres online markedsføring, og var her løbet ind i en mur fordi jeg ikke kunne lave unikke landing pages, konverteringsoptimering, søgemaskineoptimering og alt det andet sjove.

Netop derfor så jeg noget enormt spændende i dette projekt: At skabe en webshop på en suveræn platform, der kunne give mig og Filabel nogle unikke muligheder inden for online markedsføring!

Gammel vs. Ny

Den tekniske platform

Hvis vi lige hurtigt skal tage de tekniske detaljer, så kører Filabel på en kombination af Open Source CMS'et Umbraco og en yderst skræddersyet udgave af uCommerce. Kombinationen af et suverænt og brugervenligt CMS og et solidt e-commerce framework har gjort, at vi selv har kunne bestemme alt omkring udformingen af shoppen, og at nye udvidelser kan tilføjes på rekordtid.

Shoppen er desuden integreret op imod CampaignMonitor til udsendelse af nyhedsbreve, hvilket Filabel helt selv kan opsætte inde fra backend'en uden at skulle rode med HTML-koder. Og så er der selvfølgelig fuld integration op imod Google Analytics, oven i købet med nogle små, hemmelige tricks :-)

Det var lige en kort opremsning af det tekniske, håber du ikke er faldet i søvn endnu.

Alle de lækre detaljer

Hvilke detaljer ved den nye shop er det så, jeg er allermest stolt af? Puha, der er mange. Lad mig forsøge at nævne bare nogle få af dem:

Frit leverandørvalg!
Ja, du læste rigtigt, det står Filabel frit til enhver tid at fyre mig som leverandør og vælge nogle andre. Et punkt jeg altid sætter en stor ære i at gå efter.

De ejer så at sige al koden bag, og der er mange andre end mig her i Danmark, der kan finde ud af at arbejde i Umbraco og uCommerce.
Pæne kategorisider
Kategorisiderne er noget jeg synes mange giver alt for lidt opmærksomhed. Dels er det en vigtig indgang til produkterne for kunderne, men de kan med stor fordel benyttes som landing pages for SEO trafik og Adwords kampagner.

Der er desuden sortering og avanceret filter-funktionalitet, hvilket jeg kan hilse og sige er en del mere kompliceret at lave end man umiddelbart skulle tro...

Der er også dynamiske produktkategorier, f.eks. ryger alt nedsat tøj automatisk ind under "Udsalg", automatisk billedgenerering/-skalering, pæne URL'er og alt det andet man nu kan forvente af en moderne shop platform.
Dynamiske Landing Pages
Når man arbejder med SEO og Adwords er det vigtigt, at man har mulighed for at sætte en lang række dynamiske landing pages op. Og mindst lige så vigtigt er det, at disse ikke skal vedligeholdes på sigt, i takt med at produkter bliver skiftet ud i butikken.

Det dynamiske landing page system i Filabel's nye shop er så simpelt at bruge, at det tager mig et minut at sætte en ny side op, og Filabel kan oven i købet også selv finde ud af det.
Simpel og overskuelig checkout process
Vi arbejdede meget på at lave hele checkout processen så simpel og overskuelig som overhovedet mulig. Hvilket ikke var helt nemt, da Filabel tilbyder mange forskellige former for fragt, levering, betaling osv. Men det er lykkedes utroligt godt, og Filabel har i dag en imponerende lav dropout rate i checkout'et.

Checkout'et indeholder f.eks. simplere navigation, ingen påkrævet registrering, adresseopslag hos Krak/Eniro, chat m.m.
MASSIVE trafik peaks!
Lad mig afsløre, at når Filabel trykker på "Send"-knappen på et udsalgsnyhedsbrev, så eksploderer trafikken!

Og det er en udfordring at lave et system, der på den ene side er super fleksibelt og dynamisk, men samtidigt skalerer godt.

Det tog lidt tid i starten af få luset de værste performance problemer ud af systemet. Men takket være intensiv test med et godt stress test værktøj, vidste vi konstant hvor mange samtidige brugere der skulle til for at crashe shoppen, og om forbedringer og rettelser havde positiv eller negativ effekt.

Er du f.eks. klar over hvor mange nyhedsbrevsmodtagere der skal til, før din shop bukker under for presset? Eller stoler du blindt på, at det må din shop leverandør / hosting provider da havde styr på?
Platform er et e-Commerce produkt, men integreret i et CMS
Ved at tage udgangspunkt i et af de pt. førende CMS'er (som oven i købet er gratis), så får man i backend'en en brugervenlighed, som sjældent ses i andre e-Commerce produkter.

Umbraco har desuden et utroligt godt og fleksibelt template og makro system, der gør det legende let at sætte "alternative" layouts op til individuelle sider, så man på den måde nemt kan udføre selv avancerede A/B-tests.

Al indhold og hele produktkataloget er desuden lagret som XML, hvilket gør det nemt at integrere op imod alle mulige andre systemer. Her på det seneste har det bl.a. resulteret i et fancy faneblad inde på Filabel's Facebook side.

Der er 1.001 andre detaljer ved shoppen, som jeg har lyst til at fremhæve. Og mindst lige så mange andre ting vi skal arbejde på at få forbedret. Men det vigtigste i hele projektet er, at Filabel nu har fået et solidt og fleksibelt fundament, som de nemt kan udvide og basere deres forretning på i de kommende år.

Er der noget af det ovenstående du synes lyder fancy, noget du godt kan lide? Noget du gerne vil høre mere om? Eller noget, du så absolut ikke bryder dig om, og som du synes er en om'er?

Læg endelig en kommentar, så skal jeg forsøge at svare så godt jeg kan.

Hej Søren

Rigtig god gennemgang af en iøvrigt flot webshop. Jeg er helt sikker på at rigtigt mange netbutikker vil kunne lade sig inspirere

Tim Liljendahl , den 7. oktober 2010 10:59:51

Hej Søren

Du skal have stor ros! Det er en glimrende case, du har præsenteret. Den er nem at gå til, og du fremhæver mange helt centrale aspekter vedr. webshop design og usability. Og så fungerer filabel.dk's side rigtig godt.

Casen er bogmærket!

Steffen , den 7. oktober 2010 11:34:37

Hej Søren

Endnu en interessant artikel fra dig.
Min hjemmeside www.landhojbede.dk skal på et tidspunkt total ændres. Derfor vil jeg gerne vide, hvordan I er gået fra det gamle til det nye uden at miste den oparbejdede status på Google. Jeg mener at have hørt, at det er meget vanskelige at gå fra en leverandør til en anden. Man risikerer at falde væsentlig ned af rangstigen på Google. Jeg er ikke webspecialist.

Thule Jessen , den 7. oktober 2010 12:16:33

Super spændende indlæg. Der er langt mellem indlæg hvor folk skriver så konkret om en platform og en butik.

Med andre ord er case stories bare interessante. Opkoblingen mod facebook, er bare super. En butik udenfor butikken. Din brug af screenshots er pædagogisk.

Jeg har allerede spurgt om implementeringen af integrationen er til salg til fx Magento, men kan lugte at det faktisk vil kræve at begynde helt forfra med udvikling først i Magento, siden en ny integration til Facebook.

Jens Dalsgaard , den 7. oktober 2010 12:27:59

Det er rigtig godt gået, Søren.

Der er rigtig mange fordele ved at have en helt skræddersyet platform, som man kan bygge videre på, men det er bestemt heller ikke en billig løsning.

Men jeg er sikker på, at det godt kan betale sig i det lange løb. Både da det er forholdsvis nemt at optimere både butikken og backend'en for dem, der vedligeholder varelageret.

Det er genialt, at alle data er gemt i XML, så det er nemt at integrere med andre systemer. Og jeg kan rigtig godt lide Læg i kurv-funktionen, hvor man ikke er tvivl om, at varen bliver lagt i kurven.

På spinderup.dk har vi lavet "skabeloner" til hver varegruppe, så layoutet af produktsiden skifter for hver enkelt kategori. Det giver endnu flere muligheder, og jeg har en plan om på et tidspunkt at udvikle træk-og-slip til at give endnu mere frit spil til at udforme produktsiden for hver enkelt vare (laaangt ude i fremtiden).

Det er også en rigtig god idé at integrere siden med CampaignMonitor, hvis de er sikre på, at de skal fortsætte med den udbyder. Men hvis først integrationen er på plads én gang, så må det næsten være en formssag at integrere til et andet system, hvis behovet skulle opstå.

Jeg håber, at du selv har adgang til at bruge koden til andre kunders butikker også. :-)

Johnny Speiermann , den 7. oktober 2010 12:56:19

@Thule: Ordentligt udførte redirects er nøglen til ikke at miste ranking, men det er et KÆMPE arbejde!

Desværre har vi ikke haft 100% styr på redirects af gamle URLs hos Filabel, fortrinsvis fordi URL'erne i den gamle shop godt kunne være ret komplekse. Kun ca. 10% af de gamle adresser har fået korrekt redirects. Så Filabel har i en periode strøget lidt ned i resultatet i Google, og er først ved at have indhentet det tabte nu.

Men sådan er det. Engang imellem må man tage et stort skridt tilbage for at kunne tage et ORDENTLIGT tigerspring fremad :-)

Vi har så i samme tidsrum givet Adwords kampagnerne en ordentligt omgang, så jeg tror ikke det har kunnet mærkes på omsætningen.

Søren Sprogø , den 7. oktober 2010 14:11:01

@Jens: Årsagen til at man ikke bare kan lave sådan en "standard Facebook app" er, at webshops ikke har en standard måde at oplyse om nye produkter på. Som der f.eks. er det med blogs i form af RSS feeds.

Så selvom selve Facebook delen egentlig er nem nok, så vil det altid kræve en eller anden form for custom integration ned til shoppen.

Men det burde være muligt at lave noget sådan op imod f.eks. Magento, da den sikkert har et form for "product feed" i XML.

Søren Sprogø , den 7. oktober 2010 14:31:50

Jeg ser småfejl når jeg ser på siden i firefox!
Jeg har et screenshoot af detdu kan sende mig en mail hvis du vil have det :-)

Men ellers som hørt før. super når der er nogen der bare laver en overtjekket shop :-) -i love it -

Mvh Omar

omar , den 7. oktober 2010 16:59:40

Hej søren,

Rigtig fin gennemgang.

Sund-og-smuk.dk , den 8. oktober 2010 11:37:13

Beklager, ramte en tast på min bærbar :)

Kan du beskrive hvordan man importere sine produkter til facebook?
Eller evt. henvise til en beskrivelse, det er virkelig cool!

På forhånd tak :)

Sund-og-smuk.dk , den 8. oktober 2010 11:39:47

@Sund: Det er ikke en import som så, men nærmere en hel separat side på en hemmelig adresse inde på Filabel.dk, der er lagt ind i Facebook som en applikation. Og applikationen har man så mulighed for at lægge ind som et faneblad på ens Facebook side.

Jeg lader den lige summe oppe i hovedet lidt, og så kan det være der om et par måneder dukker en blog post op med de nærmere detaljer :-)

Søren Sprogø , den 8. oktober 2010 13:36:31

Hej Søren,

Det lyder spændende :), er det en app du selv har lavet, eller?

Sund-og-smuk.dk , den 9. oktober 2010 19:37:35

@Sund: Yeps. Tog lidt tid, da Facebook udvikling ikke ligefrem er veldokumenteret og nemt at teste :-)

Søren Sprogø , den 9. oktober 2010 21:25:18

Ser lækkert ud - og spændende at læse om.

Vil du fortælle lidt mere om, hvorfor du vælger noget halv- eller helcustommade som dette setup fremfor fx at bruge timerne på at tilpasse Magento til det ønskede?

Et enkelt konstruktivt forslag: Gør det muligt også at klikke på selve indholdet i kurven og ikke kun kruv-ikonet for at "gå til kassen".

Det er en god og nem måde, man vælger størrelse - ros for det.

Jeg kan især godt lide den funtkion med at varen "flyver op i kurven" - så kommer man muligvis ud over det klassiske problem med, at brugerne ikke kan finde indkøbskurven (som efter minn erfaring sker overraskende tit, selv når de er fremhævet meget tydeligt). Jeg har kun set det en enkelt gang før (hos en stor engelsk/US boghandel tror jeg det var), men ser mere smooth ud hos jer.

I vores eget shopsystem overvejer p.t. om vi skal have en funktion a la ovenstående; lade selve produktbilledet flyve op i kurven; gå til kassen/vise kurven (kedeligt men måske effektivt) ELLER vise en slags lightbox med kurvens indhold. Mangler bare data om, hvad der virker bedst.. Som det jo nok ender med at vi selv må skaffe - men der mangler jo altid TID.. :-)
Hvis du vil dele lidt info om jeres overvejelser på dette punkt vil det selvfølgelig være højt værdsat.

Ros herfra. :)

Christian Brix , den 12. oktober 2010 09:07:15

@Christian: Swosh-effekten var noget vi lynende hurtigt kastede på, men den virker ret godt :-)

Bare ikke hvis man har scrollet lidt ned af siden. Og mini-kurven er desuden aaaaalt for langsom til at registrere det/opdatere. Men som nævnt, der er mange detaljer vi skal have arbejdet på!

Magento kunne sagtens være valgt, og var det faktisk til at starte med. Men det er en længere historie...

Filabel havde nogle helt klare krav og et færdigt design på plads, så det var vigtigt at shoppen kunne skræddersyes 100%. Det kan man sagtens bruge Magento til, men kun hvis man kan grave en leverandør op, der kender systemet HELT til bunds!

Magento er dog en lille smule svag på CMS-delen. Ja, der er noget CMS-agtigt derinde, men det er ikke nær så brugervenligt implementeret som her. Og CMS-delen er bl.a. brugt til de dynamiske landing pages og meget, meget mere.

Men jo, man kunne sagtens have valgt Magento. Bortset fra at jeg kommer fra .NET verden, og intet aner om PHP :-)

Søren Sprogø , den 12. oktober 2010 14:09:03

Synes også det er en meget interessant gennemgang af webshoppen :-)

Rigtig god læsning - bare keep it coming.

Nikolaj Bomann , den 12. oktober 2010 16:42:26

Spændende at få indblik i en af dine cases

Frost , den 20. oktober 2010 21:36:10

Hej Søren

Fedt med en gennemgang af filabel.dk, som jo er et skolebogseksempel i Umbraco kombineret med uCommerce - og så god online markedsføring.

Vi er selv i gang med vores første løsninger på uCommerce platformen, og jeg er også bare rigtig imponeret over det produkt som Søren og Lasse har gang i. Vi har tidligere bygget en del custom-shops på Umbraco platformen, og langt hen af vejen har jeg været lidt skeptisk omkring fleksibiliteten i et produkt som uCommerce. Jeg er generelt ikke glad for "hyldevare-produkter" og til at starte med frygtede jeg at uCommerce var sådan et - men efter nærmere kig på sagen og Sørens uvurderlige hjælp og service, så må jeg sande at vi med Umbraco og uCommerce bare har to rigtig fede FRAMEWORK's om vi kan bygge på. Jeg er helt overbevist om at uCommerce bliver en rigtig stor succes - og det er altså fortjent! "Din" filabel-løsning er et så godt eksempel på hvad der kan opnås - og ja, vi bruger også Campaign Monitor :-)

Anders Lund , den 22. oktober 2010 21:26:30

En blog om Nethandel i Danmark, set fra mit skrivebord.

Case: Filabel.dk børnetøj

Om Filabel

Den tekniske platform

Alle de lækre detaljer