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?
My Role
Senior UX/UI Designer
Contributions
UI DesignDesign SystemAccessibilityUsability TestingDev Handoff
Timeline
Q4 2024 - Q2 2025
Team
POTech LeadWeb DeveloperiOS DeveloperAndroid 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.
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?
My Role
Senior UX/UI Designer
Contributions
UI DesignDesign SystemAccessibilityUsability TestingDev Handoff
Timeline
Q4 2024 - Q2 2025
Team
POTech LeadWeb DeveloperiOS DeveloperAndroid 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.
Countless App Store reviews mentioning the missing Dark Mode after launching the redesign.
Countless App Store reviews mentioning the missing Dark Mode after launching the redesign.
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.
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.
Countless App Store reviews mentioning the missing Dark Mode after launching the redesign.
Countless App Store reviews mentioning the missing Dark Mode after launching the redesign.
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.
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.
Countless App Store reviews mentioning the missing Dark Mode after launching the redesign.
Countless App Store reviews mentioning the missing Dark Mode after launching the redesign.
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.
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.
Countless App Store reviews mentioning the missing Dark Mode after launching the redesign.
Countless App Store reviews mentioning the missing Dark Mode after launching the redesign.
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 close like keyboard navigation and screen reader support after the launch of dark mode.
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 close like keyboard navigation and screen reader support after the launch of dark mode.