Athletics

Better Embedding

Athletics is constantly seeking smarter ways to weave brand and digital more tightly together, with the aim of creating more impactful, innovative, and interesting work for our clients and ourselves. We often refer to our core offering as two-fold: we create digital-first brands (or, brands built to thrive in digital environments) and brand-first digital experiences (or, experiences fundamentally rooted in a unique brand identity and strategy). Whereas in the past, brands were often treated as “clothing” applied to an agnostic and predetermined scaffolding of UX, today, the innate strategies, behaviors, and personalities we create for brands form the very bedrock of the experiences we commit to code and launch into digital space. 

Jameson Proctor, Executive Digital Director at Athletics, believes the core benefit of a “brand-first digital” approach is its capacity to increase the fidelity of brand expressions: “By taking a tools not rules approach, we can bake governance into the very means of expression, creating theoretically foolproof systems for teams to operate.” Having shepherded such Athletics builds as The New York Review of Books, Amplify Reading, and The Counter, Jameson sees this approach as imperative to the success of modern brands, publications, businesses, and organizations: “Now more than ever, the needs of content creators must be given the same consideration as the audiences for which they create content. Otherwise, we won’t be able to create the kind of digital tools they need to engage and retain their audiences.”

Periodically, we like to share our latest insights relating to the intersection of brand and digital. Having previously explored subjects including responsive vertical spacing (read that here) and Figma (read that here), we now turn our attention to an elegant solution to the perplexing challenge of embedding. As with previous installments in this series, we’ll use a specific Athletics project to elucidate a general issue, in this case, Workflow Quarterly, a digital publication from ServiceNow. (If you’re curious for a more scaled-back view of this project, we encourage you to explore the full case study here.) Here to guide us through this creative inferno are our very own Virgils — Design Director Allison Connell and Senior Creative Technologist Richard Lehmann — the duo that drove our discovery of a better way to embed.

The Context

But first, some context. ServiceNow develops and distributes innovative workplace automation software. In 2019, ServiceNow enlisted Athletics to conceptualize, design, and develop Workflow Quarterly, an online publication focused on digital transformation strategies. We were challenged to create a flexible, immersive system to present this original research in a compelling narrative format, then implement the system through eight issues across two years.

In 2020, having launched six issues, our team was presented with a challenge demanding significant technical and creative consideration: translating the bespoke features we’d created for Workflow Quarterly to new environments, including owned channels such as ServiceNow’s C-Suite Center, as well as non-owned channel such as Forbes BrandVoice.

To Design Director Allison Connell, finding a solution was integral to the continued circulation of high-value assets within the ServiceNow ecosystem:

“We had designed and developed a series of interactive quizzes and data visualizations for the first few issues of Workflow Quarterly. Each quiz was unique, with variation in the granularity of results, graphics, basic structures, and beyond. Data visualizations were informationally and visually compelling, with built-in interactions that breathed life into cold data in interesting and unexpected ways. When we encountered a need to publish these features in other environments, we realized that tackling custom development for every occasion would’ve required an enormous amount of effort and resources.”

Our team was faced with a choice: accept that these pieces simply weren’t born to travel, or find another way. Refusing to capitulate in the face of complexity, we put our heads together, and started to think.

The Opportunity

Senior Creative Technologist Richard Lehmann spearheaded our technical solution, creating a tool that allows us (or the ServiceNow team) to build easily embeddable page elements that travel effortlessly across environments, showing up beautifully, anywhere. 

“Our solution employs Preact as an alias for React. Preact is a fast, 3kB alternative to React with the same modern API. Having the same API means we can drop in existing React components. Our final embeddable scripts remain relatively small, while still leveraging all the state management and templating logic of the full React library. 

Storybook becomes a stand-in for our CMS. Using ‘knobs’ within Storybook, React components can be controlled by interactive form elements but also as parameterized URLs for easy sharing. Knobs can define colors, text, numbers, lists, files, and true or false (Boolean) inputs, all customized within a standard React component. These Storybook props are written into embed markup as knob inputs are changed, which can then be copied and embedded onto a webpage. 

Storybook can be configured to scan extension patterns like .stories.js, creating an active directory of the available component stories. Their hierarchy tree can be organized to keep component types grouped for organization. This is great for ServiceNow when we want to create bespoke experiences but need a branched version of a certain component to keep it in the same group hierarchy.

Each Storybook “story” becomes a preset for an embeddable component, while still retaining configurability. The Service Now Quartile Charts, shown below, epitomize this. We’ve extended several versions, including a 3-bar and 4-bar variation.

 

 

Using styled components for CSS styling is an excellent solution for embeddable content. Since styled components are React components (and compatible with Preact) they are a great way to bundle CSS styles without having to manage CSS file requests. Since each styled component has a unique className, they are already namespaced, thereby easing style conflicts with other styles the embedded content will coexist with.”

The approach described above solves for the primary challenge of syndicating “site-specific” quizzes and data visualizations across environments. But for data visualizations specifically, the benefits of this approach far exceed portability. Allison explains:

“From a design perspective, within Storybook we can now build data visualizations as dynamic, fully responsive assets. Among other things, this means they are now readable on mobile, solving the common problem that data visualizations and charts are often built for desktop environments.

From a process perspective, the benefits are immense. Creating a single data visualization had previously required sourcing data, creating a chart using a chart builder tool, using Adobe Illustrator to get the proportions right, transferring it over to Figma to apply branded styles, exporting it, inputting it into a PDF with notes for review, then editing, repeating, iterating, and finally passing it off to a developer to code. If there were even minor edits after that point, you had to enlist a developer to adjust or change in code. With the new tool, the process looks very different. First, you locate the data, entering it into the Storybook tool. Then, you simply copy the embed code into a draft article for review (a fully responsive environment identical to the actual site). For edits, you can go back into the Storybook tool. In practice, anyone with a basic knowledge of this tool can now create beautiful data visualizations.”

 

The Future

We envision a future in which the power of content management systems isn’t limited to entering copy, uploading images, and embedding videos. Rather, we’re working toward a state in which even non-specialist users are empowered to create high-value experiences using purpose-built tools. In the world of brand design generally, guidelines, templates, and content packages are already being replaced by digital tools that bring brand identity and strategy to life without requiring extensive technical knowledge to operate. The difference is subtle, but the idea of an “unbreakable” brand has deep practical implications. As Jameson sees it, “The responsibility of the creative studio is rapidly evolving from building brands based on business and organization goals, to imagineering digital tools that serve brand goals in their very nature.”