Claro Promotions Study Case

The project was conceived for Claro - America Movil S.A.B. de C.V. (AMX) - NYSE - the largest telecommunications company in Latin America, and Ogilvy Brazil, the Brazilian arm of largest advertising agency in the world (WPPGY). The primary need was to quickly launch - with an interval of 2 weeks - social marketing campaigns with multimedia content. Such campaigns needed to be available in mobile and desktop browsers, and integrated with social networks to generate customer engagement. Each campaign would consist of multiple pages with an unique visual identity. Campaign content, both created by Ogilvy and public content automatically pulled and moderated from social networks, needed to be updated and published daily. Search engine optimization and fine grained analytics were also top priority for business performance. The solution proposed could be described as a social marketing campaign builder, optimized for mobile devices, with extensive SEO and analytics support.

Why Drupal was chosen: 

In 2013, we built Claro’s web portal - http://claro.com.br - with a solid and extensible archtecture based on the Drupal Panopoly distribution. Therefore, we chose to implement functionality needed for Claro Promotions on top of the existing system. Such decision enabled us to quickly ship out a minimal viable product for Claro Promotions because many interface components were already implemented, and thus we were able focus our initial development efforts in social network integration and front-end customization.

Describe the project (goals, requirements and outcome): 

Overview

The project consisted of three well defined objectives:

  • To build a tool for authors and editors to launch digital marketing campaigns before well before the 2014 World Cup, and every two weeks after that;
  • To engage customers in social networks; Claro wanted to be first wireless carrier in Brazil to engage customers in social networks around the World Cup.
  • To minimize as much dependence on software developers as possible, resulting in less operational cost and greater agility in marketing operations.

The first objective set forth very tight deadlines; the first campaign would be launched in four weeks, the second two weeks later, and mobile support and site building tools two weeks after that. Therefore, we chose to go with an Agile development process based in SCRUM, with development cycles of one week followed by client acceptance and delivery. As a result, functionality would be available for production in two weeks time.

The project roadmap contemplated 3 Releases, one for each campaign to be launched before the World Cup, while the last one aimed at finishing the tool. In collaboration with client stakeholders, we created and prioritized a product backlog continually. The milestones were defined as follows:

  • 02/25/2014: Start of project
  • One month later: Release 1 - First campaign, social network integrations, story telling and rich media components, SEO and analytics support
  • Two weeks later: Release 2 - Second campaign
  • Two weeks after that: Release 3 - Social campaign builder, mobile support, theme selection per campaign

Technical Challenges

The main technical challenges in this project were:

  • Designing a tool for content editors and marketers.
  • Providing flexible and reusable content components, with adaptive presentation for multi-device support.
  • Parallel social network integrations.

The Results

The project was a great success; this is better told by the stakeholders:

"Congratulations digital team!
The dedication and commitment of each one of us was fundamental to launch a campaign with such high quality and integration between channels!
I am proud to be part of this team!
"
- Patrícia Vital, Head of Digital Marketing at Claro.

With vague requirements and without any design ready at the beginning of the project, our agile methods and principles proved once again that they are fit for the high risk environment of evolving requirements, constant change, and tight deadlines. Given Drupal’s underlying architecture, which favors modularity and extensibility, our vast experience with the technology enabled us to consistently evolve the product without knowing exactly what the needs would be at later stages.

At the end, the client was very satisfied, and we summarize the results as follows:

  • Timely delivery; all campaigns were successfully launched at planned deadlines.
  • No downtime; sites stay up between deployments and during campaigns under very high loads.
  • Greater agility and cost reduction; little to no dependence on software developers to create and launch marketing campaigns.
  • No Rework; previous site components were evolved to fit new needs and all content can be reused.
  • High quality; minimum defects were quickly fixed and deployed to production during execution.
  • Greater market reach; the client can now target mobile users with the existing technology.
  • Greater customer engagement; buzz in social media becomes traffic to the sites, and the sites take users to social channels, providing for rich and integrated communication between the company and customers.
Modules/Themes/Distributions
Why these modules/theme/distribution were chosen: 

Main Modules, Distribution, and Themes used

  • Panopoly
  • Activity Stream
  • Activity Stream Entity
  • Activity Stream Moderation
  • Activity Stream Twitter
  • Activity Stream Instagram
  • Activity Stream Facebook
  • Adaptative Panes
  • Breakpoints
  • Breakpoints JS
  • Ctools
  • Fieldable Panels

Why we chose them

Designing a tool for site builders

The large amount of content creation and editing that is required by such ambitious marketing objectives require for tools that are easy to use, allowing users to get things done fast. As it is usual in Drupal projects, UX and UI design focuses on end users, and rarely approach the needs of content authors and editors. Therefore, it was up to us to make the admin interface as easy to use as possible. After every sprint, we would objectively gather feedback from users to identify usability pain points with Panopoly’s default In-Place Page Building capabilities and Admin interface. The problems would be analysed by our front end engineers, many of which are also designers, and solutions would be added to the product backlog as the project progressed, in an agile manner.

Flexible layouts with Adaptive Rich Media Content

Given that each campaign has a unique visual identity and specific content, we chose the Panopoly distribution, for it demonstrated maturity as an enterprise solution and it provides great versatility for authors and content editors.

To make interface components adaptative for the content to be displayed in devices of varying size and resolution, we created the Adaptative Panes module. It allows content authors to define a specific number of columns tht the component should adapt to at given resolution breakpoints. For the definition of breakpoints, we used the Breakpoints module, which we extended with the Breakpoints JS module, which integrates the Breakpoints module with the enquire.js, thus providing a client side javascript interface for dynamic definition of breakpoints.

Social Network Integrations

Integration with social networks was implemented with the Activity Stream suite of modules and a custom social sharing module. Activity Stream gave us an architectural foundation to provide functionality for content authors to create specific social feeds for each campaign; they are able to customize source of content, media type (videos, images, text, etc), and filter by hashtag and/or user. It also provides an intuitive moderation workflow of content from social networks. To meet the requirements, we had to refactor the base architecture of Activity Stream and extend it. We refactored activity stream from using nodes to using entities with the Activity Stream Entity module, which we then used to create submodules for each social network (Activitystream Facebook, Activitystream Instagram e Activitystream Twitter). For moderation, we created the Activity Stream Moderation module; it allows editors to put specific words in a blacklist, and any content from any source which contains a blacklisted word is put in it’s own queue, where editors can edit content and publish later if they choose to.

Organizations involved: 
Community contributions: 

Giving back to Drupal

We developed new modules, contributed many patches and helped with issues. Here is the rundown:

Modules

Created and contributed 8 modules by various developers at Taller:

  • Activity Stream Entity
  • Activity Stream Moderation
  • Activity Stream Twitter
  • Activity Stream Instagram
  • Activity Stream Facebook
  • Adaptative Panes
  • Breakpoint JS
  • #2033595 - Stateflow collections

Patches

We contributed at least one patch to each of the following projects, for a total of 17 patches:

  • Administration theme
  • Breakpoints
  • Chosen
  • Core
  • CTools
  • Node clone
  • Theme key
  • Views infinite scroll
  • IIB
  • Panelizer
  • SPS
  • Collections

Issues

We also contributed with issue queues:

  • #2054275
  • #2033589
Project team: 

The Team

This project was a collaboration between more than 20 individuals from three different companies. From Taller, there were 11 participants: eight Drupal developers (mid-level and senior level), two front-end engineers, and one Scrum Master/Project Manager. Among others, there were marketeers, designers, information architects, SEO experts, UX analysts, and content authors and editors from Ogilvy and Claro.