Brand USA

Brand USA

Brand USA, the destination marketing organization for the US, made the decision to move from its proprietary CMS to a more modular and flexible solution: Drupal 8. With two subsites already running on Drupal, Brand USA had first-hand experience with the Drupal platform. Consolidation of multiple platforms was a big benefit (Sitecore/Drupal) and Drupal 8 had the features they needed without the overhead of proprietary licensing fees. Freedom from licensing costs and feature limitations were other drivers, in addition to ease of use for content updates.

Mediacurrent partnered with parent company Code and Theory to launch the new www.VisittheUSA.com on Drupal 8. Code and Theory led project management, digital strategy, UX and design for the project, while Mediacurrent spearheaded the development, content migration and internal QA testing.

Driven by our belief in Drupal 8 as a backbone of digital transformation, Mediacurrent developed a website that combines a dynamic user experience with data-driven personalization features. Designed for nine different languages, the site delivers a personalization layer that is segmented by region/geography and visitor behavior and has several interactive features including a choose-your-own-adventure module that delivers a parametric set of recommendations based on an either/or quiz.

 

Project Goals
  • Migrate from Sitecore to Drupal 8
  • Decrease bounce rate
  • Create a user-friendly trip planner
  • Integrate with Acquia Lift to build a personalized user experience
  • Migrate content across multiple country site domains (for example, fr.visittheusa.com for France)
  • Reach a global audience with multilingual translation features, develop a responsive web platform to support multiple countries including: Australia, Brazil, Canada (French and English), Chile, Columbia, France, Germany, India, Japan, South Korea, Sweden, Mexico and United Kingdom
  • Translate site content in nine different languages: English, Spanish, French, German, Japanese, Mandarin Chinese, Korean and Portuguese
  • Develop website features and infrastructure that allow for continuous improvement and user-based customization, including front and backend coding,  ingestion of data, integration of third party APIs and testing/quality assurance
  • Support transition to the VisitTheUSA.com team via training sessions including CMS training and Technical (code) walkthroughs
Project Highlights

Theming: Parallel Development with Components: With a Drupal-agnostic (90% of theming for this project took place outside of Drupal) component-based approach, we started front-end development in parallel and sometimes even ahead of back end development.

The entire front-end was built in a living styleguide which served as our single code source and ensured consistency with the Drupal site. This resolved some of the common challenges —for example, improper markup that interferes with site functionality— that can occur when back end development precedes and is later handed over to the front end team for theming.

This approach was beneficial to the client in several ways. First, they were able to see a visual representation of our progress because the styleguide represented each component shown in the design. They were even able to begin conducting QA and testing directly in the styleguide. But the final and most significant benefit was that Mediacurrent completed front-end development ahead of schedule. Based on the project requirements, we were able to identify early on that several components were the same or similar on different pages. This allowed us to build a component once and reuse it as many times as needed. In cases where a component had different variations from page to page, we used KSS Node and added modifier classes to change the component as needed without having to rebuild it from scratch.

Front-End Performance Optimization: Like many image rich sites, VisitTheUSA.com faced sluggish load times. Mediacurrent implemented several performance optimization techniques starting with page optimization tests using dev tools, webpagetest, and pagespeed. These tests exposed the low hanging fruit issues that needed to be given priority. As an image heavy site, images needed to be properly addressed. We achieved this by implementing responsive image styles using the srcset and sizes attributes to ensure the browser is able to select the best image possible based on the visitor’s environment. In addition, “lazy loading” was a big help by ensuring images are only loaded when needed. We mainly used SVG images for all front-end assets such as icons and shapes to provide a richer UI experience. This also reduced the page load. Finally, making use of Drupal’s cache as well as Varnish on the server side we were able to achieve the perfect combination of performance and image quality.

Internationalization: With Drupal 8, modules go through the same workflows for different translation providers. This provides a consistent interface. Many of the big translation management providers (including Brand USA’s vendor, SDL) provide their own connector modules for Drupal which meant that we did not have to provide any custom code to integrate their services. Because Drupal offers contributed solutions for managing much of the translation workflow, the translation partner does not have to write everything from scratch to integrate with Drupal.

Trip Planning Tools: The new website takes the legwork out of trip planning with features like a widget that aggregates Weather Underground temperature averages and displays a temperature range by month and season. The site offers numerous opportunities to share trip plans and ideas with family and friends through social media or email.   

  • Instagram - Visit The USA includes several third party integrations like Instagram. This integration was accomplished by using the TINT service that allows for aggregating content from multiple sources across the web.
  • TripAdvisor - BrandUSA was able to partner with TripAdvisor, the world’s largest travel site, to provide relevant content on destination pages. This includes area attractions, or “Things to Do” for that location. Each destination’s attractions render as a list on the side of the city or park page and pull in content from TripAdvisor’s API service.

Interactive Features

  • Choose-your-own-adventure module - the visitor plays an interactive “game” on the homepage which captures their favorite interests and then compiles a list of recommended content.
  • Ability to bookmark content - users can see all bookmarks on a map in the context of any location or trip they are viewing.

Tracking User Preferences with Acquia Lift: The immediate need for the Brand USA team was to leverage Lift reporting to observe location-based behaviors and learn how different audience segments will interact with the site. This data will be used to inform the content team on how to prioritize content for different audiences.

VisitTheUSA.com takes advantage of the tracking feature with Acquia Lift to track content preferences. When a user interacts content on the page, Lift will track the user’s interests. Lift also tracks a user’s interests every time the visitor views a piece of content. This contributes to a profile within Lift that will indicate which article topics are viewed most often by a user.

To get to know their customers on a deeper level, the Brand USA team has access to reporting that centers around the user’s primary interest in regards to travel: outdoors, food and drink, cities and towns, and other main topic categories on Visit The USA. The site serves personalized content on the homepage and can detect if a user has a preferred segment (e.g. outdoors vs entertainment); this will then override curated content. The “explore more” interactive widget is personalized with content from a user’s favorite segment.

Development

Mediacurrent built VisitTheUSA.com using fewer than 35 modules, a true testament to the strength of Drupal 8 core.  Had the site been built on Drupal 7, it would have required more than 50 modules to achieve the same results and functionality.

Some of the standout Drupal modules chosen to build the site include:

Geo-Location: For a site like Visit The USA, almost every piece of content is tied to a physical location. The Geo-location module was a drop-in, easy to configure module that allowed us to embed a Google map on our fields in order to capture a geo-location.

Translation Management: The translation management software provided by the Drupal contrib community offers a robust workflow for sending and receiving translations from a translation provider. This module allowed the vendor to write less custom code and our agency the ability to not have to write any custom code for communicating with the provider.

Search API: Drupal’s popular Search API module gave our developers the tools to index the entire content database using Acquia Search. Our team was able to leverage the powerful Solr-base search in several places on the site for a significant performance boost.

Paragraphs: Content editors for Visit The USA are able to manage content in a flexible way using the powerful Paragraphs module for Drupal. This module allows editors to manage complex content structure and relationships with a consistent, easy to follow interface.

Panels: Mediacurrent leveraged the Panels module for building all of our pages. Using Panels made it easy to arrange layouts using a visual tool which saved time for developers.

Drupal Contrib

Community contributions for this project include Twig Pre-render, a twig extension that allows you to pre-render and preprocess Drupal render arrays so you can get at all the contextual variables inside.

Final Thoughts

With the power and versatility of Drupal in combination with Acquia Lift tools, VisitTheUSA.com provides an ideal framework for Brand USA to expand and adapt their digital business.

With over 30,000 hours of Drupal 8 experience, Mediacurrent’s deep bench of talented developers were able to leverage their collective knowledge and skills to ramp up on this Drupal 8 project. Our adoption of Drupal 8 is the fastest adoption of any major Drupal version in our company's 10 year history. Mediacurrent's investment in training, camps, Drupalcons, continuing education, certifications gives us an advantage to learn and adopt newer technologies in a way that distinguishes our team within the Drupal ecosystem.

Post-launch, Brand USA and Mediacurrent have a support agreement where we will continue to build on the platform, growing personalization features and user interactive tools.