How the New York Times is creating a more visual newsroom

Meghan Louttit, Deputy Editor of Digital News Design, New York Times
Angelica McKinley, Graphics/Multimedia Editor, New York Times
Rodrigo De Benito Sanz, Designer and Technologist, New York Times
Jasmine Wiggins, Product Designer, New York Times

Visual Journalism: Where the form is the story; the experience of reading should be as good as
the story itself
NYT Teams: 4 for snapchat, 14 for news, 40 for product, 3 for story

OUTLINE: Design should be integrated in the newsroom through trainings, product support
and guidance, and collaboration on visual heaves

2020 REPORT ISSUES + NYT NEWSROOM SOLUTIONS

ISSUE: One-size-fits-all design approach (online)
SOLUTION:
Create a framework that is adaptable for varied story forms
Make sure to be mindful of how display affects what the reader expects and
communicate as much as possible about what a reader CAN expect at the very top of an
article
Practical? Emotional? Persuasive? These all look different
Put new artists with new thoughts into the newsroom and be open to their ideas and to
change
Work WITH them to figure out how to best prop up their talents and utilize their
fresh ideas

ISSUE: Auto-defaulting to traditional story forms (in print)

SOLUTIONS:
Create unique value in print
Special sections
Integrating print and online via previews/extended content online
Publish other peoples works as a way to extend content
Design print content as keepsake value
Experiment with print design
Move away from the idea that print needs to be entirely text-based
Work early and often with content contributors in order to get the content you
need for a visually engaging print layout

ISSUE: Lack of design knowledge/stay-in-your-lane mentality in a newsroom

SOLUTIONS:
Make design integrated in the newsroom via training, newsroom reorganizing
Bring design language into the newsroom and teach about the value of these concepts in
storytelling teach non-designers design
In the context of news design, what is an asset? Element? Story form?
Information hierarchy? Pacing? Pattern? Consistency in patterns/semantic
elements?
Why does it make sense to use a horizontal line here? When should something be
bolded?

ISSUE: Decisions of story form made without designer input

SOLUTIONS
Product and news team collaborations
Reorganize desks to have visual leaders more integrated into the
storytelling/decision-making process from the start
EX: Hannah Fairfield is a designer turned climate change desk editor
BRING IN VISUAL STORYTELLERS SOONER! So the photographers, video makers,
graphic designers and data viz folk KNOW what they should be creating and dont end up
putting a general placeholder where there could have been a beautiful story feature

SOLUTIONS/GENERAL RESOLUTIONS:
Collaborate on visual heaves: Creating incredibly immersive content takes teamwork,
namely specialists in different fields who can do incredible work in their specialties that all
comes together seamlessly

Mobile-first design: invest in the mobile experience. Dont just make mobile a reordering of
desktop; design for mobile FIRST

Maintaining discrete content: Ensure NYT and T Mag content stays different enough, even
with special NYT projects. T Mag content is inherently different than NYT content, so make sure
experimental NYT design doesnt infringe upon T Mag design too much

Design evolution: How can we bring more traditional print designers into the digital fold?
How can we create tools to empower designers on both mediums, regardless of their
background?
***Ignite talks: 20 slides, 5 minutes, 15 seconds per slide (the presenter has no control over
slides progression)
Ignite Talk: Stakeholder Management
Michael T. Sales, Design Director, NASCAR Digital Media
Culture eats strategy for breakfast
Match strategy to culture for success
Understand how different stakeholders define success
Your most excited consumer has a different definition of success than your most
monetarily invested chairperson
Prioritize what users want most
Other types of stakeholders will likely get what they want if users feel like theyre
getting what they want first
Create consistency, predictability, a feeling of intuition

Ignite Talk: Reactive Wireframing

Dave Stanton, Appirio, Senior Consultant
Wireframe: A way to communicate a projects specs between design and development.
Quick to make, hard to generalize
Mockup: High fidelity design of a project. Hard to make, easy to generalize
Reactive programming: Static and dynamic deliverables available all together. THE
WAY TO DO IT.
Allows for a partitioning of different elements in a project
Use version control for tracking
Creates living design documentation
Fosters teamwork and a sense that success is a shared responsibility
Reduces unhelpful artifacts and makes all draft work more directly applicable
towards the final product

Ignite Talk: Everything I Know I Learned from Design

Melissa Angle, Director of Audience, Fans First Media
Multitasking: What needs to be done today and whats a Dippin Dots problem**
Project management: Stay on top of your stuff and everyone elses, too
Deadlines: Make the plan and make it happen. Make meeting deadlines a priority
Good packaging: Ask who content is for and how to deliver that type of content to that
specific audience in the best and most compelling way

**Dippin Dots Problem: A problem of the Future

The Washington Post Digital Revolution
he Washington Post
Emilio Garcia-Ruiz, Managing Editor/Digital, T
Joey Marburger, Director of Product, The Washington Post
Three keys for successful platform design at NPR
Daniel Newman, Deputy Creative Director, NPR

OUTLINE: A more informed public, service to journalists, partnership with member stations

MORE INFORMED PUBLIC

Advocate for all users:
Understand context first
Learn what people are looking for
Document guesses/tries/assumptions -- Lean UX methodologies
Challenge a team on a project to write the assumptions they have down and then
continue to keep note of that as
Understand mode of consumption
Not only what people consume, but HOW
Design for Real Life stress cases, NOT edge cases
These are real users, so we cant decide whether or not to solve these problems
(edge cases). We have to find solutions
ARTICLE: Designing News products with empathy: 50 stres cases to consider
Accessibility and accessibility
Lowercase accessibility is making things easy to access/use
Uppercase Accessibility is making things easy to access/use for people with
different abilities

Make ideas real:

Sketching & Prototyping
Doesnt have to be perfect, just get it down on paper
Dont be precious about deliverables. Get something down and iterate to the final
product

Engage directly with users:

User testing, working outside of norms (ex: testing voice accessibility outside of the ideas
already on the table like Alexa/Echo)
Use voice as a designer to give voice/be a representer for users
Listen where users are already talking (reviews, social media)
Map to users expectations to be able to reach them and further your mission

SERVICE TO JOURNALISTS
Internal users are users too:
Documentation!!
The more workarounds you do, the harder it is for other people to use your work to make
outside users experiences better
 What you see is what you mean in the CMS -- make content creators lives easier

Content, not chrome

There are SO many platforms that content can get streamed on
Create content that will work across platforms

Answer storytellers curiosities (using data)

Journalists want to know who is reading what how
Journalists shouldnt have to worry about understanding google analytics -- create a way
for them to know what they need to know and nothing else

PARTNERING WITH MEMBER STATIONS

Go beyond skin deep:
Create ways to connect with your local station regardless of where you go to access NPR

Foster loyalty:
Make people feel an affinity to their own station
Connect users to their local stations
Encourage direct donation to promote a bottom-up support network

Engage in co-creation
Work together with local stations to create together

LINKS/LOOKS
Up First with Rachel Martin
https://npr.design/
Lessons from Designing for Voice
Sanette Tanaka, Product Designer, Vox

Bot: Software that automates a task

User interface: The space where a human and a computer interact

Bots
Not new technologies
General accessibility is really new
Products are exciting because they help users engage with content differently
These bots can help us soon have real conversation with computers conversational,
remembering, adapting to you

Basic design process

Define, understand, diverge, decide, implement and refine, learn and iterate
A designer should be expected to approach a project with a process
It can be hard to advocate for a design process when the outcome wont be visual
The voice experience is something that needs to be designed to figure out:
What content makes sense for voice
How should a user navigate
What is the personality/tone
How should they interact with the bot
What words will they use
How should the bot respond
How frequently should they interact

Design studios
Get ideas on the page, agree on a high level vision

User testing
Learned: People forget what they hear
Its always the bots fault - never the users fault
Dont let a technology make a user feel bad due to understanding
Accommodate the user, dont make them work for you
Learned: Users need an escape route
Its an objectively invasive technology need to give users an escape route so that
Alexa can stop talking
Testing mimicked stress situations to see how best to stop the bot
Feeling trapped in an experience is scar
Takeaway
how can we move from simply existing in this conversational space to truly creative
value for our audience?

Questions
On copywriting
Talked to The Verge to decide what information was necessary to convey
Tried different versions of the same semantic meaning, chose words that were
easy for people to say (unmistakable) and easy for people to understand from
Alexas voice
On naming
the Verge decided
On tone
Tried to cut down on personality Alexa had her own personality/way of talking
Didnt aim to invoke too much emotion wanted her to be simple, utilitarian to start
Always option to add a more emotional interaction
On keyword variation
Ended up supporting many different versions of the correct keyword

LINKS/LOOKS
An Invisible Interface: 6 things we learned from designing for voice
Navy, yellow and white
Ignite Talks: Web Design is Dead
Yuri Victor, Principal Engineer, Vox
2015 tipping point: more mobile users than desktop users
Whoever had a platform at this time got hit
Newsletters, FB instant articles, snapchat, Google AMP main consumption platforms
are NOT YOUR SITE
We should no longer be building websites, we need to be building brands! Trust! A
recognizable style!
Build off-platform first so that you actually engage with your audience

Designing for Newsletters

Priya Ganapati, Product Director, Quartz

What makes newsletters special

Easy to create, distribute
Personal
Brand-defining
Low-cost, possible high payoff

Design Principles
Be context aware
Time: When you send it out should make sense with the letters purpose
Be respectful emails are personal
Information hierarchy
Establish a clear design/consistent headers and the like
Mobile/responsivity
Constraints of email
Outlook does not support good design easily
Dont put gigantic files into there or it probably wont load
Design for ease of use
Images are hard consider offline stress case

Components of a newsletter
Dedicated landing page vs. on-site sign up
Less is more - less fields = better conversions
Preview content so people know what theyre getting into

LINKS/LOOKS
HotPod, Lenny Letter, Racked, Quartz (Quartzy + Quartz Daily Brief), NYT Cooking, Ozy,
Wired, New Yorker, Food52, Goop, Ann Friedman, Stratechery, Axios
Designing with the CSS Grid
Jen Simmons, Designer Advocate, Mozilla

History of web layout

Started as one big screen
HTML Tables Hacked HTML tables to use as a base for layouts
Flash graphic design treatments, stuff could go wherever you wanted it to
Not made out of web stuff, so it deprecated very quickly
Hand-coded CSS layouts floats and other custom
Made everything look very similar
Framework layouts Finally, the grid was introduced to standardize web layout
Then, a million different screen sizes were introduced
Responsive design turned into moving the twelve columns around depending on
the size
Bootstrap made many sites look super similar and limited design creativity in
many ways

New CSS revolutionizes web layout

The difference between hot metal composition : pasteup is analogous to floats : css grid
Define grid container, put items within the container, and put the items somewhere on
the grid
Not necessarily for the entire page
ONLY direct children of the grid container element can be affected by the grid

Purposes/functionalities
Explicit v. implicit
You CAN define size/number of rows/columns, OR you can let the browser
You CAN place each item in the grid yourself, OR let the browser place items for
you using the auto-placement algorithm
Columns *AND* rows
Each column/row doesnt have to be the same size as the ones before or after it
Tracks sized by the size of the content content sized by the size of tracks
Reciprocal -- each can define the other
Content doesnt have to fill the track
Track has a specific size, then you can manipulate content to be smaller than or
overflow on the grid cells
Use grid to line things up or encourage disarray

What can we do with it?

Graphic Design: The New Basics
Design principles can be more easily implemented (or broken)
 Symmetry asymmetry is easier with grid, so not all pages have to look the
same
Proximity easier to leave white space/play with proximity
Density not stuck with having everything being super clustered

Graphic design for the web vs. graphic design OF the web
The web is another medium completely -- we can define/redefine concepts for it
uniquely
Overlap super easy to overlap (not fragilely)
Viewport creates an inherently different experience of design than looking at a
poster
Theres this element of time inherent in experiencing a webpage look to film
industry to understand how to do that better
Very few people have the experience of an entire webpage on one 8.5x11 page
Need to do a better job considering how a web experience unfolds across
time storyboarding using THE GRID
Viewport units
Responsive design has been squishy in the horizontal direction, but not in the
vertical direction rows allow us to do this
Framing what does it mean to have a reading experience with a frame, where
things move in and out of that frame?
White space so so so easy to leave white space (Vignelli canon)
It is the white space that makes the layout sing
Floats disallowed designers from pushing things down and away
Print page gridding v. webpage gridding
Control size of page: yes, no
Maintain aspect ratio: yes, no
Line things up: yes, yes
White space: yes, yes
Verticality vertical layout was NOT inherent in web design, especially in desktop
making. But having it adds to the unique experience of online viewing
Flexibility can mix set units (px, rems, etc.) with variable units (percentages) AND
previously seldom-used flexible sizing (min-content, max-content, minmax, etc.) to
make the layout work in every situation without
max-content width of the box is the longest it can possibly be with all the
words laid out side by side
min-content length of the longest single word
fr unit fraction unit, if each bit in a thing of three gets 1 unit, then they each
get of the space
50px 6fr 2.4fr 2.4fr min-width gridsetapp.com (ratio based arrays)
minmax(xx unit, xx unit) helps content disappear in order of importance,
makes us consider what content to prioritize
Creativity PLAY layout.land
LINKS/LOOKS
Labs.jensimmons.com
Books, letterforms and Design in Asia
Added line visibility in inspect tool in firefox for ease of use
cssgridgarden.com
layout.land
Exercises on CodePen
http://jensimmons.com/post/feb-27-2017/learn-css-grid
gridsetapp.com

Visual Storytelling at Scale

Matt Ericson, Associate Editor, The New York Times

Making technologies/storytelling forms available to MORE people in the newsroom

Learn from what were doing, make content more efficiently, avoid one-offs

Scoop NYTs self-made CMS

MISSION: Develop more powerful storytelling tools in the CMS and on our digital platforms to
transform the newsrooms ability to tell stories in more visual and digitally-native ways

-Building tools outside the CMS to make visual journalism easier and more collaborative
-using what we are learning to inform development of their primary CMS to enable reporters
and editors to tell stories in new ways (without a huge barrier to entry)

GAPS: Not taking advantage of all of our visual opportunities via digital
Visual pieces shouldnt be considered secondary because there are some stories better
understood completely visually
Not enough visual leadership/visual expertise
Dont have workflows/tools that make visual stories
Need to work away from text-focused CMS
How tools can Drive Change in Story Form
EXAMPLE: Presidential coverage
Started as a blog where reporters were behind posting as quick as possible, but still
too late
Not an integral second-screen experience
Live blog should feel like a conversation Slack!
Live chat for reporters to talk to each other and for others to be able to read
Having this tool built and having journalists able to use it so easily changed the
way we can cover a live event on its head
The tool encouraged the behavior and led to the adoption of

Tools outside the CMS build using a static-site generator, google docs, and some other tools
EX: Snow Fall Designed to have the right graphics appear at just the right time in a
story
Story published completely outside of CMS
Have to consider stuff like sharing tools, paywall stuff, etc., when working outside
of CMS, but it also makes life a lot easier
Produced as HTML docs outside of
Tools
Preview: a tool to help designers and devs automate the dev and publishing of
interactive features (static site generator)
ArchieML: enables copy eidtors and reporters to edit copy for interactive features
in Google Docs (open source)!
Ai2html: makes it easy to build responsive static graphics in Adobe Illustrator
(open source!)
Can make a series of graphics without using D3
Mr. Chartmaker: Browser-based charting tool
Journalists dont have to go to designers to make charts happen

PREVIEW DEMO
Uses git to allow devs/designers to show/share work -- can make changes + view on localhost,
then takes one command to just push reupload to the preview site
(newsdev.ec2.nytimes.com/preview

Open source equivalents: NPRs app template, Voxs Middleman Generator

ARCHIEML & GOOGLE DOCS

Archieml.org
newsdev.github.io/driveshaft
The dev wants a JSON file of an article to read into the design, the editor wants an easy-to-read,
less finicky, copy editor-friendly way to view an article
enter ArchieML!!!

Work on text and graphic at the same time, with GDocs!

GDoocs is a great CMS (version control, ease of collaboration, etc)

AI2HTML
Ai2html.org

More people are fluent in Illustrator than D3 for the most part
In Illustrator, set up artboards for different size-screens, make chart on different screen-sizes,
run ai2html script

MR. CHARMAKER
Datawrapper datawrapper.de
QZ Atlas

SCOOP: tool-building in CMS

One CMS for both print AND digital editing
Before: CCI for print page design/story editing, Scoop for digital story editing
When deciding to make something online differently than your printing it, this doesnt
work
CCI print edit changes would override project development on Scoop

Now: CCI for page design, Scoop for digital and print story editing
Now you can see print layout and how an article fits on paper within Scoop

Remaining limitations
Oriented around idea that main story component is a long string of prose
Structured after the idea that there is a linear workflow like in print (writer, then editor,
then someone adds pics, etc.), which dilutes ownership and digital efficiency
Backed our way into a digital content creation CMS by building tools for content
producers, not content creators

SCOOP VISION OAK

From a tool for producers to a tool for content creators
From a user interface that gets in the way
From a tool to support workflows that are largely similar to print TO
OAK to get people to tell stories in new ways
Want it to:
Move past storytelling limitations
So fewer stories fall outside our baked-in format
Make creation easier
So people with not that much tech experience can still be creative design-wise
More structured data
Move from platform-specific data to more context and structure so platform is
agnostic

Consider story elements

Video, paragraphs
Blocks headline region, a list
Forms the story from start to finish
Patterns oft-used, repeated/repeatable story structures
Story screen

How Oak sees a story

Series of elements turned to blocks turned to story forms turned to pattern that is supported
regularly. Allows the tool to give guidance about patterns that work for story types

Listy headline + image + some text repeated thing by thing down a page

Oak
Encourages behaviors for content creators
reporters write headlines themselves
plus button on left side of article writing screen reminds writers to insert multimedia content
every time they press the return button
should feel natural -- EX: you can paste a link to a Tweet right into the CMS and itll just
embed the tweet immediately
what you see may not be exactly what you get (not pixel-perfect), but its exactly what you
mean (understand what content goes where)

React.js components shared between editor and front-end of NYT, so when its time to add
new block types (ex: instagram embed), you only have to write the code once
ProseMirror open-source text editor
- Saves all keystrokes so you can replay the history of the doc bit by bit
- enables collaborative editing so that multiple reporters can be working in the body at the
same time (you can accept/deny very specific changes. EX: show me what changes the
copy-editor made and then you can decide whether to keep or not)

Next steps for Oak

 inline comments
- Can encourage behaviors here in terms of question-asking / responding in the field
explicit guidance around specific story patterns
- EX: do you want a Q&A? Cool, dont think about how to format that twice (it already
exists)
collaborative writing
scratchpad for notes
- Not a spot where area can get published, but a nice simple
- Can make the actual reporting process work better
feedback from users
Version history/track changes

BEYOND TOOLS:
One thing to build tools, another thing to get people to use them in the right way
Expect PERSON IN THIS POSITION to do THIS AND THAT for every article
Make it easy for people to understand which story type is best
More guidance to help people learn how to do things
Change the makeup of desks so that designers arent sequestered, they are involved early
in storytelling processes so you can think visuals first

matte@nytimes.com

Breakfast with Rebekah Monson

Daniela Dewendt, Product Designer, CNN Digital

http://canvasjs.com/

A 360 View Inside CNNs Virtual Reality Newsroom

Daniela Dewendt, Product Designer, CNN Digital
Alexa Kaspar, UX designer, CNN Digital
Akoua Smith, Designer, CNN Digital

Its empathy; its making you feel how someone else feels
Designing with the CSS Grid
Daniela Dewendt, Product Designer, CNN Digital
Jen Simmons, Designer Advocate, Mozilla

Building Products and Teams that Win

Rebekah Monson, VP/Product, Whereby.Us
Dheerja Kaur, Head of Product, theSkimm
Amanda Zamora, Chief Audience Officer, T exas Tribune