Vertica 2015

Når et kvalitetsbrandtilbyder e-handel 

E-handelskonferencen 2015

Lidt facts om Vertica Etableret i 2001 Kontorer i Århus og København 60 ansatte Flad organisation Årlig Innovation Camp

Vores kunder

UX

DESIGN

B2B

B2C

Performance

SEARCH

CMS

E-MAIL

SEM

SEO

NATIVE

SOCIAL

EDI

BizTalk

CRM

Loyality

Vi elsker ehandel!

Vertica 2015

Irma-brandets digitale udfoldelse på Irma.dk

Case:

Vertica 2015

Irma.dk’s baggrund Irma.dk er Coops eneste online dagligvare butik

Lanceret i 2010 under Irmatorvet.dk

Makeover i 2013, hvor nuværende version kom online.

Har vækstet siden 2013 Flere kunder Øget omsætning Flere produkter i sortimentet Flere nye features til løsningen

Brand-fornemmelsen Irma-brandet online

Den rigtige blå farve Den rigtige font Centreret design Kassebånd i toppen af

skærmen

Brandfornemmelsen er mere end fonte og farver...

Fokus i dag: Irma-brandets online fornemmelse og opførsel

Vertica 2015 ”I like to wait”. Said no one. Ever.“Lost sales are the most obvious consequence of customer frustration (with page load times), but many shoppers indicated the overall brand or image of the company would suffer as well.”

source: eCommerce Web Site Performance Today, Forrester, 2009

5 Take-aways #1 Teknisk performance

Oplevet performance #2 Animationer og overgange #3 Den optimistiske tilgang

#4 Dansk søgemaskine og cool autosuggest

#5 Continuous scrolling og asykron produktdetaljeside

Vertica 2015

Optimeret til online dagligvare handel Dagligvarehandel

Mange forskellige varer i kurven Flere af samme vare Ses som ”nødvendigt onde”, skal overstås Modtagelig overfor tilbud og impulskøb

#1Vertica 2015

Teknisk performance

Teknisk performance

Kamellerne, der skal sluges... Mulighed for at kunderne lægger ordrer, de ikke kan levere ERP systemet er ikke master på web

Løsningen er optimeret til brugerne Data ligger struktureret, så det er hurtigt

at læse Billeder distribueret over 4 servere /

domæner – mulighed for browseren at hente 24 filer samtidig

Alle produktvisninger er søgninger Alt, der ikke er behov for i realtid afvikles seperat

Dyrer beregninger flyttes til backend server Få direkte afhængigheder til 3.parts systemer

#2Vertica 2015

Oplevet performance Animationer og overgange

Oplevet performance

Performance skal være konstant – hvis der er store udsving, så opdager man når det går langsomt

Udfordring: det tager eksempelvis 500 ms at loade en kategoriside, hvordan mindskes dette når der ikke er mere at hente ”teknisk”?

Online svartider

For kort tid Passende For lang tid

HurtigtUsikkerhed om rigtighed Irritation over hastighedGrundigt

Animationer og overgange Loadbarer er irriterende / transitioner er spændende

På Irma.dk Ved sideskift lader vi produkterne forsvinde ud af siden, og loader

dem op igen. Animation tager altid 300ms også hvis vi faktisk har produkterne før. At siden animerer og at dele af siden bliver stående giver en app-

agtig fornemmelse.

Demo

#3Vertica 2015

Oplevet performanceDen optimistiske tilgang

ServerBrowser

Ved læg i kurv:{productId: 100, delta: 1}{productId: 101, delta: -2}{productId: 102, delta: 5}...

Svar:{model: {basket: ...} }

Oplevet performance – Den optimistiske tilgang

Browseren holder en kopi af hele kurven (local storage)

Bruges til at vise minibasket, kassebånd, leveringstid og pris

Bruges til at angive om et produkt er i kurv eller ej Vi tror på browserens version, hvilket gør at vi kan

undgå at vente på serveren

Demo

#4Vertica 2015

Dansk søgemaskine og cool autosuggest

Dansk søgemaskine og cool autosuggest Ankiro – ældre søgeteknologi, men rigtig god til det danske sprog.

Stavefejl + Synonymer Semantik: relation mellem danske ord, fx ”squash”, ”courgette” og

”agurk”

Optimering af autokomplete overtid Optimerer resultater ift brugernes klik / feedback Søg på ”syl” giver ”syltetøj”, men kunne give ”sylte” i december, hvis

der er flere der klikker på det her.

Demo

#5Vertica 2015

Continuous scrolling og asykron produktdetaljeside

Continuous scrolling og asynkron produktdetaljeside Generel udfordring

Skift tilbage til produktoversigt (kategoriside / søgeresultatside) fra en produktdetaljeside

På irma.dk Løst med en asynkron produktdetaljeside (lag foran kategorisiden) History.back() er blot at fjerne produktsiden...

Den asynkrone produktdetaljeside har en canonical URL, som også kan tilgås af søgemaskiner

Demo

Derfor lykkedes det! Højt ambitionsniveau

Afklaringsfase med alle interessenter

Tæt samarbejde mellem Irma og udviklingsteam

UX og implementering i samme team

Teknisk begejstring over mulighederne fra begge parter

5 Take-aways #1 Teknisk performance

Oplevet performance #2 Animationer og overgange #3 Den optimistiske tilgang

#4 Dansk søgemaskine og cool autosuggest

#5 Continuous scrolling og asykron produktdetaljeside

Steven MountfieldProjektleder og forretningsudviklerVertica A/S

Mobil: +45 28 40 82 20Mail: smo@vertica.dk

Tak for i dag...

BonusinfoFå fire gratis e-bøger om e-handel

www.vertica.dk/vi-elsker-ehandel