når et kvalitetsbrand tilbyder e-handel
TRANSCRIPT
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
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: [email protected]
Tak for i dag...
BonusinfoFå fire gratis e-bøger om e-handel
www.vertica.dk/vi-elsker-ehandel