Shaw Direct
Shaw Direct is the satellite TV subsidiary of Shaw Communications - where I currently work! For the past few months I have been focusing on the checkout process - what we refer to as the plan builder (or “builder” for short). It’s an area of the website that has a huge amount of potential. We have a long roadmap of features we plan to test but I will dive into the items that we have tested as well as ones we are starting to work on.
Fresh look
The current design and layout have been around for many years and needed a refresh. In 2020 Shaw implemented a company-wide rebrand, so using the new style guide I refreshed the UI. Immediately it helped to lighten up the page; the black bars were gone, old branding patterns removed, new fonts, new colours, new icons, and I removed any unnecessary elements that weren’t serving a purpose to the user.
The rebrand helped, but there was still a lot that could be improved. I began writing a list of potential testing opportunities and then presented them to the product owner. As a team we collaborated to refine the opportunities further and determine which KPIs we would track.
Customize your channels
We presented our list of ideas to our analysts, who would develop and run the multivariate tests. For phase 1 we limited the scope to testing Step 2 of the Builder: Customize. On Step 2 a customer can pick and choose which channels they would like to include in their TV package. For example, customers who choose the ‘Medium TV’ plan get to choose 30 bonus channels from a long list of options.
What was our goal?
Our goal was to improve the buy flow process to make it more seamless for customers to convert and increase in-funnel conversions.
The current problem
Step 2 has a lot going on. Users have the option to use the toggle at the top to choose their own channels, or have channels chosen for them. If they prefer to choose, then they would need to scroll through the list of options, adding and removing as they like, until their selections are completed. Once they have selected 30, they have to click on the “Finalize selections” CTA at the top to save them.
The selected channel overview section (blue box) follows them down the screen as they scroll and it takes up quite a bit of real estate on their screen. The search bar and list of categories were also taking up a lot of space and not receiving a tonne of engagement.
The add/remove CTA’s also took up extra space and could be simplified.
What are we going to test?
Variation A
Move the categories and search bar to the top of the channels list
Display five channels in a row versus four
Only display four rows of channels at a time and add a CTA below that says “Load more channels”
Add a “Finalize selections” CTA to the bottom of the channel list
Variation B
Channel overview section does not follow the users scroll
Added a side tab that would follow their scroll, but is much smaller and displays how many channels they have left to pick
Variation C
Combination of the changes from A with the side tab from B
I provided the mockups that the team would build out and test. The tests were presented to our new and existing customers, as well as French and English customers, and mobile/desktop users. Across the three variations we updated the style of the CTA’s as well as removing the box around the channel logos. We felt that these elements were more in line with the rebrand and wouldn’t negatively impact the test results.
Metrics
The metrics we were going test include:
Increase in Conversion rate - did the sales go up?
In funnel conversion rate - % of visits that start a cart that reach the thank you page (complete the purchase)
Advancement rate from Step 2 Customize to Step 3 Select Equipment
My hypothesis
My hypothesis was that Variation C would be the winning variation, the combination of all elements. I surmised that users would prefer to have the channel overview section stay at the top, that it would be less intrusive and give them more screen space to view their options. I assumed that moving the categories and search to the top, and widening the rows would also help by showing more options at once, leading to a faster checkout. Lastly, by adding the “Finalize channels” CTA to the bottom of the category, users would proceed to Step 5 much quicker due to its proximity.
So, how did it perform?
We got back some great results! Not exactly the results I had hoped for in my hypothesis, but that’s why we ran the test. Variation A was our winner - it turns out our users do like having the channel overview section follow them down the screen. This could be because users prefer to see their options as they go, without having to memorize what they have already chosen. Variation A increased conversion by 6% and was the only variation to increase advancement rate from customize to the contact information set up. Variation A also performed especially well on mobile, increasing the conversion rate by 9%.
We went ahead with implementing Variation A and it is now live on both desktop and mobile.
Future tests
As I mentioned earlier, we have a long roadmap of test ideas for this page but I can share a few that are in progress:
Test 1
Change: Splitting up Steps 1-7 with a ‘Quick checkout’ CTA
Hypothesis: Giving users the option to check out faster after completing the requirements to purchase will increase conversion rate
Test 2
Change: Moving Step 5 above the quick checkout and renaming the step to “Add themepacks” and removing “Optional”
Hypothesis: This step isn’t overly clear; rather than adding extra individual channels, you are adding channel sets, or more commonly known as themepacks. Even though this step will still be optional in the backend, we are curious to see if this change will increase average order value.
There are a few more elements tied into Test 2 within the step itself, but I’ll save them for a future update when the results are in! Stay tuned!