The Atlantic: Designing Newsrooms

My role: Design Lead

Dates: July 2013 to August 2015

While other news organizations were struggling with the transition to digital and monetization, Atlantic Media was thriving. It was mostly attributed to the quality of the content, but also publications like Quartz (which has since been sold) and The Atlantic deeply understood online behavior and how to leverage social media to drive traffic. This was also an opportunity for other revenue: building the same capability, as products and newsrooms, for clients that desired The Atlantic’s “secret sauce”.

I joined the consultancy, Atlantic Media Strategies (now Atlantic57), as the first designer in July of 2013 as the team landed a major engagement with C-SPAN. It was up to me to establish a design process and execute, as well as define future design engagements for the Sales team. I went on to lead design for other client engagements, hire and manage a team of designers, and shape a design practice alongside my product and engineering teammates.

*Many of the websites referenced below have been altered in the years since launch and may not still reflect the original design.

BAH-Deck_r3-2-1
BAH-Deck_r3-3
BAH-Deck_r3-5
BAH-Deck_r3-7

Challenges

The biggest hurdle was helping clients to begin thinking of their web properties as a product, not a platform to shout from. We needed to give their users something of value—tools, insights, and content—that would create a community around the thought leadership they provided. 

For C-SPAN, our task was to consolidate multiple properties into a responsive site that focused on the value they provided: video. A small percentage of their audience were “power users”: searching and filtering for specific videos to use in academia, politics, or journalism. However, as a public service, C-SPAN wasn’t reaching the general public with valuable content that informs our democracy. These potential novice users needed a clear navigation and search functionality, a simpler account management experience, and more contextual education regarding the complexities of Congress. Technical challenges centered on making the video experience accessible and device agnostic.

Similarly, The Chicago Community Trust and The Association of Schools and Programs of Public Health (ASPPH) had a wealth of content buried in pdfs to surface and needed tools to help their users find specific content to take action. As with C-SPAN, we needed to prioritize the actions to take and organize the content in a way that users would understand, not reflecting the organization’s structure and internal politics.

Screen-Shot-2020-02-10-at-8.50.37-AM

Companies like Marsh and McLennan needed to create a news site for thought leadership surrounding risk management, showing the urgency and relevance of the topics, and becoming a go-to source. The design needed to reflect that while the site is owned by the client, it was not a corporate mouthpiece and that contributors from across the industry would be writing articles. This meant setting up a newsroom, with a new name and brand that would appear related but separate: Brink. We pulled heavily from our internal knowledge base, particularly Quartz, to know what would be most effective.

Other clients, like GE, The Council on Foreign Relations, OPower, and Everytown, needed smaller standalone tools and data visualizations to highlight data and initiatives. For example, The Center for Preventive Action at the Council on Foreign Relations had published its annual survey assessing the likelihood of specific global conflicts. They needed a tool that could both map the conflicts as well as connect those conflicts to deeper thinking from their experts. In addition, users needed to be able to filter by priority index. These maps and data visualizations needed to be usable on any device.

Screen-Shot-2020-02-10-at-9.05.12-AM

Process 

Discovery and defining the buckets

During discovery, my content strategy colleagues and I did deep dives with stakeholders and interviewed potential users about their needs. We would audit the information and content from either existing web properties of the client, or from the new data presented. With that information we would then brainstorm multiple information architecture structures and test with potential users by card sorting. The results from these content tests would help us navigate the pressure of our clients’ internal structures and prevent that from manifesting on the navigation.

The main source of data I could rely on to form hypotheses about user behavior was the analytics from our publications. The limited budget and short timelines of the projects meant I often needed to get feedback from colleagues, friends, and family on the prototypes and flows that I designed—leveraging Facebook contacts to find quick user-testing participants that fit the persona type. 

Getting alignment on the main action or activity users were coming to the site to do allowed me to prioritize and create a hierarchy in the interface. This also served as an education point for sites that weren’t as well known—it gave the user a clue as to what they should expect or the purpose of the site.

20150114_114900-small

For C-SPAN the main action for users was searching for video content, so I made it the primary focus: front and center, the main element of the navigation bar. Similarly with ASPPH, finding an academic program was the most important for users, so it stayed at the top, visually differentiated as a button.

Screen-Shot-2020-02-10-at-1.58.26-PM

Another key set of user needs were around search and filter for a majority of these engagements: we needed to give users the ability to quickly find and filter content that they wouldn’t be able to do from just searching on Google. Things as simple as telling users how many items were left in a truncated list, to more complex refining by category, tag, content type, date, relevance, and data exclusions. Infinite scroll with linking had been popularized by Quartz, but I found many users looking for very specific things were annoyed by this.  I put “load more” buttons as mental pauses so users could have the feeling of pagination without the interruption of page reloads.

Screen-Shot-2020-02-10-at-1.44.51-PM

Prototyping, mobile first

Contrary to expectations, the “homepage” was not the first thing we designed. Many clients expected this to be the most important page, but we knew most users first landed on an article shared from social media. Often the article page was the “front door” to the site, and therefore the most important building block.

9603582852_f7d070a770_o
brink-wires-1

We knew that the audience would consume content at different times of day, on multiple devices. Therefore, users needed to have a consistent experience across screens. When beginning to build wireframes and prototypes, I started with the smallest screen size and then expanded designs outward for increasing screen size. I was still wary of “hamburger” menus at this time: my suspicion, which later to be proved true, was that concealing navigation would reduce user flow through a site when they didn’t have visible suggestions. However, mobile real estate was at a premium and many times I needed to rely on contextual navigation (such as tags, links, and suggested content on article pages).

Designing for the mobile experience first meant quite a bit more progressive disclosure: giving the user the option to expand and dive deeper without increasing cognitive load up front. I used card formats to give users more context before committing to follow a link.

Screen-Shot-2020-02-11-at-8.39.42-AM
Screen-Shot-2020-02-11-at-8.52.16-AM

Some of the hardest UX challenges were around touch gestures on mobile for many of the more complicated interactions—for C-SPAN users the ability to clip and share video, others like The Council on Foreign Relations needed navigable maps with deep dive points. Getting the data visualization right was critical, users were coming for that expertise and utility, and we couldn’t give them misleading data. 

cct-4
Screen-Shot-2020-02-09-at-4.07.45-PM

Data also needed to be contextual—meeting users where they were in the experience, not later on or before they needed to see the data. With C-SPAN this was important for users diving deeper into legislation.

Screen-Shot-2020-02-10-at-1.36.34-PM

Establishing a visual language

Many of our clients had existing branding that needed to be translated into a digital medium, while others had digital branding that wasn’t robust enough to support an accessible user experience. I built on the style tiles concept to break down visual elements into building blocks. Over time these element sheets started to include interactions, progressing to resemble what we know as design systems today.

Screen-Shot-2020-02-11-at-10.17.02-AM

Presenting elements in this way clients could understand the meaning behind the choices out of context—this allowed us to avoid subjective preferences influencing the visual design and focus on the job these visual elements needed to do. It also allowed faster design and development for very large sites with multiple content type and page templates—the smaller elements could be approved and built without having to rehash decisions for every page.

We knew that audiences would skim to find the content they were looking for, often not reading. I needed to give viewers a faster way to sort and find, so I established visual indicators for content types, categories, and tags. Certain elements like color, shape, and type treatment could take on specific meaning for users over time, allowing them to immediately know if an item was interactive, an error, confirmation, or a major category.

These visual systems were a combination of type hierarchy, line, shape, and color, but often I would make custom icon fonts for more complex content. Because C-SPAN’s entire site hinged on video, I developed a site-wide symbol and color to indicate to the user that a piece of content was “playable” now (vs. scheduled or not a video at all).

Screen-Shot-2020-02-10-at-9.23.43-AM

Optimal and accessible reading experiences

We knew from Quartz and The Atlantic that stories got more engagement at a certain length, and where drop-offs tended to occur. Headlines with short descriptions did better than headlines alone on aggregated pages, as did ones with images.

For the articles themselves, it was important to keep the line length to 45-75 characters and larger text sizes (with a larger x-height) than was popular at the time for the best legibility. This, along with high contrast between background/text color and color-blindness simulations, allowed us to reach more people—not just those without low vision. I designed to reduce errors and mistakes through smaller details, like the option to show the password in a form.

Screen-Shot-2020-02-09-at-4.21.11-PM
Screen-Shot-2020-02-10-at-5.04.20-AM

Accessibility and inclusive design are very important to me, so I asked a friend that was an accessibility expert to come in and speak to our group. Accessibility goes beyond what I was able to do as a designer, I needed the whole team of journalists, strategists, sales, and engineers needed to be on board to create truly accessible experiences.

1380819630645

Sharing behaviors

Atlantic Media publications knew from analytics data that social media posts were shared and seen more when an image was included. When content was chunked into smaller, more digestible and shareable pieces, it would go farther on other mediums to drive traffic back to the site. 

For our clients, we needed to find more opportunities to increase social sharing of their content without creating more work for stakeholders. Users also needed the sharing prompt to be in context during their reading experience, not necessarily at the beginning or end of an article when the inclination to share hadn’t developed or had passed. I came up with the idea to increase sharing by giving C-SPAN users the abilty to share quotes directly from the transcript below the video.

Screen-Shot-2020-02-09-at-4.30.48-PM

I designed modules that would highlight pull-quotes and made templates in Powerpoint for our clients without full time graphic design staff—this way they could quickly create shareable images of their data visualizations and statistics.

Screen-Shot-2020-02-07-at-5.39.03-AM
4-Global-Innovation-Barometer-2014_-http___www.ideaslaboratory.com_proje
Screen-Shot-2020-02-09-at-3.54.08-PM

Find me on â­‘Medium, â­‘Twitter, and â­‘LinkedIn

→ Work

→ About

© 2020 Sarah Baker Mills