When The Communications Network contacted Constructive to design the most recent addition of its biannual print publication, Change Agent, we were flattered. We’re a proud member of ComNet and have always appreciated its ability to elevate important issues at the intersection of strategic communications and social change. The opportunity to help push thinking and connect readers to fresh ideas naturally appealed to us. That we’d be given creative license to redesign the issue from the ground up was icing on the cake.
All good design exercises begin with discovery, and our engagement with The Communications Network was no different. We discussed collaboration—the idea that even with both of our teams on the project being relatively small, a partnership built on trust would enable us to accomplish some truly ambitious goals. We discussed the concept behind Change Agent—that it’s not just a series of one-off publications, but something that’s continuously evolving. We discussed the content—deep, inspiring narratives from leaders across the field, stories that deserve telling and retelling so that audiences can apply vital insights to their own work. And of course, we discussed design—the notion that to be effective, design must be purposeful, and it must meet the audience where they are, in whatever medium they prefer.
We can’t emphasize the importance of this last point enough. According to a 2016 study by Nielsen, we now spend almost 11 hours consuming digital media each day. Tablets, smartphones, and PCs are leading this growth, with 63 percent, 60 percent, and 21 percent year over year increases, respectively. So, from the very start of this engagement, it was obvious to all that for Change Agent to be effective as a design solution, it had to honor its name and change significantly—from a printed artifact into a transmedia experience that reaches audiences wherever they are.
Putting printed matter online isn’t a particularly innovative idea. The problem thus far with conventional approaches is that they aren’t actually designed for the web. This may seem obvious, but we believe the implications are deeper than many may realize. Most attempts to bring print content online involve posting a low-resolution PDF on a website or embedding it in an online PDF viewer such as Issuu. While we may all get a kick out of those skeuomorphic page transitions, there are serious limitations to this approach—namely, that the content is still locked up in a PDF! That translates to a poor content consumption experience for smartphones and tablets, with none of the baseline benefits that web-native content offers, such as navigability, shareability, and analytics.
Figure 1: Average Time Spent per Adult per Day Based on the Total U.S. Population
Thus came our dilemma with designing Change Agent; authors contributed some amazing, engaging content, and it would have been a crime to lock it up in a PDF where no one would find it. The content deserved to be appealing, interactive, and accessible; it deserved to be print-native and web-native at the same time; it deserved to be transmedia.
The key to creating an effective transmedia experience is to start with a medium-agnostic, content-centric process. Rather than designing a print product and attempt to retrofit that to the web, or vice versa, we focused on developing a core design system, with type, colors, content structures, design patterns, and media that could be adapted to both print and web.
Of course, it’s impossible to create a universal design system that is 100 percent consistent across print and web; each medium offers different strengths and weaknesses. Print is suited to long-form narratives, with high-resolution media, sophisticated layouts, and a linear, horizontal reading experience. Digital products, on the other hand, lend themselves toward shorter, more digestible narratives; with interactive media, simpler layouts for smaller screens, and a non-linear, vertical reading experience. So creating a cohesive design across media required first drawing on our collective experience across each medium to establish the common core of a design system, and then leveraging each medium-specific design system to its fullest expression.
Figure 2 Transmedia Production Process
In print, production is relatively straightforward; you design a document, print it, and distribute it. Online, production is far more challenging. To shorten our runway, we relied on Exposition™, a long-form publishing platform Constructive debuted in late 2016. Designed to support immersive, responsive experiences for long-form narratives, we felt this WordPress-based platform was ideally suited to meet the challenge of making Change Agent more accessible, engaging, and extensible.
To streamline the content development and population with our design systems, we devised a custom workflow integrating commonly available applications and processes. Google Apps served as our transmedia content management system: we used Spreadsheets to organize everything in a content matrix, Docs to collaborate and update various articles in real time, and Drive to share all of the media files. We then integrated these with the print application (Adobe InDesign) and web technology (Exposition / WordPress) in such a way that we could flow and reflow content dynamically—ensuring that print and web always matched. By integrating the content deployment in this way, our team could focus its attention where it added the greatest value: applying the core design to the print and digital systems and maximizing their native strengths.
We love working on projects that challenge us to innovate and not only design deliverables, but also design the processes that allow us to collaborate with multiple teams and work across mediums. Fortunately, ComNet trusted us enough to allow us to stretch our legs and run as far and as fast as we could. That, in turn, translated to a better outcome. We hope you agree that it shows.
Check out the digital version of Change Agent here to see the final result!
Projects & Insights
Content-Heavy Websites: Designing for Density
How timeless design principles like white space, spacing, and layout help us address
Wallace Foundation Website
Web Animation: Delightful or Distracting?
Web animation can amuse your users and increase engagement with your site, but used i
Put Your Content First: Prioritizing Features During a Website Overhaul
Now and then, flashy website features serve content and user experience to great effect. But outside of serving those sacred goals, why else would you need them? As a developer who works on fancy features, I think it’s important to consider your return on investment.