SDL Web Case Studyadidas – Content FrameworkOctober 2017

1

Jonathan WhitesideCTO

Presenting today

Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and drive operational efficiencies.

Our creative, technical and user experience experts develop and maintain solutions - rapidly, reliably and on a global scale.

We help global companies solve complex problems using digital technologies

2

3

We work with complex, global organizations

4

Delivering internationallyOur offices

Boston, USManchester, UKAmsterdam, NLZaragoza, SpainSkopje, Macedonia

Projects

Delivered projects in over 20 countries

Website launches

Launched, rolled-out and support hundreds of local market websites

5

SDL specialistsAwarded partner with the ‘most implementations’

10 year partnership

+60 implementations

+1000 websites rolled out

+20 organisations supported by BB’s DOS team

We are part of Dept - an international network of leading digital agencies.

6

7

600+ creatives, developers & data marketers

8

GermanyNetherlandsSpainUKUSA

9

adidas

The campaign challenge

adidas launches hundreds of campaigns a year

Every digital campaign was built from scratch – 80% of campaigns were ‘build and burn’

Differing integrations, analytics setups etc

Most not hosted within adidas IT infrastructure, CMS & processes

Small changes took weeks

Translations updated manually in the campaigns

Expensive, time consuming and reactive

Inefficient processes, costly development costs and multiple design and build agencies

What can we do?

1. Build ALL campaigns on a single set of CMS managed Templates – but still allow for creative flexibility

2. Integrate Translation management

3. Align with adidas IT/Infrastructure standards and processes

4. Automate!!!!

How could we help adidas use the potential of SDL Web to solve these challenges?

1. Implement a Component Framework

13

Component Framework (like DD4T)

A single set of Schemas / Page Templates / Component Templates to be used across all campaigns

Give power to brand teams to create their own campaigns

Provide a of “core” adidas theme

Provide flexibility to create new themes where look and feel can be changed without markup changes

Should have key integrations built in (analytics/tracking/video)

Multi-lingual support

The flexibility that the Framework provides can be overwhelming for content editors. Often components get used for the wrong purpose which impacts the

experience and conversion. To make it clearer, we categorized the components by their purpose.

Awareness Story

Focused on impact – spaces for messaging and assets to shape a campaigns identity.

Masthead A. (Large) ImageMasthead A. (Large) VideoMasthead B. (Medium) ImageMasthead B. (Medium) VideoImage Grid

Discovery Product Audience & Social Navigation

Have room for more detail, allowing key messages and background to be conveyed.

StatementFeature ImageFeature VideoVideo (full width)

Focused on exploration, giving users a way to find out more and experience related or new content.

Teaser/onward journeyHotspotProduct selector

Promote products and ranges combining curated visuals and engaging layouts with product data linking to the e-commerce platform.

Product SnapshotProduct Grid

Focused on growing audience and promoting content found on social platforms and external websites.

Sign up CTASign up form & Thank youSocial FollowExternal feeds

Help users to navigate through individual pages and multi-page campaigns.

Section menu

Understanding the “component” parts

15

29 components, including…Feature - Carousel - Text Center Masthead B - Text Centre

Feature - Carousel - Text Left Masthead B - Text Left

Feature - Carousel - Text Right Masthead B - Text Right

Feature - Text Center Statement - Text Left

Feature - Text Left Statement - Text Right

Form - Newsletter Statement - Title

Image Grid Story Card Component

Item Selector Video Full Width - Inline Frame - Text Centre

Item Selector - Overlay Video Full Width - Inline Frame - Text Left

Item Selector - Sticky Header Video Full Width - Inline Frame - Text Right

Item Selector - Sticky Nav Video Full Width - Overlay - Text Centre

Masthead A - Text Left Video Full Width - Overlay - Text Left

Masthead A - Text Right Video Full Width - Overlay - Text Right

FOOTBALL / MERCURY.

ORIGINALS / PUREBOOST X.

FOOTBALL / SPEED OF LIGHT.

ORIGINALS / NMD.

21

XPM integrationRationale

• We chose XPM for quickly correcting copy and visual verification

• We implemented Page Types feature for quickly creating Campaign Pages and Product Page. This functionality creates a “templated” page automatically creating the relevant components and adding them to the page with the default component templates.

• Authors can select Components on the page and change the layout based on a choice of possible templates.

• Added Icons for each Component Template to give authors visual clues on how the content will be displayed on the page.

• Authors can also change the frame/page layout

22

XPM integrationRationale

• We chose XPM for quickly correcting copy and visual verification

• We implemented Page Types feature for quickly creating Campaign Pages and Product Page. This functionality creates a “templated” page automatically creating the relevant components and adding them to the page with the default component templates.

• Authors can select Components on the page and change the layout based on a choice of possible templates.

• Added Icons for each Component Template to give authors visual clues on how the content will be displayed on the page.

• Authors can also change the frame/page layout

23

XPM integrationRationale

• We chose XPM for quickly correcting copy and visual verification

• We implemented Page Types feature for quickly creating Campaign Pages and Product Page. This functionality creates a “templated” page automatically creating the relevant components and adding them to the page with the default component templates.

• Authors can select Components on the page and change the layout based on a choice of possible templates.

• Added Icons for each Component Template to give authors visual clues on how the content will be displayed on the page.

• Authors can also change the frame/page layout

PREDICTABLEREPEATABLEPROCESSES

25

Component Framework

30 components supporting 50+ campaign websites

Campaign “kit” for external agencies explaining the campaigns

Creative flexibility

Self service – brand managers can create their own websites using core templates!

2. Integration translation management

27

Translation Management

SDL Professional Services implemented TMS and World Server.

3. Infrastructure (containers & cloud)

SDL Web > Content API

• Architecture split by Role

• Delivery Services hosted in Docker containers for automated deployments across environments

• Use AWS features (e.g. Elasticache)

Decoupled architecture

30

Scalable cloud environment using multiple availability zones

4. DevOps – Automate!!!

32

DevOps – Automated Testing End State

Application Code CMS/Content API Client-side

1. Unit Tests

jUnit functional unit tests against the Java application code to validate business logic.

2. Static Code Analysis

SonarQube runs static code analysis to determine overall quality, compliance to

coding standards and maintainability of the codebase.

3. Test Coverage

Cobertura analysis to provide code coverage analysis to determine unit test

coverage within the Java application code.

4. Test Specifications

Cucumber to test executable specifications, automating the creation of items in the CMS, publishing and testing

the API is outputting the correct data

5. API Tests

Apiary Dredd to run tests against the Content API to ensure API outputs

matches API blueprints.

6. Front End

Runs test scripts on HTML components to ensure data is rendered correctly on

the page.

7. Visual Tests

Ghost Inspector to run visual tests against a baseline to ensure layout has

not regressed between builds.

33

Example

• Code lives in dedicated Git repositories (e.g. in Bitbucket)

• Jenkins polls Bitbucket for changes

• Jenkins performs the following:

• Java Application Code• Compile/Build API• Generate Cobertura report for API• Runs SonarQube scan

• CMS/Content API• Runs Cucumber tests• Runs Apiary Dredd tests

• Angular/ReactJS:• Runs ”AngularJS build" to generate

AngularJS output• Runs ”AngularJS test”

• If the relevant tests pass a Dockercontainer is created for each application

• The Docker containers are pushed to DockerHub.

• On the hosting servers Watchtower runs and monitors Docker Hub for changes

• If new images are found in Docker Hub, they are pulled and redeployed automatically onto the servers

• Jenkins notifies a Slack channel with information about each build and creates issues in JIRA

DevOps – Workflow End State

34

Building Blocks have implemented Cucumber executable test specifications to automate the testing of the manual actions a Content Author needs to be complete.

These tests are run every build, and provide whether any changes will affect the CMS process or publishing.

Test Scenarios are run which trigger actions such as automatically creating components, pages and publishing. Tests are then run to ensure that outputs they generate are as expected.

Cucumber

Process for creating a test feature

35

Cucumber Test Results within Jenkins

Features to test

Scenarios in the Feature test

Scenario test results.

Questions?

37

Jonathan WhitesideCTO+44(0) 7515 850 236j.whiteside@building-blocks.com