LISA COSTANZO WILKINS
Persuading pixels to achieve their maximum potential
Accessibility
Turn of the screen, navigate your product
Efficient Navigation
That might be contrite, but just to get a glimpse of how 'accessible' our apps and site are, I did exactly this to see how low and no vision users might experience the app. I was able to decipher most of the content on the cover. But finding content, navigating to a different section or turning on my notifications (the ultimate user kudo) was impossible and frustrating. I hadn't been this humbled in while and this was the ultimate humbling experience.
The larger my sphere of accessibility knowledge grows, the larger the surrounding unknown becomes. Sometimes the process is overwhelming, so breaking it all down into task-based chunks kept me focused. These smaller chunks also keep project managers and developers from balking at the sheer lift of retro-fitting an entire app or site with accessible updates. Everyone buys-in to the idea of accessibility updates but that support can wane, or be lost, if it appears insurmountable. Creating blue lines (hand-off specs detailing accessibility values) is underway. Blue lines will be added to existing red line specs and each new feature will also require blue line documentation.
Readable & Selectable
These interface updates are the low-hanging fruit, and great for getting the ball rolling. Among other things, this includes hit areas of a minimum size, and verifying visual elements and text meet AAA WCAG standards.
These improvements include visually highlighting page focus, allowing user to skip our very hefty navigation (40+ links to tab through on every single page without it), and establishing landmarks to allow those using screen readers the ability to hop from section to section.
Clear, efficient labeling
Every selectable item should have clear, succinct labeling. We'll start with grouping elements to remove multiple selections for a single piece of content. Then make our semantic hierarchy more consistent, which will assist when creating a mental map of content. Defining read and focus order will keep content consumption organized and easier to follow.
These are just the top three areas I'm currently attacking because I know that even these smaller improvements will reveal larger structural issues to address.
My biggest take away is build it with accessibility in mind from Day One. Retro-fitting accessibility into any product is a cumbersome, hot mess. And those differently-abled deserve better.
App & Accessibility
DESIGN SYSTEMS
Design systems: because this, just like a goat with a chainsaw, is bulls#!@t.
Reusable components to speed development and iteration
After switching from Sketch to Figma, the design team moved from creating endless versions to a ‘single source of truth’ for current production documents, future updates and past iterations.
Using Figma libraries, variations, tokens and styles, designers quickly mock up new solutions for the ever-changing storytelling needs of the editorial team. It’s easy and efficient for design to quickly prototype new solutions without rebuilding from scratch.
This is the foundational that has enabled a continuing evolution of the NBC New, TODAY Show and Telemundo apps. You can read about it's beginnings here.
Each new element is documented in various breakpoints, device types and brands. Once edge cases and editorial workflow are defined the component is added to the main library. The minor edits that might arise during development can then easily be made and update across all instances of that component.
Establish image ratios, a fixed number of font styles and reusable, scalable icons, flag and buttons sped up component iteration .
Our atomic and molecular components decrease time to create mockups and getting those mockups into user testing. The grid system is based on 4px to allow for maximum flexibility and consitency with web. The atomic nature reduces the lift for web and mobile developers since all variation can be derived from the base values and behaviors.
Samples of variations for teases, section shortcuts and informational banners.
New brands can be brought online quickly
Brand variants allowed the system to scale from the NBC News app to the TODAY show app and also to Telemundo Noticias. This is a very useful feature, as long as each property is solving the needs for their unique user base. What might work for NBC News, might not apply to TODAY fans or viewers of Telemundo. This is where a simple variation might not work and the best course of action is a new solution.