Mobile Symbol Library • Sketch

Problem: When I started at Charter Communications, we were experiencing massive growing pains, especially with design consistency across several platform applications (iOS, Android, Apple TV, Xbox, Samsung, Roku, and Web).

Objective: Take "atoms" and "molecules" of the new design system, named "Kite", and build an organized Sketch symbol library for documentation, ease of use, and overall design consistency.

Solution: I built a comprehensive Sketch Library file for the Spectrum TV App (iOS & Android) with reusable components that completely covered the UI of the entire Spectrum TV App and all of it's edge cases. This required communication with the Kite Design Systems team and close collaboration with other Video team designers to ensure that the design elements were consistent with our other video platforms (Apple TV, Xbox, Samsung, Roku, and Web). With the symbol library acting as a living document, I then was tasked with creating Sketch template files for all the major pages and features of the application.

Success! This Mobile Symbol Library continues on as a living document and guiding star for new mobile Spectrum projects and mobile design workshops that have arrived afterward.

Product Page Facelift

Problem: The existing Product Page was not built with native or A11Y users in mind. Accordion-style episode lists that opened and closed on their own was a nightmare for voiceover users. Additionally, the "Info" tab was hiding several important series-level actions like Watchlisting shows and setting Series Recordings.

Objective: Create an A11Y-compatible design that is consistent with product page UI/UX on all of Charter's other video platforms, but also prioritizes the iOS and Android native functionality and screen sizes.

Solution: In collaboration with the UX Research team, I validated UI concepts through comparative usability testing. We simply presented users with tasks to complete on the old implementation versus a prototype of the new design. The old design scored a 75% SUS (System Usability Scale), while the new design received 97% SUS! After a year of development on both iOS and Android, the new Product Page design was released in early 2020.

Success! Using the new design, users set 300% more series recordings and users watchlisted 30% more than in the previous design!

Native Mobile Expertise & Accessibility (A11Y)

Overall, after 4 years and countless JIRA stories, I’ve truly enjoyed my time spent at Charter. When I joined, I was the 50th designer on the team and now we have a Design team that is ~150 members strong with funny, fantastic designers everywhere you look. It was a real pleasure and incredibly humbling when I realized I had become something of a native mobile design expert for iOS and Android. My symbol libraries used as a guiding star. My input sought-after in design workshops for products that I had no involvement in.

Not only have I grown immensely as a designer, but my empathy towards A11Y customers was a brand-new experience for me. I feel confident that I can be a champion for A11Y users to design more inclusive experiences for those who need it.

What My Colleagues Said...

"Allen continues to step up and push through challenges with even the toughest product owners."

Ben G.
Product Manager at Charter Communications

"Allen has an excellent work ethic and his capability to move between strategy to execution is unmatched. He is always on top of industry trends and is one of the most collaborative designers I have ever seen– working easily with product and development to reach both user and business goals. On top of all that, he's a pretty great culture hire, bringing his chill and adventurous personality to every meeting."

Hannah F.
Product Designer at Charter Communications

"… those slides kick ass. Kudos to you. That should make developing for those different scenarios so much easier."

Joe L.
iOS Developer at Charter Communications

Next Project