![Page 1: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/1.jpg)
SDL Web Case Studyadidas – Content FrameworkOctober 2017
![Page 2: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/2.jpg)
1
Jonathan WhitesideCTO
Presenting today
![Page 3: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/3.jpg)
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
![Page 4: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/4.jpg)
3
We work with complex, global organizations
![Page 5: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/5.jpg)
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
![Page 6: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/6.jpg)
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
![Page 7: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/7.jpg)
We are part of Dept - an international network of leading digital agencies.
6
![Page 8: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/8.jpg)
7
600+ creatives, developers & data marketers
![Page 9: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/9.jpg)
8
GermanyNetherlandsSpainUKUSA
![Page 10: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/10.jpg)
9
adidas
![Page 11: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/11.jpg)
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
![Page 12: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/12.jpg)
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?
![Page 13: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/13.jpg)
1. Implement a Component Framework
![Page 14: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/14.jpg)
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
![Page 15: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/15.jpg)
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
![Page 16: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/16.jpg)
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
![Page 17: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/17.jpg)
![Page 18: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/18.jpg)
FOOTBALL / MERCURY.
![Page 19: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/19.jpg)
ORIGINALS / PUREBOOST X.
![Page 20: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/20.jpg)
FOOTBALL / SPEED OF LIGHT.
![Page 21: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/21.jpg)
ORIGINALS / NMD.
![Page 22: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/22.jpg)
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
![Page 23: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/23.jpg)
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
![Page 24: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/24.jpg)
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
![Page 25: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/25.jpg)
PREDICTABLEREPEATABLEPROCESSES
![Page 26: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/26.jpg)
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!
![Page 27: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/27.jpg)
2. Integration translation management
![Page 28: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/28.jpg)
27
Translation Management
SDL Professional Services implemented TMS and World Server.
![Page 29: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/29.jpg)
3. Infrastructure (containers & cloud)
![Page 30: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/30.jpg)
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
![Page 31: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/31.jpg)
30
Scalable cloud environment using multiple availability zones
![Page 32: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/32.jpg)
4. DevOps – Automate!!!
![Page 33: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/33.jpg)
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.
![Page 34: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/34.jpg)
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
![Page 35: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/35.jpg)
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
![Page 36: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/36.jpg)
35
Cucumber Test Results within Jenkins
Features to test
Scenarios in the Feature test
Scenario test results.
![Page 37: SDL Web Case Study Study Case - BuildingBlocks_tc… · Building Blocks work with clients to identify digital opportunities that will increase revenues, develop relationships and](https://reader035.vdocuments.mx/reader035/viewer/2022062504/5b80934b7f8b9af0088db54a/html5/thumbnails/37.jpg)
Questions?