Experience

Latest Work

Audrey Valbuena

Dark mode for NYT’s News Apps

Ship dark mode to NYT news apps sustainably using the design system’s color tokens.


Role
Associate Product Manager Timeline
December 2021 - November 2022Live product
NYT App
NYT  iOS app with dark mode


Project Brief

I joined the NYT Design Systems and Accessibility team to help them launch dark mode. It was a “must-have” feature for Times’ readers, and it was long overdue.

My role on the project was to help move the design system forward and facilitate the implementation of color tokens across the Times’ wide web of product teams to sustainably launch theming for NYT’s mobile apps.

Dark mode was the Design System team’s first chance to put the new design system to the test. Our goals were:
  • Develop out our color token system for the many codebases we’d need to implement on
  • Implement color tokens on every screen readers in app would see
  • Familiarize product teams with the design system and build relationships through workshops and feedback sessions



Context and competitive analysis

To understand the scope of this project, I first had to understand the organization of the Times. There was a previous launch of dark mode by the Native App team, so I started by meeting with those designers and product managers to understand the history behind this project. I also spent a lot of time in our design system’s documentation, implementing tokens myself to understand the challenges across codebases. Alongside this relationship building and testing, I read a lot of other design system documentation and blog posts about dark mode from others in the industry.

The NYT apps have a hybrid approach to rendering, with a native shell and webview content. The challenges here were both technical and organizational: We found that migrating to dark mode compatible color tokens would span many codebases and the work of more than twelve teams. To do this, we needed to be organized internally, which meant building out our documentation and support systems, and being clear with our ask for collaboration with other product teams.Previous color system



Design system color system





User research

We knew from app research that dark mode was a “must-have” feature. However, what we needed to understand more deeply was how dark mode could be implemented. Before beginning the project, I facilitated workshops with each team who would need to implement color tokens, translating their hesitancies and pain points into ways we could make our design system better. I oversaw the implementation spreadsheet and worked with our partners to resolve roadblocks in the process.Screenshot from some of my user need workshops








The Process


To start off, I worked closely with our team’s designers to explore the information architecture of our documentation. We completely overhauled our documentation to make it more accessible and service-oriented so teams who would need to implement the design system would have a better time of doing so.

Then, I worked with the product folks across a variety of teams to outline the necessary screens where these color tokens would need to be implemented. We tracked these screens on a huge spreadsheet, and worked with each product team one-by-one to get the tokens implemented on all necessary surfaces. Defining what screens needed to be converted to color tokens




Feedback and refinement


The beta test of dark mode launched to a small holdout of readers in September 2022, to many reader’s excitement.

During the holdout period we refined how we dealt with graphics and other edge cases that our testers were reporting. Holdout group excitement on Twitter




Product launch and reception


By the end of the year, dark mode was launched across NYT news apps.

 It delivered to readers a much-anticipated feature, improving the accessibility of our apps and satisfaction with our apps’ ability to respect device settings. 

You can check out dark mode on your NYT app or read more about the process to build dark mode here.
Since I can’t share metrics - more Twitter excitement! 



This site is always a work in progress. It was last updated February 2025.

Email →

LinkedIn →

Are.na →