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.