LiveWire

The Client

Drawing on its DNA as an agile disruptor from the lineage of Harley-Davidson and capitalizing on a decade of learnings in the electric vehicle (EV) sector, LiveWire's ambition is to be the most desirable electric motorcycle brand in the world. With a dedicated focus on EVs, LiveWire plans to develop the technology of the future and invest in the capabilities needed to lead the transformation of motorcycling. 

The Situation

LiveWire's guiding vision is to create the next generation of motorcycles, with products and experiences that merge the power and technology of EVs with the unique, soulful connection that comes from an analog machine. And its ability to communicate this vision relies heavily on presenting a rich multimedia experience alongside compelling content that educates and excites prospective customers. 

The Challenge

LiveWire lacked a sustainable content management process and needed a solution capable of supporting robust content localization and translation capabilities. Its previous experience had been custom-built as an AngularJS application – an entirely static website that meant application code deployment was required for any media or content update. This tight coupling of code and content posed several challenges to the organization. 

• Making content updates was highly complex – one needed to make changes within the codebase and release the code to push changes to the live website. This caused even simple updates to take far longer than one might expect. 
• Communications specialists couldn’t complete content changes; instead, the Agile development team responsible for handling application code deployment was also responsible for content updates, creating resource inefficiencies. 
• Content and page components were not built or exposed in a way that allowed them to be easily reused across the site. 
• Editors had to forego many of the functionalities inherent to modern CMSs, from simple conveniences (WYSIWYG editors and spell checking) to process enhancements (revisioning, approval workflows, and scheduled publishing). 

These restrictions and process inefficiencies led to challenging scenarios, such as requiring a technical SME to manually deploy time-sensitive website content updates as a code release at the precise moment the corresponding communication was sent. 

The Solution

Enterprise software consulting firm EPAM worked closely with LiveWire to review and assess its end-to-end digital infrastructure, including the best way to expand and build on its existing application architecture. The EPAM team conducted stakeholder interviews exploring existing business and technical bottlenecks and pain points. 

LiveWire and EPAM took an agile, phased approach toward achieving sustainable content management, beginning with a “quick win” strategy and minimal viable product (MVP) that focused on the most frequently changed site content. To facilitate a steady stream of fresh and engaging content, EPAM transformed the static LiveWire application into a dynamic CMS-backed website, combining Drupal’s power and editorial capabilities with its highly interactive AngularJS front end. This involved implementing Drupal in a headless or fully decoupled paradigm. Beginning with the most frequently changed site areas, EPAM modeled content structures within Drupal and designed a robust set of APIs that were exposed to the front end. 

It was a straightforward and easy process to build and deploy the new Drupal CMS back end thanks to the inherent flexibility of Acquia’s technology stack and the integrated tools provided, including Acquia Pipelines. The teams leveraged Drupal’s rich API support to take a “content-as-a-service” approach, seamlessly integrating the powerful CMS into the existing front-end web application. LiveWire can deliver content across multiple languages thanks to integration with its translation partner – an important win as international expansion continues. Additionally, relying on Acquia’s inherent security meant the team could focus on application-level architecture and configuration without additional time spent provisioning and hardening the infrastructure layer. 

LiveWire also took the opportunity to replace its cumbersome legacy media library with Acquia DAM, establishing a single source of truth for digital assets across the broader organization. In addition to enabling seamless integration of DAM with the new CMS, this adoption extended beyond the immediate scope of the B2C website, improving media organization and workflow capabilities while eliminating asset duplication and ambiguity across both existing and future digital experiences.

The Results

Now, the site’s media-rich pages effectively capture the emotion and experience of riding LiveWire motorcycles, as well as allow communications specialists to seamlessly update media and its related content. The site’s stunning Bike Builder allows customers to experience motorcycle customization options without the need to visit a showroom in person. Should users prefer to physically visit a brand location, however, the new data-driven back end of the site supports easy management of the company’s rapidly expanding set of locations – including a Solr-backed proximity search to encourage test drives and participation in other activities, as well as gathering any after-visit feedback.

With initial implementation achieved in one month, the teams have since broadened the scope of enhancements to reach additional site areas. Ultimately, this approach's success meant that LiveWire could realize massive CMS benefits with minimal short-term disruption to design and user experience. The teams continue to iterate, launching five European websites in June 2022 based on a brand new ReactJS/NextJS front end to take advantage of Drupal as a headless CMS and allow greater flexibility for integrations and the future of digital experiences at LiveWire.

Customers have responded positively to the changes. Upon launching a preorder page for the new S2 Del Mar Launch Edition bike model, preorders sold out in about 20 minutes. And the shift to a headless implementation has improved overall site performance, which further boosts customer experience and satisfaction. Google Lighthouse testing mobile scores increased from around 10 to over 50, and Cumulative Layout Shift (CLS) improved from .158 to a perfect score of 0.0.