CityNews – Product Design
Web, App (iOS & Android), Mobile, Tablet, Android Auto & Apple CarPlay
Role: Product Designer
Platforms: Web, iOS, Android, Mobile, Tablet, Android Auto, Apple CarPlay
Tools Used: Figma, Jira, Confluence, Accessibility Platform (Level Access), Browser DevTools
Overview
CityNews is a trusted Canadian news outlet delivering up-to-the-minute local, national, and international news across digital platforms. As the only Product Designer, I was responsible for leading the end-to-end design efforts across all digital products, with a core focus on accessibility improvements and cross-platform consistency.
Project Objectives
Address and resolve accessibility challenges, particularly for users utilizing custom stylesheets or browser-based overrides (e.g., high contrast mode, large fonts, letter spacing & line height).
Create a cohesive and responsive design system for CityNews across multiple platforms.
Improve readability, navigation, and discoverability of news content.
Ensure seamless, user-friendly experiences across web, app, tablet, and in-car systems.
Research & Discovery
Accessibility Audits: Conducted detailed audits using Level Access, identifying issues with color contrast, font scaling, letter spacing, semantic structure, and keyboard navigation.
User Feedback Review: Analyzed reports from users who rely on assistive technologies (e.g., screen readers, custom CSS) to pinpoint recurring pain points.
Competitive Benchmarking: Studied leading news platforms (BBC, NPR, CBC) to evaluate how accessibility and multi-platform support were being addressed.
Design Process
Accessibility-Focused UI Improvements
Standardized color contrasts and font hierarchies for legibility.
Rebuilt UI components to support user overrides, especially for font size and layout modifications without breaking responsiveness.
Ensured Text labels and semantic HTML elements were included in design specifications for screen reader compatibility.
Multi-Platform UX Consistency
Designed responsive and adaptive layouts for:
Web and Tablet: Grid-based layouts for better content scannability and ad placement flexibility.
Mobile Apps (iOS & Android): Optimized touch targets, simplified navigation, and news categorization.
Android Auto & Apple CarPlay: Prioritized voice interaction and large tappable elements for safety and clarity.
Design System
Created a component-based design system in Figma with auto layout, CDK’s, and accessibility guidance built-in.
Developed documentation to support dev handoff in Dev mode and future scaling across Rogers Media products.
Collaboration & Implementation
Daily syncs with Product Manager, Project Manager Developers and QA to ensure designs met technical and accessibility standards.
Reviewed and signed off on UI tickets post-development to confirm fidelity to accessibility improvements and design intent.
Sprint planning and Design presentations with PMs and engineers to walk through new user flows and rationale behind accessibility-focused decisions.
Results & Outcomes
Significant reduction in user complaints related to broken layouts when using browser custom stylesheets or accessibility tools.
Improved readability scores and mobile session duration due to better font scaling and layout responsiveness.
Strengthened accessibility compliance across platforms, moving closer toward WCAG 2.1 AA standards.
Created a scalable design foundation that supports future iterations of CityNews’ digital experiences across platforms.
Reflection
Designing for accessibility isn’t just a technical requirement—it’s about respecting and including every type of user. My work at CityNews challenged me to go beyond aesthetics and focus on functional inclusivity, ensuring that every person, regardless of ability, has equal access to information. Leading the design for such a widely used platform—and seeing the impact on real users—was one of the most rewarding parts of my design journey.
Explore CityNews: citynews
Listen tab
