Spectrum News Weather
Improving accessibility standards in a mobile app led to a forward-thinking redesign
This project was not shipped due to roadmap priorities. Still, it taught me invaluable lessons on adapting to meet accessibility requirements and understanding the value of small iterations versus full redesigns.
Background
Charter holds themselves to a higher standard than minimum accessibility requirements. When another designer on my team was making small enhancements to the Spectrum News Mobile app’s weather experience, our Accessibility Architect brought to our attention that the standard IBM weather icons being utilized from the API did not meet color contrast standards, and thus, are inaccessible to users with low vision, low screen brightness, and more.
Duration
October 2021 - January 2022
My Role
Lead Product Designer
Deliverables
Competitive Research, Color Contrast Analysis, UX Strategy, High-Fidelity UI Designs
This product follows WCAG 2.0 Contrast and Color requirements, so I tested all of the weather icons against each of the 12 time-of-day gradients as well as against a white background.
Icons fail 3:1 against 50% of gradients and all white backgrounds.
Competitive research showed us that our top competitors were following a few interesting patterns that helped their accessibility scores and modernized their approach to presenting weather data to their users.
Given all of this insight, what was the right approach here? We needed to meet users where they are on more levels, so I brought to the table the idea we should revamp the experience as a whole while simultaneously improving the accessibility of the page.
I set out with three key recommendations that met business needs and helped remedy the existing user experience:
Flexible Layouts
Personalization is consistently a meaningful business goal for this product. I recommended designing an experience that lended itself to flexible layouts that could eventually be personalized by producers and news viewers alike.
Unifying the Product Suite
In order to meet color contrast standards on our new TV app, we had to revise the gradients. So, I recommended increasing parity across the omni-channel experience by darkening the mobile gradients to match. This change would be a step in the right direction to help us meet color contrast standards.
Universal Usability
Back to the original problem at hand. For our low vision users, we want to ensure we are meeting color contrast standards for this experience. Users who use the app with low brightness on their screens fall into this category as well and we want to safeguard against all low visibility situations.
Understanding where our existing work fell short
A plan for future-proofing
Not enough resources for a full redesign
Not enough resources…. at all.
Since we weren’t in the market to do a full refresh, I explored a few more simple approaches. However, few solutions were providing the full accessibility pass we needed. I landed on extension of the gradients to provide a full-screen background and implemented cards with a black opacity to section content and improve color contrast ratios.
Here are a few other design decisions I made along the way:
Modify Time of Day Gradients
The gradients for the mobile app are a very sensitive feature for the business as it is a primary indicator of brand and personality. The existing gradients are on the bright and playful side, so I wanted to ensure we met in the middle between our TV gradients that were darker due to the 10-foot experience, and the existing bright, playful gradients.
Adjust Icon Coloration
Since we had the developmental capabilities to modify the icon coloration, I adjusted the icons to match the colors set forth by our design system.
Weather Event Gradients & Alerts
Using color and text to indicate status of weather alerts, I presented initial concepts for each use case.
Weather Widget Explorations
This also brought an opportunity to reimagine the weather widget (and other homepage widgets) to emulate the new approach across the app and increase accessibility. Since this design is present on the homepage of the mobile app, there are some further implications to consider such as parity. This implementation would likely come along with a full app refresh.
Omni-Channel Experience
A teammate of mine was representing our future tablet experience and we came together to present a beautiful, thoughtful product suite. This was a big key in receiving buy-in from stakeholders and moving this initiative forward.
This pitch recieved initial buy-in from our product partners, but ultimately was deprioritized against other roadmap items.
