We're proud to provide Drupal 8 services.

Expand
Improving the Drupal authoring experience.

Processes
  • Continuous Delivery
Team Leadership
  • Senior Producer
    Kelly Albrecht
  • Senior Architect
    Colin Panetta
  • Art Director
    Colin Panetta

In our engagement with Mass.gov, Drupal is essentially the product being developed and operated in.

So we had to ask ourselves, “In what ways can we make Drupal better for our customers, to give them a better experience, get better feedback from them, and build that relationship?”

The Commonwealth of Massachusetts embarked on a large-scale web replatform to modernize and make it easier to continuously improve the way the Commonwealth engages with and provides services to its constituents online. By improving the user experience for its constituents, and providing, as comprehensively as possible, a “single face of government”, Mass.gov® has become an essential platform in the Commonwealth’s ability to serve its constituents by delivering information and critical day-to-day social services to the Commonwealth’s 6.8 million people. With 15 million page views each month, the Mass.gov platform hosts over 400+ government agencies and content to support anyone who wants to move, visit, or do business in the state. All of which is fueled by the Commonwealth’s 600+ content authors, who have been able to use the platform to improve constituent satisfaction, making a noticeable positive difference on how the public sees their organization and the services they provide.

As early adopters of Drupal 8, Mass.gov and its ecosystem of web properties are the primary platforms for the delivery of government services and information in the Commonwealth of Massachusetts. 
 

Wicked awesome content

The Commonwealth of Massachusetts was faced with a difficult to use web experience that stood in the way of a constituent base that wanted to interact with government services through the web. The goal was set to create new primary face of Massachusetts government that was constituent centric to enable fast, easy, and wicked awesome interactions with state services.

Prior to the migration to Drupal 8, the Commonwealth’s antiquated, proprietary content management system reflected its internal hierarchical structure instead of organizing content in a way that made sense to its visitors. That meant, for example, that a visitor looking to start a business in Massachusetts had to visit four or more separate department sites in order to get started. The Commonwealth sought to improve the user’s experience by focusing on guiding the visitor through the various services the Commonwealth provides over helping them navigate the complexities often found in a massive state organization. 

Massachusetts Digital Service (MassGovDigital) had two core philosophies that drove their decision making: focus on the constituent experience and use data to support all decisions. They envisioned a unified user experience, where tasks like preparing to renew a driver’s license matched the ease of use of shopping on a major retail website. The MassGovDigital team was challenged to apply private-sector data analytics savvy, like defining and tracking constituent “conversions.” Gaining access to analytics at their fingertips was key for site authors to make fully-informed decisions to optimize their content for readers. A high-performing site search would ensure content findability. 

Last Call Media and the MassGovDigital teams worked together to improve the Drupal authoring experience in order to deliver the next chapter of the state’s digital future. The end result represents a significant leap towards the goal of a new primary face of Massachusetts government that centers on constituents—enabling fast, easy, and wicked awesome interactions with state services.

Improving the Drupal authoring experience

If you can improve the authors’ ability to create and improve content, then the constituents will be better enabled for fast, easy, and wicked awesome interactions with state services. For Last Call Media, improving the authoring experience meant a better interface for communicating data about each piece of content. This data was a mix of content scoring and direct feedback from constituents. For example, a site visitor submits the feedback form (available on any page) and says whether they found the page to be helpful or not (“Did you find what you were looking for on this webpage?”). The raw data goes into the calculation of their “grades.” The raw feedback comments also become visible in a tab in the editor interface, where the editor can focus in on what is or isn’t working well about the page. Surfacing this data, along with making the interfaces more intuitive and the content easier to add and manage, enabled authors to more rapidly improve their content in a more targeted way. According to ForeSee results, the release of the reimagined authoring experience directly correlated with a never before seen increase in Customer Satisfaction.


Retheming Drupal’s default admin site was a critical opportunity to improve usability for authors. With a pattern library, Last Call Media applied these improvements at a large scale without the prohibitively high effort of creating designs for every single page. Paying extra attention to vertical spacing intervals Last Call Media created a clearly defined page hierarchy. At the same time, flipping the brand color scheme provided a user experience that’s consistent with the main site, yet unique.

Screenshot of new branding guidelines being created

 

By using a shared design vocabulary, these ideas could be applied site wide—even the pages that weren’t yet designed—to start development and apply the broad strokes to the theme, while the design team focused on some areas of the site that required more attention for usability. Faced with the challenge to deliver complex content with forms assembled from a number of differently-styled modules, form elements became a focus area. In addition to a unified styling system to improve usability for all form elements, horizontal lines now mark the end of one form element and the beginning of the next. Vertical lines do the same for nested re-orderable elements.

A clear path to publish content 

Last Call Media also created a new and improved version of the Admin Toolbar to streamline navigation for content editors and creators. In addition to the Admin Toolbar module, a separate custom toolbar module specific to the Admin Theme was created to handle customizations. Now, buttons provide easy access back to the login page, with a separate button to return to the main site. A custom tab directs content editors to their most important pages.

The Mass.gov Admin Theme homepage
The final “home page” of the Admin theme for Mass.gov.

Before, there was no direct way for authors to quickly access their top two pages: the page to add content and the page to create new documents. To balance that functionality with a slim line top bar experience, buttons were added to those pages right to the tab menu. Last Call Media built a custom “Add Content” page with attentional experience in mind; Mass.gov, at the time of this project, had about 35 content types for an author to scroll through. 

Screenshot of filtered "Content Add" screen
Using the search box, content editors can filter the types of content they want to add.

A faster and easier authoring experience has allowed authors to keep improving and adding to their content. This keeps constituents in the know and continues to grow Mass.gov as a single source of all the information they need to interact with government services. Read more about how Last Call Media did this here.

Outcomes

  • Leading the Way Among State Government Websites: Mass.gov placed 3rd nationwide in a review of 400 state government websites by ITIF and was recognized for performance in page-load speed, mobile friendliness, security, and accessibility.  
  • Constituent-Centric UX: Produced 23 content types using structured content to ensure consistent and constituent-centric UX.
  • Huge improvements in both the front and back end performance: We achieved a 50% overall improvement in the back end performance, and a 30% overall improvement in the front end performance all while maintaining content freshness.
  • Empowering Content Authors With an Improved Drupal Admin UI: Updating, adding, and reviewing content moved from requiring technical expertise to being open and usable to non-technical subject matter experts. Now, hundreds of users login to Mass.gov each week to update, add, and review content performance to support the services their organization provides to the people of the Commonwealth. 
  • Streamlined on-boarding with guided tours: A series of guided tours support a refined publishing process, which accelerated on-boarding new content authors. 
  • Collecting Insights from User Feedback: Verbatim content feedback from constituents is now available to authors, and feedback helps create content performance scores in an improved Drupal admin interface. 

Key features and functionality 

Reimagined authoring experience

  • Content Categories: Content types were organized into categories and jump-links to them can be found on the “Add Content” page.
  • A Deeper Search: Custom search functionality sorts through both the content type names and the description text.
  • Clear Visualization and Direction: A “thumbnail” example of each content type shows authors a sample preview. Cleaner and more strategically-positioned description texts give easy-to-follow direction.
  • Extra Guidance: Links to Mass.gov’s document site provide additional information about each content type, including how it’s used, tips for creating new content, and links to live examples.

New welcome page experience for authors


Key Drupal Modules

Why these modules/theme/distribution were chosen

Flag: Used to notify editors about content updates. 
Paragraphs: Used to guide authors in creating structured and reusable content.
Tour: Used to improve the authoring experience by introducing them to the functionality of their content types.
Tour UI: Used to assist Product Owners and Customer Success in tailoring Tours as needed, based on customer feedback, minimizing the interruption to the feature development work stream.
Pathologic
Redirect: Having migrated from a very large legacy site with a long history, Redirects were a critical consideration.
TFA
Password Policy
Metatag
Seven: Hooking in to Seven, a Drupal 8 theme, provided a base that is maintained and receives security updates from the Drupal community. One of the main challenges in building an admin theme for Drupal are the number of modules that require different user interfaces; some modules make minor tweaks to the UI to meet their needs, but some create their own from scratch. It’s very difficult for an admin theme to support all of these use cases without something breaking, let alone making the UX cohesive. By creating the theme from Seven, Last Call Media ensured that it wouldn’t unexpectedly break module UIs for modules that we hadn’t even anticipated needing yet, and it makes sure not to be breaking anything that’s already there.
 

Final Thoughts

Currently, Last Call Media is a leading digital agency working to transform Mass.gov’s digital platform and strengthen government-constituent interaction. This provided technical architecture leadership to develop and support the new digital platform, by working closely with the MassGovDigital internal team and several other vendors. 

Over the past 12-months, by relying on constituent feedback and analytics and a commitment to collaboration and flexibility, the teams have been able to improve constituent satisfaction with Mass.gov month over month, according to data collected by Foresee.
 

Expand
Massive performance wins.

Processes
  • Continuous Delivery
Team Leadership

Last Call Media team members were invited to join the Digital Services team at Mass.gov, to help them operationalize their Drupal 8 platform following the public launch.

Mass.gov is the website of the Commonwealth of Massachusetts. The primary stakeholders are the constituents who visit the website, and the state organizations who publish content on and visit the website for aspects of their job. It receives upward of 15 million page views a month and changes to the site are released twice weekly by a team of developers. The traffic profile for the site is interesting, yet very predictable. The vast majority of the site traffic occurs between 8:00 am and 8:00 pm during the business week. Site editors are working during the business day (9:00 am - 5:00 pm), and releases happen after the work day is over (after 8:00 pm). On analytics graphs, there are always five traffic spikes corresponding with work days, except when there is a holiday—and then there are four.

LCM assisted in making some pretty dramatic changes on both the front and back end of the site; every action we took was in service of either site stabilization or improving content “freshness.” State employees need to be able to publish content quickly, and constituents need fast access to the information that’s being published, without disruptions while they’re visiting the site. These two needs can be considered opposing forces, since site speed and stability suffers as content freshness (the length of time an editor waits to see the effect of their changes) increases. Our challenge was to find a way to balance those two needs, and we can break down our progress across an eight-month timeline:

September, 2017

The new Mass.gov site launched after roughly a month in pilot mode, and we saw an increase in traffic which corresponded with a small response time bump. The site initially launched with a cache lifetime of over an hour for both the CDN and the Varnish cache. This meant that the site was stable (well insulated from traffic spikes), but that editors had to wait a relatively long time to see the content they were publishing.

November, 2017

We rolled out the Purge module, which we used to clear Varnish whenever content was updated. Editors now knew that it would take less than an hour for their content changes to go out, but at this point, we still weren’t clearing the CDN, which also had an hour lifetime. Site response time spiked up to about two and a quarter seconds as a result of this work; introducing “freshness” was slowing things down on the back end.

December, 2017

We realized that we had a cache-tagging problem. Authors were updating content and not seeing their changes reflected everywhere they expected. This was fixed by “linking up” all the site cache tags so that they were propagating to the pages that they should be. We continued to push in the direction of content freshness, at the expense of backend performance.

To address the growing performance problem, we increased the Drupal cache lifetime to three hours, meaning Varnish would hold onto things for up to three hours, so long as the content didn’t get purged out. As a result of our Purge work, any content updates would be pushed up to Varnish, so if a page was built and then immediately updated, Varnish would show that update right away. However, we saw very little performance improvement as a result of this.

January, 2018

Early in the month, we experienced a backend disruption due to some JavaScript changes that were deployed for a new emergency alert system. In development, we added a cache-busting query parameter to the end of our JSON API URL to get the emergency alerts. However, in the production environment, we were adding one additional, completely uncached request for every person that hit the site. As a result of this relatively minor change, the backend was struggling to keep up (although constituents saw almost no impact because of the layered caching). This illustrated the importance of considering the performance impact of every single PR.

Careful study of the cache data revealed that each time an editor touched a piece of content, the majority of the site’s pages were being cleared from Varnish. This explained the large spike in the response time when the Purge work was rolled out, and why raising the Drupal cache lifetime really didn’t affect our overall response time. We found the culprit to be the node_list cache tag, and so we replaced it with a system that does what we called “relationship clearing.” Relationship clearing means that when any piece of content on the site is updated, we reach out to any “related” content, and clear the “cache tag” for that content as well. This let us replace the overly-broad node_list cache tag with a more targeted and efficient system, while retaining the ability to show fresh content on “related” pages right away. The system was backed by a test suite that ensured that we did not have node_list usages creep back in the future. This earned us a massive performance boost, cutting our page load time in half.  

We found that the metatag module was generating tokens for the metatags on each page twice. The token generation on this site was very heavy, so we patched that issue and submitted the patch back to Drupal.org.

February, 2018

We had another backend disruption due to some heavy editor traffic hitting on admin view; our backend response time spiked up suddenly by about 12 seconds. A pre-existing admin view had been modified to add a highly desired new search feature. While the search feature didn’t actually change the performance of the view, it did make it much more usable for editors, and as a result, editors were using it much more heavily than before. This was a small change, but it took what we already knew was a performance bottleneck, and forced more traffic through it. It demonstrates the value of being proactive about fixing bottlenecks, even if they aren’t causing immediate stability issues. It also taught us a valuable lesson—that traffic profile changes (for example, as a result of a highly desired new feature) can have a large impact on overall performance.

We got a free performance win just by upgrading to PHP 7.1, bringing our backend response time from about 500 milliseconds down to around 300.

We used New Relic for monitoring, but the transaction table it gave us presented information in a relatively obtuse way. We renamed the transactions so that they made more sense to us, and had them broken down by the specific buckets that we wanted them in, which just required a little bit of custom PHP code on the backend. This gave us the ability to get more granular about what was costing us on the performance side, and changed how we started thinking about performance overall.

We added additional metadata to our New Relic transactions so we could begin answering questions like “What percentage of our anonymous page views are coming from the dynamic page cache?” This also gave us granular insight on the performance effects of changes to particular types of content.

We performed a deep analysis of the cache data in order to figure out how we could improve the site’s efficiency. We broke down all the cache bins that we had by the number of reads, the number of writes, and the size. We looked for ways to make the dynamic page cache table, cache entity table, and the render cache bin a little bit more efficient.

We replaced usages of the url.path “cache context” with “route” to make sure that we were generating data based on the Drupal route, not the URL path.

On the feedback form at the bottom of each page on the site, the form takes a node ID parameter, and that’s the only thing that changes when it’s generated from page to page. We were able to use “the lazy builder” to inject that node ID after it was already cached, and we were able to generate this once, cache it everywhere, and just inject the node ID in right as it was used.

We took a long hard look at the difference between the dynamic page cache and the static page cache. Without using the Drupal page caching, our average response time was 477 milliseconds. When we flipped on the dynamic page cache, we ended up with a 161 millisecond response, and with the addition of the static page cache, we had a 48 millisecond response. Closer analysis showed that since Varnish already handled the same use case as the Drupal page cache (caching per exact URL), the dynamic page cache was the most performant option.

We automated a nightly deployment and subsequent crawl of site pages in a “Continuous Delivery” environment. While this was originally intended as a check for fatal errors, it gave us a very consistent snapshot of the site’s performance, since we were hitting the same pages every night. This allowed us to predict the performance impact of upcoming changes, which is critical to catching performance-killers before they go to production.

As a result of all the work done over the previous 5 months, we were able improve our content freshness (cache lifetime) from 60 minutes to 30 minutes.

April, 2018

We enabled HTTP2, an addition to the HTTP protocol that allows you to stream multiple static assets over the same pipeline.

We discovered that the HTML response was coming across the wire with, in some cases, up to a megabyte of data. That entire chunk of data had to be downloaded first before the page could proceed onto the static assets. We traced this back to the embedded SVG icons. Any time an icon appeared, the XML was being embedded in the page. In some cases, we were ending up with the exact same XML SVG content embedded in the page over 100 times. Our solution for this was to replace the embedded icon with an SVG “use” statement pointing to the icon’s SVG element. Each “used” icon was embedded in the page once. This brought pages that were previously over a megabyte down to under 80 kilobytes, and cut page load time for the worst offenders from more than 30 seconds to less than three seconds.

We reformulated the URL of the emergency alerts we’d added previously to specify exactly the fields that we wanted to receive in that response, and we were able to cut it down from 781 kilobytes to 16 kilobytes for the exact same data, with no change for the end users.

We switched from WOFF web fonts to WOFF2 for any browsers that would support it.

We used preloading to make those fonts requested immediately after the HTML response was received, shortening the amount of time it took for the first render of the page pretty significantly.

We added the ImageMagick toolkit contrib module, and enabled the “Optimize Images” option. This reduced the weight of our content images, with some of the hero images being cut by over 100 kilobytes.

We analyzed the “Did you find what you were looking for?” form at the bottom of every page, and realized that the JavaScript embed method we were using was costing our users a lot in terms of bandwidth and load time. Switching this to a static HTML embed with a snippet of JavaScript to submit the form had a dramatic improvement in load time.

The Mass.gov logo was costing the site over 100 kilobytes, because it existed as one large image. We broke it up so that the image of the seal would be able to be reused between the header and the footer, and then utilized the site web font as live text to create the text to the right of the seal.

Additional efforts throughout this time included:

  • Cleaning up the JavaScript. We found an extra copy of Modernizer, one of Handlebars, and a lot of deprecated JS that we were able to get rid of.

  • We removed the Google Maps load script from every page and only added it back on pages that actually had a map.

  • We lazy-loaded Google search so that the auto-complete only loads when you click on the search box and start typing.

Our work across these eight months resulted in huge improvements in both the front and back end performance of the Mass.gov site. We achieved a 50% overall improvement in the back end performance, and a 30% overall improvement in the front end performance. We continue to work alongside the Digital Services team on these and other efforts, striving for the best possible experience for every single user and constituent.

See the BADCamp presentation about this work here.

Expand
Reimagined on Drupal 8, in six sprints.

Processes
  • Agile/Kanban
  • Agile/Scrum
Team Leadership
  • Senior Producer
    Kelly Albrecht

In the fall of 2016, the Rainforest Alliance and Last Call Media launched an exciting redesign of www.rainforest-alliance.org, built on Drupal 8, employing seasoned agile software development methodologies. Our productive partnership with the Rainforest Alliance resulted in a technically groundbreaking site that allowed users unprecedented access to the riches of their content after just four months of development. The tool is now primed to drive the Rainforest Alliance’s critical end-of-year development activities. 

People seem really, really happy with it. YAY!!

Danielle Cranmer, Web Manager

Over the years, RA has cultivated a repository of structured content to support their mission. While the content is primarily displayed as long form text, there is a wide variety of metadata and assets associated with each piece of content. One of the primary goals of the new site was to enable discovery of new content on the site through automatic selection of related content driven by the metadata of the content the user was viewing. Additionally, RA had a future requirement for advanced permissioning and publishing workflows to enable stakeholders outside of the web team to play a role in the content lifecycle.

Rainforest Alliance shown on phones

Drupal 8 was selected for this project based on several factors. First, its focus on structured data fit well with Rainforest Alliance’s need for portable and searchable content. Second, the deep integrations with Apache Solr allowed for a nuanced content relation engine. Solr was also used to power the various search interfaces. Third, Drupal has historically had powerful workflow tools for managing content. While these tools weren’t quite ready for Drupal 8 when we built it, we knew they would be simple to integrate when they were ready. In short, Drupal was a perfect fit for the immediate needs, and Drupal 8 met the organization’s longer term goals.
 

We’ve been getting lots or praise, internally and externally.  Brava, team!

Melissa Normann, Senior Manager Web Strategy and Development

At the close of Sprint 6, there were zero critical and only 3 moderate issues to address. The final Sprint/Project review had only 3 support questions, launching as arguably the most impressive Drupal 8 site launched within a year of the initial release of this latest major version on the Open Source CMS, and most importantly, in time for Rainforest Alliance’s major end-of-year donation campaign. The site delivers on its promise to showcase the Rainforest Alliance’s exciting and informative messages and beautiful imagery, and stands as testimony for the efficacy of the agile approach.

Read the full case study here.

Expand
Leveraging our Scaffolding and Drupal 8.

Processes
  • Agile/Scrum
  • Continuous Delivery
Team Leadership

Since early 2014, LCM has continued a productive, ongoing partnership with Chicken Soup for the Soul, and supports their web properties and the associated infrastructure. Recently, Chicken Soup asked LCM to launch two new and completely different Drupal 8 sites within a month. LCM worked off of prototypes from Chicken Soup for the Soul and was trusted to move quickly. By deploying two separate teams of 2 developers, LCM was able to take each site from prototype to launch on D8 and Pantheon within two weeks, while another team maintained the ongoing feature release schedule on Chicken Soup for the Soul’s massive Drupal 6 site.

In June of 2016, Chicken Soup needed a simple site for their rapidly-growing television and online programming production and distribution business. The site needed to handle a collection of content pages and videos, and was intended to be another microsite that would follow some standard templating and functionality as laid out for previous Chicken Soup sites LCM had worked on, and new sites that were still to come.

Chicken Soup was looking for an alternative approach.

Building new features to support growing business lines inside their massive aging Drupal 6 site was becoming unsustainable. Over time, the site had accumulated so much functionality that each deployment ran a high risk of breaking something, which led to lengthy deployments. Recognizing that issue, a plan was developed in partnership with Chicken Soup for the Soul to spin out a series of smaller, more focused sites sharing a similar architecture. Drupal’s modular architecture, and particularly Drupal 8’s approach to dependency management, made it a great fit for this task. Additionally, while the core CMS functionality of Drupal 6 worked well, the UI was becoming dated and cumbersome to work with. Drupal 8 featured a lot of usability enhancements, such as the built in WYSIWYG, that would make the site much more usable overall. Finally, the feature set of the site was tightly focused, and after consideration, we were able to implement it with a small handful of contributed modules, and very little technical debt. 

Following on the success of the Chicken Soup for the Soul Pet Foods site, Last Call Media used a similar formula: leverage Drupal 8 core wherever possible, and avoid contributed modules. This was a great strategy in terms of avoiding the turmoil of early Drupal 8 contrib churn, and had the side benefit of keeping the site very lean and performant. After experiencing some past pain points in using the bare “Configuration Management” system in Drupal 8, we chose to use the Features module on this project. Features makes it easy to bundle configuration into modules, and makes it easier to share configuration (in the form of Drupal modules) between the brand’s sites should the need arise in the future. 

The site uses Last Call Media’s boilerplate Drupal 8 scaffolding build, which helped jumpstart the development process by providing a suite of best practices and quality assurance tools with no extra effort.

The goal of this project was to build a flexible marketing site capable of showcasing Chicken Soup for the Soul’s entertainment offerings; primarily their TV shows and online videos. The biggest obstacles the project faced were the looming deadline, the relative instability of Drupal 8 immediately following the initial release, and the lack of contributed modules that were available to us. For example, the Media-related modules we would normally use for the online video section were not stable yet. Instead of using a media/file entity as we normally would to store an online video, we leveraged Drupal core’s new URL field to store the URL of the Rumble video, and used a field template to output an embed link. It was a simple and elegant solution to a difficult problem. 

Thanks to excellent communication with Chicken Soup for the Soul’s Digital Strategy team, and Last Call’s experience in working with Drupal 8, we were able to turn the project around in just two weeks. This met the deadline set by the marketing team, and achieved all of the goals that were set out. 

Expand
Pet food microsite, built in two weeks.

Processes
  • Agile/Scrum
  • Continuous Delivery
Team Leadership

Since early 2014, LCM has continued a productive, ongoing partnership with Chicken Soup for the Soul, and supports their web properties and the associated infrastructure. Recently, Chicken Soup asked LCM to launch two new and completely different Drupal 8 sites within a month. LCM worked off of prototypes from Chicken Soup for the Soul and was trusted to move quickly. By deploying two separate teams of 2 developers, LCM was able to take each site from prototype to launch on D8 and Pantheon within two weeks, while another team maintained the ongoing feature release schedule on Chicken Soup for the Soul’s massive Drupal 6 site.

In June of 2016, Chicken Soup needed a simple site to promote their line of wholesome pet food and message of overall health and wellbeing for dogs and cats. The site needed to handle a collection of content pages for products and species, as well as a store locator to show users where their products are available. The Chicken Soup Pet Foods site is a microsite that follows standard D8 templating and functionality, as laid out for previous Chicken Soup sites LCM has completed, and new sites that are still to come.

Chicken Soup was looking for an alternative approach.

Building new features to support growing business lines inside their massive aging Drupal 6 site was becoming unsustainable. Over time, the site had accumulated so much functionality that each deployment ran a high risk of breaking something, which led to lengthy deployments. Recognizing that issue, a plan was developed in partnership with Chicken Soup for the Soul to spin out a series of smaller, more focused sites sharing a similar architecture. Drupal’s modular architecture, and particularly Drupal 8’s approach to dependency management, made it a great fit for this task. Additionally, while the core CMS functionality of Drupal 6 worked well, the UI was becoming dated and cumbersome to work with. Drupal 8 featured a lot of usability enhancements, such as the built-in WYSIWYG, that would make the site much more usable overall. Finally, the feature set of the site was tightly focused, and after consideration, we were able to implement it with a small handful of contributed modules, and very little technical debt. 

After experiencing some past pain points in using the bare “Configuration Management” system in Drupal 8, we chose to use the Features module on this project. Features makes it easy to bundle configuration into modules, and makes it easier to share configuration (in the form of Drupal modules) between the brand’s sites should the need arise in the future. The site uses Last Call Media’s boilerplate Drupal 8 “scaffolding” tool, which produces an artifact build, and provides a lot of best practices and testing tools out of the box. Other than that, we worked hard to use as much of the core D8 functionality as we possibly could to reduce our future technical debt as contributed modules matured.

The goal of this project was to build a flexible marketing site capable of showcasing Chicken Soup for the Soul’s line of pet food products, promoting the retailers that sell those products, and building flexible pages containing multimedia content. The biggest obstacles the project faced were the looming deadline, the relative instability of Drupal 8 immediately following the initial release, and the lack of contributed modules that were available to us. For example, the Addressfield/Geofield modules we would normally use for the “Find a Retailer” feature were unavailable to us, and we were forced to get creative. We ended up using Google’s Fusion Tables as a datasource, with some javascript to embed the data on the page and provide the interactivity. Overall, this was a great tradeoff, since it allows us to offload the import/edit UI and the proximity to a third party, whereas the old solution required building a custom importer to bring a CSV into Drupal, and a number of slow spatial queries to be made against the database.

Thanks to excellent communication with Chicken Soup for the Soul’s Digital Strategy team, and Last Call’s experience in working with Drupal 8, we were able to turn the project around in just two weeks. This met the deadline set by the marketing team, and achieved all of the goals that were set out. 
 

Expand
A Hub for Emergency Preparedness.

Processes
  • Agile/Scrum
Team Leadership

San Francisco takes emergency preparedness seriously.

As the fourth largest city in California, the city also serves as a center for business, commerce and culture for the West Coast. To support the City of San Francisco’s commitment to emergency preparedness, the Department of Emergency Management designed and developed a campaign to drive citizens to better understand how to be prepared in the event of an emergency. And in the unfortunate event that disaster does strike, the platform transitions to a communication platform where citizens can find the most up to date information directly from the City.

DEM had invested significant effort into creating a very engaging website to communicate to the public about emergency preparedness. However, the site was developed in a way that did not facilitate quick and easy content changes - a critical need when up-to-the-minute accurate information is needed. The site also fell short on a number of accessibility metrics.

How we did it.

When it’s business as usual, the site serves as a platform to generate awareness for how someone can better prepare themselves and their family in the event of an emergency. Visitors can download checklists, and complete forms, in addition to reading about how to prepare for different kinds of disasters, like an earthquake or tsunami. However, in the event of an emergency, the City can quickly enable a separate emergency home page which presents visitors with vastly different dynamic content updated in real time specific to the emergency, including an embedded interactive Google Crisis Map that displays information aggregated from a variety of external sources managed by the City.

Last Call Media provided a direct replacement of the existing site in Drupal 8, leveraging the out-of-the box D8 accessibility features and the user-friendly D8 in-place content editing interface. We also reduced the maintenance burden by bringing the blog, which had been a separate site, into the main site.

Our accessibility audit revealed that the original color palette used for the site designed relied heavily on colors that did not meet WCAG 2.0 contrast requirements. We were able to identify a compliant color scheme that remained within the existing brand guidelines for the new site. The site also relied heavily on icon fonts which were not taking advantage of Unicode’s private use area, and the HTML elements displaying the icons did not use appropriate ARIA attributes. Rebuilding the icon font and HTML markup to take advantage of those tools helped to greatly improve the screen reader experience for the site.

Another area that needed improvement was general accessibility related to interactive elements. Sections like flyout menus and tabs were difficult to navigate via keyboard, and were missing ARIA attributes that make them easier to understand and use. During the rebuild we switched away from using mostly-homegrown CSS and JS, and leveraged the Foundation CSS/JS framework instead. This change provided a couple of benefits - many of the missing accessibility features are included in the components provided by Foundation out of the box, it helped keep the nuanced details of the styling more consistent across different areas of the site, and it expedited the development process as well.

The City of San Francisco now has a means of communicating its emergency preparedness message with a site that is engaging, nimble, and robust.

Expand
Best-in-class content delivery and caching.

Processes
  • Continuous Delivery
Team Leadership

As part of our ongoing engagement with the Commonwealth, we identified an opportunity to improve customer and constituent experience by leveraging the Cloudflare CDN (Content Delivery Network). Following the initial discovery phase, we architected, implemented, and deployed Cloudflare’s Global CDN product to give the site best-in-class content delivery and caching, while maintaining all the functionality of the previous CDN while improving development capabilities.

Creating Undetected Changes.

In the discovery phase, we reviewed the marketplace to find the most appropriate CDN for the State’s use case, balancing security, performance, and cost considerations. Ultimately, Cloudflare was selected as the best fit because of its extensive firewall and DDOS protections, and granular cache control using “Cache Tags,” which have the potential to boost performance for the constituents and reduce the risk of site instability.  

The first, and perhaps most critical concern we addressed in the course of this project was that the CDN needed to be resilient, serving pages even if the site itself was not functioning properly. For example, the development team does code releases periodically that take the backend of the site completely offline, but constituents still need to be able to access content during this time. To meet this requirement, we adjusted the site’s caching headers to include directives to serve cached responses in the event of an error response received from the origin.  As a result, constituents are able to access the majority of Mass.gov, even if a catastrophic event takes the web servers completely offline.

As a government website, Mass.gov is always at risk of attack from malicious actors. To mitigate this risk, Last Call Media undertook extensive configuration and testing of Cloudflare’s various security features, including the Web Application Firewall (WAF), DDOS protections, and custom firewall rules. We had a few hiccups along the way with configuring the security features (at one point, content authors were receiving CAPTCHA verifications when submitting their changes), but were ultimately able to work through these issues to dial in the right balance of security and ease-of-use.

Next, we implemented Cloudflare’s brand new “Workers” feature, which gives granular control over CDN functionality using a javascript “service worker.” The Worker we wrote for this project handles more than 6 million requests a day, and gives the Commonwealth the ability to test and deploy CDN level changes to development, staging, and production environments independently, making it much faster and safer to verify and release changes. The worker implementation benefits the Commonwealth giving them flexibility for the future, while also reducing cost over the previous CDN.

These workers were also integral to the success of this migration beyond what we had initially imagined. During the testing and release phases of the project, they gave us a mechanism for fixing changes that was reviewable and testable. Having a well-defined review and deployment process improved the team’s visibility into what changes were being made, and let us avoid silly mistakes. Overall, we felt the development team’s velocity was greatly improved by using this workflow.

The migration went as smoothly as possible, there were no negative results.

Mass.gov raved:

I hope you are puffed up with pride. We simply couldn’t have done any — much less ALL — of this mountain of work without you. You’ve been a rock. Well, a very hard-working and creative rock. We are so lucky to have your help.

Lisa Mirabile, Project Manager

For the future we envision phase 2 to be granular cache invalidation. This would mean when a piece of content changes, the CDN would only invalidate only that piece of content so it’s fresh in the cache. What that allows us to do is set really long cache lifetimes on the edge content. We would be able to cache pages for even a year and rely on the invalidation to make them fresh when we need to be, reducing the load on the backend servers significantly. In its current state, pages now only get cached for 30 minutes. With a longer available cache time, we’d see immediate results for less load time, it would be less costly for infrastructure, and lessen the chances for a backend disruption.

Expand
Blackboard’s shift to a solution-driven digital experience

Team Leadership
  • Art Director
    Colin Panetta

Blackboard is the largest education technology company in the world, serving nearly 100 million users in every region of the globe. Their comprehensive suite of products and services power institutions looking to teach, engage their community and provide a dynamic educational experience to students. 

Blackboard is an innovative, fast-moving organization, and their digital marketing tools needed to support that. To drive their next phase of growth, Blackboard engaged Last Call Media to build a global marketing platform on Drupal 8. The ability to iterate quickly, launch new marketing campaigns, and spin up sites in new regions is crucial for the Blackboard team. Ultimately moving faster means a better chance of competing against an increasing number of competitors. 

Last Call Media set out to help Blackboard test and implement a bold new approach to digital marketing, and as a result, transformed the way Blackboard.com reached and engaged educators.

How we did it

Surfacing Blackboard’s value proposition in the main navigation

The largest opportunity with the new global marketing platform was shifting how Blackboard connected with its prospective customers.

Originally, a prospective customer’s journey would begin with selecting their industry to dive deeper into a plethora of information about the different products and services. This experience was informative, but it didn’t make it clear that Blackboard’s competitive edge is not in any one individual product but rather in the interconnectedness of their various products, and how they come together to build a dynamic educational ecosystem, regardless of a customer’s industry. We worked with Blackboard to transition from an industry-focused navigation, originally:

To journeys that surface Blackboard’s value streams first: Teaching & Learning, Community Engagement, and Consulting Services. 

Given the importance of Blackboard.com as a marketing tool to drive revenue, we knew we needed to test our efforts in order to identify any usability issues before the site went live. To do this, we conducted in-person user testing at Blackboard’s annual user convention, BbWorld. We gained valuable insight that informed the final structure of the site navigation. Having positive and constructive real-world user feedback was essential in gaining stakeholder buy-in on this new approach. 

Now, Blackboard.com with its revised primary navigation helps connect prospective customers to the different ways Blackboard provides value to its customers. 

Empowering global marketers through a consistent UX 

Prior to the new platform, one of the major challenges Blackboard’s marketers had with the former Tridion content management system was efficiency. In the past, every page needed to be built manually by Blackboard’s internal web team. Marketers used to submit a form to the web team. Often faced with a backlog several weeks long, the web team created it from scratch as soon as possible. A draft page would be created, sent back to the marketer, and any edits would be returned in a document. This could take several days at best to release a new page or changes to an existing page. 

Blackboard marketers can now add and edit content easily while remaining on brand and demonstrating Blackboard’s impact around the globe.

After understanding this process, the different types of content needed and ways that content can be presented to support the new user journeys, we delivered a collection of over a dozen flexible components. Now marketers worldwide are able to create and edit pages on their own, reducing time to market and costs, and the web team is able to focus on other higher value-creating activities. 

Powered by a modern CMS, Drupal 8  

Blackboard needed an enterprise-grade CMS that was capable of scaling to meet their increasing marketing needs while also remaining easy for their content authors to manage. Drupal was a great choice for Blackboard as it enabled them to respond and make content and code-level changes quickly, including introducing new functionality.

The next iteration of the Blackboard brand, supported by a pattern library

The new platform provided an opportunity to rethink how Blackboard uses space and colors so their digital properties are more consistent in look, feel, and structure to their products. 

Blackboard started using color more sparingly and with greater purpose, and the new platform better utilizes white space and reserves color to truly highlight the content Blackboard wants to bring front and center. Subtle variations in the “Call-to-Action” button styles were added to make it clearer to the site visitor what the next step is. With the new platform, Blackboard has removed many of the bright yellow buttons and softened their approach and introduced a few more “friendlier” color options to their web palette. The outcome here is that Blackboard.com, the flagship marketing platform looks and feels consistent with Blackboard’s products and services. 

A globally consistent brand experience with localized messaging   

As a global company, Blackboard’s marketing team needs to be able to quickly position their products and services to customers in those markets directly, in their language. Further, Blackboard’s marketing and content strategy varies per market and therefore often by language. Simply translating pages into different languages was not sufficient given it’s often the case that not all products and services are available in all markets, and even when they are they are often positioned differently. A product may be marketed differently in Spain and in Germany while also not being available in Australia, for example, which means we needed a different approach to translation that supported localization. Blackboard’s new Drupal 8 site had to not only provide content in different languages but also content specific to each visitor’s geographic location. 

To support this, we built a Global Site feature in the new Blackboard.com that allows the Blackboard marketing team to spin up and manage new sites in different languages quickly without the need to engage development. At launch, this included close to two dozen sites in around 14 different languages.

We extended Drupal 8 core’s translate functionality to support the variations in language between American English and Queen’s English and Latin American and Castilian Spanish while maintaining flexibility so that content could also be localized for different regions. 

Blackboard’s requirements were complex and caused us to rethink our typical multilingual strategy. Instead of creating a site that supports content in multiple languages, we built a localization platform that takes into account available product offerings as well as language and regional nuance - creating a platform for an organization that is not only multilingual but truly global.

A commitment to web accessibility 

Blackboard and Last Call Media share a commitment to ensuring what we create is fully accessible to all audiences, regardless of ability. To that end, we had accessibility needs in mind from the very beginning. Our cross-functional approach to product development meant that we were able to validate early on that our work would meet WCAG 2.1 minimums, and by engaging users of assistive technology to assist with testing as development progressed, we knew that the release would also be truly usable on day one. 

Our initial objective was to help Blackboard respond faster to changing customer demands worldwide by improving the content authoring experience for their marketing team, empowering their internal development teams to sustain and iterate on the platform for the long haul, and reducing operating costs. 

With input from Blackboard’s customers and employees, we led the delivery of an improved user experience for Blackboard’s community, created a platform to showcase their products and services, and helped Blackboard tell the story of how they continue to positively impact learners, educators, and institutions around the globe.

The relaunched Blackboard.com saw a decreased bounce rate on the homepage, more users finding their destination quickly, and a dramatic increase in traffic to the free trial page. The new flexible, modern, engagement platform for Blackboard is more a customer-focused digital experience and supports their current and future marketing objectives. It has helped Blackboard thrive in a constantly changing and increasingly competitive edtech environment.

Expand
Bringing buyers and sellers closer together.

Processes
  • Agile/Kanban
Team Leadership

As the world’s largest independent marketplace for digital advertising, AppNexus delivers powerful enterprise technology for buyers and sellers of digital ads. The marketing team at AppNexus needed a robust digital platform to communicate their value, experience, and products to bring potential ad buyers and sellers together to support their goal of creating a better internet.

After the completion of a series of creative exercises, the LCM team delivered a modern, dynamic, global rebrand of AppNexus.com in fewer than 5 weeks. The platform tested well with key audiences and led to tangible positive business outcomes for AppNexus, including helping facilitate their multibillion-dollar acquisition by AT&T

Theming swiftly and efficiently with components 

One of the major outcomes of this project was a dynamic yet simple to use site building experience for content authors and theming experience for front-end developers. A component-based approach allows AppNexus to browse a library of reusable content patterns to build pages that are on-brand throughout the site while also making it easier for front-end developers to implement creative feedback. 

Using Mannequin, our component library tool, the front end team was able to focus on standard front end technology without worrying about CMS implementation details to quickly theme the front end using paragraphs. This was useful as many of the front end developers on the team were not familiar with Drupal but were able to theme parts of the site easily using Mannequin. 

The homepage animations, a critical piece to the visual experience, were delivered by the front end team who used particles.js. 


Managing first impressions and talent recruitment in one spot

To support their rapid growth strategy, AppNexus needed a robust careers section, “Life at AppNexus”. The careers section highlights the authentic employee experience at AppNexus, the various teams, the application process, and clear calls to action to their Applicant Tracking System (ATS), COMPAS, which is embedded in the Drupal CMS. Job applications are pulled in from COMPAS. With this new talent acquisition initiative in place, AppNexus is able to efficiently promote itself as a desirable place to work and creating a positive first impression for prospective candidates, leading to increased direct hires. 

Increasing analytical visibility using Marketo

By implementing a Marketo integration that sends form responses directly into predefined workflows in AppNexus’ CRM, we were able to give more visibility into valuable business analytics that were not previously captured. AppNexus was also able to utilize their content more effectively for lead generation, by introducing gated content such as whitepapers.

With multiple vendor involvement and a tight timeline, the AppNexus project had a lot of moving parts from the start. Even with frequent changes, LCM, the creative agency, and AppNexus benefited from a frictionless, highly collaborative, and efficient working relationship, which lead to a compelling and well built finished product. 

Expand
Let’s make moves!

Team Leadership
  • Art Director
    Molly Taaffe

This summer, Last Call Media teamed up with Blackboard to build a new customer-facing site, using a component-based design system that could afford content editors novel flexibility while still reaping the benefits of a content management system. 

In building out Blackboard.com in Drupal 8 this summer, we found a fresh opportunity to position Blackboard as a user-friendly, customer-focused, and modern brand — the big idea was to introduce subtle elements of motion design into the theme in order to create a more engaging user experience. 

So, once we’d built out the new site architecture, components, and theme, we shifted our focus to visual refinement; our goal was not only to guide users through their experience through the use of animation, hover effects, and motion design, but also to delight visitors in subtle, unexpected ways by thoughtfully introducing some of these elements into the theme.

Goals

The main goal of this effort was to liven up the site and encourage users to interact with elements on the page. As an unintended consequence of implementing a highly flexible component-based theme — in which pieces of content could be mixed and matched in basically unlimited ways on any given page — the overall look and feel had come out very clean and organized, but at the same time more boxy and “dull” than we’d anticipated! Alongside this, there was also the challenge of giving the theme an institutional, educational feel that still felt friendly and helpful instead of overly corporate and austere. 

Process

The first step in the process of adding microinteractions was to make sure the interactions were unified in their intent. For example, a rise on hover means the item is clickable, and if implemented on something that doesn’t click, would confuse the user.

Hover is a near universal sign for “this is clickable”, so we utilised a hover effect with shadow for the menu. For buttons, we opted to change from a simple color fade on hover, to a left to right swipe to change the color. This is more engaging than a simple color change, but it isn’t distracting from what the call to action is asking the user to do. It also matches the movement exhibited in the menu when items are hovered over. This addition of motion design to the menu helps users better understand where they are in a detailed navigation, and have a stronger understanding of the menu and product hierarchies.

menu interaction example

Some other elements of movement added, purely for aesthetics and to engage the user, were a hover effect where the background shapes move behind a product shot when moused over. This added interest to otherwise somewhat repetitive images of computers, and hopefully caused the user to take a second look. Another was a fade and slide in of images, from the side the image is on. This creates a very welcoming feeling as you scroll down the page. In addition, we added a video background to the banner area of the homepage, tinted Blackboard blue so as not to distract from the text and call to action button over it.

pause video example

In order to maintain our accessibility standards we had to think about users that may not be comfortable with the video at the top of the homepage, so we included a pause button to stop it from playing.

pause video example

Results

The team at Blackboard is happy with the results of this effort, and it brings a really fresh engaging experience to the site. We would love to do another round of user testing (link to solution story about that) to see how or why these additions add to the site for users.

Microinteractions are a great way to engage the user, and add a wow factor to your site. However, we believe that handling these specifically and thoughtfully is the only way to achieve an effect that really makes sense to the user, rather than just a decoration. This means that every movement and reaction should be consistent and rational, with a meaning and result that are predictable to the user after a short period of interaction. We look forward to bringing what we learned here to anything we work on to add another level of sophistication.