What If We Used Images to Navigate New York Times Content?

An experiment made during The New York Times’s Maker Week that presents photos as the main way to browse Times content.

Illustration by Dominic Kesterton

Every year, the Technology department at The New York Times hosts Maker Week, an annual five-day event that gives Times employees from Design, Product, Project, Marketing and Technology the freedom to learn, create and develop new products. Times employees are encouraged to take a break from their day jobs and spend the workweek collaborating with colleagues and diving into self-directed projects. Oftentimes, newsroom colleagues contribute to projects, and offer guidance and feedback.

This year’s Maker Week was held in July, and Times employees took the time to explore many ideas, producing over 60 projects in the five-day event. We asked three colleagues to write about their projects. Jazz Lyles, a developer on the Games team, writes about an AR experience their team designed that highlights stories from overlooked and marginalized people. Romello Goodman, a software engineer on the Reader Guidance team, writes about the visual-first prototype he built that makes photos, not headlines, the main navigation for Times content. And finally, Amine Toualbi, a student who interned with the Android team this summer, writes about a product he built with a team of interns that caters to Generation Z’s news reading habits.

As the saying goes, you should never judge a book by its cover. But when it comes to choosing what to read on the internet, I’ve always had a tendency to read articles because of their cover images. So when Maker Week was announced, I knew that I wanted to create a project that highlighted the images The New York Times publishes. The goal was to create a version of The Times’s website that was just an image feed which users could navigate to discover stories.

Brainstorming and Design

If you look around the web for examples of photo-centric sites you’ll see that most sites either load all of the images in a single column (like Instagram’s feed), or use multiple columns and sizes in what is called a Masonry design (like Pinterest).

For this project, I decided to go with a Masonry design because it allows more photos to be laid out on the screen at once, and it creates a visual experience with more variety. But, the number of images can also be a downside when thinking about the user experience. If your app is constantly loading a large number of images, it can slow the page down as it tries to process the image requests. Nothing puts a damper on a web experience like a bunch of slow-loading images. This is even worse on mobile where there is often less power to handle these requests than a full-size computer.

The design solution to help prevent slow-loading images is a technique called lazy-loading. As the user scrolls, the app checks to see whether each image is close the viewable screen and loads it. To the user, it looks as if the images magically appear as they scroll without the frustration of a slow experience.

I decided to go with a Masonry design because it allows more photos to be laid out on the screen at once, and it creates a visual experience with more variety.

Building the project

The best part about Maker Week is that we get to build things from scratch and have full control over the tech we use. The Times uses Node.js and React.js to render its pages on the server and client, so I decided to make that the foundation for my app. Because I only had five days to complete my project, I decided against writing my own Server-Side Rendering (SSR) logic and instead went with the popular SSR framework Next.js. Besides the ability to perform SSR, it provides other benefits like code splitting, webpack and ES2018+ support that overall gives you a production ready website right out of the box.

With a foundation for how the React would be rendered, I had to decide on styling and chose to explore the popular pattern of CSS-in-JS and I used the library styled-components.

The last part to figure out was where the data for the project would come from. Luckily, this ended up being easy because The Times has a robust GraphQL API. In only a few minutes, I was able to use the schema explorer to find my data and determine what pieces I needed. From there, I could put all of the pieces together.

The final prototype displayed images on a single page with navigation links to specific sections in the upper right corner.

When the week was over, I was really happy that I had a fully functional prototype. If this ever gets built it would be a great opportunity for users to discover information by judging stories by their covers.

Romello Goodman is a software enthusiast located in Washington, DC. At The New York Times, he works as a Software Engineer on the Reader Guidance team.

What If We Used Images to Navigate New York Times Content? was originally published in NYT Open on Medium, where people are continuing the conversation by highlighting and responding to this story.

Source: New York Times

Leave a Reply

Your email address will not be published.