Content & Commerce: Creating Engaging Web Experiences

lesleyguthrie

In today’s competitive online retail space, it is no longer just about shopping, it's about telling a great story to your target audience and connecting them to the brand in a way that matches customer expectations. Wilson® Sporting Goods was committed to providing a highly engaging experience known as Experiential Commerce that replicates the shopping experience consumers expect from a brick-and-mortar store, where they leave with an emotional allegiance to the brand and product in their hands.

To bring this to life, Wilson married the abilities of Drupal as a CMS, and Magento as an eCommerce engine to deliver a robust responsive shopping and brand experience. This architecture supports Wilson.com and multiple other brands (Louisville Slugger, ATEC, Demarini) globally today.

Join Lesley Guthrie and Chris Greatens of HS2 Solutions to gain insight on how the design came to life with a unique approach to development, and the success they have seen thus far with a platform that supports their global family of brands.

Presentation Story Outline
Welcome & Introductions: Lesley/Chris
 About Wilson Sporting Goods
World-class sporting goods manufacturer based in Chicago, IL that has been in the business since 1913. Other brands Include Louisville Slugger, DeMarini and ATEC Sports.
Wilson makes sporting goods for many sports including: badminton, baseball, basketball, football, golf, racquetball, softball, squash, tennis, and volleyball. Wilson has sports equipment that can be used by weekend warriors and world-class athletes. 
Louisville Slugger, DeMarini and ATEC Sports specialize in baseball and softball equipment
About HS2 Solutions
HS2 is a full-service interactive agency that designs and builds digital experiences that delight customers and deliver results. 
We are a seasoned team of problem solvers and design thinkers. 
For over 20 years, we have worked with some of the best companies on the planet, ranging from innovative startups to multi-national brands. We have helped some of the best brand and eCommerce companies leverage the internet and digital marketing with smart engineering and team members that collaborate well internally as well as with our clients and their agencies. 

The Challenge & Opportunities
Challenges of Current System
The CMS piece of each website was built with a different system. Wilson, for example, was built with Alterian. Each of the four systems was leveraging Magento as the ecommerce engine
Pain Points & Business Drivers to seek out a new system
Desire to have a more experiential user experience. This required a blending of the content between the CMS and the ecommerce platform.
Desire for marketing to have more control over the display of all of the pages in the system. Instead of just having one page layout per content type, wanted the ability to adjust page layout and content to maximize marketability, especially for product and product category pages.
Another driver was to get all of the Wilson sites on the same platform. Make it easier for content editors to make changes to the content while also making it easier for IT to maintain, add functionality, etc. 
Challenges for the Redesign & Replatform
Tightly integrating Drupal and Magento to accomplish the experiential feel was complicated. Customizations were required to make Drupal the controlling system while letting Magento be the system of records for product data. Drupal was system of record for more editorial content (e.g. which players use which equipment). Also, needed to reuse the CSS and JS in both Drupal and Magento without duplicating code so there was no jarring change to the user experience
Building components to meet the creative vision and tell the story. 
Panels, FPPs (specifically the Quilt and Product Carousels). 
Ways to inject content into the Magento render page.
Needed to have an easy-to-use workflow for creating new products. Products are created on the ecommerce side first, but then (potentially) have editorial content added to them. And, the content needs to be reviewed before being published to the world...
SEO considerations -- Need for good defaults for paths, meta data, etc., but also need to be able to tweak it as needed for important products and pages.
Wilson began using a Product Information Management (PIM) tool after the project was underway. Many companies use PIMs to manage product information because they make managing the ecommerce data easier. This introduces more complexity into the workflow, however.
Lack of a (mostly) complete product and category data set until well into the project.

Experiential Commerce
Definition in market
Definition as it relates to Wilson (see slides 3-23 of this deck)
The landscape
The Research
The Directive (bringing together marketing, digital and creative services)
See above deck for more
Design System for a Responsive Platform
Atomic Design Approach
Panels vs. Pages
Patterns and style guides
Teaching their team how to manage and traffic the work, how to determine which patterns to use
Scaling for the family of brands (ATEC, Slugger, DeMarini)
The Solution
Design & Research Validation
IA, Wires, Comps
Continued design work to support integrations (Bizarre Voice, Search, etc)
A Robust CMS
Focusing on the Persona of the admin who will add/edit/enter/create content
Screenshots of how it works on the back end
Solutions We Explored
Hand-off - Drupal handles all of the non-ecommerce pages (Sports, Landing Pages, Wilson Staff, etc). Magento handles all of the ecommerce pages (Products, Categories, Shopping Cart, etc.)
Drupal solution - Drupal pulls in all of the data from Magento and uses APIs into Magento as needed.
Blended Solution - Drupal/Varnish handle displaying all of the pages except for the Account and Shopping Cart pages. Use ESI calls to pull in parts of the pages from Magento. Each system does what it does best: Drupal (content management, display), Magento (ecommerce), and Varnish (caching)
Why Drupal/Acquia?
Drupal provided the tools to build an easy-to-use system that allowed great flexibility to the content editors.
Built out a few page layouts and several FPPs and the content team can build out a great looking page without the need to pull in the developers.
Drupal provided many of the building blocks out of the box or with community modules to speed the development and reduce costs.
Where there wasn’t a readily-available module, Drupal is easily extensible so that the desired functionality could be created. 
Acquia provides the best platform for hosting an enterprise-level Drupal site. 
The Acquia support team is great to work with and helped us solve to challenging problems encountered while launching a major CMS/Magento system.
Acquia helped audit and load test the site before it went live to help us make the system more robust and responsive.
Enterprise Cloud hosting provides a great toolset and configuration out-of-the-box.
What Acquia product(s) do you use?
Acquia Enterprise Cloud
Acquia Professional Services

The Results
Ability to quickly launch and support multiple marketing campaigns with tight deadlines. 
First generating buzz about a product
Allow pre-ordering
Ultimately releasing a product into the store is smoother than the previous need to coordinate with code releases and platform updates.
Efficiencies in creating content for the web
Incorporating web content into the current global workflow (better process)
Workshop and training to teach the team about this and to create streamlined way for them to think about the .com during planning

Anticipated results in the future
Better organic search results
As they continue to get more comfortable the platform, they can start building pages, etc
Increased revenue by cross-promoting across sites
 

  • What level of knowledge should attendees have before walking into your session
  • What will your session accomplish and what will attendees walk away having learned

 

Session Track

UX/Content Strategy

Experience Level

Beginner

Drupal Version