Date:
2023
Path to dark mode
The Washington Post's initial app dark mode lacked a clear system, creating inconsistencies and doubling design work. My task: resolve this fragmented dark mode to adopt across platforms, integrating it with existing code, current apps, and future projects, without rebuilding everything from scratch.
Role:
Design Lead
I audited our app's dark mode, identifying valuable patterns and color inconsistencies. To solve this, I created a comprehensive token system for seamless cross-platform adoption. I also developed a strategic approach to our legacy code, enabling dark mode implementation without a complete rewrite.
Result:
This unified approach streamlined design, eliminating separate light/dark designs, and laid the foundation for consistent, efficient dark mode across all Washington Post digital products. It significantly reduced technical debt, improved UX, and garnered positive feedback.
Project Highlights
Audit and Identification
Conducted a comprehensive audit of the app's dark mode system, identifying valuable patterns and addressing discrepancies caused by inconsistent color applications.
Token System Implementation
Developed a scalable token system that streamlined dark mode adoption across all platforms, reducing the need for separate designs and minimizing duplication of effort.
Improved Feeback loop
The unified dark mode system reduced technical debt, enhanced user experience consistency, and received positive feedback from both internal teams and end users.
Dive Deeper
The unlit path
For a long time, dark mode wasn’t a priority at The Washington Post. While it was introduced early in the app, its implementation lacked a cohesive strategy. Designers faced a confusing mix of colors and patterns that were inconsistent with the broader design system. This led to inefficiencies, as everything had to be designed twice: once for light mode and once for dark mode. Other teams struggled to adopt these designs due to the lack of clear guidelines, creating friction in the design and development processes.
When the decision was made to extend dark mode across all Washington Post platforms, it became clear that the existing implementation wouldn’t scale. The challenge was to unify and extend dark mode from the app to the website while maintaining compatibility with legacy code and ensuring a smooth transition for current and future projects. This required a thoughtful and strategic approach to address the gaps and inefficiencies in the existing system.
Bringing light to darkness
I took the initiative to audit our app’s dark mode system, identifying patterns that worked and highlighting discrepancies caused by inconsistent color applications. This deep dive allowed me to pinpoint the root causes of inefficiencies and technical debt. Based on these findings, I developed a comprehensive token system that introduced just the right level of complexity to support dark mode across all product surfaces without overwhelming designers and engineers.
To ensure smooth adoption, I created a clear and scalable strategy that addressed legacy code. This approach allowed us to integrate dark mode into existing systems without requiring a complete code rewrite, saving time and resources. By collaborating with cross-functional teams, I ensured that the new system was easy to implement and adaptable to future needs.
The implementation of a unified dark mode system transformed the way The Washington Post approached design and development. Designers no longer had to create separate versions for light and dark modes, streamlining workflows and significantly reducing duplication of effort. The token system provided clarity and consistency, empowering teams to implement dark mode efficiently across all platforms.
This initiative also reduced technical debt by creating a scalable solution that worked seamlessly with legacy code while setting a strong foundation for future projects. The consistent user experience across light and dark contexts improved the overall quality of The Washington Post’s digital products. The feedback from both internal teams and end users was overwhelmingly positive, highlighting the success of this initiative in addressing long-standing challenges.
Lighting the Path Forward
The dark mode initiative at The Washington Post exemplifies the power of thoughtful planning and cross-functional collaboration in solving complex design and technical challenges. By creating a unified system, we not only enhanced the user experience but also established a scalable framework for future innovation.
As The Washington Post continues to evolve, the lessons learned from this project will serve as a guide for tackling similar challenges. This initiative demonstrates how investing in a strategic and user-centered approach can lead to lasting improvements and drive innovation across an organization.