Spectrum:

Channel Add-Ons

UX Design

 

Overview

Team: Colleen Keegan (Product Designer), Kendra Doss (Team Lead)

My Role: UX/UI Designer, Strategist

Tools: Sketch, InVision

Timeline: April-May 2021, December 2021-January 2022

 

Background

Channel Add-Ons was conceived as a shopping experience, aimed at enabling customers to customize their television plans by adding individual channels and packages to their existing subscriptions. The inclusion of sports, international, and premium channels had garnered significant interest from our customer base. Although design ideation and user testing had commenced earlier in 2021, the project had been put on hold until later in 2022. Due to the strong customer demand, Spectrum responded by adjusting its roadmap to expedite the development of Channel Add-Ons, targeting a Q1 launch.

Prior to this, our team had been deeply immersed in another project, leaving us with limited time for thorough exploration. This re-prioritization necessitated having the initial design work ready by the end of December, allowing for testing and the commencement of development work in January. The total timeframe for this project was 3 weeks.

The Goal

With such a quick timeframe, our goal was to utilize our previous designs to create a high fidelity feature that users would still find easy and fun to use. Even with the short timeframe, we made the best of the time we were given. The end result was that Channel Add-Ons was one of our most successful features in the My Spectrum App.


Research

Real World Patterns


I conducted a competitive analysis, examining competitors with similar add-on features to ensure our alignment with industry standards. During this research, it became evident that there were certain design aspects we wanted to avoid replicating in our own experience. Here are the design principles we are committed to incorporating into our own offering:

  • No nonsense navigation that allows for easy browsing between channel types

  • Easy access to viewing channel lineup

  • Fast views at a glance, putting most popular channels first

  • A viewable cart that allows you to add and remove easily

  • Fast checkout without any speed-bumps

The insights derived from these examples empowered us to enhance the core UX principles that underpin our approach. Our goal in doing so was to maintain the trust and satisfaction of our customers while effectively addressing the goals and concerns of our business endeavors.


 

Wireframes

Early Planning

Our vision for Channel Add-Ons was ambitious, and meticulous planning was crucial to ensure a seamless and user-friendly experience. To establish a solid foundation for our high-fidelity designs, we generated numerous wireframes, illustrating various scenarios and details to guide our development process.


Design

Hi-Fi Native Patterns and Responsive Web

As time was running short, we adopted a divide-and-conquer strategy. My design lead focused on the web view, while I took charge of the native mobile view. Close collaboration between us was essential to ensure alignment across our designs, particularly when it came to responsive mobile views

 

Special Features


Spectrum's shopping experience in various sections of the application is straightforward, largely offering items such as internet plans or TV packages. However, Channel Add-Ons presented us with a distinctive opportunity to enhance the shopping experience by granting customers greater control and customization options.

 

Simple Navigation


Facilitating effortless switching between different channel options was a key objective. To accomplish this, we implemented a slide-able tab menu, drawing from common real-world patterns to ensure user-friendly navigation.

Sticky Footer Shopping Cart

Since Spectrum lacked a traditional shopping cart experience, introducing this feature was pivotal. Our aim was to empower users to "grab and go" while also providing them with a straightforward means to edit the contents of their cart for added flexibility.

Easy Selection

We aimed to offer users the convenience of selecting multiple packages and channels simultaneously, eliminating the need for individual purchases. To achieve this, we implemented selection buttons that allowed users to effortlessly choose or deselect items as needed. Additionally, if a user had a package selected, we pre-selected channels already included in that pack to enhance the user experience.

Details on Channels


Numerous specialty channels feature users' favorite shows, and it was crucial to provide them with a seamless way to discover this information effortlessly.

 

High Fidelity Flows

Given the complexity of our proposed designs, we chose to create a series of flows that encompassed various add-on sections, detailed views, cart states, and purchase options. This approach ensured that everyone involved had a clear understanding of the direction we intended to pursue.


Validate

User Testing


I developed a fully functional, high-fidelity prototype for the new flows using InVision. Simultaneously, we initiated the recruitment process for test subjects who met our specific criteria.

First Round Findings

In the initial round, we conducted 10 usability tests. Remarkably, 9 out of 10 subjects navigated the purchasing flow without encountering any issues and even found the experience to be exceptionally smooth, deeming it "too easy." However, 4 out of the 10 users encountered difficulties with a couple of the initial proposed entry points, particularly those associated with additional marketing elements.

Solution
Upon learning about the confusion surrounding the entry points, we made the decision to streamline our approach by eliminating extraneous entry points that didn't resonate with users. We opted to retain the entry points that demonstrated clarity and user-friendliness. This adjustment served as a valuable starting point to gauge user comprehension and satisfaction.

What’s Next?
Due to the limited timeframe, we were only able to conduct a single round of testing. Nevertheless, testing continued with the beta releases. Despite the time constraints, we made the most of the available time, and Channel Add-Ons ultimately emerged as one of the most successful features in both the My Spectrum App and Spectrum.net.


Next Steps


Since the launch of this project, Spectrum has made the decision to discontinue the native functionality of the My Spectrum App altogether, opting instead for a transition to a responsive platform. This was due to the heavy amount of development work that both the native app and responsive web required. While this feature will continue to be a part of Spectrum's offerings, it may undergo some changes in appearance and functionality in the future.

Lessons Learned


My tenure at Spectrum has exposed me to numerous projects that have undergone fast-tracking or shifts in priority. As designers, adaptability is a crucial skill, and I've learned to navigate these changes effectively. This experience has taught me the art of prioritization, enabling me to focus on the most critical elements within tight timelines. While each project may demand different priorities, it has been a valuable experience in crafting exceptional products with precision and care, even when working at an accelerated pace.


Are you ready? So am I