Design at the Speed of News ![rw-book-cover](https://miro.medium.com/v2/resize:fit:1200/0*LdvqFJnZTPD0iB8Y.jpeg) ## Metadata - Author: [[The NYT Open Team]] - Full Title: Design at the Speed of News - Category: #articles - Document Note: --- tags: - DesignAtSpeed - NewsProductDesign - UXDesign Author: Jay Guillermo and Chen Wu Source: Figma Config Conference, 2023 Reference: N/A date created: 2024-09-10 14:30 --- # Title: Designing the Home and Live Story Pages for The New York Times ## Table of Contents: - [Summary](#summary) - [Main Content](#main-content) - [Introduction](#introduction) - [Building a Flexible Foundation](#building-a-flexible-foundation) - [Being Agile](#being-agile) - [Building Trust with Partners](#building-trust-with-partners) - [Don’t Be Afraid to Experiment](#dont-be-afraid-to-experiment) - [Conclusion](#conclusion) - [Notes](#notes) - [References](#references) - [Paraphrase](#paraphrase) - [Newsletter](#newsletter) - [Action Items](#action-items) - [Hypotheses](#hypotheses) - [Methodology](#methodology) - [Questions](#questions) - [Future Research](#future-research) - [Implications](#implications) - [Logical Validity](#logical-validity) ### References: - The New York Times design team at Figma’s Config Conference, 2023. ## 📝 Summary: Jay Guillermo and Chen Wu from The New York Times design team shared their experiences at the 2023 Figma Config Conference, discussing the challenges of designing the homepage and live story pages for the ever-changing news cycle. They highlighted the need for flexibility, collaboration with cross-functional partners, and experimenting with new ideas, even if they don't always succeed. ## 📖 Main Content: ### Introduction At the Figma Config Conference in 2023, Jay Guillermo and Chen Wu shared insights into designing key features of The New York Times, including the homepage and live story pages. They emphasized the complexity of designing at the speed of news and how essential it is to meet the needs of both readers and newsroom operations. ### Building a Flexible Foundation The design team built a modular system called *Spotlight 2.0* that allowed editors to stack and package stories by importance. Flexibility is key when designing for a platform where news changes frequently, and this system provides stability while accommodating different media formats and events—ranging from election coverage to breaking news. ### Being Agile Designing for live news involves rapid iteration. The design team works closely with reporters and editors to align content presentation with journalism, constantly adjusting to news priorities. Agile collaboration between designers and newsroom staff helps balance UX, UI, and content design in real-time. ### Building Trust with Partners Trust and open communication with engineers and newsroom stakeholders are essential. The team works cross-functionally to roll out features quickly and adjust to breaking news. The designers emphasized the importance of shared responsibility in projects, where everyone feels ownership over the final product. ### Don’t Be Afraid to Experiment The Times’ live story format often involves testing features quickly. The team rolls out new design features within weeks and adapts them for other news events. Not every experiment works, but the lessons learned from failed features contribute to future success. ## 🗒️ Notes: - *Spotlight 2.0* allows flexible design layouts for news. - The design team works in close collaboration with newsroom staff. - Rapid iteration and flexibility are essential to design for live news coverage. - Testing and experimentation help refine new features for future use. ## 📖 References: - The New York Times design presentation at Figma’s Config Conference. ## 🗣️ Paraphrase: 1. **Original**: "When news is your product, it’s inherently complex and constantly changing—you must balance the needs of the newsroom and readers, as well as those of The Times’s business." **Paraphrased**: "Since news is a constantly evolving product, the team must juggle the needs of the newsroom, readers, and the business side of The Times." 2. **Original**: "Live, a story format for dynamic coverage of the major news of the day, is an area where we often roll out features quickly as tests and, later, we fully adopt and improve them." **Paraphrased**: "The live story format, used for major breaking news, is where the team rapidly tests features before refining and fully integrating them." ## 📰 Newsletter: 📰 **Designing News at Speed: Insights from The New York Times** At the 2023 Figma Config Conference, Jay Guillermo and Chen Wu shared their experiences designing The New York Times homepage and live story pages. They highlighted the importance of building flexible design systems, agile collaboration with newsroom teams, and the value of experimenting with new features, even if they don’t always work. The team emphasized that rapid iteration and open communication help them adapt to the constantly evolving world of news. Watch their talk for more insights into designing at the speed of news! ## ✅ Action Items: - Consider how flexibility and rapid iteration can be integrated into your design processes. - Foster open communication with cross-functional teams to ensure alignment and quick decision-making. ## 🧪 Hypotheses: - **Hypothesis 1**: Collaborative and agile design processes improve responsiveness to real-time events. - **Hypothesis 2**: Modular design systems lead to more efficient management of breaking news content across platforms. ### 📊 Methodology: - Survey designers on the effectiveness of modular systems in news content management. - Analyze case studies of collaborative design practices in fast-paced industries. ### ❓ Questions: - How does modular design contribute to flexibility in content-heavy websites like news outlets? - What are the main challenges in balancing editorial needs with user experience in live news scenarios? ### 🔮 Future Research: - Study the long-term impact of agile design processes in news organizations. - Explore how news outlets can leverage emerging technologies like AI to enhance their design systems. ### 💡 Implications: Modular and flexible design systems, combined with rapid iteration, can transform the way news outlets manage their digital presence. These practices can be applied beyond journalism to any industry that requires quick adaptations and constant updates. ### ✅ Logical Validity: - **Sound Deductive Reasoning**: The presentation connects design flexibility directly to improved news coverage and responsiveness, highlighting the value of a modular system. - **Consistent Analogies**: The use of analogies between design systems and editorial processes strengthens the argument for collaboration. ## 🎯 Conclusion: Designing for a major news organization like The New York Times requires agility, collaboration, and a willingness to experiment. Jay Guillermo and Chen Wu's presentation at Figma Config 2023 provided valuable insights into how they manage to keep up with the fast pace of news while ensuring a consistent and engaging user experience. - Document Tags: [[design]] - Summary: At Figma's annual Config Conference, designers Jay Guillermo and Chen Wu spoke about their experience designing the home and live story pages for The New York Times. They discussed the challenges of designing for a constantly evolving news environment and the need to balance the needs of the newsroom, readers, and the business. The designers emphasized the importance of building a flexible foundation, being agile and open-minded, building trust with cross-functional partners, and not being afraid to experiment. They also highlighted the collaborative nature of their work and the importance of constant communication with engineers and stakeholders. - URL: https://open.nytimes.com/design-at-the-speed-of-news-7394cb37110f #### Our design colleagues, Jay Guillermo and Chen Wu spoke at Figma’s annual Config Conference in San Francisco and shared what’s it like designing the home and live story pages for The New York Times. ![](https://miro.medium.com/v2/resize:fit:700/0*LdvqFJnZTPD0iB8Y.jpeg)Illustration by Claire Merchlinsky **By Jay Guillermo and Chen Wu** Getting to design the home and story pages for The New York Times web and app is an exciting and unique experience for designers. In July 2023 at Figma’s annual Config Conference in San Francisco, we were honored to have the opportunity to share what’s that like and how we design at the speed of news. The conference attracted about 8,000 people, with about 500 attending our session in person and more virtually. We discussed the process of designing [the home page](https://www.nytimes.com/) and [live story pages](https://www.nytimes.com/live/2024/01/17/us/election-news-new-hampshire-trump) while the news is continuously evolving, and how we meet the needs of the newsroom, our business and our readers. Similar to creating the home and story pages, presenting at the conference was a huge team effort. We worked closely with our colleagues in Design, Product, External Communications, Legal at The Times and our partners at Figma to make it happen, and we are grateful for their help and support. ![](https://miro.medium.com/v2/resize:fit:700/0*U1VEx_HSXvvuJks0)Chen Wu and Jay Guillermo on stage at the Figma conference. Photo Credit: Meredith Black Brant Here’s a recap of our key takeaways: **Build a Flexible Foundation** ![](https://miro.medium.com/v2/resize:fit:700/0*DykEegABEoaCgR-J)The team designed a modular system of layouts, called Spotlight 2.0, to allow editors to package and stack stories by importance. When news is your product, it’s inherently complex and constantly changing — you must balance the needs of the newsroom and readers, as well as those of The Times’s business. The products we design and build have to accommodate a wide range of topics and events, from planned, such as Election Days, to unplanned/breaking news, such as natural disasters and wars. Because of the constantly changing world around us, we need to build a stable and flexible foundation for presenting and programming the “News of the Day” — a base that can be used for all instances and events. By building a solid foundation, we can iterate on this system to meet our ever-changing news needs, as well as new media sizes and content types, such as vertical videos and photographs. **Be Agile** ![](https://miro.medium.com/v2/resize:fit:700/0*BUMshnoDnVvO8t8x)Here’s an example of the different types of news that our design has to accommodate. When news is your core product, everything is a work in progress and always changing. Being agile and open-minded goes a long way. A lot of our work requires evolving the shape of the product and the journalism at the same time, which means that we are not only doing UX and UI design, we are also doing content design, or helping to shape how stories are presented to readers. This means that we need to be flexible and iterative, understand how the newsroom works, how reporters and editors work, what their challenges are, what opportunities they see, and what they are preparing for. We need to understand the basics of various news events and work effectively alongside our reporters and editors as they shape their coverage. **Build Trust With Your Partners** ![](https://miro.medium.com/v2/resize:fit:700/0*VqA64sqyEMJ-SRv5)Here are some of the many colleagues we partnered with on our work. One of the key learnings from our presentation is making sure to build trust with your cross-functional partners and stakeholders. They should be your soundboard and your rock. We are able to roll out features and adjust designs quickly by having constant and open communication with our engineers. Our engineers are incredibly open minded and flexible when we have to shift priorities due to news events and urgent tasks. We are also able to roll out features and get buy-in quickly by maintaining a constant and open communication channel with our stakeholders — including newsroom editors, reporters and visual editors. We prioritize making sure we are aligned on our goals and the directions and problems we want to solve, and events we need to be preparing for. Over time, because of the trust we’ve built, we can align quickly and move as fast as the news demands. We share the mindset of “our work, our responsibility” vs. “my work, my responsibility.” When we all take ownership of a feature and product, we work more closely together, make decisions together, trust each other more, and have more courage to try new ideas. **Don’t Be Afraid to Experiment** ![](https://miro.medium.com/v2/resize:fit:700/0*bTbR-l-eNJ-pN3uz)Here are two examples of design features that didn’t quite work. It’s important to test, iterate and repeat. Live, a story format for dynamic coverage of the major news of the day, is an area where we often roll out features quickly as tests and, later, we fully adopt and improve them. Sometimes it takes less than two weeks to get an idea from design sketches, newsroom alignment, engineering, and QA into production. We seek to keep in mind the long-term vision for how a feature can evolve and be used for other news events, so it’s never a one-time use. And, of course, not everything we test proves to be working as expected, and it’s OK! The beauty of working at a place like The Times is that we get the space to experiment and try new things. We’re encouraged to test the art of the possible and learn from the insights we gather along the way. Sometimes the things that don’t work are what help us the most in making better products. A spirit that every designer at The Times is encouraged to embody. **Hear the Whole Story** To learn more and get the full experience, watch Jay and Chen’s talk at [“Design at the Speed of News.”](https://www.youtube.com/watch?v=akW_l3me3UE&t=62s) *Jay Guillermo is a seasoned product designer in the publishing/media space. He has over 20 years’ experience from print to product design for a range of clients, including New York Magazine, Vulture, Huffington Post, Men’s Health and Awake New York, in addition to The New York Times. With an art director’s eye and strong typography skills, he’s brought his editorial background and attention to detail to The New York Times as a Lead Product Designer on Home. Since joining The Times in 2019, he works on new features, layouts and systems for the core news app and home page.* *Chen Wu is a Lead Product Designer at The New York Times, where she designs for live coverage and sharing experience across the web and app platforms. Since graduating from Columbia University’s master’s journalism program and working as a sports reporter in Shanghai, she has designed digital and broadcast news products for news organizations, including NBC News and Ad Age magazine, in addition to The Times. An award-winning designer, Chen joined The Times in 2021 and is an avid runner who hopes to complete all the major marathons in the world.*, Design at the Speed of News, The NYT Open Team, 01hppmtbf87f02gphb075p7v59.