Spectrum
Universal Product Page Enhancements
PS
On a series' product page, customers bypass the preferred episode and navigate to the episode list in order to choose the episode they would prefer to watch. The episode list can be complicated by volume and/or broadcast schedule making this a potentially arduous task. If the customer doesn't prefer the MIV stream presented in the episode list, their only option is a “more ways to watch” list that is cluttered and unclear.
Hypothesis
Using episode images to represent the preferred episode in combination with the table of trust will aid identification and expedite the customer’s journey to video. Changes to the episode list and the more ways to watch template will create a progressive "preferred then overflow" scenario at each level to help direct the customer to video at each step.
Outcome
By introducing new tactics targeted at improving the customer experience, we successfully changed customer behavior to watch more content through Spectrum TV.
Exit from Player UX
PS
28% of all customers that start an episode of a series on VOD exit the session before watching at least 10% of the episode. In certain conditions, exiting the episode session does not present other episodes of the series to the customer causing frustration.
Hypothesis
Research shows that a percentage of customers quickly leave an episodic VOD/DVR session because they are looking for a different episode of the series they are currently watching. Adding navigational functionality to the video player while the user is in a video session will allow continued engagement without exiting playback, and could lead to a higher MOS score for VOD and DVR series.
Outcome
Improved customer experience by increasing in-viewership and session length for our VOD and DVR catalog assets.
Startup Channel
PS
Spectrum News streaming engagement numbers have dropped due the lack of proper promotion.
Hypothesis
By tuning users to Spectrum News on app launch, we will increase awareness and potential for future engagement.
Outcome
Increased engaged viewership of Spectrum News on Spectrum TV Apps and Spectrum Guide.
Spectrum
Universal Product Page Enhancements
PS
On a series' product page, customers bypass the preferred episode and navigate to the episode list in order to choose the episode they would prefer to watch. The episode list can be complicated by volume and/or broadcast schedule making this a potentially arduous task. If the customer doesn't prefer the MIV stream presented in the episode list, their only option is a “more ways to watch” list that is cluttered and unclear.
Hypothesis
Using episode images to represent the preferred episode in combination with the table of trust will aid identification and expedite the customer’s journey to video. Changes to the episode list and the more ways to watch template will create a progressive "preferred then overflow" scenario at each level to help direct the customer to video at each step.
Outcome
By introducing new tactics targeted at improving the customer experience, we successfully changed customer behavior to watch more content through Spectrum TV.
Brief
As the enablement team product designer, I developed solutions for episodic and non-episodic series’ product pages, episode lists, and more ways to watch so that users could rely on the assets product page as the main entry to watching from our VOD assets. The scope included; an internal analysis of the VOD assets user journey, defining episodic v. non-episodic series, updated user journeys that enhanced playability, lo-fi annotated wireframes, illustrating each pages problem statement with an appropriate hypothesis, UI fallbacks, hi-fi designs, creating prototypes for A/B user testing, and direct collaboration with our user research team in their key findings.
Principles
Provide fastest path to the correct content
Allow the customer to correct in we’re wrong
Whole Season or Series
Episode List if we’re way off
MWTW (More Ways To Watch) if we picked wrong stream
Presents more details and options progressively
Success Metrics
The vast majority of engaged users watching starts from live TV, and live TV templates. So improvements to the series page will not have a large impact on overall business success metrics. However, the following feature metrics should be increased.
Overall business success metrics should not be negatively impacted.
Number of customers selecting the preferred episode from the series page should increase.
Better group information and properly present the information throughout page flow while maintaining interest
Incorporate client flexibility through the use of a CMS
Design Process
Discover
Define
Ideate
Design
prototype
Test
Discover
Internal Analysis
By looking at the VOD user journey we are able to define the current and proposed solutions across the spectrum of entry points.
Define
User Journey Improvements
As a user I want a simple way to correct a wrong episode without having to jump through hoops, so that I can get to a place I recognize faster.
Improve presentation of the Preferred Episode with imagery and logic to increase trust and conversion.
Introduce current season swimlane in case Preferred Episode is incorrect.
Remove unwatchable content from the episode list and improve the presentation.
Clean up More Ways to Watch to focus on stream type or provider and not airtime.
Introduce Episodic VS Non-Episodic Series differentiators in UI presentation
User navigates to series page with focus on PE. Selecting any episode will Express Play the MIV.
If the user wants a different episode they select “All Episodes” and go to the Episode List. Selecting any episode will Express Play the MIV.
User changed the episode and also didn’t like the MIV. They select “More Ways to Watch” they choose from all known streams of that episode.
Episodic referrers to series based shows such as breaking bad, or game of thrones. Non-episodic referrers to series that are non-linear such as game shows and the news.
Preferred Episode
Other episodes in season
All episodes
Ideate
Entry Points from Series Page
Product Page
Episode List
More Ways To Watch
1. Product Page
Currently, our product pages are not correctly informing the customer of their Preferred Episode due to inaccurate bookmarks and table of trust info.
More reliable episode presentation will lead to a more efficient episode selection process, and more video streamed. It can also lead to an overall more enjoyable experience to our customers.
Focused “Watch” Button is PE and is only Express Play
Episodes in-point to Episode List (All Episodes)
Focused Episode is PE (the MIV may give you different stream type)
The swimlane is the season of the PE - Season is fixed
All Episodes are Express Play
Episodes in-point to Episode List (All Episodes)
Table of Trust and DFTA
2. Episode List
Episode lists are challenging for series with many episodes, series with a lot of upcoming airings but few OD episodes, and series with many seasons. Customers can find this confusing, hard to navigate, and frustrating.
Episodic art will help modernize our apps, as our competitors use episodic artwork and it's become an expected feature in video apps.
A cleaner and more easily navigable episode lists will help our users find what they want to watch and stream more video, as well as increase overall customer satisfaction.
Seasons are stacked
We default to the top of the list, but there can be unwatchable future air times (not re-runs)
Episode and the description can have a better UI treatment
Elimination of future original airdates increases the chances of the default being watchable. Episodes are in descending order.
Season picker makes navigation easier for long running series
Episode art is more appealing but not redundant
Season Picker
Episode List all episodes are watchable with Express PlayOther episodes in season
Episodic Artwork
3. More Ways to Watch
More Ways to Watch can suffer from the same issues as Episode Lists by presenting a large volume of future air-times as opposed to available stream types.
Separating future airtimes, stream types available, and 3rd party applications will help our users by finding the other ways to engage with a stream they want to watch.
Similar to episode lists this will help our users stream more video and increase overall satisfaction.
Mobile currently has a much better UI than the other platforms. Some platforms do not show all upcoming air times.
Record - only showing next airtime
Watch - Spectrum On Demand
Launch - 3rd Party App
Current
Kite Spec (Spectrums Design System Team)
Proposed
Design
Hi-Fi UI
Prototype
Prototype Needs
Existing Design
New Design
The prototypes should be high fidelity, but do not need to be all that robust. Meaning, they should look close to production, but we can focus on only a few pages/templates. It does not need to fake a full app experience.
We do not need to have any video or audio streams, mostly linked static images to fake a true experience.
VOD Landing page > Episodic Product Page with a PE > Ability to go forward and backwards within the list of episodes (new design) > Go into Episode List > Navigate the episode list up and down and change the season
We will want that flow available for a show that the PE is S1E1 as well as a show where the PE is in the middle of the series (like S3E4) AND a show that a customer is in the middle of an episode (as a resume, not a start from beginning).
Test
User Research Results
The proposed changes to the product page are positive
What makes the new product page designs successful is the way it grounds an episodic asset in time. There is an easy way to correct if the PE is wrong, and there is a level of confidence associated to a timeline like view of the episodes.
The PE in the current design does not tell the customer that it is an episode that you want to watch
Without neighboring episodes or earned trust, the current PE implementation is at best , wanting to be double checked, and at worst, unaware that an episode is being presented to play.
The season picker could use some more research
The season picker interaction was the only potential tricky section for the proposed designs. It was not always clear that the season could be changed.
Its OK if non-serial episodes look different
It was not a problem to participants that the non-serial episodic assets performed differently that a serial episodic asset. However, to fully identify the needs associated with this type of content, a deeper dive with quant should be evaluated.
Does the new product page design increase trust that the PE is the episode the customer wants to watch?
Almost half of the participants (46%, 6/13) who used the current version, went straight to the episode list instead of selecting “Watch” from the CTA
Some of those participants knew it was S6E1 that would play, but didn’t feel confident, and some did not know that ”watch” would play a specific episode.
When completing the same task on the proposed version, all participants easily knew that to play S6E1, they would just select the first thumbnail.
In terms of measured trust and confidence, there was not a statistical difference between the two experiences, though qualitatively, the proposed version took away any element of guessing.
Participants were able to see how it was much easier to self-correct with a list of episodes right off the bat, regardless of the imagery.
The reason that the proposed product page performed well was not necessarily because of the episodic imagery. It’s about grounding the series in time.
When you are trying to play a specific episode in a series, what helps you know what episode to play? Select all that apply.
When explicitly asked, the imagery itself is not what is helping the participants choose the episode they want. Instead, it’s the organization and the ability to see multiple episodes without having to go to an episode list. It’s not that going to the episode list to play your episode is a poor experience, its just an additional step.
This means the design can be flexible if improvement are wanted but episodic images cannot be acquired.
The new episode list performed well and helped ground the participants to the list from the product page.
There was mixed feedback on whether participants prefer having all episodes in a list or having the ability to switch seasons.
A potential compromise is having the long list and the season picker that jumps you to that point in the list.
The one area that needs some additional thought is the actual season picker interaction.
The carrot next to the season was not always enough to indicate to the participants that they could select that area and change the season.
80% (12/15) of participants did not change the season when asked to play the latest airing for Who Wants To Be A Millionaire.
Most of the engaged watching starts from live TV, and live TV templates. Because of this, improvements to the series page will not have a large impact on overall business success metrics. However, the following feature metrics should be increased.
+ Overall business success metrics should not be negatively impacted.
There were no indications from a qualitative angle that any success metrics would not negatively impacted with the new product page designs.
+ Number of customers selecting the preferred episode from the series page should increase.
If the logic is correct, there is qualitative evidence that the new product page designs positively reinforced the PE more so than the current product page design.
+ Number of customers returning immediately to the series page / episode list should be reduced.
A main positive for the proposed product page is the quick access to a different episode without having to open the episode list.
- Number of engaged streams originating from a series page should increase.
There was nothing found in the qualitative research to suggest it would decrease, though hard to pinpoint that it will increase.
It could be beneficial to insert a peek before the first episode of a new season.
Participants were confident that they wanted to watch that first episode (S6E1), though some still wanted to confirm that they had already watched the previous episode.
This could just further ground the timeline and aid in confidence.
Testing did not instill 100% confidence that the season picker interaction was clear to participants.
The pattern is a little ore web heavy, so it would be nice to have testing using a remote on the 10ft experience to truly vet that it works well in this scenario.
When asked, anecdotally, what helps instill trust for what episode to play, bookmarks was very important. With the split of both VOD and Linear access, bookmarks become very important for keeping up with currently airing shows.
Spectrum
Exit from Player UX
PS
28% of all customers that start an episode of a series on VOD exit the session before watching at least 10% of the episode. In certain conditions, exiting the episode session does not present other episodes of the series to the customer causing frustration.
Hypothesis
Research shows that a percentage of customers quickly leave an episodic VOD/DVR session because they are looking for a different episode of the series they are currently watching. Adding a previous and next episode option in the video player will allow customers to change the episode without exiting playback, and could lead to greater engagement with VOD series.
Outcome
Improved the customer experience by achieving market leadership position as the highest-rated live Video app.
Brief
As the enablement team product designer, I was tasked with finding a solution that would improve the customer journey for our VOD and DVR series catalog users. The scope included defining the design goals based on business needs, overall strategy, annotated competitive analysis, competitive analysis matrix, internal analysis, mapping user journeys (current and proposed), interaction mapping (current and proposed), lo-fi UI iterations, and two final development LOE paths. After the handoff, I worked with the greater video teams in direction and quality assurance.
Principles
Should aim for continued engagement
The research revealed that users predominantly exit the VOD player due to choosing the wrong episode, not to stop watching entirely, thus we had to make re-entry to watching as painless as possible
Consistent logic
The formatting of this UX cycle will drive consistent experience across all platforms that is most optimal for customer engagement.
Diverse user approaches
Not all episodic sessions are launched from an episode list, the series UPP will launch a session immediately on the assumed preferred episode and does not offer the user multiple episodes. A solution must be able to satisfy the needs of users who select their video content through a variety of options.
Success Metrics
Have no negative impact on core business metrics while providing valuable information in regards to the following metrics
Percent of customers that exit an individual episodic VOD session while under 10% will remain the same.
VOD engagement will as a result of offering access to the correct episode.
Percent of those customers that will start another sequential episode session instead of leaving the app or returning to live will increase.
Average minutes watched of episodic VOD will increase.
Design Process
Discover
Define
Ideate
Design
Design Process
Discover
Define
Ideate
Design
Discover
Competitive Analysis
10-FOOT
MOBILE
WEB
Data Analysis
Define
Mapping
For a more enjoyable user experience our focus should be around the flexibility of quickly moving to another episode within the same season while staying in the video player. We can do this in two ways by jumping forward and backwards an episode, or by accessing all the episodes within a season.
Ideate
Lo-Fi Design Concepts
Design
Phase I - CTA's
Current - Correct For Episode
Proposed Correct For Episode
Mapping Diagram with Next + Previous CTAs
“Next Episode” and “Previous Episode” CTAs surface below trick play banner
Typical pattern based on competitors that the trick mode is entry to change an episode
Moving forward or going back an episode within a season is easily executed in the player
Moving to the next episode in a new season does not need a special UI treatment
Minimal UI changes
Ability to test hypothesis with low development LOE
Low cognitive load on users
Next Episode Available; Next Episode Button Presented
Metadata; Current Season, Episode, and Episode Title Callout
End of Season; Next Episode Button NOT Present
Metadata; Current Season, Episode, and Episode Title Callout
Phase II - Swimlane
Mapping Diagram with Swimlane
Series Swimlane surfaces below trick play banner
Typical pattern based on competitors that the trick mode is entry to change an episode
Moving forward or going backwards by a few episodes within a season is easily executed in player
Episodic images help in selection of correct episode and enhance product value
News, non-sequential, movies and sports could still house both live and non live assets
Iteration of an end of season but there are still remaining seasons will need to be investigated further
Scrubbing Bar Focused
Asset Focused
Spectrum
Startup Channel
PS
Spectrum News stream levels are low do to lack of promotion through UX design.
Hypothesis
Auto tuning users to Spectrum News on app launch will
increase awareness, and provide for future engagement. Control of this feature would be found in settings.
Outcome
Increased engaged viewership of Spectrum News on Spectrum TV Apps and Spectrum Guide
Brief
As the web platform designer, I was tasked with addressing the business and design goals from our Design Enablement Team. My scope included the web platforms supplementary UX design documents, UI documentation, creating the Start Up-channel lock-up component, and leading the greater platform design teams (Mobile and 10-foot) in the overall UI direction.
Principles
Startup Channel should be customizable.
The Spectrum Apps currently default to the last channel a user watched in the previous session when the app is opened. Though we aim to increase user engagement of Spectrum News, it should still be customizable, so the user can select what channel is persistent on startup or revert to the last channel viewed in its original state.
Experience should provide an obvious path of how to set up Startup Channel.
There is currently some confusion about what “Last Channel” means for the current experience on our Set-Top-Boxes (Cable Boxes). The addition of this new feature requires informing the user on how to properly customize their experience.
Should be fully accessible.
Any patterns used should be A11y compliant.
Should honor Parental Controls.
In the event the user selects a channel that is parentally blocked, there should be an obvious UX and intuitive UI to inform the user that it will honor preset parental controls.
Design Process
Define
Ideate
Design
Define
UX Screens Cross Platform
Cross platform UX requirements were crafted by our Design Enablement Team. The Design Enablement team would then hand off their findings and accompanied UX deliverables to the independent platform designers to use as a blueprint.
From these artifacts, we would then supply any additional artifacts needed for our specific platform.
Startup Channel Switch OFF
Startup Channel Switch ON
Manage Startup Channel Grid
Parentally Blocked
Select Startup Channel (Alternative)
Manage Startup Channel Grid (Alternative)
While we were handed documents from the overarching Design Enablement team, each platform would need to create UX documentation that was specific to the needs of their independent platform.
Ideate
Lock-up Design
Designing the Startup Channel Lock-up was the first step in creating the UI. This houses the network logo, channel call-out, and channel name is used to verify the current startup channel to the user.
Card Component UI
Creating reusable components was a high priority throughout the cross platform initiative. A recent on-boarding project used cards to represent a multi-selection grid for transactional purposes.With the addition of the Startup Channel feature, we developed a set of core UI principles to demonstrate the reusable card component states.
There were several different variants proposed prior to the final UI. Most of which were around:
Size of the grid
Size of the tiles
Size of tiles effecting other platforms UI
Visual representation of the user selecting "return to last viewed channel" within the grid
Design
Final UI
The final UI was developed through direct conversations between the web platform product and engineering team, as well as the other platform designers and their teams. This helped in parity across our platforms and helped in ironing out any kinks that may have presented themselves respective to the independent platforms.
The final UI deliverables were kicked-off with an all hands platform meeting demonstrating the final UX/UI artifacts. Then promptly handed off with the product, development, and QA teams. After handoff, each platform was responsible for answering questions and processing the design from development to release, while mediating with the other teams involved.
App Entry New Feature Notification
.png)
Startup Channel OFF
.png)
Startup Channel ON
.png)
Parental Control Block
Hover Startup Channel
.png)
Startup Channel Selected
