Dark Mode & Accessibility Overhaul for Blick News [WIP]

Brief

We launched a complete redesign of our website and apps in Q3 2024. Due to cost and time constraints multi-theming ability for dark mode and accessibility compliance were postponed. The missing dark mode on launch frustrated users, because it has been the most requested feature.

Problem

How might we fix accessibility gaps before the EU accessibility act 2025 while increasing user satisfaction and engagement?

Brief

My Role

Senior UX/UI Designer

Contributions

UI Design
Design System
Accessibility
Usability Testing
Dev Handoff

Timeline

Q4 2024 - Q2 2025

Team

PO
Tech Lead
Web Developer
iOS Developer
Android Developer

Impact

85%+

WCAG AA compliance achieved across the new design system.

70%

of the implementation is finished.

+34%

conversion of free to premium users through this tool.

Apple App Store review by a heavy user

Phase 1: Audit, Research & Analysis

Our goal in this first phase was to get an understanding of the scope of work for design and development. We also needed to get stakeholder approval so we could allocate the required resources. To achieve that, I conducted additional user research to back up our rationale because dark mode and accessibility were challenging business cases to pitch.

Activities

  • Analyzed 100+ App Store reviews with dark mode mentions.

  • Ran 2 consecutive surveys that investigated user segments and their distinct mobile device behaviors when reading our news.

  • Contrast testing across 600+ components in the Figma design system to identify the amount of non-compliant elements.

  • Collaboratively estimated and conceptualized multi-theme structures with primitive and semantic variables.

“Where’s dark mode, how difficult can this be???”

Apple App Store review by a heavy user

Frameworks

  • We used WCAG guidelines to check color contrast and accessibility.

  • We started a design thinking process to first empathize with user needs and then define core challenges that we wanted to address with gained insights.

Outcomes

  • 23% of our App Store reviews mentioned dark mode.

  • 55% of our iOS and 62% of our Android users have dark mode enabled on their devices.

  • 43% of our heavy user segment, which is 18% of our total user base, would read more frequently at night or early morning if dark mode was available.

  • The most frequently mentioned pain due to missing a dark mode was the fear of waking up a spouse in bed because of the bright screen.

  • List of all the components prioritized by complexity across all three platforms.

Apple App Store review by a heavy user

Phase 2: Design System & Variable Hierarchy

Thanks to the previous phase we succeeded in getting stakeholder approval to continue. Our PO started planning the delivery and organized developer resources so they could manage their workload alongside daily business. The design work officially started. I onboarded our UX design apprentice to experiment with grey color palettes and our components and templates. This was a great opportunity for him to familiarize himself with our design system and get frequent contact with developers.

Activities

  • Exploration of our grey color palette to create an appealing dark mode that could reflect our branding which heavily relies on white.

  • Iteration of the semantic variable layer to create a scalable naming convention.

  • Regular exchanges with platform architects to make the new variable system meet both designer and developer needs.

Frameworks

  • We used Atomic Design principles to re-structure the design system and increase usability for designers.

  • We heavily leaned on the Atlassian Design System as their variable structure fit our needs.

Outcomes

  • An initial primitive and semantic color variables structure in Figma.

  • High-fidelity designs of the homepage and articles in dark mode that we could use for guerilla and unmoderated testing in the next phase.

  • Full alignment with developers, the branding department, and the newsroom on the style direction.

  • With the help of our UX design apprentice, we applied the new variables to about 60% of all the components to get a headstart.

Apple App Store review by a heavy user

Phase 3: Implementation & Continuous Testing

Delivery started this phase and progress was faster than expected. We ran more user testing to get initial reactions to the new dark theme. Additionally we did guerilla testing in the newsroom to fire up excitement and support.

Activities

  • Conducted guerilla testing in the newsroom and an unmoderated usability study with 20 participants to test the homepage and long-form articles.

  • Overhauled 600+ components in the Figma design system with the new variables and multi-theme capability.

  • Preparation of developer handoff.

  • Continuous design acceptance testing.

  • Regular syncs with developers to adjust or expand the variables structure as required.

“Very pleasant reading and the pictures pop a lot more”

User feedback from unmoderated usability study

Frameworks

  • We used the classic Kanban agile method to ensure a continuous staggered workflow where design stays ahead of development.

Outcomes

  • 85% of the 600+ components meet the WCAG AA contrast requirements.

  • While the dark theme was perceived very well, we discovered in the unmoderated testing that embedded elements like some ads or sponsor logos didn’t have dark theme variants and either weren’t visible or too bright.

  • Qualitative feedback from the unmoderated study gave us confidence that the reading experience is perceived much better with dark mode in dark environments and that there’s potential for increased user engagement.

  • Documentation of all the variables in Notion as a shared source of truth.

"I would've never imagined Blick could look this sleek in dark"

Head of Newsroom Product

Apple App Store review by a heavy user

Conclusion

The project is going way smoother than anticipated and that also caught the attention of stakeholders in and outside of our department. We’ve received a lot of praise internally for being pro-active and pushing this project forward alongside other initiatives. 

Current Status

  • Updated components with dark mode support are now being deployed.

  • We are actively testing and monitoring everything to maintain accessibility and performance on web, Android, and iOS.

  • We are fixing unexpected issues that emerge like embedded elements we have little control over and new designs from other product teams that need to be continuously integrated.

Lessons Learned

  • Tactical stakeholder communication and involvement with testing reduced internal resistance.

  • Accessibility considerations have to be integrated into the design process.

  • Early developer collaboration and documentation in Notion lead to high efficiency with few implementation errors.

  • Continuous design acceptance testing.

  • Involving and coaching the UX design apprentice in this project accelerated his skills and knowledge gains.

Next Steps

  • There’s no official launch date yet, but progress is fast and steady so we can expect Q2 2025.

  • We still need to finalize and test functional elements like the settings to turn dark mode on and off, as well as the onboarding experience.

  • We might also look into additional theme customization, for example a sports mode.

  • We still have more accessibility gaps to closelike keyboard navigation and screen reader support after the launch of dark mode.