How Calligaris Improved his OmnichannelExperience with Magento 2 Commerce

Trade Marketing & Communication ManagerCalligaris SpA - Italy

Serena Bortolussi

Chief Executive OfficerWebformat - Italy

Diego SemenzatoMeet Magento ItalyOrganizer

Agenda

• About Calligaris

• Preamble

• Magento 2 Commerce project– Discovery phase

– Project overview

– Focus on: 3D Product Configurator

– Focus on: Omnichannel

– Focus on: In-store Kiosk

• Main results and next steps

About Calligaris

100Paesi servitiCountries

5Siti produttiviProduction sites

High Point (USA)

London(UK)

Paris(FR)

Milan(IT)

Manzano(IT)

Headquarters

San Stino di Livenza(IT)

Ravna Gora(HR)

Moscow(RU)

Kobe(JP)

1923 2018199819861970

The birth of the company

Strong growth and internationalization

Alessandro Calligarisbecomes President of the company

Calligaris opens the first branch in the United States

Calligaris today

Numbe r s

Pa r t n e r s

P r oduc t s

Peop l e650P.O.S.

800Catalogue products

124M

2017 total revenue

Euros 70%Export

+600Employees

5.000Active Customers

Preamble

Existing website before migration

• Static corporate website and legacy e-commerce platform– No autonomy on management and communication activities

• No responsive website, no mobile version

• Product configurator based on 2D product images– High costs and time-to-market for new catalogue

• Poor integration of retail stores– Simple store locator with static store pages

Existing kiosk before migration

• Simple catalogue navigation

• Offline solution– It was possible to update it only once per year – The update required each kiosk to download many GBs

• Not integrated with website– It was not possible to use it for marketing and communication

activities

Magento 2 Commerce project

Project Goals

Main goals

• A new and fresh brand identity

• An improved user experience with modern solutions

• A strong integration of the retail stores

• Autonomy in marketing and communication initiatives

Other website goals

• Increase e-commerce results

• Development the relationship and communicate with the final consumer

• Development of omni-channel initiatives to convey more customers in store

Other kiosk goals

• An interactive kiosk– Integrated with the website for content and catalogue management– Integrated with the ecommerce for quotes collection

• An online/offline solution– To be always up-to-date with new contents and products– To be used even in stores without or with poor internet connection

More kiosk goals

• A targeted communication– To be able to provide different promotions and communication to

different languages, countries and even for specific stores

• Integrated with BI– Integrated with internal BI for internal analysis– Integrated with Google Analytics for user behavior analysis

Project Overview

General architecture

19websites

7languages

10pricelists

28storeviews

A unified platform

Catalogue managementCustomers managementCheckout flowOrders managementPromotions[…]

Corporate pagesLanding pagesBlogRich product contentsIn-store kiosk communication[…]

Integrated into Calligaris’s Ecosystem

MAGENTO 2 COMMERCECMS PIM

BI ERPCRM

IN-STORE KIOSK 3D PRODUCT CONFIGURATOR

Project Focuses

Although there were many project goals, two of them were more critical than others:

– User Experience: expecially in product configuration and in checkout flow

– Omnichannel: how to better involve retail stores and how to increaseretail stores visits and available services

Focus on: 3D Product Configurator

Furniture features

• Each product has multiple variants:– Different materials– Different finishes– Different shapes– Different measures– Different compositions– …

• For some products (like sofas) variants are thousands

3D Product Configurator

• To improve user experience while configuring the desired product, a third-party 3D Product Configurator has been integrated– Javascript application

– Based on WebGL technology

– Mobile friendly

• Renders are generated from:– AutoCAD or 3D Studio models

– 3D scanner

Integration strategy

The 3D product configurator has been integrated into the Magento’sproduct page:

– Magento provides the product details and variants availabilities and prices (based on promotions, pricelists, currencies, etc.)

– The 3D product configurator uses this information to render the product

– Magento exposes 2 APIs to the 3D product configurator:• An add-to-cart API

• An add-to-wishlist API

– The 3D product configurator uses these APIs to provide the customer desired configuration to Magento’s cart and wishlist

Integration strategy

• To avoid any customer doubt :

– while purchasing the product, the 3D product configurator renders the desired product configuration image and provides it to Magento. Thisimage is shown in cart, checkout, confirmation email and wishlist

– All the product configuration details are shown in cart, checkout, confirmation email and whislist

Results achieved

The new 3D product configurator:

– Allows users to easly configure their desired product– Allows users to better evaluate materials, finishes, etc. thanks to a

render much more realistic than simple images (you can zoom the product and you can really appreciate details)

– Allows Calligaris to decrease time-to-market of new products thanksto the reduced amount of work to produce images for all variants

Focus on: Omnichannel

Importance of retail stores

Calligaris has more than 600 stores all over the world and they are one of the most important assets for the company

One of the mainobjectives of the new website was to valorizethis important asset

Store locator

Of course, there’s a store locator

Store page

• Each store has its own page

• Each store manager has a backoffice account to manageits own page:– Images– Opening hours– Special openings– Available product categories– Featured products

In-store events and promotions

• Each store manager can publish promotional coupons, news, in-store events

• In each store page there’s a contact form that allows stores to collect leads through the website

• The store page is a real landing page used to address marketing campaigns

• A general in-store page is available into the website to collect allthe events and promotions available in-store

Pickup in store and not only

• In checkout a customer can choosebetween:– Pickup in store (of course…)– Transport and assembly– Home delivery

• In any case the order is automaticallyassigned to the nearest store. The store willbe responsible to transport and assemblythe product (in case the client requested it), to manage guarantee requests and to provide after-sales assistance

In-store kiosk

• When the customer is already in-store, he has the opportunity to use an interactive kiosk

• The in-store kiosk provides the following services:

In-store kiosk - features

Full catalogue navigation: usefull to provide the complete catalogue even in small storeswith limited exhibition halls

In-store kiosk - features

Inspiration zone: a section where Calligaris can suggest featured products and specific compositions for each room

In-store kiosk - features

Promotions: a section where Calligaris can promote his products, events, etc.

Each promotion can be targeted to specific countries or to specifickiosks (so each store can have its own promotions in its own kiosk)

In-store kiosk – Guest wishlist

• A guest wishlist is shared between website and in-store kiosks:

– A customer can create its own wishlist through the website, than he can get a code of its own wishlist. Thanks to this code, the customer can go in any store and show its wishlist to the store manager and buy the products in-store

– A customer can create its own wishlist through the in-store kiosk, than he can get a code of its own wishlist. Thanks to this code, the customer can go back home (maybe he can show the products to hisfamily) and then he can buy through the website

Results achieved

• Store managers are now involved in the maintenance of theirstore page and most of them are very happy to be able to promotetheir own store activities through the corporate website

• In-store kiosk was much appreciated thanks to the fact that it isalways up-to-date, it allows to promote in-store activities and itallows to interact with customers wishlists

To be investigated…

• The activation of some features in the in-store kiosk is under investigation due to the new GDPR:

– User registration– Newsletter subscription– Orders through the kiosk

Focus on: In-store Kiosk

We’ve just spoken about in-store kioskfeatures and goals in the omnichannelfocus

We are now focusing on in-store kiosktechnology

PWA – Progressive Web App

The in-store kiosk application has been developed following the PWA priciples:

– Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.

– Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.

– Engaging - Feel like a natural app on the device, with an immersive user experience.

(source: https://developers.google.com/web/progressive-web-apps/)

Reliable

• The in-store kiosk application locally caches data to be able to provide contents even when the kiosk is offline– Offline or slow connections can be a common problem in stores

• The data can be retrieved from local cache even after kiosk reboot

• The data is automatically updated as soon as the kiosk comesback online or at regular basis

Fast

• The in-store kiosk is a pure JS Application

• Each transaction is performed locally and doesn’t require anyinteraction with remote servers

• Data is updated from remote servers in background

Engaging

• It has been conducted a UX study to optimize the user experience

• An optimized user interface has been developed for each monitor resolution

Content and catalogue management

MAGENTOCMS PIM

BI ERPCRM

IN-STORE KIOSK 3D PRODUCT CONFIGURATOR

Content and catalogue management

• The in-store kiosk gets contents and catalogue from Magento and the

CMS

– Catalogue is retrieved from PIM and ERP and provided to the in-store

kiosk through Magento APIs

– Contents are managed into the CMS and provided to the in-store kiosk

via CMS APIs

• Catalogue and contents can be targeted based on:

– Language

– Country

– Single kiosk

– This allows to have a proper communication (promotions, events, etc.)

into each store

3D product configurator integration

• As for the website, the 3D product configurator has beenintegrated into the in-store kiosk

• The wishlist has been modified to manage simple products (and not configurable ones) so a user can save the configuration he made through the 3D product configurator

• A 3D environment planner is under construction

User analysis

• The in-store kiosk collects anonymous data and provides it to the Calligaris’s BI system via Magento APIs

• It has been integrated Google Analytics to collect users behavoiur

• This data is used for:– Marketing purpose (eg. to evaluate the impact of each promotion)

– Commercial purpose (eg. to evaluate most viewed products)

– UX purpose (to evaluate common paths and existing pitfalls in navigation)

Continuous Integration

• Each kiosk is connected to a central server that is used for deploys:

– Once a new release is available, it’s deployed into this central server.– Each kiosk searches for new software updates each night– If an update is available, the kiosk is able to download it and to

upgrade is local application

– It’s possible to deploy differente software versions for different kiosks(very useful to test new releases in some stores only)

Remote assistance

• Since in-store kiosks are spread all around the world, it has beenimplemented a remote assistance system

• It is possible to connect to each kiosk remotely and to do anymaintenance operation

• It’s also possible to connect via remote desktop to take control of the kiosk and to see what users are seeing and doing

Results achieved

• The in-store kiosk is a new channel used by Calligaris to providethe full catalogue even in small stores and to promote events, discounts and much more

• It’s always up-to-date but it works in offline stores too

• It’s possible to collect statistics about users behaviour to improveuser interface, features and communication

• It’s possible to update the application remotely without in-store support

Main results and next steps

Main results

• Calligaris is now autonomous in managing web and in-store communication

• Thanks to Magento 2 APIs, it has been possible to integrate the new in-store kiosk with the website. This allowed Calligaris to manage communication in-store through the same backoffice used to update the website

• Reduced time-to-market for catalogue updates and for website and in-store kiosk improvements

Next steps

• There are plenty of new features that are under construction

• It’s under evaluation the implementation of:– New Outlet section into the website– New openings in new countries– Adoption of Elasticsearch for internal search engine improvements– Migration of B2B website to Magento 2– In-store orders via kiosk

Thank you for your attention

Serena Bortolussi Diego Semenzato

http://www.webformat.com

https://www.linkedin.com/in/diegosemenzato/

http://www.calligaris.com

https://www.linkedin.com/in/serena-bortolussi-45348845/