Magnolia Conference 2015, Basel (Switzerland)

Maurizio Sofo, Consultant & Project Manager

11/6/2015

Boost your online e-commerce with

2

Agenda

•  ABOUT TINEXT •  ABOUT NGI (EOLO) •  EOLO.IT – THE PROJECT:

•  complexity and challenges •  achievements and numbers

•  EOLO.IT – TECH SPECS: •  FLOW BUILDER •  FRONTEND BOOTSTRAP IN MAGNOLIA •  WEB SITE LAUCH (Magnolia checklist)

About Tinext

Digital Technology with Emotion

3

1995  First  web  project  

50+  Employees  

Facts and figures

4

3  Loca5ons  

Switzerland  -­‐  Italy  -­‐  Dubai   Realized  Projects  

1500+  

Man-­‐hours  Annual  Capacity  

40k  800+  

Clients  

Key  Technology  Partners:  -­‐  Magnolia  -­‐  Open  Text  -­‐  VMWare  -­‐  MicrosoL  

4  

5

Tinext is a leading-edge technology company with widespread skills in:

Our focus: ensuring that the technology we deliver, delivers value to our customers.

Digital Agency: building and managing compelling online experiences

System Integration: turning digital business ideas into technical reality

Managed Cloud Services: fully accountable IT services from delivery to ongoing provision and support

Our Company A deep technical understanding, combined with creativity and flexibility

•  Web Content Management (CMS Premium Partner: 100+ projects, Certified development team)

•  Enterprise Content Management (ECM Premium Partner)

About NGI

6

NGI

NGI is a telco Italian company, leader in broadband field. owned by NGI, is the largest independent Italian wireless network for both private customers and companies. NGI has been awarded by Government for «Demolition of the Digital Divide» in 4 italian regions. Key facts&figures: •  From 60 to 200 employees in 3 years •  + 1200 Wireless Stations since 2007 •  + 160k Active Customers •  + 3,5% Monthly Grow Rate

7

www.eolo.it The project

8

EOLO.IT – The project: complexity and challenges

More than simple web development, the project demanded a vision for digital business and marketing, inspired branding and design, and the technical capabilities of an outstanding system integrator. In the wake of the company’s rapid expansion, NGI’s original web infrastructure and design had become aged and overwhelmed. Online purchasing functionality was so confusing that NGI had to introduce a costly, live online chat service to guide many customers through the process. For administrators and marketing staff trying to design and publish new content without CMS, the complexity was even worse. With little in the way of analytics and SEO, NGI’s web team had no metrics to use as a basis for improving the efficiency of the site.

9

EOLO.IT – The project: complexity and challenges

10

EOLO.IT – The project: complexity and challenges

11

EOLO.IT – The project: key achievements

12

REIMAGINE A NEW ONLINE COMPANY IDENTITY

INTUITIVE USER EXPERIENCE IN BROWSING AND PURCHASING

FAST & EASY EDITORING

USER PROFILING AND PERSONALIZATION FOR FIVE DIFFERENT TARGET CUSTOMER GROUPS

ANALYTICS & CONVERSION RATE MEASUREMENT

EOLO.IT – REIMAGINE COMPANY ONLINE IDENTITY

13

EOLO.IT – FAST and EASY EDITORING

14

EOLO.IT – USER PROFILING AND PERSONALIZATION

15

EOLO.IT – ANALYTICS & CONVERSION RATE

16

CONVERSION RATE MEASUREMENT – 2 STEP: 1) DEFINE GOOGLE TAG MANAGER SCRIPT 2) ENABLE/DISABLE C.R. MEASUREMENT IN MAGNOLIA à automatically incorporated by Magnolia in page

<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=  '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);  })(window,document,'script','dataLayer',XXXXXX');</script>  

EOLO.IT – The project: let’s recap some “numbers”

17

+100% increase in online self-service purchase

+50% increase in daily customer page visits %

+30% customer engagement (session times) up by %

+100% mobile commerce up by %

10% customer churn reduced by over %

50% customer support request reduced by

70% time reduction for staff creating new content

www.eolo.it Tech Specs

18

19

EOLO.IT – Tech Specs: Flow Builder

MAGNOLIA Form Builder is the perfect tool for a multi-step process: •  Flexible •  Extensible •  Rich set of built-in features (validation) •  Component way: editorial

But the project required: •  150+ multistep forms to build •  Every step is dynamic •  Cross-step validation •  Webservices strong integration •  Promos management •  Context-aware •  Integration testable

The answer: Flow Builder

20

EOLO.IT – Tech Specs: typical EOLO Flow

Webservices (REST)

Flow  Init  Save  Cart  

Step  Valida5on  

Step  Varia5ons  Ac5ons    

Promos  

Flow  Devia5ons   FastLane  

21

EOLO.IT – Tech Specs: Flow Builder, main features Born as a translation of Form Builder: it follows the same model

•  FormEngine à FlowEngine •  FormToken à FlowToken •  FormState à FlowState

Server-side driven •  A Flow can extend another one

Cross-step / Cross-field validation Dynamic Flow Step construction, flow deviations Extensions:

•  Actions: applies a transformation of a FlowState •  Back (and forth) navigation preserving data •  Context aware fields / steps: for example «VAT / noVAT» management for

different user profiles Unit testable

•  FlowEngine.execute();

22

EOLO.IT – Tech Specs: Twitter Bootstrap

Dynamic Grid System

23

EOLO.IT – Tech Specs: Twitter Bootstrap Form example

24

EOLO.IT – Tech Specs: Website launch

http://bit.ly/1IiAyve - ULTIMATE MAGNOLIA WEBSITE LAUNCH CHECKLIST 25+ Magnolia topics, among these:

•  Backup is running. Did you test it? •  Have SEO top pages been migrated with 301 redirect?

•  Magnolia redirects with 302, do you know? •  Is Cache working fine? •  Is Analytics tracking (and only on Public Instance)? •  Is /.magnolia disabled on Public Instances via proxy?

•  But only from the outside, you still have to access from internal network

•  Has Superuser been cloned to provide a backup access? •  Someone can try to log in with a wrong password for more

than 5 times..

Questions? 25

26  

Tinext  SA  Viale  Serfontana  7  6834  Morbio  Inferiore  Switzerland  Tel.  +41  91  612  22  66  

Tinext  Italia  S.r.l.  Via  Borghi  8  21013  Gallarate  (VA)  Italy  Tel.  +39  0331  677  747  

Tinext  Middle  East  Jumierah  Lakes  Towers  Building  JBC  2  Dubai  UAE  Tel.  +971  4  551  67  37  

WWW.TINEXT.COM   INFO@TINEXT.COM  

Thank you for your attention. Email: maurizio.sofo@tinext.com Phone: +41 91 612 22 75 / +41 76 327 98 32 Skype: tinext_maurizio_sofo